<template>
  <div class="device-detail-container">
    <a-card title="设备基本信息">
      <a-descriptions :data="basicInfo" layout="vertical" bordered />
    </a-card>

    <a-card title="设备状态信息" style="margin-top: 16px">
      <a-descriptions :data="statusInfo" layout="vertical" bordered />
    </a-card>

    <a-card title="设备详细信息" style="margin-top: 16px">
      <a-tabs>
        <a-tab-pane key="maintenance" tab="维护记录">
          <div class="maintenance-section">
            <a-button type="primary" @click="handleAddMaintenance">
              添加维护记录
            </a-button>
            <a-divider />
            <a-table :data="maintenanceRecords" :columns="maintenanceColumns" row-key="id" size="small" />
          </div>
        </a-tab-pane>
        <a-tab-pane key="usage" tab="使用记录">
          <div class="usage-section">
            <a-table :data="usageRecords" :columns="usageColumns" row-key="id" size="small" />
          </div>
        </a-tab-pane>
        <a-tab-pane key="location" tab="位置变更">
          <div class="location-section">
            <a-table :data="locationRecords" :columns="locationColumns" row-key="id" size="small" />
          </div>
        </a-tab-pane>
        <a-tab-pane key="files" tab="相关文件">
          <div class="files-section">
            <a-upload
              :file-list="fileList"
              :custom-request="handleFileUpload"
              :show-upload-list="{ showPreviewIcon: true, showRemoveIcon: true }"
            >
              <a-button>
                <template #icon>
                  <IconUpload />
                </template>
                上传文件
              </a-button>
            </a-upload>
          </div>
        </a-tab-pane>
      </a-tabs>
    </a-card>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { useRoute } from 'vue-router'
import { IconUpload } from '@arco-design/web-vue/es/icon'
import { getEquipmentDetail } from '@/apis/equipment'
import type { EquipmentResp } from '@/types/equipment.d'

defineOptions({ name: 'DeviceDetail' })

const route = useRoute()
const deviceId = route.params.id as string

// 设备基本信息
const basicInfo = ref([
  { label: '设备名称', value: '' },
  { label: '设备类型', value: '' },
  { label: '设备型号', value: '' },
  { label: '序列号', value: '' },
  { label: '品牌', value: '' },
  { label: '资产编号', value: '' },
  { label: '负责人', value: '' },
  { label: '物理位置', value: '' },
  { label: '配置规格', value: '' },
  { label: '备注', value: '' },
])

// 设备状态信息
const statusInfo = ref([
  { label: '设备状态', value: '' },
  { label: '使用状态', value: '' },
  { label: '位置状态', value: '' },
  { label: '健康状态', value: '' },
  { label: '当前使用人', value: '' },
  { label: '所属项目', value: '' },
  { label: '创建时间', value: '' },
  { label: '更新时间', value: '' },
])

// 维护记录
const maintenanceRecords = ref([
  {
    id: 1,
    maintenanceType: '定期保养',
    maintenancePerson: '张师傅',
    maintenanceTime: '2024-06-01 10:00:00',
    description: '更换机油，检查设备运行状态',
    cost: 500,
    status: '已完成',
  },
  {
    id: 2,
    maintenanceType: '故障维修',
    maintenancePerson: '李师傅',
    maintenanceTime: '2024-05-15 14:30:00',
    description: '修复传感器故障',
    cost: 1200,
    status: '已完成',
  },
])

const maintenanceColumns = [
  { title: '维护类型', dataIndex: 'maintenanceType', key: 'maintenanceType' },
  { title: '维护人员', dataIndex: 'maintenancePerson', key: 'maintenancePerson' },
  { title: '维护时间', dataIndex: 'maintenanceTime', key: 'maintenanceTime' },
  { title: '维护描述', dataIndex: 'description', key: 'description' },
  { title: '维护费用', dataIndex: 'cost', key: 'cost' },
  { title: '状态', dataIndex: 'status', key: 'status' },
]

// 使用记录
const usageRecords = ref([
  {
    id: 1,
    userName: '张三',
    projectName: '项目A',
    startTime: '2024-06-01 09:00:00',
    endTime: '2024-06-01 18:00:00',
    usagePurpose: '现场检测',
  },
  {
    id: 2,
    userName: '李四',
    projectName: '项目B',
    startTime: '2024-05-30 08:00:00',
    endTime: '2024-05-30 17:00:00',
    usagePurpose: '安全巡检',
  },
])

const usageColumns = [
  { title: '使用人', dataIndex: 'userName', key: 'userName' },
  { title: '项目名称', dataIndex: 'projectName', key: 'projectName' },
  { title: '开始时间', dataIndex: 'startTime', key: 'startTime' },
  { title: '结束时间', dataIndex: 'endTime', key: 'endTime' },
  { title: '使用目的', dataIndex: 'usagePurpose', key: 'usagePurpose' },
]

