<template>
  <div class="project-table-container">
    <a-table
      :data="data"
      :columns="columns"
      :loading="loading"
      :pagination="false"
      :scroll="{ x: '100%', y: '100%' }"
      row-key="id"
      :stripe="false"
      size="large"
    >
      <!-- 项目名称 -->
      <template #projectName="{ record }">
        <div class="project-name">
          <span class="name-text">{{ record.projectName }}</span>
        </div>
      </template>

      <!-- 机组数量 -->
      <template #unitCount="{ record }">
        <span class="unit-count">{{ record.unitCount }}</span>
      </template>

      <!-- 开始日期 -->
      <template #startDate="{ record }">
        <span class="date-text">{{ record.startDate }}</span>
      </template>

      <!-- 结束日期 -->
      <template #endDate="{ record }">
        <span class="date-text">{{ record.endDate }}</span>
      </template>

      <!-- 状态 -->
      <template #status="{ record }">
        <a-tag :color="getStatusColor(record.status)">
          {{ getStatusText(record.status) }}
        </a-tag>
      </template>

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

      <!-- 操作 -->
      <template #action="{ record }">
        <div class="action-buttons">
          <a-button size="small" @click="handleView(record)">
            查看
          </a-button>
          <a-button 
            type="primary" 
            size="small" 
            @click="handleEnter(record)"
          >
            进入
          </a-button>
        </div>
      </template>
    </a-table>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import type { TableColumnData } from '@arco-design/web-vue'
import type { ProjectData } from '../types'

interface Props {
  data: ProjectData[]
  loading?: boolean
}

interface Emits {
  (e: 'view', project: ProjectData): void
  (e: 'enter', project: ProjectData): void
}

const props = withDefaults(defineProps<Props>(), {
  loading: false
})

const emit = defineEmits<Emits>()

// 表格列配置
const columns: TableColumnData[] = [
  {
    title: '项目名称',
    dataIndex: 'projectName',
    slotName: 'projectName',
    width: 300,
    ellipsis: true,
    tooltip: true
  },
  {
    title: '机组数量',
    dataIndex: 'unitCount',
    slotName: 'unitCount',
    width: 120,
    align: 'center'
  },
  {
    title: '开始日期',
    dataIndex: 'startDate',
    slotName: 'startDate',
    width: 150,
    align: 'center'
  },
  {
    title: '结束日期',
    dataIndex: 'endDate',
    slotName: 'endDate',
    width: 150,
    align: 'center'
  },
  {
    title: '状态',
    dataIndex: 'status',
    slotName: 'status',
    width: 120,
    align: 'center'
  },
  {
    title: '进度',
    dataIndex: 'progress',
    slotName: 'progress',
    width: 200,
    align: 'center'
  },
  {
    title: '操作',
    dataIndex: 'action',
    slotName: 'action',
    width: 150,
    align: 'center',
    fixed: 'right'
  }
]

// 获取状态颜色
const getStatusColor = (status: string) => {
  const colorMap: Record<string, string> = {
    'not_started': 'gray',
    'in_progress': 'blue',
    'completed': 'green',
    'paused': 'orange',
    'cancelled': 'red'
  }
  return colorMap[status] || 'gray'
}

// 获取状态文本
const getStatusText = (status: string) => {
  const textMap: Record<string, string> = {
    'not_started': '未开始',
    'in_progress': '进行中',
    'completed': '已完成',
    'paused': '已暂停',
    'cancelled': '已取消'
  }
  return textMap[status] || status
}

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

// 事件处理
const handleView = (record: ProjectData) => {
  emit('view', record)
}

const handleEnter = (record: ProjectData) => {
  emit('enter', record)
}
</script>

<style scoped lang="less">
.project-table-container {
  height: 100%;
  background: #fff;
  border-radius: 8px;
}

.project-name {
  .name-text {
    font-weight: 500;
    color: #333;
  }
}

.unit-count {
  font-weight: 600;
  color: #1890ff;
}

.date-text {
  color: #666;
  font-size: 13px;
}

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

.action-buttons {
  display: flex;
  gap: 8px;
  justify-content: center;
}

:deep(.arco-table) {
  .arco-table-thead {
    .arco-table-th {
      background-color: #fafafa;
      font-weight: 600;
      color: #333;
      border-bottom: 1px solid #e8e8e8;
    }
  }
  
  .arco-table-tbody {
    .arco-table-tr {
      &:hover {
        background-color: #f5f5f5;
      }
    }
    
    .arco-table-td {
      border-bottom: 1px solid #f0f0f0;
      padding: 16px 12px;
    }
  }
}

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

:deep(.arco-progress-line-outer) {
  border-radius: 4px;
}

:deep(.arco-progress-line-inner) {
  border-radius: 4px;
  transition: all 0.3s ease;
}

// 状态标签样式
:deep(.arco-tag-gray) {
  background-color: #f5f5f5;
  border-color: #d9d9d9;
  color: #666;
}

:deep(.arco-tag-blue) {
  background-color: #e6f7ff;
  border-color: #91d5ff;
  color: #1890ff;
}

:deep(.arco-tag-green) {
  background-color: #f6ffed;
  border-color: #b7eb8f;
  color: #52c41a;
}

:deep(.arco-tag-orange) {
  background-color: #fff7e6;
  border-color: #ffd591;
  color: #fa8c16;
}

:deep(.arco-tag-red) {
  background-color: #fff1f0;
  border-color: #ffccc7;
  color: #ff4d4f;
}

// 响应式处理
@media (max-width: 768px) {
  :deep(.arco-table-td) {
    padding: 12px 8px;
    font-size: 14px;
  }
  
  .action-buttons {
    flex-direction: column;
    gap: 4px;
  }
  
  .progress-container {
    gap: 8px;
    
    .progress-text {
      font-size: 11px;
    }
  }
}
</style> 