<template>
  <div class="record-style">
    <!-- <el-link
      @click="dialogVisible ? closeDialog() : openDialog()"
      type="primary"
      :underline="false"
      class="history-btn"
    >
      {{ dialogVisible ? '关闭历史审批流程' : '查看历史审批流程' }}</el-link
    > -->
    <!-- <div class="mask">sdsdsdsdsd</div> -->
    <el-dialog
      title="历史审批流程"
      :visible.sync="dialogVisible"
      height="65vh"
      top="6vh"
      custom-class="record-dialog"
      :modal="false"
      :append-to-body="false"
    >
      <div
        class="mask-div"
        v-loading="reqLoading"
        element-loading-text="加载中..."
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(255, 255, 255, 1)"
      >
        <el-timeline :reverse="false">
          <el-timeline-item
            v-for="(activity, index) in activities"
            :key="index"
            size="large"
            :timestamp="activity.operateDate"
            :icon="geticon(activity)"
            :color="getcolor(activity)"
          >
            {{
              activity.operateOrgName +
                ' ' +
                activity.operateDeptName +
                ' ' +
                activity.operateUserName +
                ' ' +
                (activity.operateUserAccount || '') +
                ' ' +
                activity.operateInfo
            }}
          </el-timeline-item>
        </el-timeline>
      </div>

      <div slot="footer">
        <el-button @click="dialogVisible = false">关闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import req from '@/request.js'
const portal = window.context.portal
export default {
  name: 'RecordDialog',
  components: {},
  data() {
    return {
      dialogVisible: false,
      markLoading: false,
      reverse: true,
      activities: [],
      reqLoading: false
    }
  },
  methods: {
    openDialog(id) {
      this.dialogVisible = true
      this.reqLoading = true
      this.getOperationLog(id)
    },
    closeDialog() {
      this.dialogVisible = false
      this.activities = []
    },
    // 查询日志
    getOperationLog(id) {
      req
        .post(portal + `/approvalLog/bizAchieveStatusLog/v1/process/${id}`)
        .then(res => {
          if (res.status == 200) {
            this.activities = res.data
          }
          this.reqLoading = false
        })
    },
    // 设置图标以及颜色
    geticon(row) {
      let icon = ''
      if (
        (row.status == 2 ||
          row.status == 4 ||
          row.status == 7 ||
          row.status == 9 ||
          row.status == 11) &&
        row.approvalResults != 2
      ) {
        icon = 'el-icon-close'
      } else if (
        (row.status == 1 ||
          row.status == 3 ||
          row.status == 5 ||
          row.status == 6 ||
          row.status == 8 ||
          row.status == 10 ||
          row.status == 12) &&
        row.approvalResults != 2
      ) {
        icon = 'el-icon-check'
      } else if (row.status == 0 && row.approvalResults != 2) {
        icon = 'el-icon-more'
      } else if (row.approvalResults == 2) {
        icon = 'el-icon-bottom-left'
      }
      return icon
    },
    getcolor(row) {
      let color = ''
      if (
        row.status == 2 ||
        row.status == 4 ||
        row.status == 7 ||
        row.status == 9 ||
        row.status == 11 ||
        row.approvalResults == 2
      ) {
        color = '#F56C6C'
      } else if (row.status == 0 && row.approvalResults != 2) {
        // color = '#67C23A'
        color = '#2761ff'
      } else {
        color = '#67C23A'
      }
      return color
    }
  }
}
</script>

<style lang="scss" scoped>
.record-style {
  /deep/.el-dialog {
    margin-left: 75% !important;
    width: 25% !important;
  }
  /deep/.el-dialog__wrapper {
    z-index: -1 !important;
    background-color: rgba(0, 0, 0, 0);
    // .el-timeline-item__timestamp.is-bottom {
    //   position: absolute;
    //   left: -80px;
    //   top: -3px;
    //   color: #333333;
    // }
    // .el-timeline {
    //   padding-left: 150px;
    // }
  }
  .history-btn {
    height: 2.5vw;
    position: absolute;
    right: 0;
    top: 0;
  }
  .mask {
    width: 50px;
    max-height: 69vh;
    background-color: aqua;
    position: absolute;
    top: 0;
    // left: 100%;
    // transform: translateX(-50%);
    z-index: 99999;
  }
  /deep/.el-dialog {
    box-sizing: content-box !important;
  }
}
/deep/.el-dialog__body {
  /* box-sizing: border-box; */
  height: 65vh;
}

.mask-div {
  height: 100%;
  /deep/.el-loading-mask {
    margin: 0 -1.04167vw;
  }
}
</style>
