<template>
  <div class="equipment-center-container">
    <!-- 页面头部 -->
    <div class="page-header">
      <div class="header-content">
        <div class="header-left">
          <div class="page-title">
            <IconDesktop style="font-size: 24px; margin-right: 12px; color: var(--color-primary);" />
            <h1>设备中心</h1>
          </div>
          <div class="page-description">
            管理和监控企业设备资产，包括设备信息、状态跟踪、维护记录等
          </div>
        </div>
        <div class="header-right">
          <a-space>
            <EquipmentSearch
              :loading="loading"
              @search="handleSearch"
              @reset="handleReset"
            />
            <a-button type="outline" @click="handleAddEquipmentType" size="large">
              <template #icon>
                <IconTag />
              </template>
              添加设备类型
            </a-button>
            <a-button type="primary" @click="handleAdd" size="large">
              <template #icon>
                <IconPlus />
              </template>
              新增设备
            </a-button>
          </a-space>
        </div>
      </div>
    </div>

    <!-- 统计卡片 -->
    <div class="stats-container">
      <a-row :gutter="16">
        <a-col :span="6">
          <a-card class="stat-card" :bordered="false">
            <div class="stat-content">
              <div class="stat-icon" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
                <IconDesktop />
              </div>
              <div class="stat-info">
                <div class="stat-number">{{ pagination.total }}</div>
                <div class="stat-label">设备总数</div>
              </div>
            </div>
          </a-card>
        </a-col>
        <a-col :span="6">
          <a-card class="stat-card" :bordered="false">
            <div class="stat-content">
              <div class="stat-icon" style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);">
                <IconCheckCircle />
              </div>
              <div class="stat-info">
                <div class="stat-number">{{ getNormalCount() }}</div>
                <div class="stat-label">正常设备</div>
              </div>
            </div>
          </a-card>
        </a-col>
        <a-col :span="6">
          <a-card class="stat-card" :bordered="false">
            <div class="stat-content">
              <div class="stat-icon" style="background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);">
                <IconClockCircle />
              </div>
              <div class="stat-info">
                <div class="stat-number">{{ getInUseCount() }}</div>
                <div class="stat-label">使用中</div>
              </div>
            </div>
          </a-card>
        </a-col>
        <a-col :span="6">
          <a-card class="stat-card" :bordered="false">
            <div class="stat-content">
              <div class="stat-icon" style="background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);">
                <IconExclamationCircle />
              </div>
              <div class="stat-info">
                <div class="stat-number">{{ getMaintenanceCount() }}</div>
                <div class="stat-label">维护中</div>
              </div>
            </div>
          </a-card>
        </a-col>
      </a-row>
    </div>

    <!-- 数据表格 -->
    <a-card class="table-card" :bordered="false">
      <template #title>
        <div class="card-title">
          <span>设备列表</span>
          <div class="table-actions">
            <a-space>
              <a-button type="text" @click="refreshData">
                <template #icon>
                  <IconRefresh />
                </template>
                刷新
              </a-button>
              <a-button type="text" @click="exportData">
                <template #icon>
                  <IconDownload />
                </template>
                导出
              </a-button>
            </a-space>
          </div>
        </div>
      </template>

      <!-- 数据表格 -->
      <a-table
        :columns="columns"
        :data="tableData"
        :loading="loading"
        :pagination="false"
        row-key="equipmentId"
        :scroll="{ x: 'max-content', y: 400 }"
        :bordered="false"
        :stripe="true"
        size="medium"
        table-layout="auto"
      >
        <template #equipmentType="{ record }">
          <a-tag :color="getEquipmentTypeColor(record.equipmentType)">
            {{ getEquipmentTypeText(record.equipmentType) }}
          </a-tag>
        </template>
        <template #equipmentStatus="{ record }">
          <a-space>
            <div
              :class="getStatusDotClass(record.equipmentStatus)"
              class="status-dot"
            />
            <a-tag :color="getEquipmentStatusColor(record.equipmentStatus)">
              {{ getEquipmentStatusText(record.equipmentStatus) }}
            </a-tag>
          </a-space>
        </template>
        <template #locationStatus="{ record }">
          <a-tag :color="getLocationStatusColor(record.locationStatus)">
            {{ getLocationStatusText(record.locationStatus) }}
          </a-tag>
        </template>
        <template #healthStatus="{ record }">
          <a-tag :color="getHealthStatusColor(record.healthStatus)">
            {{ getHealthStatusText(record.healthStatus) }}
          </a-tag>
        </template>
        <template #useStatus="{ record }">
          <a-tag :color="record.useStatus === '1' ? 'blue' : 'green'">
            {{ record.useStatus === '1' ? '使用中' : '空闲' }}
          </a-tag>
        </template>
        <template #purchasePrice="{ record }">
          <span v-if="record.purchasePrice">
            ¥{{ formatPrice(record.purchasePrice) }}
          </span>
          <span v-else>-</span>
        </template>
        <template #currentNetValue="{ record }">
          <span v-if="record.currentNetValue">
            ¥{{ formatPrice(record.currentNetValue) }}
          </span>
          <span v-else>-</span>
        </template>
        <template #createTime="{ record }">
          {{ formatDateTime(record.createTime) }}
        </template>
        <template #action="{ record }">
          <a-space>
            <a-button type="text" size="small" @click="handleView(record)">
              查看
            </a-button>
            <a-button type="text" size="small" @click="handleDetail(record)">
              详情
            </a-button>
            <a-button type="text" size="small" @click="handleEdit(record)">
              编辑
            </a-button>
            <a-button
              v-if="record.useStatus === '0'"
              type="text"
              size="small"
              @click="handleAssign(record)"
            >
              分配
            </a-button>
            <a-button
              v-if="record.useStatus === '1'"
              type="text"
              size="small"
              @click="handleReturn(record)"
            >
              归还
            </a-button>
            <a-button
              type="text"
              size="small"
              danger
              @click="handleDelete(record)"
            >
              删除
            </a-button>
          </a-space>
        </template>
      </a-table>

      <!-- 分页器 - 固定在表格下方 -->
      <div class="pagination-container">
        <a-pagination
          v-model:current="pagination.current"
          v-model:page-size="pagination.pageSize"
          :total="pagination.total"
          :show-total="true"
          :show-jumper="true"
          :show-page-size="true"
          :page-size-options="[10, 20, 50, 100]"
          :hide-on-single-page="false"
          size="default"
          @change="handlePageChange"
          @page-size-change="handlePageSizeChange"
        />
      </div>
    </a-card>

    <!-- 新增/编辑弹窗 -->
    <DeviceModal
      v-model:visible="modalVisible"
      :equipment-data="currentEquipment"
      :mode="modalMode"
      @success="handleModalSuccess"
    />
    
    <!-- 设备类型管理弹窗 -->
    <EquipmentTypeModal
      v-model:visible="equipmentTypeModalVisible"
      :type-data="currentEquipmentType"
      :mode="equipmentTypeModalMode"
      @success="handleEquipmentTypeModalSuccess"
    />
  </div>
