<template>
  <div class="equipment-search-container">
    <!-- 搜索按钮 -->
    <div class="search-trigger">
      <a-button type="primary" @click="showSearchModal = true">
        <template #icon>
          <IconSearch />
        </template>
        搜索设备
      </a-button>
    </div>

    <!-- 搜索弹窗 -->
    <a-modal
      v-model:visible="showSearchModal"
      title="设备搜索"
      width="1000px"
      :footer="false"
      @cancel="handleCancel"
      class="search-modal"
    >
      <div class="search-content">
        <a-form layout="vertical" :model="searchForm" class="search-form">
          <a-row :gutter="24">
            <a-col :span="8">
              <a-form-item label="设备名称">
                <a-input
                  v-model="searchForm.equipmentName"
                  placeholder="请输入设备名称"
                  allow-clear
                  @input="debouncedSearch"
                />
              </a-form-item>
            </a-col>
            <a-col :span="8">
              <a-form-item label="设备类型">
                <a-select
                  v-model="searchForm.equipmentType"
                  :options="equipmentTypeOptions"
                  placeholder="请选择设备类型"
                  allow-clear
                  @change="debouncedSearch"
                />
              </a-form-item>
            </a-col>
            <a-col :span="8">
              <a-form-item label="设备状态">
                <a-select
                  v-model="searchForm.equipmentStatus"
                  :options="equipmentStatusOptions"
                  placeholder="请选择设备状态"
                  allow-clear
                  @change="debouncedSearch"
                />
              </a-form-item>
            </a-col>
          </a-row>

          <a-row :gutter="24">
            <a-col :span="8">
              <a-form-item label="位置状态">
                <a-select
                  v-model="searchForm.locationStatus"
                  :options="locationStatusOptions"
                  placeholder="请选择位置状态"
                  allow-clear
                  @change="debouncedSearch"
                />
              </a-form-item>
            </a-col>
            <a-col :span="8">
              <a-form-item label="健康状态">
                <a-select
                  v-model="searchForm.healthStatus"
                  :options="healthStatusOptions"
                  placeholder="请选择健康状态"
                  allow-clear
                  @change="debouncedSearch"
                />
              </a-form-item>
            </a-col>
            <a-col :span="8">
              <a-form-item label="使用状态">
                <a-select
                  v-model="searchForm.useStatus"
                  :options="useStatusOptions"
                  placeholder="请选择使用状态"
                  allow-clear
                  @change="debouncedSearch"
                />
              </a-form-item>
            </a-col>
          </a-row>

          <a-row :gutter="24">
            <a-col :span="8">
              <a-form-item label="使用部门/人">
                <a-input
                  v-model="searchForm.usingDepartment"
                  placeholder="请输入使用部门/人"
                  allow-clear
                  @input="debouncedSearch"
                />
              </a-form-item>
            </a-col>
            <a-col :span="8">
              <a-form-item label="负责人">
                <a-input
                  v-model="searchForm.responsiblePerson"
                  placeholder="请输入负责人"
                  allow-clear
                  @input="debouncedSearch"
                />
              </a-form-item>
            </a-col>
            <a-col :span="8">
              <a-form-item label="维护人员">
                <a-input
                  v-model="searchForm.maintenancePerson"
                  placeholder="请输入维护人员"
                  allow-clear
                  @input="debouncedSearch"
                />
              </a-form-item>
            </a-col>
          </a-row>

          <a-row :gutter="24">
            <a-col :span="8">
              <a-form-item label="序列号">
                <a-input
                  v-model="searchForm.equipmentSn"
                  placeholder="请输入序列号"
                  allow-clear
                  @input="debouncedSearch"
                />
              </a-form-item>
            </a-col>
            <a-col :span="8">
              <a-form-item label="资产编号">
                <a-input
                  v-model="searchForm.assetCode"
                  placeholder="请输入资产编号"
                  allow-clear
                  @input="debouncedSearch"
                />
              </a-form-item>
            </a-col>
            <a-col :span="8">
              <a-form-item label="品牌">
                <a-input
                  v-model="searchForm.brand"
                  placeholder="请输入品牌"
                  allow-clear
                  @input="debouncedSearch"
                />
              </a-form-item>
            </a-col>
          </a-row>

          <a-row :gutter="24">
            <a-col :span="8">
              <a-form-item label="设备型号">
                <a-input
                  v-model="searchForm.equipmentModel"
                  placeholder="请输入设备型号"
                  allow-clear
                  @input="debouncedSearch"
                />
              </a-form-item>
            </a-col>
            <a-col :span="8">
              <a-form-item label="物理位置">
                <a-input
                  v-model="searchForm.physicalLocation"
                  placeholder="请输入物理位置"
                  allow-clear
                  @input="debouncedSearch"
                />
              </a-form-item>
            </a-col>
            <a-col :span="8">
              <a-form-item label="供应商">
                <a-input
                  v-model="searchForm.supplierName"
                  placeholder="请输入供应商"
                  allow-clear
                  @input="debouncedSearch"
                />
              </a-form-item>
            </a-col>
          </a-row>

          <a-row :gutter="24">
            <a-col :span="8">
              <a-form-item label="发票">
                <a-input
                  v-model="searchForm.invoice"
                  placeholder="请输入发票"
                  allow-clear
                  @input="debouncedSearch"
                />
              </a-form-item>
            </a-col>
            <a-col :span="8">
              <a-form-item label="条码">
                <a-input
                  v-model="searchForm.barcode"
                  placeholder="请输入条码"
                  allow-clear
                  @input="debouncedSearch"
                />
              </a-form-item>
            </a-col>
            <a-col :span="8">
              <a-form-item label="库存条码">
                <a-input
                  v-model="searchForm.inventoryBarcode"
                  placeholder="请输入库存条码"
                  allow-clear
                  @input="debouncedSearch"
                />
              </a-form-item>
            </a-col>
          </a-row>

          <a-row :gutter="24">
            <a-col :span="12">
              <a-form-item label="规格型号">
                <a-input
                  v-model="searchForm.specification"
                  placeholder="请输入规格型号"
                  allow-clear
                  @input="debouncedSearch"
                />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="资产备注">
                <a-input
                  v-model="searchForm.assetRemark"
                  placeholder="请输入资产备注"
                  allow-clear
                  @input="debouncedSearch"
                />
              </a-form-item>
            </a-col>
          </a-row>

          <!-- 搜索操作按钮 -->
          <div class="search-actions">
            <a-space>
              <a-button type="primary" @click="handleSearch" :loading="loading">
                <template #icon>
                  <IconSearch />
                </template>
                搜索
              </a-button>
              <a-button @click="handleReset">
                <template #icon>
                  <IconRefresh />
                </template>
                重置
              </a-button>
              <a-button @click="handleCancel">
                取消
              </a-button>
            </a-space>
          </div>
        </a-form>
      </div>
    </a-modal>
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue'
import { IconRefresh, IconSearch } from '@arco-design/web-vue/es/icon'
import type { EquipmentPageQuery } from '@/types/equipment.d'

