<template>
  <GiPageLayout>
      <!-- 统计卡片区域 -->
      <div class="statistics-section">
        <a-row :gutter="16">
          <a-col :span="6">
            <a-card class="stat-card">
              <a-statistic title="我的项目" :value="2" suffix="个" />
            </a-card>
          </a-col>
          <a-col :span="6">
            <a-card class="stat-card">
              <a-statistic title="进行中任务" :value="2" suffix="个" />
            </a-card>
          </a-col>
          <a-col :span="6">
            <a-card class="stat-card">
              <a-statistic title="待审核报告" :value="1" suffix="份" />
            </a-card>
          </a-col>
          <a-col :span="6">
            <a-card class="stat-card">
              <a-statistic title="发现缺陷" :value="8" suffix="处" />
            </a-card>
          </a-col>
        </a-row>
      </div>

      <!-- 选项卡区域 -->
      <div class="tabs-section">
        <a-tabs v-model:active-key="activeTab" type="line">
          <a-tab-pane key="progress" tab="项目进度" title="项目进度">
            <div class="progress-content">
              <!-- 图表区域 -->
              <a-card class="chart-card" :bordered="false">
                <div class="chart-header">
                  <div class="chart-legend">
                    <span class="legend-item">
                      <span class="legend-dot completed"></span>
                      <span class="legend-text">已完成</span>
                    </span>
                    <span class="legend-item">
                      <span class="legend-dot in-progress"></span>
                      <span class="legend-text">进行中</span>
                    </span>
                    <span class="legend-item">
                      <span class="legend-dot not-started"></span>
                      <span class="legend-text">未开始</span>
                    </span>
                  </div>
                </div>
                
                <div class="chart-container">
                  <a-spin :loading="chartLoading">
                    <Chart v-if="!chartLoading" :option="barChartOption" style="height: 300px" />
                  </a-spin>
                </div>
              </a-card>

              <!-- 我的项目表格 -->
              <a-card class="table-card" :bordered="false">
                <template #title>
                  <span class="table-title">我的项目</span>
                </template>
                
                <a-table 
                  :columns="projectColumns"
                  :data="projectData"
                  :pagination="false"
                  :scroll="{ x: '100%' }"
                >
                  <!-- 状态列 -->
                  <template #status="{ record }">
                    <a-tag :color="getStatusColor(record.status)">
                      {{ record.status }}
                    </a-tag>
                  </template>

                  <!-- 进度列 -->
                  <template #progress="{ record }">
                    <div class="progress-container">
                      <a-progress
                        :percent="record.progress"
                        :color="getProgressColor(record.progress)"
                        size="small"
                        :show-text="false"
                      />
                      <span class="progress-text">{{ record.progress }}%</span>
                    </div>
                  </template>

                  <!-- 操作列 -->
                  <template #action="{ record }">
                    <a-space>
                      <a-button size="small" @click="viewProject(record)">查看</a-button>
                      <a-button type="primary" size="small" @click="enterProject(record)">进入</a-button>
                    </a-space>
                  </template>
                </a-table>
              </a-card>
            </div>
          </a-tab-pane>
          
          <a-tab-pane key="tasks" tab="施工任务" title="施工任务">
            <div class="tasks-content">
              <a-empty description="施工任务功能开发中..." />
            </div>
          </a-tab-pane>
          
          <a-tab-pane key="notifications" tab="消息通知" title="消息通知">
            <div class="notifications-content">
              <a-empty description="消息通知功能开发中..." />
            </div>
          </a-tab-pane>
        </a-tabs>
      </div>
  </GiPageLayout>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { Message } from '@arco-design/web-vue'
import type { TableColumnData } from '@arco-design/web-vue'
import { useChart } from '@/hooks'

// 活动选项卡
const activeTab = ref('progress')

// 图表加载状态
const chartLoading = ref(false)

// 项目数据
const projectData = ref([
  {
    id: 1,
    name: 'A风场2023年检查',
    turbineCount: 15,
    startDate: '2023-10-01',
    endDate: '2023-12-31',
    status: '进行中',
    progress: 65
  },
  {
    id: 2,
    name: 'B风场维修项目',
    turbineCount: 8,
    startDate: '2023-09-15',
    endDate: '2023-11-30',
    status: '进行中',
    progress: 45
  }
])

// 项目表格列配置
const projectColumns: TableColumnData[] = [
  { title: '项目名称', dataIndex: 'name', width: 200 },
  { title: '机组数量', dataIndex: 'turbineCount', width: 100 },
  { title: '开始日期', dataIndex: 'startDate', width: 120 },
  { title: '结束日期', dataIndex: 'endDate', width: 120 },
  { title: '状态', dataIndex: 'status', slotName: 'status', width: 100 },
  { title: '进度', dataIndex: 'progress', slotName: 'progress', width: 150 },
  { title: '操作', slotName: 'action', width: 150, fixed: 'right' }
]

