<template>
  <Dialog :title="dialogTitle" v-model="dialogVisible" width="720px">
    <el-form ref="formRef" :model="formData" :rules="formRules" label-width="90px" v-loading="formLoading">
      <el-form-item :label="t('EquipmentManagement.EquipmentKeyItems.code')" prop="code">
        <el-input
          v-model="formData.code"
          :placeholder="t('EquipmentManagement.EquipmentKeyItems.placeholderCode')"
          clearable
          :disabled="formType === 'update'"
        />
      </el-form-item>
      <el-form-item :label="t('EquipmentManagement.EquipmentKeyItems.name')" prop="name">
        <el-input
          v-model="formData.name"
          :placeholder="t('EquipmentManagement.EquipmentKeyItems.placeholderName')"
          clearable
        />
      </el-form-item>
      <el-form-item :label="t('EquipmentManagement.EquipmentKeyItems.description')" prop="description">
        <el-input
          v-model="formData.description"
          :placeholder="t('EquipmentManagement.EquipmentKeyItems.placeholderDescription')"
          clearable
          type="textarea"
        />
      </el-form-item>
        <el-form-item :label="t('EquipmentManagement.EquipmentKeyItems.count')" prop="count">
        <el-input
          v-model="formData.count"
          :placeholder="t('EquipmentManagement.EquipmentKeyItems.placeholderCount')"
          clearable
          type="number"
        />
      </el-form-item>
      <el-form-item :label="t('EquipmentManagement.EquipmentKeyItems.remark')" prop="remark">
        <el-input
          v-model="formData.remark"
          :placeholder="t('EquipmentManagement.EquipmentKeyItems.placeholderRemark')"
          clearable
          type="textarea"
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="dialogVisible = false">{{ t('common.cancel') }}</el-button>
      <el-button type="primary" @click="submitForm" :disabled="formLoading">{{ t('common.ok') }}</el-button>
    </template>
  </Dialog>
</template>

<script setup lang="ts">
import { CriticalComponentApi, CriticalComponentVO } from '@/api/mes/criticalComponent'

defineOptions({ name: 'CriticalComponentForm' })

const { t } = useI18n()
const message = useMessage()

const dialogVisible = ref(false)
const dialogTitle = ref('')
const formLoading = ref(false)
const formType = ref<'create' | 'update'>('create')
const formRef = ref()

const formData = ref<Partial<CriticalComponentVO>>({
  id: undefined,
  code: undefined,
  name: undefined,
  description: undefined,
  count: undefined,
  remark: undefined
})

const formRules = reactive({
  code: [{ required: true, message: '编码不能为空', trigger: 'blur' }],
  name: [{ required: true, message: '名称不能为空', trigger: 'blur' }]
})

const resetForm = () => {
  formData.value = {
    id: undefined,
    code: undefined,
    name: undefined,
    description: undefined,
    count: undefined,
    remark: undefined
  }
  formRef.value?.resetFields?.()
}

const open = (type: 'create' | 'update', row?: Partial<CriticalComponentVO>) => {
  dialogVisible.value = true
  dialogTitle.value = t('action.' + type)
  formType.value = type
  resetForm()
  if (type === 'update' && row) {
    formData.value = {
      id: row.id,
      code: row.code,
      name: row.name,
      description: row.description,
      count: row.count,
      remark: row.remark
    }
  }
}

defineExpose({ open })

const emit = defineEmits(['success'])

const submitForm = async () => {
  await formRef.value.validate()
  formLoading.value = true
  try {
    if (formType.value === 'create') {
      await CriticalComponentApi.createCriticalComponent(formData.value)
      message.success(t('common.createSuccess'))
    } else {
      await CriticalComponentApi.updateCriticalComponent(formData.value)
      message.success(t('common.updateSuccess'))
    }
    dialogVisible.value = false
    emit('success')
  } finally {
    formLoading.value = false
  }
}
</script>

