<template>
  <a-button type="primary" @click="showSearchModal = true">
    <template #icon>
      <IconSearch />
    </template>
    搜索采购
  </a-button>

  <!-- 搜索弹窗 -->
  <a-modal
    v-model:visible="showSearchModal"
    title="采购记录搜索"
    width="1000px"
  >
    <a-form
      ref="formRef"
      :model="searchForm"
      layout="vertical"
      class="search-form"
    >
      <a-row :gutter="24">
        <a-col :span="8">
          <a-form-item label="设备名称">
            <a-input
              v-model="searchForm.equipmentName"
              placeholder="请输入设备名称"
              allow-clear
            />
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="设备型号">
            <a-input
              v-model="searchForm.equipmentModel"
              placeholder="请输入设备型号"
              allow-clear
            />
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="设备类型">
            <a-select
              v-model="searchForm.equipmentType"
              placeholder="请选择设备类型"
              allow-clear
            >
              <a-option value="detection">检测设备</a-option>
              <a-option value="security">安防设备</a-option>
              <a-option value="office">办公设备</a-option>
              <a-option value="car">车辆</a-option>
            </a-select>
          </a-form-item>
        </a-col>
      </a-row>

      <a-row :gutter="24">
        <a-col :span="8">
          <a-form-item label="品牌">
            <a-input
              v-model="searchForm.brand"
              placeholder="请输入品牌"
              allow-clear
            />
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="供应商">
            <a-input
              v-model="searchForm.supplierName"
              placeholder="请输入供应商名称"
              allow-clear
            />
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="采购订单">
            <a-input
              v-model="searchForm.purchaseOrder"
              placeholder="请输入采购订单号"
              allow-clear
            />
          </a-form-item>
        </a-col>
      </a-row>

      <a-row :gutter="24">
        <a-col :span="8">
          <a-form-item label="设备状态">
            <a-select
              v-model="searchForm.equipmentStatus"
              placeholder="请选择设备状态"
              allow-clear
            >
              <a-option value="normal">正常</a-option>
              <a-option value="repair">维修中</a-option>
              <a-option value="maintain">保养中</a-option>
              <a-option value="scrap">报废</a-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="位置状态">
            <a-select
              v-model="searchForm.locationStatus"
              placeholder="请选择位置状态"
              allow-clear
            >
              <a-option value="not_in_stock">未入库</a-option>
              <a-option value="in_stock">库存中</a-option>
              <a-option value="allocated">已分配</a-option>
              <a-option value="repair">维修中</a-option>
              <a-option value="scrap">待报废</a-option>
              <a-option value="scrapped">已报废</a-option>
              <a-option value="borrowed">外借中</a-option>
              <a-option value="lost">丢失</a-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="健康状态">
            <a-select
              v-model="searchForm.healthStatus"
              placeholder="请选择健康状态"
              allow-clear
            >
              <a-option value="excellent">优秀</a-option>
              <a-option value="good">良好</a-option>
              <a-option value="normal">一般</a-option>
              <a-option value="poor">较差</a-option>
              <a-option value="critical">危险</a-option>
            </a-select>
          </a-form-item>
        </a-col>
      </a-row>

      <a-row :gutter="24">
        <a-col :span="8">
          <a-form-item label="负责人">
            <a-input
              v-model="searchForm.responsiblePerson"
              placeholder="请输入负责人"
              allow-clear
            />
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="维护人员">
            <a-input
              v-model="searchForm.maintenancePerson"
              placeholder="请输入维护人员"
              allow-clear
            />
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="物理位置">
            <a-input
              v-model="searchForm.physicalLocation"
              placeholder="请输入物理位置"
              allow-clear
            />
          </a-form-item>
        </a-col>
      </a-row>

      <a-row :gutter="24">
        <a-col :span="8">
          <a-form-item label="资产编号">
            <a-input
              v-model="searchForm.assetCode"
              placeholder="请输入资产编号"
              allow-clear
            />
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="设备序列号">
            <a-input
              v-model="searchForm.equipmentSn"
              placeholder="请输入设备序列号"
              allow-clear
            />
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="库存条码">
            <a-input
              v-model="searchForm.inventoryBarcode"
              placeholder="请输入库存条码"
              allow-clear
            />
          </a-form-item>
        </a-col>
      </a-row>

      <a-row :gutter="24">
        <a-col :span="8">
          <a-form-item label="采购时间范围">
            <a-range-picker
              v-model="searchForm.purchaseTimeRange"
              show-time
              placeholder="['开始时间', '结束时间']"
              style="width: 100%"
            />
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="入库时间范围">
            <a-range-picker
              v-model="searchForm.inStockTimeRange"
              show-time
              placeholder="['开始时间', '结束时间']"
              style="width: 100%"
            />
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="启用时间范围">
            <a-range-picker
              v-model="searchForm.activationTimeRange"
              show-time
              placeholder="['开始时间', '结束时间']"
              style="width: 100%"
            />
          </a-form-item>
        </a-col>
      </a-row>

      <a-row :gutter="24">
        <a-col :span="8">
          <a-form-item label="价格范围">
            <a-input-number
              v-model="searchForm.minPrice"
              placeholder="最低价格"
              :min="0"
              style="width: 100%"
            />
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="至">
            <a-input-number
              v-model="searchForm.maxPrice"
              placeholder="最高价格"
              :min="0"
              style="width: 100%"
            />
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="配置规格">
            <a-input
              v-model="searchForm.specification"
              placeholder="请输入配置规格关键词"
              allow-clear
            />
          </a-form-item>
        </a-col>
      </a-row>

      <a-row :gutter="24">
        <a-col :span="24">
          <a-form-item label="备注">
            <a-input
              v-model="searchForm.assetRemark"
              placeholder="请输入备注关键词"
              allow-clear
            />
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>

    <template #footer>
      <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="showSearchModal = false">
            取消
          </a-button>
        </a-space>
      </div>
    </template>
  </a-modal>
