<template>
  <GiPageLayout>
    <GiTable
      row-key="id"
      :data="dataList"
      :columns="columns"
      :loading="loading"
      :scroll="{ x: '100%', y: '100%' }"
      :pagination="pagination"
      :stripe="false"
      @refresh="fetchData"
    >
      <!-- 顶部操作 -->
      <template #top>
        <div class="header-actions">
          <a-button type="primary" @click="handleGenerate">
            <template #icon>
              <GiSvgIcon name="plus" />
            </template>
            生成新报告
          </a-button>
          <a-button @click="handleRefresh">
            <template #icon>
              <GiSvgIcon name="refresh" />
            </template>
            刷新列表
          </a-button>
          <a-button @click="handleExportAll">
            <template #icon>
              <GiSvgIcon name="download" />
            </template>
            导出全部
          </a-button>
        </div>
      </template>

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

      <!-- 操作列 -->
      <template #action="{ record }">
        <div class="action-buttons">
          <a-button type="text" size="small" @click="handleView(record)">
            <template #icon>
              <GiSvgIcon name="eye" />
            </template>
            查看
          </a-button>
          <a-button 
            type="text" 
            size="small" 
            @click="handleEdit(record)"
            :disabled="record.status === '已发布'"
          >
            <template #icon>
              <GiSvgIcon name="edit" />
            </template>
            编辑
          </a-button>
          <a-button 
            type="text" 
            size="small" 
            @click="handlePublish(record)"
            :disabled="record.status === '已发布'"
            v-if="record.status === '待审核'"
          >
            <template #icon>
              <GiSvgIcon name="check" />
            </template>
            发布
          </a-button>
          <a-button 
            type="text" 
            size="small" 
            status="danger" 
            @click="handleDelete(record)"
            :disabled="record.status === '已发布'"
          >
            <template #icon>
              <GiSvgIcon name="delete" />
            </template>
            删除
          </a-button>
        </div>
      </template>
    </GiTable>
  </GiPageLayout>
</template>

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

defineOptions({ name: 'ReportGeneration' })

// 定义报告状态类型
type ReportStatus = '已发布' | '待审核' | '草稿'

// 定义报告数据类型
interface ReportData {
  id: number
  reportName: string
  projectName: string
  unitNumber: string
  generateDate: string
  status: ReportStatus
}

// 表格数据
const dataList = ref<ReportData[]>([
  {
    id: 1,
    reportName: 'A风场1号机组检查报告',
    projectName: 'A风场2023年检查',
    unitNumber: 'A-001',
    generateDate: '2023-11-05',
    status: '已发布'
  },
  {
    id: 2,
    reportName: 'A风场2号机组检查报告',
    projectName: 'A风场2023年检查',
    unitNumber: 'A-002',
    generateDate: '2023-11-06',
    status: '待审核'
  },
  {
    id: 3,
    reportName: 'B风场1号机组检查报告',
    projectName: 'B风场维修项目',
    unitNumber: 'B-001',
    generateDate: '2023-10-28',
    status: '已发布'
  }
])

const loading = ref(false)

// 分页配置
const pagination = reactive({
  current: 1,
  pageSize: 10,
  total: 0,
  showTotal: true,
  showPageSize: true
})

// 表格列配置
const columns: TableColumnData[] = [
  {
    title: '报告名称',
    dataIndex: 'reportName',
    width: 250,
    ellipsis: true,
    tooltip: true
  },
  {
    title: '所属项目',
    dataIndex: 'projectName',
    width: 200,
    ellipsis: true,
    tooltip: true
  },
  {
    title: '机组编号',
    dataIndex: 'unitNumber',
    width: 120,
    align: 'center'
  },
  {
    title: '生成日期',
    dataIndex: 'generateDate',
    width: 120,
    align: 'center'
  },
  {
    title: '状态',
    dataIndex: 'status',
    slotName: 'status',
    width: 100,
    align: 'center'
  },
  {
    title: '操作',
    slotName: 'action',
    width: 300,
    align: 'center',
    fixed: 'right'
  }
]

// 获取状态颜色
const getStatusColor = (status: ReportStatus) => {
  switch (status) {
    case '已发布':
      return 'green'
    case '待审核':
      return 'gold'
    case '草稿':
      return 'gray'
    default:
      return 'blue'
  }
}

// 获取状态样式类
const getStatusClass = (status: ReportStatus) => {
  return `status-${status}`
}

// 获取数据
const fetchData = async () => {
  loading.value = true
  try {
    // 模拟API请求
    await new Promise(resolve => setTimeout(resolve, 500))
    pagination.total = dataList.value.length
  } catch (error) {
    Message.error('获取数据失败')
  } finally {
    loading.value = false
  }
}

// 生成新报告
const handleGenerate = () => {
  Message.info('打开报告生成向导')
}

// 刷新列表
const handleRefresh = () => {
  fetchData()
}

// 导出全部
const handleExportAll = () => {
  Message.info('正在导出所有报告...')
}

// 查看报告
const handleView = (record: ReportData) => {
  Message.info(`查看报告: ${record.reportName}`)
}

// 编辑报告
const handleEdit = (record: ReportData) => {
  Message.info(`编辑报告: ${record.reportName}`)
}

// 发布报告
const handlePublish = (record: ReportData) => {
  Message.success(`报告 ${record.reportName} 已发布`)
  record.status = '已发布'
}

// 删除报告
const handleDelete = (record: ReportData) => {
  Message.warning(`确定要删除报告 ${record.reportName} 吗？`)
}

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

<style scoped lang="less">
.header-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.action-buttons {
  display: flex;
  gap: 4px;
  align-items: center;
  justify-content: center;
}

:deep(.arco-table-cell) {
  padding: 8px 16px;
}

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

.status-已发布 {
  background-color: #f6ffed;
  border-color: #b7eb8f;
  color: #389e0d;
}

.status-待审核 {
  background-color: #fffbe6;
  border-color: #ffe58f;
  color: #d48806;
}

.status-草稿 {
  background-color: #fafafa;
  border-color: #d9d9d9;
  color: #595959;
}
</style>
