<template>
  <div>
    <div class="d-flex flex-row align-content-center justify-content-center iconDiv">
      <div class="target">
        <div class="icon" style="background: rgb(255, 0, 0);"></div>
        <span>待审批</span>
      </div>
      <div class="target">
        <div class="icon" style="background: rgb(248, 152, 0);"></div>
        <span>提交</span>
      </div>
      <div class="target">
        <div class="icon" style="background: rgb(255, 231, 110);"></div>
        <span>重新提交</span>
      </div>
      <div class="target">
        <div class="icon" style="background: rgb(0, 255, 0);"></div>
        <span>同意</span>
      </div>
      <div class="target">
        <div class="icon" style="background: rgb(195, 58, 31);"></div>
        <span>挂起</span>
      </div>
      <div class="target">
        <div class="icon" style="background: rgb(0, 0, 255);"></div>
        <span>反对</span>
      </div>
      <div class="target">
        <div class="icon" style="background: rgb(138, 9, 2);"></div>
        <span>驳回</span>
      </div>
      <div class="target">
        <div class="icon" style="background: rgb(255, 165, 0);"></div>
        <span>驳回到发起人</span>
      </div>
      <div class="target">
        <div class="icon" style="background: rgb(2, 59, 98);"></div>
        <span>撤回</span>
      </div>
      <div class="target">
        <div class="icon" style="background: rgb(242, 59, 98);"></div>
        <span>撤回到发起人</span>
      </div>
      <div class="target">
        <div class="icon" style="background: rgb(51, 136, 72);"></div>
        <span>会签通过</span>
      </div>
      <div class="target">
        <div class="icon" style="background: rgb(130, 183, 215);"></div>
        <span>会签不通过</span>
      </div>
      <div class="target">
        <div class="icon" style="background: rgb(238, 175, 151);"></div>
        <span>人工终止</span>
      </div>
      <div class="target">
        <div class="icon" style="background: rgb(74, 74, 74);"></div>
        <span>完成</span>
      </div>
    </div>
    <div class="am-main-view" v-if="this.showImg">
      <div class="am-img-view" :style="classImg">
        <div v-for="(buttons, index) of listLayout" v-bind:key="index">
          <el-popover :disabled="buttons.disabled" :style="{ position: `absolute`, width: `${buttons.width}px`, height: `${buttons.height}px`, left: `${buttons.x}px`, top: `${buttons.y}px` }" placement="right" :title="buttons.name" width="300" trigger="hover">
            <div class="am-popover">
              <div v-if="buttons.nodeInfo && buttons.nodeInfo.hasOpinion">
                <div v-for="(node, index) of buttons.nodeInfo.data" v-bind:key="index">
                  <table class="am-table" v-if="node.hideData !== '1'">
                    <tr>
                      <td class="am-td an-td-title">任务名称</td>
                      <td class="am-td">{{ node.taskName }}</td>
                    </tr>
                    <tr>
                      <td class="am-td an-td-title">执行人</td>
                      <td class="am-td">{{ node.auditorName }}</td>
                    </tr>
                    <tr>
                      <td class="am-td an-td-title">开始时间</td>
                      <td class="am-td">{{ node.createTime }}</td>
                    </tr>
                    <tr>
                      <td class="am-td an-td-title">结束时间</td>
                      <td class="am-td">{{ node.completeTime }}</td>
                    </tr>
                    <tr>
                      <td class="am-td an-td-title">审批用时</td>
                      <td class="am-td">{{ node.durMs | TimeConvert }}</td>
                    </tr>
                    <tr>
                      <td class="am-td an-td-title">状态</td>
                      <td class="am-td">{{ node.statusVal }}</td>
                    </tr>
                    <tr>
                      <td class="am-td an-td-title">意见</td>
                      <td class="am-td" v-html="node.opinion"></td>
                    </tr>
                  </table>

                  <table class="am-table" v-else-if="buttons.nodeInfo.data.length === 1">
                    <tr>
                      <td class="am-td an-td-title">状态</td>
                      <td class="am-td">未处理过任务</td>
                    </tr>
                    <tr>
                      <td class="am-td an-td-title">暂定候选人</td>
                      <td class="am-td">暂无</td>
                    </tr>
                  </table>
                </div>
              </div>
              <div v-else>
                <table class="am-table">
                  <tr>
                    <td class="am-td an-td-title">状态</td>
                    <td class="am-td">未产生过任务</td>
                  </tr>
                  <tr>
                    <td class="am-td an-td-title">暂定候选人</td>
                    <td class="am-td">{{ buttons.nodeInfo && buttons.nodeInfo.data ? buttons.nodeInfo.data[0].name : "暂无" }}</td>
                  </tr>
                </table>
              </div>
            </div>
            <el-button class="am-button-opacity" slot="reference" :style="{ width: `${buttons.width}px`, height: `${buttons.height}px` }"></el-button>
          </el-popover>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import Vue from "vue";