</template>

<script lang="ts" setup>
import { onMounted, reactive, ref, watch } from 'vue'
import { Modal } from '@arco-design/web-vue'
import {
  IconCheckCircle,
  IconClockCircle,
  IconDesktop,
  IconDownload,
  IconExclamationCircle,
  IconPlus,
  IconRefresh,
  IconSearch,
  IconTag,
} from '@arco-design/web-vue/es/icon'
import message from '@arco-design/web-vue/es/message'
import DeviceModal from './components/DeviceModal.vue'
import EquipmentTypeModal from './components/EquipmentTypeModal.vue'
import EquipmentSearch from './components/EquipmentSearch.vue'
import router from '@/router'
import { EquipmentAPI } from '@/apis'
import type { EquipmentPageQuery, EquipmentResp } from '@/types/equipment.d'

defineOptions({ name: 'EquipmentCenter' })

// 当前搜索参数
const currentSearchParams = ref<EquipmentPageQuery>({})

// 表格数据
const tableData = ref<EquipmentResp[]>([])
const loading = ref(false)

// 分页配置
const pagination = reactive({
  current: 1,
  pageSize: 10,
  total: 0,
  showTotal: true,
  showJumper: true,
  showPageSize: true,
  pageSizeOptions: [10, 20, 50, 100],
  // 确保分页器完全可见
  hideOnSinglePage: false,
  // 分页器大小
  size: 'default'
})

