<template>
  <div class="page-container dashboard">
    <h2 class="page-title">数据资产概览</h2>

    <el-row :gutter="16" class="stat-row">
      <el-col :xs="12" :sm="12" :md="6" :lg="6">
        <div class="stat-card card-shadow">
          <div class="stat-icon" style="background: #ecf5ff; color: #409eff;">
            <el-icon size="28"><DataLine /></el-icon>
          </div>
          <div class="stat-info">
            <div class="stat-value">{{ stats.dataSources }}</div>
            <div class="stat-label">数据源</div>
          </div>
        </div>
      </el-col>
      <el-col :xs="12" :sm="12" :md="6" :lg="6">
        <div class="stat-card card-shadow">
          <div class="stat-icon" style="background: #f0f9eb; color: #67c23a;">
            <el-icon size="28"><FolderOpened /></el-icon>
          </div>
          <div class="stat-info">
            <div class="stat-value">{{ stats.tables }}</div>
            <div class="stat-label">数据表</div>
          </div>
        </div>
      </el-col>
      <el-col :xs="12" :sm="12" :md="6" :lg="6">
        <div class="stat-card card-shadow">
          <div class="stat-icon" style="background: #fdf6ec; color: #e6a23c;">
            <el-icon size="28"><DocumentChecked /></el-icon>
          </div>
          <div class="stat-info">
            <div class="stat-value">{{ stats.labeled }}</div>
            <div class="stat-label">已打标字段</div>
          </div>
        </div>
      </el-col>
      <el-col :xs="12" :sm="12" :md="6" :lg="6">
        <div class="stat-card card-shadow">
          <div class="stat-icon" style="background: #fef0f0; color: #f56c6c;">
            <el-icon size="28"><Warning /></el-icon>
          </div>
          <div class="stat-info">
            <div class="stat-value">{{ stats.sensitive }}</div>
            <div class="stat-label">敏感数据(L4/L5)</div>
          </div>
        </div>
      </el-col>
    </el-row>

    <el-row :gutter="16" class="chart-row">
      <el-col :xs="24" :md="12">
        <div class="chart-card card-shadow">
          <div class="chart-title">数据分级分布</div>
          <v-chart class="chart" :option="levelOption" autoresize />
        </div>
      </el-col>
      <el-col :xs="24" :md="12">
        <div class="chart-card card-shadow">
          <div class="chart-title">数据分类TOP8</div>
          <v-chart class="chart" :option="categoryOption" autoresize />
        </div>
      </el-col>
    </el-row>

    <el-row :gutter="16" class="chart-row">
      <el-col :xs="24">
        <div class="chart-card card-shadow">
          <div class="chart-title">项目进度</div>
          <el-table :data="projectList" stripe size="default">
            <el-table-column prop="name" label="项目名称" min-width="180" />
            <el-table-column prop="status" label="状态" width="120">
              <template #default="{ row }">
                <el-tag :type="statusType(row.status)">{{ statusText(row.status) }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="progress" label="进度" width="200">
              <template #default="{ row }">
                <el-progress :percentage="row.progress" :status="row.progress === 100 ? 'success' : ''" />
              </template>
            </el-table-column>
            <el-table-column prop="planned_end" label="计划完成时间" width="160" />
          </el-table>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { PieChart, BarChart } from 'echarts/charts'
import { TooltipComponent, LegendComponent, GridComponent } from 'echarts/components'
import VChart from 'vue-echarts'

use([CanvasRenderer, PieChart, BarChart, TooltipComponent, LegendComponent, GridComponent])

const stats = reactive({
  dataSources: 12,
  tables: 3847,
  labeled: 152340,
  sensitive: 28931,
})

const levelOption = ref({
  tooltip: { trigger: 'item' },
  legend: { bottom: '0%', left: 'center' },
  color: ['#67c23a', '#409eff', '#e6a23c', '#f56c6c', '#909399'],
  series: [
    {
      type: 'pie',
      radius: ['40%', '70%'],
      avoidLabelOverlap: false,
      itemStyle: { borderRadius: 6, borderColor: '#fff', borderWidth: 2 },
      label: { show: false },
      data: [
        { value: 35000, name: 'L1 公开级' },
        { value: 62000, name: 'L2 内部级' },
        { value: 48000, name: 'L3 敏感级' },
        { value: 22000, name: 'L4 重要级' },
        { value: 6931, name: 'L5 核心级' },
      ],
    },
  ],
})

const categoryOption = ref({
  tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } },
  grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
  xAxis: { type: 'value' },
  yAxis: {
    type: 'category',
    data: ['车辆信息', '理赔数据', '渠道数据', '财务数据', '监管报送', '内部管理', '保单数据', '客户数据'],
  },
  series: [
    {
      type: 'bar',
      data: [8200, 15600, 4300, 12100, 2800, 5600, 22400, 36700],
      itemStyle: { borderRadius: [0, 4, 4, 0], color: '#409eff' },
    },
  ],
})

const projectList = ref([
  { name: '2024年数据分类分级专项', status: 'labeling', progress: 68, planned_end: '2024-08-30' },
  { name: '核心系统敏感数据梳理', status: 'reviewing', progress: 92, planned_end: '2024-07-15' },
  { name: '新核心上线数据定级', status: 'scanning', progress: 25, planned_end: '2024-09-20' },
])

function statusType(status: string) {
  const map: Record<string, any> = {
    created: 'info',
    scanning: 'warning',
    assigning: '',
    labeling: 'primary',
    reviewing: 'success',
    accepting: 'success',
    published: 'success',
  }
  return map[status] || 'info'
}

function statusText(status: string) {
  const map: Record<string, string> = {
    created: '已创建',
    scanning: '扫描中',
    assigning: '分配中',
    labeling: '打标中',
    reviewing: '审核中',
    accepting: '验收中',
    published: '已发布',
  }
  return map[status] || status
}
</script>

<style scoped lang="scss">
.dashboard {
  .page-title {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 20px;
    color: #303133;
  }
}

.stat-row {
  margin-bottom: 16px;
}

.stat-card {
  display: flex;
  align-items: center;
  padding: 20px;
  margin-bottom: 16px;

  .stat-icon {
    width: 56px;
    height: 56px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 16px;
    flex-shrink: 0;
  }

  .stat-info {
    .stat-value {
      font-size: 24px;
      font-weight: 700;
      color: #303133;
      line-height: 1.2;
    }
    .stat-label {
      font-size: 13px;
      color: #909399;
      margin-top: 4px;
    }
  }
}

.chart-row {
  margin-bottom: 16px;
}

.chart-card {
  padding: 20px;
  margin-bottom: 16px;

  .chart-title {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 16px;
    color: #303133;
  }

  .chart {
    width: 100%;
    height: 300px;
  }
}
</style>
