<template>
<el-dialog v-if="addVisible" v-model="addVisible" width="25rem" align-center :close-on-click-modal="false" destroy-on-close>
      <template #header><h2>新增基质</h2></template>
      <el-form ref="addFormRef" :model="addForm" label-width="auto" style="max-width: 600px;" :rules="rules">
        <el-form-item label="基质名称" prop="name">
          <el-input v-model.async="addForm.name" />
        </el-form-item>
      </el-form>
      <div class="flex justify-center h-[5rem] pt-[2rem]">
        <el-button type="primary" @click="onSave">保存</el-button>
        <el-button @click="onCancel">取消</el-button>
      </div>
    </el-dialog>
</template>
<script lang="ts" setup>
  import { ref, reactive, defineExpose } from 'vue'
  const emits = defineEmits(['save'])
  const rules = ref({
    name: [{
      required: true,
      message: '请输入名称',
      trigger: 'change',
    }]
  })
  const addVisible = ref(false)
  let addForm = ref({name:''})
  const addFormRef:any =  ref<any>()
  let operateType = 'add'

  const showDialog = (type:string, craftItem:{name:string}) => {
    operateType = type
    addVisible.value = true;
    if(craftItem){
      addForm.value = {
        name:craftItem.name
      };
    }
  }

  const onSave = () => {
    addFormRef.value.validate((vali:boolean) => {
      if(vali){
        emits('save', {...addForm.value}, operateType)
      }
    })
  }

  const onCancel = () => {
    addForm.value = {name:''}
    addVisible.value = false;
  }

  defineExpose({
    showDialog,
    onCancel
  })
</script>