// 弹窗控制
const modalVisible = ref(false)
const currentEquipment = ref<EquipmentResp | null>(null)
const modalMode = ref<'add' | 'edit' | 'view'>('add')

// 设备类型弹窗控制
const equipmentTypeModalVisible = ref(false)
const currentEquipmentType = ref<any>(null)
const equipmentTypeModalMode = ref<'add' | 'edit'>('add')

// 表格列配置
const columns = [
  {
    title: '资产编号',
    dataIndex: 'assetCode',
    key: 'assetCode',
    width: 120,
  },
  {
    title: '设备名称',
    dataIndex: 'equipmentName',
    key: 'equipmentName',
    width: 150,
  },
  {
    title: '设备类型',
    dataIndex: 'equipmentType',
    key: 'equipmentType',
    slotName: 'equipmentType',
    width: 120,
  },
  {
    title: '设备型号',
    dataIndex: 'equipmentModel',
    key: 'equipmentModel',
    width: 120,
  },
  {
    title: '序列号',
    dataIndex: 'equipmentSn',
    key: 'equipmentSn',
    width: 150,
  },
  {
    title: '品牌',
    dataIndex: 'brand',
    key: 'brand',
    width: 100,
  },
  {
    title: '设备状态',
    dataIndex: 'equipmentStatus',
    key: 'equipmentStatus',
    slotName: 'equipmentStatus',
    width: 120,
  },
  {
    title: '使用状态',
    dataIndex: 'useStatus',
    key: 'useStatus',
    slotName: 'useStatus',
    width: 100,
  },
  {
    title: '位置状态',
    dataIndex: 'locationStatus',
    key: 'locationStatus',
    slotName: 'locationStatus',
    width: 120,
  },
  {
    title: '物理位置',
    dataIndex: 'physicalLocation',
    key: 'physicalLocation',
    width: 150,
  },
  {
    title: '健康状态',
    dataIndex: 'healthStatus',
    key: 'healthStatus',
    slotName: 'healthStatus',
    width: 100,
  },
  {
    title: '负责人',
    dataIndex: 'responsiblePerson',
    key: 'responsiblePerson',
    width: 100,
  },
  {
    title: '当前使用人',
    dataIndex: 'name',
    key: 'name',
    width: 100,
  },
  {
    title: '所属项目',
    dataIndex: 'projectName',
    key: 'projectName',
    width: 150,
  },
  {
    title: '采购价格',
    dataIndex: 'purchasePrice',
    key: 'purchasePrice',
    width: 120,
    slotName: 'purchasePrice',
  },
  {
    title: '当前净值',
    dataIndex: 'currentNetValue',
    key: 'currentNetValue',
    width: 120,
    slotName: 'currentNetValue',
  },
  {
    title: '维护人员',
    dataIndex: 'maintenancePerson',
    key: 'maintenancePerson',
    width: 100,
  },
  {
    title: '创建时间',
    dataIndex: 'createTime',
    key: 'createTime',
    width: 160,
    slotName: 'createTime',
  },
  {
    title: '操作',
    key: 'action',
    slotName: 'action',
    width: 280,
    fixed: 'right',
  },
]

// 下拉选项