import Component from "vue-class-component";
import { approvalStore } from "@/store/approval.store";
import { DataInput, DataOutput } from "@/model";
import apiService from "@/services/api.service";
import { Code } from "@/constants/enum/code.enum";
import { Button, Popover } from "element-ui";
import flowProcessApi from "@/constants/api/ebtrust-project/flow-process.api";
import { Prop } from "vue-property-decorator";

/**
 * @Description: 流程图页面
 * @author LiuBo
 * @date 2021/1/27
 * @time 16:22
 */
@Component({
  name: "ApprovalFlowChart",
  components: { "el-popover": Popover, "el-button": Button }
})
export default class ApprovalFlowChart extends Vue {
  srcImg = " "; // 图片地址
  instId: string | any; // ；流程实例id
  taskId: string | any; // 任务id
  showImg = false; // 是否显示图片
  imgWidth = 0; // 图片宽
  imgHeight = 0; // 图片高
  listLayout: any[] = []; //所有节点位置存储
  classImg: any = {}; // 样式
  @Prop({ default: false }) isEnd: any; // 样式
  mounted(): void {
    this.initData();
    this.getFlowChart();
  }

  /**
   * @Description: 获取缓存数据
   * @author guoxuhui
   * @date 2021-03-12
   * @time 11:17
   */
  initData() {
    const instId: any = this.$route.query.instId;
    const flowParameters: any = approvalStore.getFlowParameters(instId);
    const taskInfo: any = approvalStore.getTaskInfoByInstId(instId);
    if (flowParameters) {
      this.instId = flowParameters.instId;
      this.taskId = flowParameters.taskId;
    }
  }

  /**
   * @Description: 获取流程图相关信息
   * @author guoxuhui
   * @date 2021-03-17
   * @time 19:59
   */
  private getFlowChart() {
    const dataInput: DataInput<any> = new DataInput<any>({
      data: {
        instId: this.instId,
        taskId: this.taskId
      }
    });
    this.$amLoading.open();
    apiService.general(flowProcessApi.approval.getFlowChart, undefined, dataInput).then((dataOutput: DataOutput<any>) => {
      this.$amLoading.close(this);
      if (dataOutput.code === Code.SUCCESS.code) {
        const data = dataOutput.data;
        const bpmDefLayout = data.bpmDefLayout;
        const nodeOpinion = data.nodeOpinion;
        this.listLayout = bpmDefLayout.listLayout;
        this.listLayout.forEach(value => {
          const nodeId = value.nodeId;
          if (nodeId.indexOf("EndEvent") > -1 || nodeId.indexOf("Gateway") > -1) {
            value.disabled = true;
          }
          if (nodeOpinion[nodeId] && nodeOpinion[nodeId].data && nodeOpinion[nodeId].data.length > 0) {
            nodeOpinion[nodeId].data.forEach((val: any, idx: any) => {
              const qualfieds = nodeOpinion[nodeId].data[idx].qualfieds;
              const auditorName = nodeOpinion[nodeId].data[idx].auditorName;
              if (val.status === "signBackCancel") {
                nodeOpinion[nodeId].data[idx].hideData = "1";
              }
              if (qualfieds && auditorName) {
                let auditorNameNamess: any = "";
                const parse: any[] = JSON.parse(qualfieds);
                if (parse.length > 1) {
                  parse.forEach(value1 => {
                    if (value1.name === auditorName) {
                      auditorNameNamess = auditorNameNamess + (value1.name + "(√)");
                    } else {
                      auditorNameNamess += value1.name;
                    }
                    auditorNameNamess += " ";
                  });
                  nodeOpinion[nodeId].data[idx].auditorName = auditorNameNamess;
                }
              }
            });
          }
          value.nodeInfo = nodeOpinion[nodeId];
        });
        this.imgWidth = bpmDefLayout.width;
        this.imgHeight = bpmDefLayout.height;
        this.srcImg = data.srcImg;
        this.classImg = { backgroundImage: `url(${this.srcImg})`, backgroundRepeat: `no-repeat`, width: `${this.imgWidth}px`, height: `${this.imgHeight}px` };
        this.showImg = true;
        this.$nextTick(() => {
          // 123
        });
      } else {
        this.$message(dataOutput.msg);
      }
    });
  }
}
</script>
<style scoped lang="scss">
.am-main-view {
  width: 100%;
  height: 100%;
  overflow-x: auto;
}
.am-img-view {
  position: relative;
  background-repeat: no-repeat;
}

.am-button-opacity {
  filter: alpha(Opacity=80);
  -moz-opacity: 0.1;
  opacity: 0.1;
}
.am-popover {
  max-height: 600px;
  overflow-y: auto;
}
.am-table {
  width: 100%;
  margin-bottom: 10px;
  border: 1px solid #000000;
}
.am-td {
  border: 1px solid #000000;
}
div.icon {
  border: 1px solid #868686;
  line-height: 10px;
  width: 10px;
  height: 10px;
  float: left;
  overflow: hidden;
  margin-top: 3px;
}
.iconDiv {
  font-size: 12px;
  height: 40px;
  overflow: hidden;
}
.target {
  margin-right: 5px;
  margin-top: 10px;
}
.an-td-title {
  width: 30%;
  white-space: nowrap;
}
</style>
