<template>
  <GiPageLayout>
    <GiTable
      row-key="id"
      title="叶片内部检测"
      :data="dataList"
      :columns="tableColumns"
      :loading="loading"
      :scroll="{ x: '100%', y: '100%', minWidth: 1500 }"
      :pagination="pagination"
      @page-change="onPageChange"
      @page-size-change="onPageSizeChange"
      @refresh="search"
    >
      <template #top>
        <GiForm 
          v-model="searchForm" 
          search 
          :columns="queryFormColumns" 
          size="medium" 
          @search="search" 
          @reset="reset"
        />
      </template>
      
      <template #toolbar-left>
        <a-space>
          <a-button type="primary" @click="openAddModal">
            <template #icon><icon-plus /></template>
            <template #default>新建检测任务</template>
          </a-button>
          <a-button @click="batchImport">
            <template #icon><icon-upload /></template>
            <template #default>批量导入</template>
          </a-button>
        </a-space>
      </template>
      
      <!-- 检测状态 -->
      <template #status="{ record }">
        <a-tag :color="getStatusColor(record.status)">
          {{ getStatusText(record.status) }}
        </a-tag>
      </template>
      
      <!-- 缺陷等级 -->
      <template #defectLevel="{ record }">
        <a-tag :color="getDefectColor(record.defectLevel)" v-if="record.defectLevel">
          {{ record.defectLevel }}
        </a-tag>
        <span v-else>-</span>
      </template>
      
      <!-- 操作列 -->
      <template #action="{ record }">
        <a-space>
          <a-link @click="viewDetail(record)">详情</a-link>
          <a-link @click="viewImages(record)">检测图片</a-link>
          <a-link @click="generateReport(record)">生成报告</a-link>
        </a-space>
      </template>
    </GiTable>
  </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'

// 搜索表单
const searchForm = reactive({
  projectName: '',
  turbineCode: '',
  bladePosition: '',
  status: '',
  page: 1,
  size: 10
})

// 查询条件配置
const queryFormColumns = [
  {
    field: 'projectName',
    label: '项目名称',
    type: 'input' as const,
    props: {
      placeholder: '请输入项目名称'
    }
  },
  {
    field: 'turbineCode',
    label: '风机编号',
    type: 'input' as const,
    props: {
      placeholder: '请输入风机编号'
    }
  },
  {
    field: 'bladePosition',
    label: '叶片位置',
    type: 'select' as const,
    props: {
      placeholder: '请选择叶片位置',
      options: [
        { label: 'A叶片', value: 'A' },
        { label: 'B叶片', value: 'B' },
        { label: 'C叶片', value: 'C' }
      ]
    }
  },
  {
    field: 'status',
    label: '检测状态',
    type: 'select' as const,
    props: {
      placeholder: '请选择检测状态',
      options: [
        { label: '待检测', value: 'pending' },
        { label: '检测中', value: 'in_progress' },
        { label: '已完成', value: 'completed' }
      ]
    }
  }
]

// 表格列配置
const tableColumns: TableColumnData[] = [
  { title: '检测编号', dataIndex: 'detectionCode', width: 120 },
  { title: '项目名称', dataIndex: 'projectName', width: 180, ellipsis: true, tooltip: true },
  { title: '风机编号', dataIndex: 'turbineCode', width: 100 },
  { title: '叶片位置', dataIndex: 'bladePosition', width: 100 },
  { title: '叶片型号', dataIndex: 'bladeModel', width: 120 },
  { title: '检测方法', dataIndex: 'detectionMethod', width: 120 },
  { title: '检测日期', dataIndex: 'detectionDate', width: 120 },
  { title: '检测状态', dataIndex: 'status', slotName: 'status', width: 100 },
  { title: '缺陷数量', dataIndex: 'defectCount', width: 100 },
  { title: '缺陷等级', dataIndex: 'defectLevel', slotName: 'defectLevel', width: 100 },
  { title: '检测人员', dataIndex: 'inspector', width: 120 },
  { title: '完成进度', dataIndex: 'progress', width: 100 },
  { title: '备注', dataIndex: 'remark', width: 200, ellipsis: true, tooltip: true },
  { title: '操作', slotName: 'action', width: 180, fixed: 'right' }
]

// 数据状态
const loading = ref(false)
const dataList = ref([
  {
    id: 1,
    detectionCode: 'BID2024001',
    projectName: '华润风电场叶片内部检测',
    turbineCode: 'WT001',
    bladePosition: 'A',
    bladeModel: 'LM82.5',
    detectionMethod: '内窥镜检测',
    detectionDate: '2024-01-18',
    status: 'completed',
    defectCount: 3,
    defectLevel: '轻微',
    inspector: '张检测师',
    progress: '100%',
    remark: '发现几处轻微粘接缺陷'
  },
  {
    id: 2,
    detectionCode: 'BID2024002',
    projectName: '大唐风电场叶片内部检测',
    turbineCode: 'WT002',
    bladePosition: 'B',
    bladeModel: 'GE87.0',
    detectionMethod: '超声波检测',
    detectionDate: '2024-01-20',
    status: 'in_progress',
    defectCount: 0,
    defectLevel: '',
    inspector: '李检测师',
    progress: '65%',
    remark: '正在进行根部检测'
  },
  {
    id: 3,
    detectionCode: 'BID2024003',
    projectName: '国电投海上风电叶片检测',
    turbineCode: 'WT003',
    bladePosition: 'C',
    bladeModel: 'V164-9.5',
    detectionMethod: '红外热成像',
    detectionDate: '2024-01-22',
    status: 'pending',
    defectCount: 0,
    defectLevel: '',
    inspector: '王检测师',
    progress: '0%',
    remark: '等待天气条件合适'
  }
])

const pagination = reactive({
  current: 1,
  pageSize: 10,
  total: 3,
  showTotal: true,
  showPageSize: true
})

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

// 获取状态文本
const getStatusText = (status: string) => {
  const textMap: Record<string, string> = {
    'pending': '待检测',
    'in_progress': '检测中',
    'completed': '已完成'
  }
  return textMap[status] || status
}

// 获取缺陷等级颜色
const getDefectColor = (level: string) => {
  const colorMap: Record<string, string> = {
    '无缺陷': 'green',
    '轻微': 'blue',
    '中等': 'orange',
    '严重': 'red'
  }
  return colorMap[level] || 'gray'
}

// 搜索和重置
const search = async () => {
  loading.value = true
  setTimeout(() => {
    loading.value = false
  }, 1000)
}

const reset = () => {
  Object.assign(searchForm, {
    projectName: '',
    turbineCode: '',
    bladePosition: '',
    status: '',
    page: 1,
    size: 10
  })
  pagination.current = 1
  search()
}

// 分页处理
const onPageChange = (page: number) => {
  searchForm.page = page
  pagination.current = page
  search()
}

const onPageSizeChange = (size: number) => {
  searchForm.size = size
  searchForm.page = 1
  pagination.pageSize = size
  pagination.current = 1
  search()
}

// 操作方法
const openAddModal = () => {
  Message.info('新建检测任务功能开发中...')
}

const batchImport = () => {
  Message.info('批量导入功能开发中...')
}

const viewDetail = (record: any) => {
  Message.info(`查看检测详情: ${record.projectName} - ${record.turbineCode}${record.bladePosition}叶片`)
}

const viewImages = (record: any) => {
  Message.info(`查看检测图片: ${record.projectName} - ${record.turbineCode}${record.bladePosition}叶片`)
}

const generateReport = (record: any) => {
  Message.info(`生成检测报告: ${record.projectName} - ${record.turbineCode}${record.bladePosition}叶片`)
}

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