// 获取设备类型文本
const getEquipmentTypeText = (type: string) => {
  const typeMap: Record<string, string> = {
    detection: '检测设备',
    maintain: '维修设备',
    security: '安全设备',
    office: '办公设备',
    car: '车辆',
  }
  return typeMap[type] || type
}

// 获取设备类型颜色
const getEquipmentTypeColor = (type: string) => {
  const colorMap: Record<string, string> = {
    detection: 'blue',
    maintain: 'green',
    security: 'orange',
    office: 'purple',
    car: 'red',
  }
  return colorMap[type] || 'default'
}

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

// 获取设备状态颜色
const getEquipmentStatusColor = (status: string) => {
  const colorMap: Record<string, string> = {
    normal: 'green',
    repair: 'orange',
    maintain: 'blue',
    scrap: 'red',
  }
  return colorMap[status] || 'default'
}

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

// 获取位置状态颜色
const getLocationStatusColor = (status: string) => {
  const colorMap: Record<string, string> = {
    in_stock: 'green',
    allocated: 'blue',
    repair: 'orange',
    scrap: 'red',
    scrapped: 'red',
    borrowed: 'purple',
    lost: 'red',
  }
  return colorMap[status] || 'default'
}

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

// 获取健康状态颜色
const getHealthStatusColor = (status: string) => {
  const colorMap: Record<string, string> = {
    excellent: 'green',
    good: 'blue',
    normal: 'orange',
    poor: 'red',
    bad: 'red',
  }
  return colorMap[status] || 'default'
}

// 获取状态点样式
const getStatusDotClass = (status: string) => {
  const classMap: Record<string, string> = {
    normal: 'normal-dot',
    repair: 'maintenance-dot',
    maintain: 'maintenance-dot',
    scrap: 'scrapped-dot',
  }
  return classMap[status] || 'normal-dot'
}

// 格式化价格
const formatPrice = (price: number) => {
  if (!price) return '0.00'
  return price.toLocaleString('zh-CN', {
    minimumFractionDigits: 2,
    maximumFractionDigits: 2,
  })
}

// 格式化日期时间
const formatDateTime = (dateTime: string) => {
  if (!dateTime) return '-'
  try {
    const date = new Date(dateTime)
    return date.toLocaleString('zh-CN', {
      year: 'numeric',
      month: '2-digit',
      day: '2-digit',
      hour: '2-digit',
      minute: '2-digit',
    })
  // eslint-disable-next-line unused-imports/no-unused-vars
  } catch (error) {
    return dateTime
  }
}

// 数据转换函数
const transformBackendData = (data: any[]) => {
  return data.map((item) => {
    // 格式化时间字段
    const formatDateTime = (dateTime: any) => {
      if (!dateTime) return ''
      try {
        return new Date(dateTime).toLocaleString('zh-CN', {
          year: 'numeric',
          month: '2-digit',
          day: '2-digit',
          hour: '2-digit',
          minute: '2-digit',
        })
      // eslint-disable-next-line unused-imports/no-unused-vars
      } catch (error) {
        return dateTime
      }
    }

    // 直接返回后端数据，只格式化时间字段
    return {
      ...item,
      createTime: formatDateTime(item.createTime),
      updateTime: formatDateTime(item.updateTime),
      purchaseTime: formatDateTime(item.purchaseTime),
      inStockTime: formatDateTime(item.inStockTime),
      activationTime: formatDateTime(item.activationTime),
      expectedScrapTime: formatDateTime(item.expectedScrapTime),
      actualScrapTime: formatDateTime(item.actualScrapTime),
      statusChangeTime: formatDateTime(item.statusChangeTime),
      warrantyExpireDate: formatDateTime(item.warrantyExpireDate),
      lastMaintenanceDate: formatDateTime(item.lastMaintenanceDate),
      nextMaintenanceDate: formatDateTime(item.nextMaintenanceDate),
    }
  })
}

