<script setup lang="ts">
import type { FormInstance } from 'antdv-next'
import apiAssetDevice from '@/api/modules/assetDevice'
import apiBaseModel from '@/api/modules/baseModel'
import apiBaseCategory from '@/api/modules/baseCategory'
import apiBaseLocation from '@/api/modules/baseLocation'
import apiBaseSupplier from '@/api/modules/baseSupplier'
import apiAssetDepreciation from '@/api/modules/assetDepreciation'

export interface Props { id?: number | string }
const props = withDefaults(defineProps<Props>(), { id: '' })

const loading = ref(false)
const formRef = useTemplateRef<FormInstance>('formRef')
const form = ref({
  id: props.id as number | string,
  name: '', serial: '', device_no: '', model_id: undefined as number | undefined,
  category_id: undefined as number | undefined, assets_status: '1',
  location_id: undefined as number | undefined, supplier_id: undefined as number | undefined,
  depreciation_id: undefined as number | undefined,
  purchase_date: '', purchase_cost: undefined as number | undefined,
  warranty_date: '', assigned_to: undefined as number | undefined,
  description: '',
})

const rules = {
  name: [{ required: true, message: '请输入设备名称', trigger: 'blur' }],
  model_id: [{ required: true, message: '请选择型号', trigger: 'change' }],
}

const modelOptions = ref<{ value: number; label: string }[]>([])
const categoryOptions = ref<{ value: number; label: string }[]>([])
const locationOptions = ref<{ value: number; label: string }[]>([])
const supplierOptions = ref<{ value: number; label: string }[]>([])
const depreciationOptions = ref<{ value: number; label: string }[]>([])

onMounted(() => {
  apiBaseModel.list().then((res: any) => { modelOptions.value = res.data.map((i: any) => ({ value: i.id, label: i.name })) })
  apiBaseCategory.list().then((res: any) => { categoryOptions.value = res.data.map((i: any) => ({ value: i.id, label: i.name })) })
  apiBaseLocation.list().then((res: any) => { locationOptions.value = res.data.map((i: any) => ({ value: i.id, label: i.name })) })
  apiBaseSupplier.list().then((res: any) => { supplierOptions.value = res.data.map((i: any) => ({ value: i.id, label: i.name })) })
  apiAssetDepreciation.page({}).then((res: any) => { depreciationOptions.value = (res.data.list || []).map((i: any) => ({ value: i.id, label: i.name })) })
  if (form.value.id !== '') getInfo()
})

function getInfo() {
  loading.value = true
  apiAssetDevice.detail(form.value.id as number).then((res: any) => {
    loading.value = false
    const d = res.data
    Object.assign(form.value, {
      name: d.name, serial: d.serial, device_no: d.device_no,
      model_id: d.model_id, category_id: d.category_id, assets_status: d.assets_status,
      location_id: d.location_id, supplier_id: d.supplier_id, depreciation_id: d.depreciation_id,
      purchase_date: d.purchase_date, purchase_cost: d.purchase_cost,
      warranty_date: d.warranty_date, assigned_to: d.assigned_to, description: d.description,
    })
  }).catch(() => { loading.value = false })
}

defineExpose({
  submit() {
    return new Promise<void>((resolve) => {
      formRef.value?.validate().then(() => {
        apiAssetDevice.save(form.value).then(() => { faToast.success(form.value.id ? '编辑成功' : '新增成功'); resolve() })
      }).catch(() => {})
    })
  },
})
</script>

<template>
  <div v-if="loading" class="flex-center py-12">
    <ASpin />
  </div>
  <AForm v-else ref="formRef" :model="form" :rules="rules" :label-col="{ span: 5 }">
    <AFormItem label="设备名称" name="name">
      <AInput v-model:value="form.name" placeholder="请输入设备名称" />
    </AFormItem>
    <AFormItem label="型号" name="model_id">
      <ASelect v-model:value="form.model_id" placeholder="请选择型号" show-search :filter-option="(input: string, option: any) => option.label?.toLowerCase().includes(input.toLowerCase())" :options="modelOptions" />
    </AFormItem>
    <AFormItem label="设备编号" name="device_no">
      <AInput v-model:value="form.device_no" placeholder="请输入设备编号" />
    </AFormItem>
    <AFormItem label="序列号" name="serial">
      <AInput v-model:value="form.serial" placeholder="请输入序列号" />
    </AFormItem>
    <AFormItem label="分类" name="category_id">
      <ASelect v-model:value="form.category_id" placeholder="请选择分类" allow-clear show-search :filter-option="(input: string, option: any) => option.label?.toLowerCase().includes(input.toLowerCase())" :options="categoryOptions" />
    </AFormItem>
    <AFormItem label="设备状态" name="assets_status">
      <ASelect v-model:value="form.assets_status" :options="[
        { value: '1', label: '在库' }, { value: '2', label: '在用' },
        { value: '3', label: '维修' }, { value: '4', label: '报废' },
      ]" />
    </AFormItem>
    <AFormItem label="存放位置" name="location_id">
      <ASelect v-model:value="form.location_id" placeholder="请选择位置" allow-clear show-search :filter-option="(input: string, option: any) => option.label?.toLowerCase().includes(input.toLowerCase())" :options="locationOptions" />
    </AFormItem>
    <AFormItem label="供应商" name="supplier_id">
      <ASelect v-model:value="form.supplier_id" placeholder="请选择供应商" allow-clear show-search :filter-option="(input: string, option: any) => option.label?.toLowerCase().includes(input.toLowerCase())" :options="supplierOptions" />
    </AFormItem>
    <AFormItem label="折旧规则" name="depreciation_id">
      <ASelect v-model:value="form.depreciation_id" placeholder="请选择折旧规则" allow-clear :options="depreciationOptions" />
    </AFormItem>
    <AFormItem label="购买日期" name="purchase_date">
      <ADatePicker v-model:value="form.purchase_date" value-format="YYYY-MM-DD" class="w-full" />
    </AFormItem>
    <AFormItem label="购买成本" name="purchase_cost">
      <AInputNumber v-model:value="form.purchase_cost" placeholder="请输入购买成本" :precision="2" class="w-full" />
    </AFormItem>
    <AFormItem label="过保日期" name="warranty_date">
      <ADatePicker v-model:value="form.warranty_date" value-format="YYYY-MM-DD" class="w-full" />
    </AFormItem>
    <AFormItem label="描述" name="description">
      <ATextarea v-model:value="form.description" placeholder="请输入描述" :rows="3" />
    </AFormItem>
  </AForm>
</template>
