<template>
  <div>
    <a-row :gutter="12">
      <a-col :span="8">
        <h3>流程进度</h3>

        <div class="process-scroll">
          <a-steps :current="dataSource.length - 1" direction="vertical">
            <a-step
              v-for="(item, index) in dataSource"
              :key="index"
              :status="item.approvalComment && item.approvalComment.indexOf('[退回]') !== -1 ? 'error' : 'finish'"
              :title="item.histIns.activityName"
              :description="item.assigneeName"
              size="small"
            >
              <a-icon
                v-if="index === dataSource.length - 1 && item.histIns.activityType !== 'endEvent'"
                slot="icon"
                type="loading"
              />
            </a-step>
          </a-steps>
        </div>
      </a-col>
      <a-col class="gutter-row" :span="16">
        <h3>流程详情</h3>
        <div class="process-scroll">
          <a-table
            bordered
            size="small"
            style="margin: 20px 0"
            rowKey="id"
            :columns="columns"
            :dataSource="dataSource"
            :pagination="false"
            :scroll="{ x: 1000 }"
          />
        </div>
      </a-col>
    </a-row>
    <h3>流程图</h3>
    <div id="processImage" class="process-image">
      <!--      <img :src="processImageBase64" alt="" />-->
      <iframe id="processIframe" :src="processIframeUrl" frameborder="0" width="100%" scrolling="auto"></iframe>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { processTrack } from '@/components/hrhx/approval/api/services/approve.js'
import { guid } from '@/utils/tools.js'
export default {
  name: 'ApprovalProcessTrack',
  data() {
    return {
      processImageBase64: '',
      processIframeUrl: '',
      columns: [
        {
          title: '执行环节',
          align: 'center',
          ellipsis: true,
          width: '300px',
          dataIndex: 'histIns.activityName',
          customRender: t => this.$m.isEffectiveCommon(t)
        },
        {
          title: '执行人',
          align: 'center',
          ellipsis: true,
          width: '80px',
          dataIndex: 'assigneeName',
          customRender: t => this.$m.isEffectiveCommon(t)
        },
        {
          title: '开始时间',
          align: 'center',
          ellipsis: true,
          width: '180px',
          dataIndex: 'histIns.startTime',
          customRender: t => this.$m.isEffectiveCommon(t)
        },
        {
          title: '结束时间',
          align: 'center',
          ellipsis: true,
          width: '180px',
          dataIndex: 'histIns.endTime',
          customRender: t => this.$m.isEffectiveCommon(t)
        },
        {
          title: '提交意见',
          align: 'center',
          ellipsis: true,
          dataIndex: 'approvalComment',
          customRender: t => this.$m.isEffectiveCommon(t)
        },
        {
          title: '任务历时',
          align: 'center',
          ellipsis: true,
          dataIndex: 'durationTime',
          customRender: t => this.$m.isEffectiveCommon(t)
        }
      ],
      dataSource: []
    }
  },
  computed: {
    ...mapGetters(['useApprovalProcessInfo'])
  },
  mounted() {
    const iframeDom = document.getElementById('processIframe')
    iframeDom.height = 400
    // if (iframeDom?.attachEvent) {
    //   iframeDom.attachEvent('onload', function () {
    //     iframeDom.height = iframeDom.contentDocument.body.scrollHeight
    //   })
    // } else {
    //   iframeDom.onload = function () {
    //     iframeDom.height = iframeDom.contentDocument.body.scrollHeight
    //   }
    // }
  },
  methods: {
    /**
     * 初始化数据
     * @author Matrix
     * @since 2022/09/16
     */
    getInit() {
      this.getProcessTrack()
    },

    /**
     * 获取流程审批步骤
     * @author Matrix
     * @since 2022/09/16
     */
    getProcessTrack() {
      const procInsId = this.useApprovalProcessInfo.actPojo.procInsId
      processTrack(`procInsId=${procInsId}`).then(res => {
        this.dataSource = res.value.map(item => {
          item.id = guid()
          return item
        })
        this.getProcessIframe()
      })
    },

    /**
     * 获取流程图的IFrame
     * @author Matrix
     * @since 2022/09/16
     */
    getProcessIframe() {
      const record = this.useApprovalProcessInfo.actPojo
      let procDefId = ''
      let procInsId = ''

      if (!record.procDef || !record.procIns) {
        procDefId = this.dataSource[this.dataSource.length - 1].procDefId
        procInsId = record.procInsId
      } else {
        procDefId = record.procDef.id
        procInsId = record.procIns.processInstanceId
      }

      const isProd = process.env.NODE_ENV
      if (isProd !== 'production') {
        this.processIframeUrl =
          window._CONFIG['domainURL'] +
          // process.env.VUE_APP_PROXY +
          '//diagram-viewer/indexImage.html?processDefinitionId=' +
          procDefId +
          '&processInstanceId=' +
          procInsId +
          '&rnd=' +
          new Date().getTime()
      } else {
        this.processIframeUrl =
          window._CONFIG['domainURL'] +
          // process.env.VUE_APP_API +
          '//diagram-viewer/indexImage.html?processDefinitionId=' +
          procDefId +
          '&processInstanceId=' +
          procInsId +
          '&rnd=' +
          new Date().getTime()
      }
      // setTimeout(() => {
      //   const iframeDom = document.getElementById('processIframe')
      //   iframeDom.height = iframeDom.contentDocument.body.scrollHeight
      // }, 300)
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .process-image {
  padding: 30px;
  border-radius: 20px;
  background-color: #eeeeee;

  ::v-deep .diagram {
    border: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent;
  }
  img {
    width: 100%;
  }

  ::v-deep .wrapper {
    ::v-deep .diagram {
      border: 0;
    }
  }
}
.process-scroll {
  max-height: 280px;
  overflow-x: hidden;
  overflow-y: scroll;
}

/* 使用伪类选择器 ::-webkit-scrollbar ,兼容chrome和safari浏览器 */
.process-scroll::-webkit-scrollbar {
  width: 0 !important; /* remove scrollbar space */
  background: transparent; /* optional: just make scrollbar invisible */
}

/* 兼容IE10+ */
.process-scroll {
  -ms-overflow-style: none;
}

/* 但是firefox代码无效 */
//.process-scroll {
//  overflow: -moz-scrollbars-none;
//}

.process-scroll::-webkit-scrollbar {
  width: 9px;
  height: 9px;
}

.process-scroll::-webkit-scrollbar-track {
  background: rgb(239, 239, 239);
  border-radius: 2px;
}

.process-scroll::-webkit-scrollbar-thumb {
  background: #bfbfbf;
  border-radius: 10px;
}

.process-scroll::-webkit-scrollbar-thumb:hover {
  background: #888;
}

.process-scroll::-webkit-scrollbar-corner {
  background: #179a16;
}
</style>