// 加载数据
const loadData = async (searchParams?: EquipmentPageQuery) => {
  loading.value = true
  try {
    // 构建请求参数，确保分页参数正确
    const params = {
      pageNum: pagination.current, // 当前页码 - 使用pageNum匹配后端期望
      pageSize: pagination.pageSize, // 每页条数
      ...(searchParams || {}), // 添加搜索条件
    }

    console.log('🚀 发送分页请求参数:', params)
    console.log('📊 当前分页状态:', {
      current: pagination.current,
      pageSize: pagination.pageSize,
      total: pagination.total
    })

    const res = await EquipmentAPI.pageEquipment(params)

    console.log('📡 后端响应数据:', res)

    // 兼容不同的响应格式
    if (res.code === 200 || res.success || res.status === 200) {
      // 处理数据，确保数据格式正确
      let dataList: any[] = []
      let totalCount = 0

      console.log('🔍 开始解析响应数据，响应结构:', res)

      // 检查不同的数据字段 - 后端返回的是 PageResult 格式
      if ((res as any).rows && Array.isArray((res as any).rows)) {
        // 后端返回的是 PageResult 格式，数据在 rows 字段中
        dataList = (res as any).rows
        totalCount = (res as any).total || 0
        console.log('✅ 从 rows 字段获取数据，总数:', totalCount, '当前页数据:', dataList.length)
      } else if ((res as any).data && Array.isArray((res as any).data)) {
        dataList = (res as any).data
        totalCount = (res as any).total || dataList.length || 0
        console.log('✅ 从 data 字段获取数据，总数:', totalCount, '当前页数据:', dataList.length)
      } else if ((res as any).data && (res as any).data.rows && Array.isArray((res as any).data.rows)) {
        // 嵌套结构：res.data.rows 和 res.data.total
        dataList = (res as any).data.rows
        totalCount = (res as any).data.total || 0
        console.log('✅ 从嵌套 data.rows 字段获取数据，总数:', totalCount, '当前页数据:', dataList.length)
      } else if ((res as any).data && Array.isArray(((res as any).data as any).records)) {
        dataList = ((res as any).data as any).records
        totalCount = (((res as any).data as any).total) || dataList.length || 0
        console.log('✅ 从 records 字段获取数据，总数:', totalCount, '当前页数据:', dataList.length)
      } else if ((res as any).data && Array.isArray(((res as any).data as any).list)) {
        dataList = ((res as any).data as any).list
        totalCount = (((res as any).data as any).total) || dataList.length || 0
        console.log('✅ 从 list 字段获取数据，总数:', totalCount, '当前页数据:', dataList.length)
      } else {
        console.warn('⚠️ 未找到有效的数据字段，响应结构:', res)
        dataList = []
        totalCount = 0
      }

      // 临时解决方案：如果后端没有返回total但有数据，使用当前页数据长度作为总数
      if (dataList.length > 0 && totalCount === 0) {
        totalCount = dataList.length
        console.log('⚠️ 后端未返回total，使用当前页数据长度作为总数:', totalCount)
      }

      // 如果后端返回了数据但total为0，说明后端分页逻辑有问题
      if (dataList.length > 0 && totalCount === 0) {
        console.warn('🚨 后端分页逻辑问题：返回了数据但total为0，使用当前页数据长度作为总数')
        totalCount = dataList.length
      }

      if (dataList.length > 0) {
        const transformedData = transformBackendData(dataList)
        tableData.value = transformedData
        console.log('✅ 数据转换完成，设置到表格:', transformedData.length, '条')
      } else {
        tableData.value = []
        console.log('ℹ️ 没有数据，清空表格')
      }

      // 设置总数 - 优先使用后端返回的总数
      pagination.total = totalCount
      console.log('📊 设置分页总数:', totalCount)
      console.log('📊 分页组件状态:', {
        current: pagination.current,
        pageSize: pagination.pageSize,
        total: pagination.total
      })
    } else {
      console.error('❌ 请求失败，响应:', res)
      message.error((res as any).msg || (res as any).message || '加载数据失败')
      tableData.value = []
      pagination.total = 0
    }
  } catch (error: any) {
    console.error('❌ 加载数据失败:', error)
    message.error(error?.message || '加载数据失败')
    tableData.value = []
    pagination.total = 0
  } finally {
    loading.value = false
  }
}

