<template>
  <div>
    <el-dialog title="发起审批" :visible.sync="openItemDl" :close-on-click-modal="true">
      <div v-loading="loading" class="initiate_process">
        <div v-if="!loading" style="min-width: 338px;">
          <!--渲染表单-->
          <form-render class="process-form" ref="initiateForm" :form-items="processDefinition.formItems"
                       v-model="formData"/>
        </div>
        <div style="display: flex;justify-content: center;flex-direction: column;min-width: 1036px;">
          <span style="font-size: 18px;text-align: center;padding-top: 20px;">审批流程</span>
          <process-diagram-viewer ref="processDiagramViewer"/>
          <!--渲染流程执行过程-->
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
				<el-button size="mini" @click="openItemDl = false">取 消</el-button>
				<el-button size="mini" type="primary" @click="resubmitForm">提 交</el-button>
			</span>
    </el-dialog>
  </div>
</template>

<script>
import FormRender from "@/views/common/form/FormRender";
import ProcessDiagramViewer from "../admin/layout/ProcessDiagramViewer";
import {getInitiatedInstanceReInfo, restartProcessInstance} from "@/api/processInstance";

export default {
  name: "ReProcess",
  components: {FormRender, ProcessDiagramViewer},
  props: {
    code: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      openItemDl: false,
      scale: 100,
      loading: true,
      formData: {},
      processDefinition: {
        processDefinitionKey: "",
        deploymentName: "",
        logo: {},
        formItems: [],
        process: {},
        remark: ""
      }
    }
  },
  mounted() {
    this.$store.state.preview = true;
    this.loadProcessDefinitionReInfo(this.code);
  },
  created() {
    this.$store.state.preview = true;
  },
  computed: {
    forms() {
      return this.$store.state.design.formItems;
    }
  },
  destroyed() {
    this.$store.state.preview = false;
  },
  methods: {
    loadProcessDefinitionReInfo(instanceId) {
      this.openItemDl = true;
      getInitiatedInstanceReInfo(instanceId).then(res => {
        let processDefinition = res.data;
        this.processDefinition = processDefinition;
        this.formData = processDefinition.formData
        if (processDefinition.optionalUser){
          this.$store.state.selectUserMap = new Map();
          for (let key in processDefinition.optionalUser) {
            this.$store.state.selectUserMap.set(key,processDefinition.optionalUser[key])
          }
        }
        //构建表单及校验规则
        this.$store.state.design = processDefinition;
        this.loading = false;
      }).catch(err => {
        this.$message.error(err);
      });
    },

    resubmitForm() {
      let selectUserMap = {}
      this.$store.state.selectUserMap.forEach(((value, key) => {
        selectUserMap[key] = value
      }))
      let paramsData = {
        processDefinitionId: this.code,
        formData: JSON.stringify(this.formData),
        optionalUser: selectUserMap
      }
      this.validate(valid => {
        if (valid) {
          restartProcessInstance(paramsData).then(res => {
            this.$emit("submit", true)
            this.openItemDl = false
            this.$message.success(res.msg)
          })
        } else {
          this.$message.warning("请完善表单😥")
        }
      })
    },
    validate(call) {
      this.$refs.initiateForm.validate(call);
      this.$refs.processDiagramViewer.validate(call);
    }
  }
}
</script>

<style lang="less" scoped>
@media screen and (max-width: 1545px) {
  .initiate_process {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
  }
}

.initiate_process {
  display: flex;
  flex: 1;
  justify-content: space-around;
}

.process-form {
  /deep/ .el-form-item__label {
    padding: 0 0;
  }

  /deep/ .el-divider--horizontal {
    margin: 0;
  }
}

/deep/ .el-divider__text {
  font-size: 16px;
}

</style>

