<template>
    <el-dialog
      :model-value="visible"
      title="表单类型"
      width="800px"
      :append-to-body="true"
      :destroy-on-close="true"
      @open="onOpen"
      @close="onClose"
      @closed="onClosed"
    >
      <el-form ref="formRef" :model="form" :rules="rules" label-width="80px" label-position="left">
        <el-form-item label="应用" prop="appCode">
          <el-input v-model="form.appCode" :readonly="mode !== 'insert'"></el-input>
        </el-form-item>
        <el-form-item label="代码" prop="typeCode">
          <el-input v-model="form.typeCode" :readonly="mode !== 'insert'"></el-input>
        </el-form-item>
        <el-form-item label="名称" prop="typeName">
          <el-input v-model="form.typeName" :readonly="mode === 'show'"></el-input>
        </el-form-item>
        <el-form-item label="分类" prop="typeCategory">
          <el-input v-model="form.typeCategory" :readonly="mode === 'show'"></el-input>
        </el-form-item>
        <el-form-item label="代字" prop="typeSn">
          <el-input v-model="form.typeSn" :readonly="mode === 'show'"></el-input>
        </el-form-item>
        <el-form-item label="启用">
          <el-switch v-model="form.enabled" :disabled="mode === 'show'"></el-switch>
        </el-form-item>
        <el-form-item label="Url">
          <el-input v-model="form.urlTemplate" :readonly="mode === 'show'"></el-input>
        </el-form-item>
        <el-form-item label="描述">
          <el-input v-model="form.typeDescription" :readonly="mode === 'show'"></el-input>
        </el-form-item>
      </el-form>
  
      <template #footer>
        <div>
          <el-button @click="onClose">关闭</el-button>
          <el-button v-if="mode !== 'show' && mode !== ''" type="primary" @click="onSave">保存</el-button>
        </div>
      </template>
    </el-dialog>
  </template>
  
  <script setup lang="ts">
  import { ref } from 'vue'
  import type { FormRules, FormInstance } from 'element-plus'
  import { cloneDeep } from 'lodash-es'
  
  import { type FormType, initFormType } from './types'
  
  const emits = defineEmits<{
    (e: 'on-close'): void
    (e: 'on-closed'): void
    (e: 'on-save', info: FormType): void
  }>()
  const props = defineProps<{
    mode: string
    visible: boolean
    info: FormType
  }>()
  
  const rules: FormRules = {
    appCode: [{ required: true, message: '必须输入应用' }],
    typeCode: [{ required: true, message: '必须输入代码' }],
    typeName: [{ required: true, message: '必须输入名称' }],
    typeCategory: [{ required: true, message: '必须输入分类' }],
    typeSn: [{ required: true, message: '必须输入代字' }]
  }
  
  const formRef = ref<FormInstance>()
  const form = ref<FormType>(initFormType)
  
  async function onOpen() {
    form.value = cloneDeep(props.info)
  }
  
  function onClose() {
    emits('on-close')
  }
  function onClosed(){
    formRef.value.resetFields()
    emits('on-closed')
  }
  function onSave() {
    formRef.value!.validate((valid) => {
      if (valid) {
        emits('on-save', form.value)
      }
    })
  }

  </script>
  