<template>
  <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/>
      <!--渲染流程执行过程-->
      <el-timeline :reverse="false">
        <!--        <el-timeline-item v-for="(activity, index) in activities" :key="index">-->

        <!--        </el-timeline-item>-->
      </el-timeline>
    </div>
  </div>
</template>

<script>
import FormRender from "@/views/common/form/FormRender";
import ProcessDiagramViewer from "../admin/layout/ProcessDiagramViewer";
import {getInitiateInfo} from "@/api/processDefinition";

export default {
  name: "InitiateProcess",
  components: {FormRender, ProcessDiagramViewer},
  props: {
    code: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      scale: 100,
      loading: true,
      formData: {},
      processDefinition: {
        processDefinitionKey: "",
        deploymentName: "",
        logo: {},
        formItems: [],
        process: {},
        remark: ""
      }
    };
  },
  mounted() {
    this.$store.state.preview = true;
    this.loadProcessDefinitionInfo(this.code);
  },
  created() {
    this.$store.state.preview = true;
  },
  computed: {
    forms() {
      return this.$store.state.design.formItems;
    }
  },
  destroyed() {
    this.$store.state.preview = false;
  },
  methods: {
    loadProcessDefinitionInfo(processDefinitionKey) {
      getInitiateInfo(processDefinitionKey).then(res => {
        let processDefinition = res.data;
        this.processDefinition = processDefinition;
        //构建表单及校验规则
        this.$store.state.design = processDefinition;
        this.loading = false;
      }).catch(err => {
        this.$message.error(err);
      });
    },
    validate(call) {
      this.$refs.initiateForm.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>
