<!--模型分类的新增编辑弹出框-->
<template>
  <el-dialog
      draggable
      class='cn-operate-dialog'
      v-model='machineVisible'
      :title='title'
      style='width: 415px; height: 350px'
      top='30vh'
  >
    <el-scrollbar>
      <el-form :inline='false' :model='form' label-width='120px' :rules='rules' ref='formRef'>
        <el-form-item label='标识名称' prop='name'>
          <el-input v-model='form.name' placeholder='请输入标识名' clearable />
        </el-form-item>
        <el-form-item label='分类key' prop='signKey'>
          <el-input v-model='form.signKey' placeholder='请输入标识key' clearable />
        </el-form-item>
        <el-form-item label='查看表单路径' prop='viewPath'>
          <el-input v-model='form.viewPath' placeholder='请输入查看表单路径' clearable>
          </el-input>
        </el-form-item>
      </el-form>
    </el-scrollbar>
    <template #footer>
            <span class='dialog-footer'>
                <el-button @click='machineVisible = false'>取消</el-button>
                <el-button type='primary' @click='submit'>确认</el-button>
            </span>
    </template>
  </el-dialog>
</template>
<script lang='ts' setup>
import { ref, reactive, inject } from 'vue'
import { ElMessage } from 'element-plus'
import TableStore from '@/utils/tableStore'
import { addSign, updateSign } from '@/api/bpm-boot/sign'

const tableStore = inject('tableStore') as TableStore
const machineVisible = ref(false)
const title = ref('')
const formRef = ref()

// 注意不要和表单ref的命名冲突
const form = reactive({
  id: '',
  name: '',
  signKey: '',
  viewPath: ''
})

//form表单校验规则
const rules = {
  name: [{ required: true, message: '标识名不能为空', trigger: 'blur' }],
  signKey: [{ required: true, message: '标识key不能为空', trigger: 'blur' }],
  viewPath: [{ required: true, message: '查看表单路径不能为空', trigger: 'blur' }],
}

const open = (text: string, data?: any) => {
  title.value = text
  if (data) {
    // 表单赋值
    for (let key in form) {
      form[key] = data[key]
    }
  } else {
    resetForm()
    // 在此处恢复默认表单
    for (let key in form) {
      form[key] = ''
    }
  }
  machineVisible.value = true
}

//重置表单内容
const resetForm = () => {
  if (formRef.value) {
    formRef.value.resetFields()
  }
}

/**
 * 提交用户表单数据
 */
const submit = () => {
  formRef.value.validate(async (valid: any) => {
    if (valid) {
      if (form.id) {
        await updateSign(form)
      } else {
        await addSign(form)
      }
      ElMessage.success('保存成功')
      tableStore.index()
      machineVisible.value = false
    }
  })
}

defineExpose({ open })
</script>

<style scoped>
.el-upload-list__item {
  transition: none !important;
}

.el-select {
  min-width: 180px;
}
</style>
