<template>
  <div>
    <el-table :data="tableData"
              @cell-click="showDetails"
              style="width: 100%">
      <el-table-column
          prop="deploymentName"
          label="审批类型"
          width="180"/>
      <el-table-column
          prop="approveName"
          label="审批人"
          width="180"/>
      <el-table-column
          prop="submitTime"
          label="提交时间"/>
      <el-table-column
          prop="endTime"
          label="结束时间"/>
      <el-table-column
          prop="taskName"
          label="当前节点"/>
      <el-table-column
          label="处理耗时">
        <template slot-scope="scope">
          {{ getTimeConsuming(scope.row) }}
        </template>
      </el-table-column>
      <el-table-column
          prop="state"
          label="状态">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.state === '1'">进行中</el-tag>
          <el-tag v-if="scope.row.state === '4'" type="success">审批通过</el-tag>
          <el-tag v-if="scope.row.state === '3'" type="danger">审批驳回</el-tag>
          <el-tag v-if="scope.row.state === '2'" type="info">已撤销</el-tag>
        </template>
      </el-table-column>
      <el-table-column
          label="操作">
        <template slot-scope="scope">
          <template v-if="scope.row.isSelf">
            <template v-if="scope.row.state === '4'">
              <el-button size="min" type="text" icon="el-icon-thumb" @click="resubmitHander(scope.row.taskId)">再次提交</el-button>
            </template>
            <template v-if="scope.row.state === '2' || scope.row.state === '3'">
              <el-button size="min" type="text" icon="el-icon-thumb" @click="resubmitHander(scope.row.taskId)">重新提交
              </el-button>
            </template>
          </template>
        </template>
      </el-table-column>
    </el-table>
    <el-drawer
        title="审批详情"
        size="500px"
        :visible.sync="approveOpen"
        direction="rtl">
      <div v-loading="loading">
        <div class="top">
          <div class="top_left">
            <el-avatar size="large" :src="processInstanceData.userInfo.avatar"></el-avatar>
            <span style="text-align: center;color: #19191a;font-size: 14px;">{{processInstanceData.userInfo.name}}</span>
          </div>
          <div class="top_right">
            <div style="margin-bottom: 12px">
              <span style="font-size: 15px;margin-right: 15px">{{ selectProcessInstance.deploymentName }}</span>
              <el-tag class="state_tag" v-if="selectProcessInstance.state === '1'" size="mini">进行中</el-tag>
              <el-tag class="state_tag" v-if="selectProcessInstance.state === '4'" size="mini" type="success">审批通过
              </el-tag>
              <el-tag class="state_tag" v-if="selectProcessInstance.state === '3'" size="mini" type="danger">审批驳回
              </el-tag>
              <el-tag class="state_tag" v-if="selectProcessInstance.state === '2'" size="mini" type="info">已撤销</el-tag>
              <el-tooltip class="item" effect="dark" content="查看详细流程" placement="top-start">
                <el-icon class="el-icon-view" style="float: right;font-size: 20px;cursor: pointer"
                         @click.native="processDiagramViewer = true"></el-icon>
              </el-tooltip>
            </div>
            <div>
              <span style="color: rgb(108, 108, 108);">编号: {{ selectProcessInstance.processInstanceId }}</span>
            </div>
          </div>
        </div>
        <div style="height: 15px;background:#f5f5f5;"></div>
        <form-render-view v-if="!loading" ref="taskViewForm" :form-items="processInstanceData.formItems"
                          v-model="processInstanceData.formData"/>
        <div style="height: 15px;background:#f5f5f5;"></div>
        <operation-render v-if="!loading"
                          :operation-list="processInstanceData.operationList"
                          :state="selectProcessInstance.state"/>
        <div style="height: 15px;background:#f5f5f5;"></div>
      </div>
    </el-drawer>

    <el-dialog title="流程详情" :visible.sync="processDiagramViewer" :close-on-click-modal="true">
      <process-diagram-viewer v-if="processDiagramViewer"/>
      <div style="height: 70px;"></div>
    </el-dialog>
    <re-process :code="selectInstanceId" v-if="openItemDl" @submit="resubmit"/>
  </div>
</template>

<script>
import FormRenderView from '@/views/common/form/FormRenderView'
import ProcessDiagramViewer from "../admin/layout/ProcessDiagramViewer";
import ReProcess from "./ReProcess";
import {getInitiatedInstanceList, getInitiatedInstanceInfo} from "@/api/processInstance";
import {timeLength} from '@/utils/date'
import OperationRender from "../common/operation/OperationRender";

export default {
  name: "InitiatedInstance",
  components: {ReProcess, OperationRender, FormRenderView, ProcessDiagramViewer},
  data() {
    return {
      approveOpen: false,
      processDiagramViewer: false,
      selectProcessInstance: {},
      tableData: [],
      loading: false,
      openItemDl: false,
      selectInstanceId: null,
      processInstanceData: {
        userInfo: {},
        formData: {},
        formItems: [],
        processList: [],
        operationList: [],
      },
    };
  },
  created() {
    this.getList();
  },
  methods: {
    showDetails(row, column) {
      if (column.label !== '操作') {
        this.approveOpen = true;
        this.loadProcessInstance(row.processInstanceId)
        this.selectProcessInstance = row
      }
    },
    loadProcessInstance(processInstanceId) {
      let that = this;
      this.init();
      getInitiatedInstanceInfo(processInstanceId).then(res => {
        let data = res.data
        that.processInstanceData = data
        that.$store.state.design = data;
        that.$store.state.runningList = data.runningList;
        that.$store.state.endList = data.endList;
        that.$store.state.noTakeList = data.noTakeList;
        that.$store.state.refuseList = data.refuseList;
        that.$store.state.passList = data.passList;
        this.loading = false;
      })
    },
    resubmit(flag) {
      if (flag) {
        this.getList();
      }
    },
    init() {
      this.processInstanceData = {
        userInfo: {},
        formData: {},
        formItems: [],
        processList: [],
      };
      this.loading = true;
      this.$store.state.design = this.taskData;
      this.$store.state.runningList = [];
      this.$store.state.endList = [];
      this.$store.state.noTakeList = [];
      this.$store.state.refuseList = [];
      this.$store.state.passList = [];
      this.$store.state.diagramMode = "viewer";
      this.$store.state.preview = false;
    },
    resubmitHander(instanceId) {
      this.selectInstanceId = instanceId;
      this.openItemDl = false
      this.$nextTick(() => {
        this.openItemDl = true
      })
    },
    getList() {
      getInitiatedInstanceList().then(res => {
        let data = res.data
        this.tableData = data.rows
      })
    },
    getTimeConsuming(instance) {
      if (instance.state != 1) {
        //dateFormat(开始时间,结束时间)
        return timeLength(instance.submitTime, instance.endTime);
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.top {
  padding: 0 10px 10px 10px;
  display: flex;

  .top_left {
    display: flex;
    flex-direction: column;
    width: 50px;
    align-items: center;
  }

  .top_right {
    width: 85%;
    display: flex;
    flex-direction: column;
    //justify-content: space-between;
    font-size: 13px;
    margin-left: 10px;
  }
}

.state_tag {
  font-size: 12px;
  //margin-right: 15px;
}

</style>
