<!--模型的新增和修改的弹出框-->
<template>
  <el-dialog
      draggable
      class='cn-operate-dialog'
      v-model='modelVisible'
      :title='title'
      style='width: 415px; height: 400px'
      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' clearable />
        </el-form-item>
        <el-form-item label='表单类型'>
          <el-input v-model='form.formType' disabled />
        </el-form-item>
        <el-form-item label='流程分类' prop='category'>
          <el-select v-model='form.category' clearable>
            <el-option
                v-for='item in categoryList'
                :key='item.id'
                :label='item.name'
                :value='item.code'
            />
          </el-select>
        </el-form-item>
        <el-form-item label='排序' prop='sortCode'>
          <el-input v-model='form.sortCode' placeholder='请输入排序' />
        </el-form-item>

        <!--                <el-form-item label='描述' prop='description'>-->
        <!--                    <el-input v-model='form.description' type='textarea' placeholder='请输入内容' maxlength='200'-->
        <!--                              show-word-limit />-->
        <!--                </el-form-item>-->
      </el-form>
    </el-scrollbar>
    <template #footer>
            <span class='dialog-footer'>
                <el-button @click='modelVisible = 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 { useDictData } from '@/stores/dictData'
import { addWFModel, updateWFModel } from '@/api/process-boot/workflow/model'
import { addModel } from '@/api/workflow-boot/model'


const dictData = useDictData()
const categoryList = dictData.getBasicData('flow_category')

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

// 注意不要和表单ref的命名冲突
const form = reactive({
  id: '',
  name: '',
  formType: '系统表单',
  category: '',
  sortCode: 100
})

//form表单校验规则
const rules = {
  name: [{ required: true, message: '名称不能为空', trigger: 'blur' }],
  sortCode: [{ required: true, message: '排序不能为空', trigger: 'blur' }],
  category: [{ required: true, message: '流程分类必选', trigger: 'change' }]
}

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] = ''
    }
    form.formType = '系统表单'
    form.sortCode = 100
  }
  modelVisible.value = true
}

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

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

/************针对tab切换*************/

defineExpose({ open })
</script>

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

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