<template>
  <div class="app-container">
    <!-- 操作栏 -->
    <el-row :gutter="5" class="mb10">
      <el-col :span="1.5">
        <el-button
          type="primary"
          icon="el-icon-check"
          size="mini"
          plain
          :loading="submitLoading"
          @click="handleSubmit"
        >提交</el-button>
      </el-col>
    </el-row>

    <!-- 搜索工作栏 -->
    <el-card class="box-card mb10">
      <div slot="header" class="clearfix">
        <span>业务模型信息</span>
      </div>
      <el-form
        v-show="showSearch"
        ref="queryForm"
        :model="queryParams"
        size="small"
        :rules="rules"
        label-width="125px"
      >
        <el-row :gutter="10">
          <el-col :span="6">
            <el-form-item label="业务编码" prop="modelCode">
              <el-input v-model="queryParams.modelCode" placeholder="请输入业务编码" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="业务名称" prop="modelName">
              <el-input v-model="queryParams.modelName" placeholder="请输入业务名称" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="状态" prop="modelEnable">
              <DictSelect v-model="queryParams.modelEnable" placeholder="请选择状态" dict-type="WORKFLOW_ENABLE_FLAG" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="关联表单" prop="formId">
              <div class="formSelects">
                <FormSelect
                  v-model="queryParams.formId"
                  filterable

                  placeholder="请选择关联表单"
                />
                <el-button v-if="queryParams.formId" @click="handleToForm">跳转</el-button>
              </div>

              <!-- <el-input v-model="queryParams.formId" :disabled="!!$route.query.id" placeholder="请输入表单id" /> -->
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="工作流程id" prop="bpmId">
              <el-input
                v-model="queryParams.bpmId"
                filterable
                placeholder="请输入工作流程id"
                disabled
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="工作流启用标记" prop="bpmEnable">
              <DictSelect
                v-model="queryParams.bpmEnable"
                placeholder="请选择工作流程启用标记"
                dict-type="WORKFLOW_ENABLE_FLAG"
                @change="bpmEnableChange"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="业务描述" prop="modelComment">
              <el-input
                v-model="queryParams.modelComment"
                type="textarea"
                placeholder="请输入业务描述"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="备注" prop="remark">
              <el-input
                v-model="queryParams.remark"
                type="textarea"
                placeholder="请输入备注"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <!-- 流程图预览 -->
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>流程图预览</span>
      </div>
      <div v-if="queryParams.bpmEnable === 'true' || bpmnXML" @click="elementClick">
        <my-process-viewer
          key="designer"
          v-model="bpmnXML"
          v-bind="bpmnControlForm"
          :activity-data="activityList"
          :process-instance-data="processInstance"
          :task-data="tasks"
          @click="elementClick"
        />
      </div>
      <div v-else>
        <h2 class="text-center">暂未开启工作流!</h2>
      </div>
    </el-card>

  </div>
</template>

<script>
import { createModelDef, getModelDef, updateModelDef, getBeginEnd } from '@/api/bpm/processModel'
import FormSelect from './components/FormSelect.vue'

export default {
  name: 'ModelDefDetail',
  components: {
    FormSelect
  },
  data() {
    return {
      // 遮罩层
      loading: true,
      // 导出遮罩层
      exportLoading: false,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 业务模型定义列表
      list: [],
      // 弹出层标题
      title: '',
      // 是否显示弹出层
      open: false,
      // 提交遮罩层
      submitLoading: false,
      // 高级查询参数
      advParams: {},
      // 流程图
      activityList: [],
      processInstance: {},
      tasks: [],
      // bpm数据
      bpmnXML: null,
      bpmnControlForm: {
      },
      createId: null,
      // 查询参数
      queryParams: {
        pageNo: 1,
        pageSize: 10,
        modelCode: null,
        modelName: null,
        modelComment: null,
        remark: null,
        modelEnable: null,
        formId: null,
        pageShow: null,
        bpmEnable: null,
        bpmId: null,
        createTime: []
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        modelName: [{ required: true, message: '业务名称不能为空', trigger: 'blur' }],
        modelComment: [{ required: true, message: '业务描述不能为空', trigger: 'blur' }],
        modelEnable: [{ required: true, message: '状态不能为空', trigger: 'blur' }],
        formId: [{ required: true, message: '表单id不能为空', trigger: 'blur' }],
        pageShow: [{ required: true, message: '页签选项：不能为空', trigger: 'blur' }],
        bpmEnable: [{ required: true, message: '工作流启用标记不能为空', trigger: 'blur' }]
      }
    }
  },
  created() {
    if (this.$route.query.id) {
      this.getQueryModel()
    }
  },
  methods: {
    // 获取信息
    getQueryModel() {
      getModelDef(this.$route.query.id || this.createId).then(response => {
        this.queryParams = response.data
        this.queryParams.bpmEnable = String(this.queryParams.bpmEnable)
        this.queryParams.modelEnable = String(this.queryParams.modelEnable)
        if (this.queryParams.bpmEnable === 'true') {
          this.getProcessList()
        }
      })
    },
    /** 取消按钮 */
    cancel() {
      this.open = false
      this.reset()
    },
    /** 表单重置 */
    reset() {
      this.form = {
        id: undefined,
        modelCode: undefined,
        modelName: undefined,
        modelComment: undefined,
        remark: undefined,
        modelEnable: undefined,
        formId: undefined,
        pageShow: undefined,
        bpmEnable: undefined,
        bpmId: undefined
      }
      this.resetForm('form')
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNo = 1
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm('queryForm')
      this.advParams = {}
      this.handleQuery()
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs['form'].validate(valid => {
        if (!valid) {
          return
        }
        // 修改的提交
        if (this.form.id != null) {
          updateModelDef(this.form).then(response => {
            this.$modal.msgSuccess('修改成功')
            this.open = false
            this.getList()
          })
          return
        }
        // 添加的提交
        createModelDef(this.form).then(response => {
          this.$modal.msgSuccess('新增成功')
          this.open = false
          this.getList()
        })
      })
    },
    // 点击跳转到流程设计
    elementClick() {
      this.$router.push({ path: '/bpm/manager/model/design', query: { modelId: this.queryParams.bpmId, tableId: this.queryParams.formId, id: this.$route.query.id }})
    },
    // 工作流是否启用
    bpmEnableChange(v) {
      if (v === 'true') {
        this.getProcessList()
      } else {
        this.bpmnXML = null
      }
    },
    // 创建模型
    handleSubmit() {
      this.$refs['queryForm'].validate(valid => {
        if (!valid) {
          return
        }
        this.submitLoading = true
        if (this.$route.query.id) {
          updateModelDef(this.queryParams).then(response => {
            this.$modal.msgSuccess('修改成功')
            this.getQueryModel()
          }).finally(() => {
            this.submitLoading = false
          })
          return
        }
        createModelDef(this.queryParams).then(response => {
          this.$modal.msgSuccess('创建成功!')
          this.createId = response.data
          this.getQueryModel()
          this.getProcessList()
        }).finally(() => {
          this.submitLoading = false
        })
      })
    },
    // 获取流程图
    getProcessList() {
      const params = {
        id: this.queryParams.bpmId
      }
      getBeginEnd(params).then(res => {
        this.bpmnXML = res.data
      })
    },
    // 跳转到表单维护
    handleToForm() {
      this.$router.push({ path: '/bpm/manager/form/edit', query: { formId: this.queryParams.formId }})
    }
  }
}
</script>
<style scoped>
::v-deep.formSelects {
  display: flex;
  flex-direction: row;
}
</style>
