<template>
<div>
    <Breadcrumb slot="breadcrumb" :list="breadcrumbList"></Breadcrumb>
    <bpmn-modeler
      ref="refNode"
      :xml="xml"
      :users="users"
      :groups="groups"
      :categorys="categorys"
      :is-view="false"
      @save="save"
      @showXML="showXML"
      @dataType="dataType"
    />
    <!--在线查看xml-->
    <el-dialog
      :title="xmlTitle"
      :visible.sync="xmlOpen"
      width="60%"
      append-to-body
    >
      <div>
        <pre v-highlight>
           <code class="xml">
                {{xmlContent}}
           </code>
        </pre>
      </div>
    </el-dialog>
    </div>
</template>
<script>
//import form from "@/assets/mixins/form";
import table from "@/assets/mixins/table";
import {
  readXml,
  roleList,
  saveXml,
  userList,
} from "@/api/flowable/definition";
import bpmnModeler from "@/components/Process/index";
import vkbeautify from "vkbeautify";
import Hljs from "highlight.js";
import "highlight.js/styles/atom-one-dark.css";

export default {
  name: "Model",
  // mixins: [form],
  components: {
    bpmnModeler,
    vkbeautify,
  },
  // 自定义指令
  directives: {
    highlight: (el) => {
      let blocks = el.querySelectorAll("pre code");
      blocks.forEach((block) => {
        Hljs.highlightBlock(block);
      });
    },
  },
  data() {
    return {
      breadcrumbList: [
        { name: "流程管理", path: "" },
        { name: "流程定义", path: "/flowable/definition/list" },
        { name: "流程", path: "" },
      ],
      xml: "", // 后端查询到的xml
      modeler: "",
      xmlOpen: false,
      xmlTitle: "",
      xmlContent: "",
      users: [],
      groups: [],
      categorys: [
        { dictLabel: "测试分类一", dictValue: "测试分类一" },
        { dictLabel: "测试分类二", dictValue: "测试分类二" },
      ],
    };
  },
  created() {
    const deployId = this.$route.query && this.$route.query.deployId;
    //  查询流程xml
    if (deployId) {
      console.log("编辑");
      this.getModelDetail(deployId);
    }
    console.log("新增");
    // this.getDicts("processCategory").then(res => {
    //   console.log(res);
    //   this.categorys = res.data;
    // });
    this.getDataList();
  },
  methods: {
    /** xml 文件 */
    getModelDetail(deployId) {
      console.log("发送请求，获取xml");
      // 发送请求，获取xml
      readXml(deployId).then((res) => {
       // console.log(res);
        this.xml = res.data;
        this.modeler = res.data;
      });
    },
    /** 保存xml */
    save(data) {
      console.log("保存xml");
      const params = {
        name: data.process.name,
        category: data.process.category,
        xml: data.xml,
      };
      saveXml(params).then((res) => {
        this.$message.success(res.msg);
        // 关闭当前标签页并返回上个页面
        this.$store.dispatch("tagsView/delView", this.$route);
        this.$router.go(-1);
      });
    },
    /** 指定流程办理人员列表 */
    getDataList() {
      console.log("指定流程办理人员列表");
      // todo 待根据部门选择人员
      // const params = {
      //
      // }
      userList().then((res) => {
        console.log("userList", res);

        res.data.result.forEach((item) => {
          let arr = { realName: item.realName, id: item.id+""};
          this.users.push(arr);

          // val.userId = val.userId.toString();
        });
        //this.users = res.data.result;
        let arr = { realName: "流程发起人", id: "${INITIATOR}" };
        this.users.push(arr);

       console.log("users:"+this.users);

      });
      roleList().then(res =>{
        res.data.result.forEach(item =>{
        let arr = { roleName: item.name, roleId: item.id.toString()};
        this.groups.push(arr);
        })
       // this.groups = res.data;
      });
    },
    /** 展示xml */
    showXML(data) {
      console.log("展示xml");
      this.xmlTitle = "xml查看";
      this.xmlOpen = true;
      //debugger
      this.xmlContent = vkbeautify.xml(data);
    },
    /** 获取数据类型 */
    dataType(data) {
      console.log("获取数据类型", data);
      this.users = [];
      this.groups = [];
      if (data) {
        if (data.dataType === "dynamic") {
          if (data.userType === "assignee") {
            this.users = [
              { realName: "${INITIATOR}", id: "${INITIATOR}" },
              { realName: "#{approval}", id: "#{approval}" },
            ];
          } else if (data.userType === "candidateUsers") {
            this.users = [
              { realName: "#{approval}", id: "#{approval}" },
            ];
          } else {
            this.groups = [{ roleName: "#{approval}", roleId: "#{approval}" }];
          }
        } else {
          this.getDataList();
        }
      }
    },
  },
};
</script>
