<template>
    <div class="app-container">
      <a-card class="general-card" title="企业数据概览" :bordered="false">
        <a-row :gutter="16">
          <a-col :span="6">
            <a-card class="stat-card">
              <a-statistic
                title="项目总数"
                :value="statistics.projectCount"
                :precision="0"
                style="margin-right: 50px"
              >
                <template #prefix>
                  <icon-file />
                </template>
              </a-statistic>
            </a-card>
          </a-col>
          <a-col :span="6">
            <a-card class="stat-card">
              <a-statistic
                title="成员总数"
                :value="statistics.memberCount"
                :precision="0"
              >
                <template #prefix>
                  <icon-user-group />
                </template>
              </a-statistic>
            </a-card>
          </a-col>
          <a-col :span="6">
            <a-card class="stat-card">
              <a-statistic
                title="设备总数"
                :value="statistics.deviceCount"
                :precision="0"
              >
                <template #prefix>
                  <icon-computer />
                </template>
              </a-statistic>
            </a-card>
          </a-col>
          <a-col :span="6">
            <a-card class="stat-card">
              <a-statistic
                title="本月完成项目"
                :value="statistics.completedProjectCount"
                :precision="0"
              >
                <template #prefix>
                  <icon-check-circle />
                </template>
              </a-statistic>
            </a-card>
          </a-col>
        </a-row>
  
        <a-divider />
  
        <a-row :gutter="16">
          <a-col :span="12">
            <a-card title="项目进度统计" :bordered="false">
              <div ref="projectProgressChart" style="height: 300px"></div>
            </a-card>
          </a-col>
          <a-col :span="12">
            <a-card title="资源使用情况" :bordered="false">
              <div ref="resourceUsageChart" style="height: 300px"></div>
            </a-card>
          </a-col>
        </a-row>
  
        <a-divider />
  
        <a-row :gutter="16">
          <a-col :span="24">
            <a-card title="近6个月业务趋势" :bordered="false">
              <div ref="businessTrendChart" style="height: 300px"></div>
            </a-card>
          </a-col>
        </a-row>
      </a-card>
    </div>
  </template>
  
  <script lang="ts" setup>
  import { ref, onMounted, reactive, nextTick } from 'vue'
  import { Statistic } from '@arco-design/web-vue'
  import { IconFile, IconUserGroup, IconComputer, IconCheckCircle } from '@arco-design/web-vue/es/icon'
  import * as echarts from 'echarts'
  
  const projectProgressChart = ref(null)
  const resourceUsageChart = ref(null)
  const businessTrendChart = ref(null)
  
  const statistics = reactive({
    projectCount: 128,
    memberCount: 356,
    deviceCount: 243,
    completedProjectCount: 15
  })
  
  onMounted(() => {
    // 使用 nextTick 确保 DOM 已完全渲染
    nextTick(() => {
      // 初始化项目进度统计图表
      if (projectProgressChart.value) {
        const projectChart = echarts.init(projectProgressChart.value)
        projectChart.setOption({
          tooltip: {
            trigger: 'item'
          },
          legend: {
            orient: 'vertical',
            left: 'left'
          },
          series: [
            {
              name: '项目状态',
              type: 'pie',
              radius: '70%',
              data: [
                { value: 48, name: '进行中' },
                { value: 65, name: '已完成' },
                { value: 12, name: '已暂停' },
                { value: 3, name: '已取消' }
              ],
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ]
        })
      }
    
      // 初始化资源使用情况图表
      if (resourceUsageChart.value) {
        const resourceChart = echarts.init(resourceUsageChart.value)
        resourceChart.setOption({
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          legend: {},
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: {
            type: 'value'
          },
          yAxis: {
            type: 'category',
            data: ['服务器', '存储空间', '带宽', '设备使用率', '人力资源']
          },
          series: [
            {
              name: '已使用',
              type: 'bar',
              stack: 'total',
              label: {
                show: true
              },
              emphasis: {
                focus: 'series'
              },
              data: [65, 72, 58, 80, 75]
            },
            {
              name: '剩余',
              type: 'bar',
              stack: 'total',
              label: {
                show: true
              },
              emphasis: {
                focus: 'series'
              },
              data: [35, 28, 42, 20, 25]
            }
          ]
        })
      }
    
      // 初始化业务趋势图表
      if (businessTrendChart.value) {
        const businessChart = echarts.init(businessTrendChart.value)
        businessChart.setOption({
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            data: ['项目数量', '营业收入', '新增客户']
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['1月', '2月', '3月', '4月', '5月', '6月']
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              name: '项目数量',
              type: 'line',
              data: [10, 12, 15, 18, 22, 24]
            },
            {
              name: '营业收入',
              type: 'line',
              data: [120, 132, 145, 160, 178, 190]
            },
            {
              name: '新增客户',
              type: 'line',
              data: [5, 7, 8, 10, 12, 15]
            }
          ]
        })
      }
    
      // 监听窗口大小变化，调整图表大小
      window.addEventListener('resize', () => {
        if (projectProgressChart.value) {
          const projectChart = echarts.getInstanceByDom(projectProgressChart.value)
          projectChart?.resize()
        }
        if (resourceUsageChart.value) {
          const resourceChart = echarts.getInstanceByDom(resourceUsageChart.value)
          resourceChart?.resize()
        }
        if (businessTrendChart.value) {
          const businessChart = echarts.getInstanceByDom(businessTrendChart.value)
          businessChart?.resize()
        }
      })
    })
  })
  </script>
  
  <style scoped>
  .general-card {
    margin-bottom: 20px;
  }
  
  .stat-card {
    margin-bottom: 20px;
    text-align: center;
  }
  </style>