<template>
  <GiPageLayout>
    <GiTable
      row-key="id"
      title="定制无人机"
      :data="dataList"
      :columns="tableColumns"
      :loading="loading"
      :scroll="{ x: '100%', y: '100%', minWidth: 1300 }"
      :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="openCustomModal">
            <template #icon><icon-settings /></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 #flightTime="{ record }">
        <span class="font-medium text-blue-600">{{ record.flightTime }}小时</span>
      </template>
      
      <!-- 操作列 -->
      <template #action="{ record }">
        <a-space>
          <a-link @click="viewDetail(record)">详情</a-link>
          <a-link @click="editRecord(record)">编辑</a-link>
          <a-link @click="flightRecord(record)">飞行记录</a-link>
          <a-link @click="maintenance(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'

// 搜索表单
let searchForm = reactive({
  droneName: '',
  model: '',
  status: '',
  owner: '',
  page: 1,
  size: 10
})

// 查询条件配置
const queryFormColumns = [
  {
    field: 'droneName',
    label: '无人机名称',
    type: 'input' as const,
    props: {
      placeholder: '请输入无人机名称'
    }
  },
  {
    field: 'model',
    label: '型号',
    type: 'input' as const,
    props: {
      placeholder: '请输入型号'
    }
  },
  {
    field: 'status',
    label: '状态',
    type: 'select' as const,
    props: {
      placeholder: '请选择状态',
      options: [
        { label: '可用', value: 'available' },
        { label: '使用中', value: 'in_use' },
        { label: '维护中', value: 'maintenance' },
        { label: '故障', value: 'fault' }
      ]
    }
  }
]

// 表格列配置
const tableColumns: TableColumnData[] = [
  { title: '无人机编号', dataIndex: 'droneCode', width: 120 },
  { title: '无人机名称', dataIndex: 'droneName', width: 180, ellipsis: true, tooltip: true },
  { title: '型号规格', dataIndex: 'model', width: 120 },
  { title: '载重能力', dataIndex: 'payload', width: 100 },
  { title: '续航时间', dataIndex: 'endurance', width: 100 },
  { title: '最大飞行高度', dataIndex: 'maxAltitude', width: 120 },
  { title: '购买日期', dataIndex: 'purchaseDate', width: 120 },
  { title: '累计飞行时长', dataIndex: 'flightTime', slotName: 'flightTime', width: 120 },
  { title: '状态', dataIndex: 'status', slotName: 'status', width: 100 },
  { title: '负责人', dataIndex: 'owner', width: 100 },
  { title: '存放位置', dataIndex: 'location', width: 150, ellipsis: true, tooltip: true },
  { title: '备注', dataIndex: 'remark', width: 200, ellipsis: true, tooltip: true },
  { title: '操作', slotName: 'action', width: 200, fixed: 'right' }
]

// 数据状态
const loading = ref(false)
const dataList = ref([
  {
    id: 1,
    droneCode: 'DR001',
    droneName: '风电叶片检测无人机',
    model: 'M300RTK',
    payload: '2.7kg',
    endurance: '55分钟',
    maxAltitude: '7000m',
    purchaseDate: '2023-05-20',
    flightTime: 156.5,
    status: 'available',
    owner: '李飞行员',
    location: '设备仓库A区',
    remark: '配备高清相机和热成像设备'
  },
  {
    id: 2,
    droneCode: 'DR002',
    droneName: '塔筒巡检无人机',
    model: 'M350RTK',
    payload: '2.9kg',
    endurance: '42分钟',
    maxAltitude: '7000m',
    purchaseDate: '2023-07-15',
    flightTime: 89.2,
    status: 'in_use',
    owner: '王飞行员',
    location: '现场作业点',
    remark: '正在执行塔筒巡检任务'
  },
  {
    id: 3,
    droneCode: 'DR003',
    droneName: '定制运输无人机',
    model: 'Custom-T1000',
    payload: '50kg',
    endurance: '35分钟',
    maxAltitude: '500m',
    purchaseDate: '2023-09-10',
    flightTime: 45.8,
    status: 'maintenance',
    owner: '张工程师',
    location: '维修车间',
    remark: '螺旋桨需要更换'
  }
])

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

// 获取状态颜色
const getStatusColor = (status: string) => {
  const colorMap: Record<string, string> = {
    'available': 'green',
    'in_use': 'blue',
    'maintenance': 'orange',
    'fault': 'red'
  }
  return colorMap[status] || 'gray'
}

// 获取状态文本
const getStatusText = (status: string) => {
  const textMap: Record<string, string> = {
    'available': '可用',
    'in_use': '使用中',
    'maintenance': '维护中',
    'fault': '故障'
  }
  return textMap[status] || status
}

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

const reset = () => {
  Object.assign(searchForm, {
    droneName: '',
    model: '',
    status: '',
    owner: '',
    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 openCustomModal = () => {
  Message.info('定制配置功能开发中...')
}

const viewDetail = (record: any) => {
  Message.info(`查看无人机详情: ${record.droneName}`)
}

const editRecord = (record: any) => {
  Message.info(`编辑无人机: ${record.droneName}`)
}

const flightRecord = (record: any) => {
  Message.info(`查看飞行记录: ${record.droneName}`)
}

const maintenance = (record: any) => {
  Message.info(`维护记录: ${record.droneName}`)
}

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