<template>
  <a-modal
    v-model:visible="visible"
    title="新增设备"
    :width="600"
    :mask-closable="false"
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <a-form
      ref="formRef"
      :model="formData"
      :rules="rules"
      layout="vertical"
      :label-col-style="{ fontWeight: 'bold' }"
    >
      <a-form-item
        label="设备名称"
        field="deviceName"
        :required="true"
      >
        <a-input
          v-model="formData.deviceName"
          placeholder="请输入设备名称"
          allow-clear
        />
      </a-form-item>

      <a-form-item
        label="设备类型"
        field="deviceType"
        :required="true"
      >
        <a-select
          v-model="formData.deviceType"
          placeholder="请选择设备类型"
          allow-clear
        >
          <a-option value="检测设备">检测设备</a-option>
          <a-option value="安全设备">安全设备</a-option>
          <a-option value="车辆">车辆</a-option>
        </a-select>
      </a-form-item>

      <a-form-item
        label="型号"
        field="model"
      >
        <a-input
          v-model="formData.model"
          placeholder="请输入设备型号"
          allow-clear
        />
      </a-form-item>

      <a-form-item
        label="序列号"
        field="serialNumber"
      >
        <a-input
          v-model="formData.serialNumber"
          placeholder="请输入序列号"
          allow-clear
        />
      </a-form-item>

      <a-form-item
        label="购买日期"
        field="purchaseDate"
      >
        <a-date-picker
          v-model="formData.purchaseDate"
          placeholder="选择日期"
          style="width: 100%"
          allow-clear
        />
      </a-form-item>

      <a-form-item
        label="价格(元)"
        field="price"
      >
        <a-input-number
          v-model="formData.price"
          placeholder="0.00"
          :min="0"
          :precision="2"
          style="width: 100%"
        />
      </a-form-item>

      <a-form-item
        label="供应商"
        field="supplier"
      >
        <a-input
          v-model="formData.supplier"
          placeholder="请输入供应商"
          allow-clear
        />
      </a-form-item>

      <a-form-item
        label="状态"
        field="status"
      >
        <a-select
          v-model="formData.status"
          placeholder="请选择状态"
        >
          <a-option value="available">可用</a-option>
          <a-option value="using">使用中</a-option>
          <a-option value="maintenance">维修中</a-option>
        </a-select>
      </a-form-item>

      <a-form-item
        label="备注"
        field="remark"
      >
        <a-textarea
          v-model="formData.remark"
          placeholder="请输入备注信息"
          :max-length="200"
          show-word-limit
          :rows="4"
        />
      </a-form-item>
    </a-form>

    <template #footer>
      <a-button @click="handleCancel">取消</a-button>
      <a-button type="primary" @click="handleOk" :loading="loading">确定</a-button>
    </template>
  </a-modal>
</template>

<script setup lang="ts">
import { ref, reactive, watch } from 'vue'
import { Message } from '@arco-design/web-vue'
import type { FormInstance } from '@arco-design/web-vue'

interface DeviceFormData {
  deviceName: string
  deviceType: string
  model: string
  serialNumber: string
  purchaseDate: string
  price: number | undefined
  supplier: string
  status: string
  remark: string
}

// Props
interface Props {
  visible: boolean
}

// Emits
interface Emits {
  (e: 'update:visible', value: boolean): void
  (e: 'save-success'): void
}

const props = defineProps<Props>()
const emit = defineEmits<Emits>()

// Form ref
const formRef = ref<FormInstance>()
const loading = ref(false)

// Form data
const formData = reactive<DeviceFormData>({
  deviceName: '',
  deviceType: '',
  model: '',
  serialNumber: '',
  purchaseDate: '',
  price: undefined,
  supplier: '',
  status: 'available',
  remark: ''
})

// Form rules
const rules = {
  deviceName: [
    { required: true, message: '请输入设备名称' }
  ],
  deviceType: [
    { required: true, message: '请选择设备类型' }
  ]
}

// Watch visible prop
const visible = ref(props.visible)
watch(() => props.visible, (newVal) => {
  visible.value = newVal
})

watch(visible, (newVal) => {
  emit('update:visible', newVal)
})

// Handle OK
const handleOk = async () => {
  try {
    const valid = await formRef.value?.validate()
    if (!valid) {
      loading.value = true
      
      // 这里应该调用API保存设备数据
      // await saveDevice(formData)
      
      // 模拟API调用
      setTimeout(() => {
        loading.value = false
        Message.success('设备添加成功')
        emit('save-success')
        handleCancel()
      }, 1000)
    }
  } catch (error) {
    console.error('表单验证失败:', error)
  }
}

// Handle Cancel
const handleCancel = () => {
  visible.value = false
  resetForm()
}

// Reset form
const resetForm = () => {
  formRef.value?.resetFields()
  Object.assign(formData, {
    deviceName: '',
    deviceType: '',
    model: '',
    serialNumber: '',
    purchaseDate: '',
    price: undefined,
    supplier: '',
    status: 'available',
    remark: ''
  })
}

// Expose methods
defineExpose({
  resetForm
})
</script>

<style scoped>
:deep(.arco-form-item-label) {
  font-weight: 500;
}
</style> 