<template>
  <el-dialog
    :title="title"
    :visible.sync="open"
    width="500px"
    append-to-body
  >
    <el-form
      ref="form"
      :model="form"
      :rules="rules"
      label-width="110px"
    >
      <el-form-item label="流程标识" prop="key">
        <el-input
          v-model="form.key"
          placeholder="请输入流标标识"
          :disabled="!!form.id"
        >
          <template #append>
            <el-tooltip
              v-if="!form.id"
              class="item"
              effect="light"
              content="新建后，流程标识不可修改！"
              placement="top"
            >
              <i class="el-icon-question" />
            </el-tooltip>
            <el-tooltip
              v-else
              class="item"
              effect="light"
              content="流程标识不可修改！"
              placement="top"
            >
              <i class="el-icon-question" />
            </el-tooltip>
          </template>
        </el-input>

      </el-form-item>
      <el-form-item label="流程名称" prop="name">
        <el-input
          v-model="form.name"
          placeholder="请输入流程名称"
          :disabled="!!form.id"
          clearable
        />
      </el-form-item>
      <el-form-item v-if="form.id" label="流程分类" prop="category">
        <el-select
          v-model="form.category"
          placeholder="请选择流程分类"
          clearable
          style="width: 100%"
        >
          <el-option
            v-for="dict in categoryDictDatas"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="流程描述" prop="description">
        <el-input v-model="form.description" type="textarea" clearable />
      </el-form-item>
      <div v-if="form.id">
        <el-form-item label="表单类型" prop="formType">
          <el-radio-group v-model="form.formType">
            <el-radio v-for="dict in modelFormTypeDictDatas" :key="parseInt(dict.value)" :label="parseInt(dict.value)">
              {{ dict.label }}
            </el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item v-if="form.formType === 10" label="流程表单" prop="formId">
          <!-- <el-select v-model="form.formId" clearable style="width: 100%">
            <el-option
              v-for="item in forms"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select> -->
          <FormSelectVue v-model="form.formId" placeholder="请选择流程表单" />
        </el-form-item>
        <el-form-item v-if="form.formType === 20" label="表单提交路由" prop="formCustomCreatePath">
          <el-input v-model="form.formCustomCreatePath" placeholder="请输入表单提交路由" style="width: 330px;" />
          <el-tooltip
            class="item"
            effect="light"
            content="自定义表单的提交路径，使用 Vue 的路由地址，例如说：bpm/oa/leave/create"
            placement="top"
          >
            <i style="padding-left: 5px;" class="el-icon-question" />
          </el-tooltip>
        </el-form-item>
        <el-form-item v-if="form.formType === 20" label="表单查看路由" prop="formCustomViewPath">
          <el-input v-model="form.formCustomViewPath" placeholder="请输入表单查看路由" style="width: 330px;" />
          <el-tooltip
            class="item"
            effect="light"
            content="自定义表单的查看路径，使用 Vue 的路由地址，例如说：bpm/oa/leave/view"
            placement="top"
          >
            <i style="padding-left: 5px;" class="el-icon-question" />
          </el-tooltip>
        </el-form-item>
      </div>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitForm">确 定</el-button>
      <el-button @click="cancel">取 消</el-button>
    </div>
  </el-dialog>

</template>

<script>
import {
  updateModel
} from '@/api/bpm/model'
import { DICT_TYPE, getDictDatas } from '@/utils/dict'
import FormSelectVue from './FormSelect.vue'

// import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'

export default {
  name: 'BpmModel',
  components: {
    FormSelectVue
  },
  data() {
    return {
      // 遮罩层
      loading: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 表格数据
      list: [],
      open: false,
      // 查询参数
      queryParams: {
        pageNo: 1,
        pageSize: 10
      },

      // BPMN 数据
      showBpmnOpen: false,
      bpmnXML: null,
      bpmnControlForm: {
        prefix: 'flowable'
      },

      // 流程表单详情
      detailOpen: false,
      detailForm: {
        fields: []
      },

      // 流程表单
      title: '',
      form: {},
      // 表单校验
      rules: {
        key: [{ required: true, message: '流程标识不能为空', trigger: 'blur' }],
        name: [{ required: true, message: '流程名称不能为空', trigger: 'blur' }],
        formType: [{ required: true, message: '流程名称不能为空', trigger: 'blur' }],
        formId: [{ required: true, message: '业务表单不能为空', trigger: 'blur' }],
        category: [{ required: true, message: '流程分类不能为空', trigger: 'blur' }],
        formCustomCreatePath: [{ required: true, message: '表单提交路由不能为空', trigger: 'blur' }],
        formCustomViewPath: [{ required: true, message: '表单查看路由不能为空', trigger: 'blur' }]
      },

      // 流程表单的下拉框的数据
      forms: [],

      // 数据字典
      categoryDictDatas: getDictDatas(DICT_TYPE.BPM_MODEL_CATEGORY),
      modelFormTypeDictDatas: getDictDatas(DICT_TYPE.BPM_MODEL_FORM_TYPE)
    }
  },
  created() {
  },
  methods: {
    /** 取消按钮 */
    cancel() {
      this.open = false
      this.reset()
    },
    // 表单重置
    reset() {
      this.form = {
        id: undefined,
        key: undefined,
        name: undefined,
        description: undefined,
        category: undefined,
        formType: undefined,
        formId: undefined,
        formCustomCreatePath: undefined,
        formCustomViewPath: undefined
      }
      this.resetForm('form')
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs['form'].validate(valid => {
        if (!valid) {
          return
        }
        // 更新
        if (this.form.id) {
          updateModel({
            ...this.form,
            formId: this.form.formType === 10 ? this.form.formId : undefined,
            formCustomCreatePath: this.form.formType === 20 ? this.form.formCustomCreatePath : undefined,
            formCustomViewPath: this.form.formType === 20 ? this.form.formCustomViewPath : undefined
          }).then(response => {
            this.$modal.msgSuccess('修改模型成功')
            this.open = false
            this.$emit('updateModel')
          })
          return
        }
      })
    }
  }
}
</script>
