<template>
  <a-modal
    :visible="visible"
    title="设备类型管理"
    width="600px"
    :confirm-loading="loading"
    @cancel="handleCancel"
    @ok="handleSubmit"
  >
    <a-form
      ref="formRef"
      :model="formData"
      :rules="rules"
      :label-col="{ span: 6 }"
      :wrapper-col="{ span: 18 }"
      layout="vertical"
    >
      <a-form-item label="类型名称" field="typeName" required>
        <a-input
          v-model="formData.typeName"
          placeholder="请输入设备类型名称"
          show-word-limit
          :max-length="50"
        />
      </a-form-item>
      
      <a-form-item label="类型编码" field="typeCode" required>
        <a-input
          v-model="formData.typeCode"
          placeholder="请输入设备类型编码"
          show-word-limit
          :max-length="20"
        />
      </a-form-item>
      
      <a-form-item label="类型描述" field="description">
        <a-textarea
          v-model="formData.description"
          placeholder="请输入设备类型描述"
          :rows="4"
          show-word-limit
          :max-length="200"
        />
      </a-form-item>
      
      <a-form-item label="排序" field="sort">
        <a-input-number
          v-model="formData.sort"
          placeholder="请输入排序值"
          :min="0"
          :max="999"
          style="width: 100%"
        />
      </a-form-item>
      
      <a-form-item label="状态" field="status">
        <a-select
          v-model="formData.status"
          placeholder="请选择状态"
          style="width: 100%"
        >
          <a-option value="1">启用</a-option>
          <a-option value="0">禁用</a-option>
        </a-select>
      </a-form-item>
    </a-form>
  </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 Props {
  visible: boolean
  typeData?: any
  mode: 'add' | 'edit'
}

interface FormDataType {
  typeName: string
  typeCode: string
  description: string
  sort: number
  status: string
}

const props = withDefaults(defineProps<Props>(), {
  visible: false,
  typeData: null,
  mode: 'add',
})

const emit = defineEmits<{
  'update:visible': [value: boolean]
  'success': []
}>()

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

// 表单数据
const formData = reactive<FormDataType>({
  typeName: '',
  typeCode: '',
  description: '',
  sort: 0,
  status: '1'
})

// 表单验证规则
const rules = {
  typeName: [
    { required: true, message: '请输入设备类型名称' },
    { min: 2, max: 50, message: '类型名称长度应在2-50个字符之间' }
  ],
  typeCode: [
    { required: true, message: '请输入设备类型编码' },
    { min: 2, max: 20, message: '类型编码长度应在2-20个字符之间' },
    { pattern: /^[A-Z_]+$/, message: '类型编码只能包含大写字母和下划线' }
  ],
  description: [
    { max: 200, message: '类型描述不能超过200个字符' }
  ],
  sort: [
    { type: 'number', min: 0, max: 999, message: '排序值应在0-999之间' }
  ]
}

// 监听数据变化
watch(() => props.typeData, (newData) => {
  if (newData) {
    Object.assign(formData, {
      typeName: newData.typeName || '',
      typeCode: newData.typeCode || '',
      description: newData.description || '',
      sort: newData.sort || 0,
      status: newData.status || '1'
    })
  }
}, { immediate: true })

// 监听弹窗显示状态
watch(() => props.visible, (visible) => {
  if (visible && props.mode === 'add') {
    // 新增模式时重置表单
    Object.assign(formData, {
      typeName: '',
      typeCode: '',
      description: '',
      sort: 0,
      status: '1'
    })
    formRef.value?.clearValidate()
  }
})

// 提交表单
const handleSubmit = async () => {
  try {
    await formRef.value?.validate()
    loading.value = true
    
    // 这里应该调用API保存数据
    // 暂时模拟保存成功
    await new Promise(resolve => setTimeout(resolve, 1000))
    
    Message.success(props.mode === 'add' ? '设备类型添加成功' : '设备类型更新成功')
    emit('success')
    emit('update:visible', false)
  } catch (error) {
    console.error('保存失败:', error)
    Message.error('保存失败，请检查表单信息')
  } finally {
    loading.value = false
  }
}

// 取消
const handleCancel = () => {
  emit('update:visible', false)
}
</script>

<style scoped lang="scss">
.arco-form-item {
  margin-bottom: 20px;
}

.arco-input,
.arco-textarea,
.arco-select,
.arco-input-number {
  border-radius: 6px;
}

.arco-textarea {
  resize: vertical;
}
</style>