// 搜索
const handleSearch = (searchParams: EquipmentPageQuery) => {
  pagination.current = 1
  currentSearchParams.value = { ...searchParams }

  loadData(searchParams)
}

// 重置
const handleReset = () => {
  pagination.current = 1
  currentSearchParams.value = {}

  loadData()
}

// 表格变化
const handleTableChange = (pag: any) => {
  console.log('表格变化，分页参数:', pag) // 添加调试日志
  
  // 更新分页配置
  if (pag.current !== undefined) {
    pagination.current = pag.current
  }
  if (pag.pageSize !== undefined) {
    pagination.pageSize = pag.pageSize
  }
  
  console.log('更新分页配置:', {
    current: pagination.current,
    pageSize: pagination.pageSize
  })
  
  // 重新加载数据
  loadData(currentSearchParams.value)
}

// 分页变化处理
const handlePageChange = (page: number) => {
  console.log('页码变化:', page)
  pagination.current = page
  loadData(currentSearchParams.value)
}

// 每页条数变化处理
const handlePageSizeChange = (pageSize: number) => {
  console.log('每页条数变化:', pageSize)
  pagination.pageSize = pageSize
  pagination.current = 1 // 重置到第一页
  loadData(currentSearchParams.value)
}



// 新增
const handleAdd = () => {
  modalMode.value = 'add'
  currentEquipment.value = null
  modalVisible.value = true
}

// 查看
const handleView = (record: EquipmentResp) => {
  modalMode.value = 'view'
  currentEquipment.value = { ...record }
  modalVisible.value = true
}

// 编辑
const handleEdit = (record: EquipmentResp) => {
  modalMode.value = 'edit'
  currentEquipment.value = { ...record }
  modalVisible.value = true
}

// 详情
const handleDetail = (record: EquipmentResp) => {
  // 跳转到设备详情页面，并传递 equipmentId
  router.push({ name: 'DeviceDetail', params: { id: record.equipmentId } })
}

// 分配
const handleAssign = async (record: EquipmentResp) => {
  Modal.confirm({
    title: '确认分配',
    content: `确定要分配设备"${record.equipmentName}"吗？`,
    onOk: async () => {
      try {
        await EquipmentAPI.assignEquipment(record.equipmentId, 'current-user-id')
        message.success('分配成功')
        loadData()
      } catch (error: any) {
        console.error('分配失败:', error)
        message.error(error?.message || '分配失败')
      }
    },
  })
}

// 归还
const handleReturn = async (record: EquipmentResp) => {
  Modal.confirm({
    title: '确认归还',
    content: `确定要归还设备"${record.equipmentName}"吗？`,
    onOk: async () => {
      try {
        await EquipmentAPI.returnEquipment(record.equipmentId)
        message.success('归还成功')
        loadData()
      } catch (error: any) {
        console.error('归还失败:', error)
        message.error(error?.message || '归还失败')
      }
    },
  })
}

// 统计函数
const getNormalCount = () => {
  return tableData.value.filter((item) => item.equipmentStatus === 'normal').length
}

const getInUseCount = () => {
  return tableData.value.filter((item) => item.useStatus === '1').length
}

const getMaintenanceCount = () => {
  return tableData.value.filter((item) =>
    item.equipmentStatus === 'repair'
    || item.locationStatus === 'repair',
  ).length
}

// 刷新数据
const refreshData = () => {
  loadData()
  message.success('数据已刷新')
}