// 位置变更记录
const locationRecords = ref([
  {
    id: 1,
    oldLocation: '仓库A',
    newLocation: '现场B',
    changeTime: '2024-06-01 08:00:00',
    changeReason: '项目需要',
    operator: '管理员',
  },
  {
    id: 2,
    oldLocation: '现场B',
    newLocation: '仓库A',
    changeTime: '2024-05-30 18:00:00',
    changeReason: '项目结束',
    operator: '管理员',
  },
])

const locationColumns = [
  { title: '原位置', dataIndex: 'oldLocation', key: 'oldLocation' },
  { title: '新位置', dataIndex: 'newLocation', key: 'newLocation' },
  { title: '变更时间', dataIndex: 'changeTime', key: 'changeTime' },
  { title: '变更原因', dataIndex: 'changeReason', key: 'changeReason' },
  { title: '操作人', dataIndex: 'operator', key: 'operator' },
]

// 文件列表
const fileList = ref([
  {
    uid: '1',
    name: '设备说明书.pdf',
    status: 'done',
    url: 'https://example.com/manual.pdf',
  },
  {
    uid: '2',
    name: '维护记录.xlsx',
    status: 'done',
    url: 'https://example.com/maintenance.xlsx',
  },
])

// 获取设备类型文本
const getEquipmentTypeText = (type: string) => {
  const typeMap: Record<string, string> = {
    1: '检测设备',
    2: '安全设备',
    3: '车辆',
  }
  return typeMap[type] || type
}

// 获取设备状态文本
const getEquipmentStatusText = (status: string) => {
  const statusMap: Record<string, string> = {
    normal: '正常',
    maintenance: '维修中',
    scrapped: '报废',
  }
  return statusMap[status] || status
}

// 获取使用状态文本
const getUseStatusText = (status: string) => {
  return status === '1' ? '使用中' : '空闲'
}

// 获取位置状态文本
const getLocationStatusText = (status: string) => {
  const statusMap: Record<string, string> = {
    in_stock: '库存中',
    allocated: '已分配',
    repair: '维修中',
    scrap: '待报废',
    scrapped: '已报废',
    borrowed: '外借中',
    lost: '丢失',
  }
  return statusMap[status] || status
}

// 获取健康状态文本
const getHealthStatusText = (status: string) => {
  const statusMap: Record<string, string> = {
    excellent: '优秀',
    good: '良好',
    normal: '一般',
    poor: '较差',
    bad: '差',
  }
  return statusMap[status] || status
}

// 加载设备详情
const loadDeviceDetail = async () => {
  try {
    const res = await getEquipmentDetail(deviceId)
    const device = res.data as EquipmentResp

    // 更新基本信息
    basicInfo.value = [
      { label: '设备名称', value: device.equipmentName },
      { label: '设备类型', value: getEquipmentTypeText(device.equipmentType) },
      { label: '设备型号', value: device.equipmentModel },
      { label: '序列号', value: device.equipmentSn },
      { label: '品牌', value: device.brand || '-' },
      { label: '资产编号', value: device.assetCode || '-' },
      { label: '负责人', value: device.responsiblePerson || '-' },
      { label: '物理位置', value: device.physicalLocation || '-' },
      { label: '配置规格', value: device.specification || '-' },
      { label: '备注', value: device.assetRemark || '-' },
    ]

    // 更新状态信息
    statusInfo.value = [
      { label: '设备状态', value: getEquipmentStatusText(device.equipmentStatus) },
      { label: '使用状态', value: getUseStatusText(device.useStatus) },
      { label: '位置状态', value: getLocationStatusText(device.locationStatus || '') },
      { label: '健康状态', value: getHealthStatusText(device.healthStatus || '') },
      { label: '当前使用人', value: device.name || '-' },
      { label: '所属项目', value: device.projectName || '-' },
      { label: '创建时间', value: device.createTime || '-' },
      { label: '更新时间', value: device.updateTime || '-' },
    ]
  } catch (error) {
    console.error('加载设备详情失败:', error)
  }
}

// 添加维护记录
const handleAddMaintenance = () => {
  // TODO: 实现添加维护记录的逻辑
  console.log('添加维护记录')
}

// 文件上传处理
const handleFileUpload = (options: any) => {
  // TODO: 实现文件上传逻辑
  console.log('文件上传:', options)
}

onMounted(() => {
  if (deviceId) {
    loadDeviceDetail()
  }
})
</script>

<style scoped>
.device-detail-container {
  padding: 16px;
  background: #f5f5f5;
  min-height: 100vh;
}

.maintenance-section,
.usage-section,
.location-section,
.files-section {
  padding: 16px 0;
}
</style>