// 图表数据
const chartData = [
  {
    name: 'D风场',
    notStarted: 400,
    inProgress: 0,
    completed: 0
  },
  {
    name: 'C风场',
    notStarted: 0,
    inProgress: 0,
    completed: 200
  },
  {
    name: 'B风场',
    notStarted: 0,
    inProgress: 180,
    completed: 120
  },
  {
    name: 'A风场',
    notStarted: 0,
    inProgress: 80,
    completed: 320
  }
]

// 使用图表hook
const { chartOption: barChartOption } = useChart(() => {
  return {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    legend: {
      show: false
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'value',
      max: 400,
      axisLabel: {
        formatter: '{value}'
      }
    },
    yAxis: {
      type: 'category',
      data: chartData.map(item => item.name),
      axisLabel: {
        fontSize: 12
      }
    },
    series: [
      {
        name: '已完成',
        type: 'bar',
        stack: 'total',
        itemStyle: {
          color: '#52c41a'
        },
        data: chartData.map(item => item.completed),
        label: {
          show: true,
          position: 'inside',
          formatter: (params: any) => {
            return params.value > 0 ? params.value : ''
          }
        }
      },
      {
        name: '进行中',
        type: 'bar',
        stack: 'total',
        itemStyle: {
          color: '#1890ff'
        },
        data: chartData.map(item => item.inProgress),
        label: {
          show: true,
          position: 'inside',
          formatter: (params: any) => {
            return params.value > 0 ? params.value : ''
          }
        }
      },
      {
        name: '未开始',
        type: 'bar',
        stack: 'total',
        itemStyle: {
          color: '#8c8c8c'
        },
        data: chartData.map(item => item.notStarted),
        label: {
          show: true,
          position: 'inside',
          formatter: (params: any) => {
            return params.value > 0 ? params.value : ''
          }
        }
      }
    ]
  }
})

// 获取状态颜色
const getStatusColor = (status: string) => {
  const colorMap: Record<string, string> = {
    '进行中': 'blue',
    '已完成': 'green',
    '未开始': 'gray',
    '已暂停': 'orange'
  }
  return colorMap[status] || 'gray'
}

// 获取进度颜色
const getProgressColor = (progress: number) => {
  if (progress >= 80) return '#52c41a'
  if (progress >= 60) return '#1890ff'
  if (progress >= 40) return '#faad14'
  return '#ff4d4f'
}

// 操作方法
const viewProject = (record: any) => {
  Message.info(`查看项目: ${record.name}`)
}

const enterProject = (record: any) => {
  Message.info(`进入项目: ${record.name}`)
}

// 加载图表数据
const loadChartData = async () => {
  chartLoading.value = true
  setTimeout(() => {
    chartLoading.value = false
  }, 1000)
}

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

<style scoped lang="less">
.project-progress-container {
  padding: 16px;
  background: #f5f5f5;
  min-height: 100vh;
}

.statistics-section {
  margin-bottom: 16px;
}

.stat-card {
  text-align: center;
  
  :deep(.arco-statistic-title) {
    color: #8c8c8c;
    font-size: 14px;
    margin-bottom: 8px;
  }
  
  :deep(.arco-statistic-value) {
    color: #262626;
    font-size: 24px;
    font-weight: 500;
  }
}

.tabs-section {
  background: #fff;
  border-radius: 8px;
  padding: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.progress-content {
  margin-top: 16px;
}

.chart-card {
  margin-bottom: 16px;
  border-radius: 8px;
  
  .chart-header {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 16px;
  }
  
  .chart-legend {
    display: flex;
    gap: 24px;
    
    .legend-item {
      display: flex;
      align-items: center;
      gap: 8px;
      
      .legend-dot {
        width: 12px;
        height: 12px;
        border-radius: 2px;
        
        &.completed {
          background-color: #52c41a;
        }
        
        &.in-progress {
          background-color: #1890ff;
        }
        
        &.not-started {
          background-color: #8c8c8c;
        }
      }
      
      .legend-text {
        font-size: 14px;
        color: #595959;
      }
    }
  }
  
  .chart-container {
    height: 300px;
  }
}

.table-card {
  border-radius: 8px;
  
  .table-title {
    font-size: 16px;
    font-weight: 500;
    color: #262626;
  }
}

.progress-container {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  
  .progress-text {
    font-size: 12px;
    color: #8c8c8c;
    min-width: 35px;
  }
}

.tasks-content,
.notifications-content {
  padding: 40px;
  text-align: center;
}

:deep(.arco-card) {
  border: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

:deep(.arco-card-body) {
  padding: 20px;
}

:deep(.arco-tabs-nav) {
  margin-bottom: 0;
}

:deep(.arco-tabs-tab) {
  font-size: 14px;
  padding: 8px 16px;
}

:deep(.arco-table-th) {
  background-color: #fafafa;
  color: #8c8c8c;
  font-weight: 500;
}

:deep(.arco-table-td) {
  padding: 12px 16px;
}

:deep(.arco-progress-line) {
  flex: 1;
}

:deep(.arco-tag) {
  border-radius: 4px;
  font-size: 12px;
}

:deep(.arco-btn-size-small) {
  padding: 2px 8px;
  font-size: 12px;
}
</style> 