// 导出数据
const exportData = () => {
  message.info('导出功能开发中...')
}

// 删除
const handleDelete = async (record: EquipmentResp) => {
  // 检查设备状态，提供更详细的确认信息
  let confirmContent = `确定要删除设备"${record.equipmentName}"吗？`
  let canDelete = true
  let statusWarning = ''

  // 检查设备使用状态
  if (record.useStatus === '1') {
    canDelete = false
    statusWarning = '该设备正在使用中，无法删除。请先归还设备后再进行删除操作。'
  }

  // 检查设备位置状态
  if (record.locationStatus === 'allocated' || record.locationStatus === 'borrowed') {
    canDelete = false
    statusWarning = '该设备已分配或外借中，无法删除。请先归还设备后再进行删除操作。'
  }

  // 检查设备是否在维修中
  if (record.locationStatus === 'repair' || record.equipmentStatus === 'repair') {
    canDelete = false
    statusWarning = '该设备正在维修中，无法删除。请等待维修完成后再进行删除操作。'
  }

  // 如果设备状态不允许删除，显示警告信息
  if (!canDelete) {
    Modal.warning({
      title: '无法删除设备',
      content: statusWarning,
      okText: '确定',
      hideCancel: true,
    })
    return
  }

  // 构建详细的确认信息
  const deviceInfo = [
    `设备名称：${record.equipmentName || '无'}`,
    `资产编号：${record.assetCode || '无'}`,
    `设备型号：${record.equipmentModel || '无'}`,
    `序列号：${record.equipmentSn || '无'}`,
    `当前状态：${getEquipmentStatusText(record.equipmentStatus || '')}`,
    `位置状态：${getLocationStatusText(record.locationStatus || '')}`,
  ].join('\n')

  confirmContent = `确定要删除以下设备吗？\n\n${deviceInfo}\n\n⚠️ 删除后设备将被标记为已报废，此操作不可恢复！\n\n删除原因：\n• 设备信息本身不可更改，但可以通过删除操作标记为报废\n• 删除后设备将不再出现在正常列表中\n• 历史记录将被保留，不影响其他模块功能`

  Modal.confirm({
    title: '确认删除设备',
    content: confirmContent,
    okText: '确认删除',
    cancelText: '取消',
    okButtonProps: { status: 'danger' },
    onOk: async () => {
      try {
        await EquipmentAPI.deleteEquipment(record.equipmentId)
        message.success('设备删除成功')
        loadData()
      } catch (error: any) {
        console.error('删除失败:', error)
        // 根据后端返回的错误信息显示具体的错误提示
        const errorMessage = error?.response?.data?.msg || error?.message || '删除失败'
        message.error(errorMessage)
      }
    },
  })
}

// 弹窗成功回调
const handleModalSuccess = () => {
  modalVisible.value = false
  loadData()
}

// 新增设备类型
const handleAddEquipmentType = () => {
  equipmentTypeModalMode.value = 'add'
  currentEquipmentType.value = null
  equipmentTypeModalVisible.value = true
}

// 设备类型弹窗成功回调
const handleEquipmentTypeModalSuccess = () => {
  equipmentTypeModalVisible.value = false
  loadData()
}

// 监听表格数据变化
watch(tableData, (_newData) => {
  // 数据变化监听
}, { deep: true })

// 初始化
onMounted(() => {
  loadData()
})
</script>