interface Props {
  loading?: boolean
}

// eslint-disable-next-line unused-imports/no-unused-vars
const props = withDefaults(defineProps<Props>(), {
  loading: false,
})

const emit = defineEmits<{
  search: [params: EquipmentPageQuery]
  reset: []
}>()

// 弹窗控制
const showSearchModal = ref(false)

// 防抖函数
// eslint-disable-next-line ts/no-unsafe-function-type
const debounce = (func: Function, delay: number) => {
  let timeoutId: NodeJS.Timeout
  return (...args: any[]) => {
    clearTimeout(timeoutId)
    // eslint-disable-next-line prefer-spread
    timeoutId = setTimeout(() => func.apply(null, args), delay)
  }
}

const searchForm = reactive<EquipmentPageQuery>({
  equipmentName: '',
  equipmentType: '',
  equipmentStatus: '',
  locationStatus: '',
  healthStatus: '',
  usingDepartment: '',
  invoice: '',
  barcode: '',
  importer: '',
  equipmentSn: '',
  assetCode: '',
  brand: '',
  responsiblePerson: '',
  useStatus: '',
  equipmentModel: '',
  specification: '',
  physicalLocation: '',
  supplierName: '',
  maintenancePerson: '',
  inventoryBarcode: '',
  assetRemark: '',
})

