<template>
  <GiPageLayout>
    <div class="data-quality-assessment-container">
      <!-- 页面标题 -->
      <div class="page-header">
        <h2 class="page-title">A风场2023年检测 - 数据质量评估</h2>
        <a-button type="primary" @click="handleGenerateReport">
          <template #icon><icon-file /></template>
          生成质量报告
        </a-button>
      </div>

      <!-- 质量评估雷达图 -->
      <a-card class="radar-card" :bordered="false">
        <template #title>
          <div class="card-title">
            <icon-bar-chart />
            数据质量评估雷达图
          </div>
        </template>
        
        <div class="radar-container">
          <div class="radar-chart" id="radarChart"></div>
        </div>
      </a-card>

      <!-- 质量评估指标 -->
      <a-card class="metrics-card" :bordered="false">
        <template #title>
          <div class="card-title">
            <icon-dashboard />
            质量评估指标
          </div>
        </template>
        
        <div class="metrics-grid">
          <div class="metric-item" v-for="metric in qualityMetrics" :key="metric.key">
            <div class="metric-header">
              <span class="metric-name">{{ metric.name }}</span>
              <span class="metric-score">{{ metric.score }}</span>
            </div>
            <div class="metric-progress">
              <a-progress 
                :percent="metric.percentage" 
                :color="getMetricColor(metric.percentage)"
                :show-text="false"
              />
            </div>
            <div class="metric-description">{{ metric.description }}</div>
          </div>
        </div>
      </a-card>

      <!-- 改进建议 -->
      <a-card class="suggestions-card" :bordered="false">
        <template #title>
          <div class="card-title">
            <icon-bulb />
            改进建议
          </div>
        </template>
        
        <div class="suggestions-content">
          <div class="suggestion-item" v-for="(suggestion, index) in suggestions" :key="index">
            <div class="suggestion-header">
              <span class="suggestion-number">{{ index + 1 }}</span>
              <span class="suggestion-text">{{ suggestion.text }}</span>
            </div>
            <div class="suggestion-details">
              <div class="suggestion-actions">
                <a-button size="small" @click="handlePrint">打印</a-button>
                <a-button size="small" @click="handleExportSuggestions">导出建议</a-button>
              </div>
            </div>
          </div>
        </div>
      </a-card>
    </div>
  </GiPageLayout>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, nextTick } from 'vue'
import { Message } from '@arco-design/web-vue'
import { 
  IconFile, 
  IconBarChart, 
  IconDashboard, 
  IconBulb 
} from '@arco-design/web-vue/es/icon'

defineOptions({ name: 'DataQualityAssessment' })

// 质量评估指标数据
const qualityMetrics = ref([
  {
    key: 'completeness',
    name: '数据完整性',
    score: '✓',
    percentage: 100,
    description: '所有必要的缺陷数据已收集完整'
  },
  {
    key: 'accuracy',
    name: '数据准确性',
    score: '✓',
    percentage: 100,
    description: '数据与实际情况完全一致'
  },
  {
    key: 'consistency',
    name: '数据一致性',
    score: '85%',
    percentage: 85,
    description: '各数据源之间有85%的一致性'
  },
  {
    key: 'validity',
    name: '数据及时性',
    score: '80%',
    percentage: 80,
    description: '数据录入存在轻微延迟'
  },
  {
    key: 'usability',
    name: '数据可用性',
    score: '✓',
    percentage: 100,
    description: '数据可直接用于分析处理'
  }
])

// 改进建议数据
const suggestions = ref([
  {
    text: '加强数据采集的及时性，尽量在巡检完成后24小时内完成数据录入'
  },
  {
    text: '对检查人员进行数据一致性培训，减少不同巡检员的数据差异'
  },
  {
    text: '建立数据质量检查制度，在数据录入前进行自动校验'
  }
])

// 获取指标颜色
const getMetricColor = (percentage: number) => {
  if (percentage >= 90) return '#52c41a'
  if (percentage >= 70) return '#faad14'
  return '#f5222d'
}

// 生成报告
const handleGenerateReport = () => {
  Message.success('质量报告生成成功')
}

// 打印
const handlePrint = () => {
  window.print()
}

// 导出建议
const handleExportSuggestions = () => {
  Message.success('建议导出成功')
}