</template>

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

interface Props {
  loading?: boolean
}

interface Emits {
  (e: 'search', params: EquipmentListReq): void
  (e: 'reset'): void
}

const props = withDefaults(defineProps<Props>(), {
  loading: false,
})

const emit = defineEmits<Emits>()

const showSearchModal = ref(false)
const formRef = ref()

// 搜索表单
const searchForm = reactive({
  equipmentName: '',
  equipmentModel: '',
  equipmentType: '',
  brand: '',
  supplierName: '',
  purchaseOrder: '',
  equipmentStatus: '',
  locationStatus: '',
  healthStatus: '',
  responsiblePerson: '',
  maintenancePerson: '',
  physicalLocation: '',
  assetCode: '',
  equipmentSn: '',
  inventoryBarcode: '',
  purchaseTimeRange: [],
  inStockTimeRange: [],
  activationTimeRange: [],
  minPrice: undefined,
  maxPrice: undefined,
  specification: '',
  assetRemark: '',
})

// 搜索
const handleSearch = () => {
  const params: EquipmentListReq = {
    equipmentName: searchForm.equipmentName || undefined,
    equipmentModel: searchForm.equipmentModel || undefined,
    equipmentType: searchForm.equipmentType || undefined,
    brand: searchForm.brand || undefined,
    supplierName: searchForm.supplierName || undefined,
    purchaseOrder: searchForm.purchaseOrder || undefined,
    equipmentStatus: searchForm.equipmentStatus || undefined,
    locationStatus: searchForm.locationStatus || undefined,
    healthStatus: searchForm.healthStatus || undefined,
    responsiblePerson: searchForm.responsiblePerson || undefined,
    maintenancePerson: searchForm.maintenancePerson || undefined,
    physicalLocation: searchForm.physicalLocation || undefined,
    assetCode: searchForm.assetCode || undefined,
    equipmentSn: searchForm.equipmentSn || undefined,
    inventoryBarcode: searchForm.inventoryBarcode || undefined,
    specification: searchForm.specification || undefined,
    assetRemark: searchForm.assetRemark || undefined,
  }

  // 处理时间范围
  if (searchForm.purchaseTimeRange && searchForm.purchaseTimeRange.length === 2) {
    params.purchaseTimeStart = searchForm.purchaseTimeRange[0]
    params.purchaseTimeEnd = searchForm.purchaseTimeRange[1]
  }

  if (searchForm.inStockTimeRange && searchForm.inStockTimeRange.length === 2) {
    params.inStockTimeStart = searchForm.inStockTimeRange[0]
    params.inStockTimeEnd = searchForm.inStockTimeRange[1]
  }

  if (searchForm.activationTimeRange && searchForm.activationTimeRange.length === 2) {
    params.activationTimeStart = searchForm.activationTimeRange[0]
    params.activationTimeEnd = searchForm.activationTimeRange[1]
  }

  // 处理价格范围
  if (searchForm.minPrice !== undefined) {
    params.minPrice = searchForm.minPrice
  }

  if (searchForm.maxPrice !== undefined) {
    params.maxPrice = searchForm.maxPrice
  }

  emit('search', params)
  showSearchModal.value = false
}

// 重置
const handleReset = () => {
  Object.keys(searchForm).forEach(key => {
    if (Array.isArray(searchForm[key])) {
      searchForm[key] = []
    } else {
      searchForm[key] = ''
    }
  })
  formRef.value?.resetFields()
  emit('reset')
  showSearchModal.value = false
}
</script>

<style scoped lang="scss">
.search-form {
  .arco-form-item {
    margin-bottom: 16px;
    
    .arco-form-item-label {
      font-weight: 500;
      color: var(--color-text-1);
      margin-bottom: 8px;
    }
  }
  
  .arco-input,
  .arco-select,
  .arco-input-number {
    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-range-picker {
    border-radius: 6px;
    border: 1px solid var(--color-border);
    transition: all 0.2s ease;
    
    &:hover {
      border-color: var(--color-primary-light-3);
    }
    
    &:focus,
    &.arco-range-picker-focus {
      border-color: var(--color-primary);
      box-shadow: 0 0 0 2px rgba(var(--primary-6), 0.1);
    }
  }
}

.search-actions {
  display: flex;
  justify-content: center;
  padding-top: 16px;
  border-top: 1px solid var(--color-border);
  
  .arco-btn {
    border-radius: 6px;
    font-weight: 500;
    min-width: 80px;
  }
}

// 响应式设计
@media (max-width: 768px) {
  .search-form {
    .arco-row {
      .arco-col {
        margin-bottom: 8px;
      }
    }
  }
  
  .search-actions {
    .arco-space {
      width: 100%;
      justify-content: space-between;
    }
  }
}
</style>