const equipmentTypeOptions = [
  { label: '计算机设备', value: 'computer' },
  { label: '网络设备', value: 'network' },
  { label: '存储设备', value: 'storage' },
  { label: '安全设备', value: 'security' },
  { label: '办公设备', value: 'office' },
  { label: '其他设备', value: 'other' },
]

const equipmentStatusOptions = [
  { label: '正常', value: 'normal' },
  { label: '维修中', value: 'repair' },
  { label: '报废', value: 'scrap' },
  { label: '闲置', value: 'idle' },
]

const locationStatusOptions = [
  { label: '在库', value: 'in_stock' },
  { label: '已分配', value: 'allocated' },
  { label: '外借中', value: 'borrowed' },
  { label: '维修中', value: 'repair' },
  { label: '已报废', value: 'scrapped' },
]

const healthStatusOptions = [
  { label: '良好', value: 'good' },
  { label: '一般', value: 'normal' },
  { label: '较差', value: 'poor' },
  { label: '故障', value: 'fault' },
]

const useStatusOptions = [
  { label: '空闲中', value: '0' },
  { label: '使用中', value: '1' },
]

// 防抖搜索函数
const debouncedSearch = debounce(() => {
  console.log('🔍 EquipmentSearch - 防抖搜索触发')
  console.log('🔍 EquipmentSearch - 搜索表单数据:', searchForm)
  emit('search', { ...searchForm })
}, 300)

const handleSearch = () => {
  console.log('🔍 EquipmentSearch - 搜索按钮被点击')
  console.log('🔍 EquipmentSearch - 搜索表单数据:', searchForm)
  console.log('🔍 EquipmentSearch - 发送的搜索参数:', { ...searchForm })
  emit('search', { ...searchForm })
  showSearchModal.value = false
}

const handleReset = () => {
  console.log('🔄 EquipmentSearch - 重置按钮被点击')
  console.log('🔄 EquipmentSearch - 重置前的表单数据:', { ...searchForm })
  Object.keys(searchForm).forEach((key) => {
    searchForm[key as keyof EquipmentPageQuery] = '' as any
  })
  console.log('🔄 EquipmentSearch - 重置后的表单数据:', { ...searchForm })
  emit('reset')
}

const handleCancel = () => {
  showSearchModal.value = false
}

defineExpose({
  reset: handleReset,
  getSearchForm: () => ({ ...searchForm }),
  showModal: () => { showSearchModal.value = true },
})
</script>

<style lang="scss" scoped>
.equipment-search-container {
  .search-trigger {
    margin-bottom: 16px;
  }
}

.search-modal {
  .arco-modal-header {
    padding: 20px 24px 16px;
    border-bottom: 1px solid var(--color-border);
    
    .arco-modal-title {
      font-size: 18px;
      font-weight: 600;
      color: var(--color-text-1);
    }
  }
  
  .arco-modal-body {
    padding: 24px;
  }
}

.search-content {
  .search-form {
    .arco-form-item {
      margin-bottom: 20px;
      
      .arco-form-item-label {
        font-weight: 500;
        color: var(--color-text-1);
        margin-bottom: 8px;
        font-size: 14px;
      }
    }
    
    .arco-input,
    .arco-select {
      border-radius: 6px;
      border: 1px solid var(--color-border);
      transition: all 0.2s ease;
      
      &:hover {
        border-color: var(--color-primary-light-3);
      }
      
      &:focus,
      &.arco-input-focus,
      &.arco-select-focus {
        border-color: var(--color-primary);
        box-shadow: 0 0 0 2px rgba(var(--primary-6), 0.1);
      }
    }
    
    .arco-input-inner {
      padding: 8px 12px;
      font-size: 14px;
    }
    
    .arco-select-view {
      padding: 8px 12px;
      font-size: 14px;
    }
    
    .arco-select-arrow {
      color: var(--color-text-3);
    }
    
    .arco-input-inner::placeholder {
      color: var(--color-text-3);
      font-size: 14px;
    }
    
    .arco-input-clear-btn {
      color: var(--color-text-3);
      
      &:hover {
        color: var(--color-text-2);
      }
    }
  }
  
  .search-actions {
    display: flex;
    justify-content: center;
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid var(--color-border);
  }
}
</style>