// 初始化雷达图
const initRadarChart = () => {
  nextTick(() => {
    const chartContainer = document.getElementById('radarChart')
    if (!chartContainer) return

    // 简单的雷达图SVG实现
    const svgWidth = 400
    const svgHeight = 300
    const centerX = svgWidth / 2
    const centerY = svgHeight / 2
    const radius = 100

    const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg')
    svg.setAttribute('width', svgWidth.toString())
    svg.setAttribute('height', svgHeight.toString())
    svg.setAttribute('viewBox', `0 0 ${svgWidth} ${svgHeight}`)

    // 绘制网格
    for (let i = 1; i <= 5; i++) {
      const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle')
      circle.setAttribute('cx', centerX.toString())
      circle.setAttribute('cy', centerY.toString())
      circle.setAttribute('r', (radius * i / 5).toString())
      circle.setAttribute('fill', 'none')
      circle.setAttribute('stroke', '#e8e8e8')
      circle.setAttribute('stroke-width', '1')
      svg.appendChild(circle)
    }

    // 绘制坐标轴
    const metrics = ['数据完整性', '数据准确性', '数据一致性', '数据及时性', '数据可用性']
    const values = [100, 100, 85, 80, 100]
    
    metrics.forEach((metric, index) => {
      const angle = (index * 72 - 90) * Math.PI / 180
      const x = centerX + Math.cos(angle) * radius
      const y = centerY + Math.sin(angle) * radius
      
      // 绘制轴线
      const line = document.createElementNS('http://www.w3.org/2000/svg', 'line')
      line.setAttribute('x1', centerX.toString())
      line.setAttribute('y1', centerY.toString())
      line.setAttribute('x2', x.toString())
      line.setAttribute('y2', y.toString())
      line.setAttribute('stroke', '#d9d9d9')
      line.setAttribute('stroke-width', '1')
      svg.appendChild(line)
      
      // 绘制标签
      const text = document.createElementNS('http://www.w3.org/2000/svg', 'text')
      const labelX = centerX + Math.cos(angle) * (radius + 20)
      const labelY = centerY + Math.sin(angle) * (radius + 20)
      text.setAttribute('x', labelX.toString())
      text.setAttribute('y', labelY.toString())
      text.setAttribute('text-anchor', 'middle')
      text.setAttribute('font-size', '12')
      text.setAttribute('fill', '#666')
      text.textContent = metric
      svg.appendChild(text)
    })

    // 绘制数据多边形
    const points = values.map((value, index) => {
      const angle = (index * 72 - 90) * Math.PI / 180
      const r = (value / 100) * radius
      const x = centerX + Math.cos(angle) * r
      const y = centerY + Math.sin(angle) * r
      return `${x},${y}`
    }).join(' ')

    const polygon = document.createElementNS('http://www.w3.org/2000/svg', 'polygon')
    polygon.setAttribute('points', points)
    polygon.setAttribute('fill', 'rgba(24, 144, 255, 0.2)')
    polygon.setAttribute('stroke', '#1890ff')
    polygon.setAttribute('stroke-width', '2')
    svg.appendChild(polygon)

    // 绘制数据点
    values.forEach((value, index) => {
      const angle = (index * 72 - 90) * Math.PI / 180
      const r = (value / 100) * radius
      const x = centerX + Math.cos(angle) * r
      const y = centerY + Math.sin(angle) * r
      
      const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle')
      circle.setAttribute('cx', x.toString())
      circle.setAttribute('cy', y.toString())
      circle.setAttribute('r', '4')
      circle.setAttribute('fill', '#1890ff')
      svg.appendChild(circle)
    })

    chartContainer.appendChild(svg)
  })
}

onMounted(() => {
  initRadarChart()
})
</script>

<style scoped lang="scss">
.data-quality-assessment-container {
  padding: 20px;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.page-title {
  font-size: 24px;
  font-weight: 600;
  margin: 0;
  color: #1d2129;
}

.card-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 600;
}

.radar-card {
  margin-bottom: 20px;
}

.radar-container {
  display: flex;
  justify-content: center;
  padding: 20px;
}

.radar-chart {
  width: 100%;
  max-width: 400px;
  height: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.metrics-card {
  margin-bottom: 20px;
}

.metrics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
  padding: 20px 0;
}

.metric-item {
  padding: 20px;
  border: 1px solid #e8e8e8;
  border-radius: 8px;
  background: #fafafa;
}

.metric-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.metric-name {
  font-size: 14px;
  font-weight: 600;
  color: #1d2129;
}

.metric-score {
  font-size: 14px;
  font-weight: 600;
  color: #1890ff;
}

.metric-progress {
  margin-bottom: 8px;
}

.metric-description {
  font-size: 12px;
  color: #666;
  line-height: 1.5;
}

.suggestions-card {
  margin-bottom: 20px;
}

.suggestions-content {
  padding: 20px 0;
}

.suggestion-item {
  margin-bottom: 16px;
  padding: 16px;
  background: #f7f8fa;
  border-radius: 8px;
  
  &:last-child {
    margin-bottom: 0;
  }
}

.suggestion-header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 12px;
}

.suggestion-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  background: #1890ff;
  color: white;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 600;
  flex-shrink: 0;
}

.suggestion-text {
  font-size: 14px;
  line-height: 1.5;
  color: #1d2129;
}

.suggestion-details {
  display: flex;
  justify-content: flex-end;
}

.suggestion-actions {
  display: flex;
  gap: 8px;
}
</style> 