<style lang="scss" scoped>
.equipment-center-container {
  padding: 24px;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  min-height: 100vh;

  // 页面头部样式
  .page-header {
    background: white;
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 24px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);

    .header-content {
      display: flex;
      justify-content: space-between;
      align-items: center;
      
      .header-left {
        .page-title {
          display: flex;
          align-items: center;
          margin-bottom: 8px;
          
          h1 {
            margin: 0;
            font-size: 28px;
            font-weight: 700;
            color: var(--color-text-1);
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
          }
        }
        
        .page-description {
          color: var(--color-text-3);
          font-size: 14px;
          line-height: 1.6;
        }
      }
      
      .header-right {
        .arco-space {
          gap: 12px;
        }
      }
    }
  }

  // 统计卡片样式
  .stats-container {
    margin-bottom: 24px;
    
    .stat-card {
      border-radius: 12px;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
      transition: all 0.3s ease;
      
      &:hover {
        transform: translateY(-4px);
        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
      }
      
      .stat-content {
        display: flex;
        align-items: center;
        padding: 8px 0;
        
        .stat-icon {
          width: 60px;
          height: 60px;
          border-radius: 12px;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-right: 16px;
          color: white;
          font-size: 24px;
        }
        
        .stat-info {
          flex: 1;
          
          .stat-number {
            font-size: 28px;
            font-weight: 700;
            color: var(--color-text-1);
            line-height: 1;
            margin-bottom: 4px;
          }
          
          .stat-label {
            font-size: 14px;
            color: var(--color-text-3);
            font-weight: 500;
          }
        }
      }
    }
  }

  // 表格卡片样式
  .table-card {
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    overflow: visible; // 改为 visible，允许内容溢出
    min-height: 600px; // 设置最小高度，确保有足够的滚动空间
    
    .card-title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 20px 24px;
      border-bottom: 1px solid var(--color-border);
      
      span {
        font-size: 18px;
        font-weight: 600;
        color: var(--color-text-1);
      }
      
      .table-actions {
        .arco-space {
          gap: 8px;
        }
      }
    }
    
    .arco-table {
      // 确保表格可以正常滚动
      .arco-table-container {
        overflow: visible;
      }
      
      .arco-table-th {
        background: var(--color-fill-2);
        font-weight: 600;
        color: var(--color-text-1);
      }
      
      .arco-table-td {
        border-bottom: 1px solid var(--color-border);
      }
      
      .arco-table-tr:hover {
        background: var(--color-fill-1);
      }
      
      // 确保表格可以正常滚动
      .arco-table-body {
        overflow-y: auto;
        max-height: 500px; // 设置最大高度，确保可以滚动
      }
    }
  }

  // 状态点样式
  .status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
  }

  .normal-dot {
    background-color: #52c41a;
  }

  .maintenance-dot {
    background-color: #faad14;
  }

  .scrapped-dot {
    background-color: #ff4d4f;
  }

  // 标签样式优化
  .arco-tag {
    border-radius: 6px;
    font-weight: 500;
    font-size: 12px;
    padding: 2px 8px;
  }

  // 按钮样式优化
  .arco-btn {
    border-radius: 8px;
    font-weight: 500;
    transition: all 0.2s ease;
    
    &:hover {
      transform: translateY(-1px);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }
  }

  // 分页器容器样式 - 固定在表格下方
  .pagination-container {
    position: sticky;
    bottom: 0;
    background: white;
    padding: 16px 24px;
    border-top: 1px solid var(--color-border);
    display: flex;
    justify-content: flex-end;
    align-items: center;
    z-index: 10;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.06);
    
    .arco-pagination {
      margin: 0;
      
      .arco-pagination-item {
        border-radius: 6px;
        margin: 0 4px;
        
        &.arco-pagination-item-active {
          background: var(--color-primary);
          border-color: var(--color-primary);
        }
      }
      
      .arco-pagination-size-changer {
        margin-left: 16px;
      }
      
      .arco-pagination-jumper {
        margin-left: 16px;
      }
    }
  }

  // 响应式设计
  @media (max-width: 768px) {
    padding: 16px;
    
    .page-header {
      padding: 16px;
      
      .header-content {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
        
        .header-right {
          width: 100%;
          
          .arco-space {
            width: 100%;
            justify-content: space-between;
          }
        }
      }
    }
    
    .stats-container {
      .arco-col {
        margin-bottom: 16px;
      }
    }
  }
}
</style>
