<template>
  <div style="background: #fff;padding:20px">
    <div class="record-container"><span>处理记录</span></div>
    <div class="record-content">
      <el-table
        :data="opinions"
        :default-sort="{prop: 'createTime,completeTime', order: 'descending'}"
        :row-key="getRowKeys"
        border
        header-cell-class-name="done-header-row"
        row-class-name="done-row"
        size="medium"
        style="width: 100%"
      >
        <el-table-column align="center" label="序号" width="50">
          <template slot-scope="scope">
            <span>{{ opinions.length - scope.$index }}</span>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="审批节点"
          prop="taskName"
          show-overflow-tooltip
          width="170"
        ></el-table-column>

        <el-table-column
          align="center"
          label="待审批人"
          prop="qualfiedNames"
          show-overflow-tooltip
          width="110"
        >
          <template slot-scope="{row}">
            <span
              v-if="
                row.status != 'awaiting_check' &&
                  qualfiedsName(row.qualfiedNames, true) < 2
              "
              >{{ row.qualfiedNames }}</span
            >
            <span
              v-if="
                row.status === 'awaiting_check' &&
                  row.qualfieds &&
                  row.qualfieds.length === 1 &&
                  !row.qualfieds[0].users
              "
              >{{ row.qualfiedNames }}</span
            >
            <el-popover
              v-if="
                row.status == 'awaiting_check' ||
                  qualfiedsName(row.qualfiedNames, true) > 1
              "
              placement="right"
              popper-class="right-popover"
              trigger="hover"
            >
              <div>
                <p class="qualfied_names">名称</p>
                <div
                  v-if="isQualfiedListHasUser(row.qualfieds)"
                  class="btn__wrap"
                >
                  <p v-for="(item, index) in row.qualfieds" :key="index">
                    <el-tooltip
                      v-if="item.users"
                      :content="item.users"
                      class="item"
                      effect="light"
                      placement="top"
                    >
                      <el-button plain size="mini">{{ item.name }}</el-button>
                    </el-tooltip>
                    <el-button v-if="!item.users" plain size="mini"
                      >{{ item.name }}
                    </el-button>
                  </p>
                </div>
                <div v-else class="btn__wrap">
                  <p
                    v-for="(item, index) in qualfiedsName(
                      row.qualfiedNames,
                      false
                    )"
                    :key="index"
                  >
                    <el-button plain size="mini">{{ item }}</el-button>
                  </p>
                </div>
              </div>
              <i
                v-if="
                  isQualfiedListHasUser(row.qualfieds) ||
                    qualfiedsName(row.qualfiedNames, true) > 1
                "
                slot="reference"
                class="el-icon-more qualfied-more__icon"
              ></i>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="处理人"
          prop="auditorName"
          show-overflow-tooltip
          width="110"
        ></el-table-column>

        <el-table-column
          align="center"
          label="处理情况"
          show-overflow-tooltip
          width="140"
        >
          <template slot-scope="scope">
            <span
              v-if="scope.row.isRead == 0 && scope.row.statusVal == '待审批'"
              >待阅</span
            >
            <span
              v-if="scope.row.isRead == 1 && scope.row.statusVal == '待审批'"
              >已阅</span
            >
            <span v-if="scope.row.statusVal != '待审批'">{{
              scope.row.statusVal
            }}</span>
          </template>
        </el-table-column>

        <el-table-column align="center" label="处理意见" show-overflow-tooltip>
          <template slot-scope="scope">
            <strong
              ><span style=" white-space: pre-wrap;">{{
                scope.row.opinion
              }}</span></strong
            >
            <br />
            <div
              v-if="scope.row.files && scope.row.files.length != 0"
              class="div_fj"
            >
              <div class="title">附件：</div>
              <div
                v-for="(item, index) in scope.row.files"
                :key="index"
                style="cursor:pointer"
              >
                <el-tag @click="search(item)">{{ item.name }}</el-tag>
              </div>
            </div>
            <br />
            <div
              v-if="scope.row.zfiles && scope.row.zfiles.length != 0"
              class="div_fj"
            >
              <span class="title">正文：</span>
              <span
                v-for="(item, index) in scope.row.zfiles"
                :key="index"
                style="float: left;"
              >
                <span v-if="index == 0">
                  <span class="files fj_right" @click="search(item)">{{
                    item.name
                  }}</span>
                  <br />
                </span>
                <span v-if="index != 0">
                  <span class="files fj_left" @click="search(item)">{{
                    item.name
                  }}</span>
                  <br />
                </span>
              </span>
            </div>
          </template>
        </el-table-column>

        <el-table-column
          align="center"
          label="操作时间"
          prop="completeTime"
          show-overflow-tooltip
          width="170"
        ></el-table-column>

        <el-table-column
          align="center"
          label="持续时间"
          show-overflow-tooltip
          width="110"
        >
          <template slot-scope="scope">
            <span>{{ formatTimeLag(scope.row) }}</span>
          </template>
        </el-table-column>
        <!-- <el-table-column label="操作" width="90" align="center">
            <template slot-scope="scope">
                <el-button v-if="scope.row.formData && scope.row.status != 'awaiting_check'" @click="previewNodeForm(scope.row)" >表单</el-button>
            </template>
        </el-table-column> -->
      </el-table>
    </div>

    <el-dialog
      :before-close="closeFromDialog"
      :close-on-click-modal="false"
      :title="opinionTaskName + '-审批表单'"
      :visible.sync="previewNodeFormDialogVisible"
      width="80%"
    >
      <DoneFormContent
        v-if="opinionSelectNodeId"
        ref="doneFormContent"
        :defId="opinionProcDefId"
        :instId="opinionInstId"
        :nodeId="opinionSelectNodeId"
        :pData="opinionFormData"
        :taskId="opinionTaskId"
      />
      <br />
    </el-dialog>

    <!-- 预览文件-->
    <FilePreview ref="filePreview" />
  </div>
</template>
<script>
import {mapState, mapActions} from 'vuex'
import req from '@/request.js'
import FilePreview from '@/components/common/FilePreview.vue'
import DoneFormContent from '@/components/flow/doneFormContent.vue'
import {Base64} from 'js-base64'

export default {
  name: 'processRecord',
  components: {FilePreview, DoneFormContent},
  props: {
    instId: String,
    taskId: String,
    referOpinion: Boolean,
    nodeType: String,
    defId: String,
    nodeId: String,
    myReadType: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      src: '',
      data: {taskId: '', referOpinion: false},
      fileId: '',
      fileTree: '',
      // 获取row的key值
      getRowKeys(row) {
        return row.id
      },
      previewNodeFormDialogVisible: false,
      opinionSelectNodeId: '',
      opinionInstId: '',
      opinionTaskId: '',
      opinionFormData: '',
      opinionTaskName: '',
      opinionProcDefId: ''
    }
  },
  watch: {
    instId: function(newVal, oldVal) {
      this.data.instId = newVal //newVal即是instId
      this.data.taskId = this.taskId
      this.data.referOpinion = this.referOpinion
      this.data.nodeType = this.nodeType
      this.data.defId = this.defId
      this.data.nodeId = this.nodeId
      if (this.myReadType === 'request') {
        this.data.isRequest = true
      }
      this.$store.dispatch('storeProcess/getOpinionsById', this.data)
    }
  },
  computed: mapState({
    opinions: state => state.storeProcess.opinions
  }),
  methods: {
    qualfiedsName(names, isLength) {
      if (names && isLength) {
        return names.split(',').length
      }
      if (names && !isLength) {
        return names.split(',')
      }
    },
    isQualfiedListHasUser(data) {
      if (Array.isArray(data)) {
        for (let i = 0; i < data.length; i++) {
          if (data[i].users) {
            return true
          }
        }
        return false
      }
    },
    closeFromDialog() {
      this.previewNodeFormDialogVisible = false
      this.opinionSelectNodeId = ''
      this.opinionInstId = ''
      this.opinionTaskId = ''
      this.opinionFormData = ''
      this.opinionTaskName = ''
    },
    previewNodeForm(row) {
      this.previewNodeFormDialogVisible = true
      this.opinionSelectNodeId = row.taskKey
      this.opinionInstId = row.procInstId
      this.opinionTaskId = row.taskId
      this.opinionProcDefId = row.procDefId
      this.opinionTaskName = row.taskName
      this.opinionFormData = JSON.parse(Base64.decode(row.formData))
    },
    //查看附件
    formatTimeLag(row) {
      console.log(row)
      let endTimes = 0
      if (!row.completeTime) {
        endTimes = new Date().getTime()
      } else {
        endTimes = new Date(row.completeTime).getTime()
      }
      let difference = endTimes - new Date(row.createTime).getTime()
      let r = ''
      ////计算出相差天数
      let days = Math.floor(difference / (24 * 3600 * 1000))
      //计算出小时数
      let leave1 = difference % (24 * 3600 * 1000) //计算天数后剩余的毫秒数
      let hours = Math.floor(leave1 / (3600 * 1000))
      //计算相差分钟数
      let leave2 = leave1 % (3600 * 1000) //计算小时数后剩余的毫秒数
      let minutes = Math.floor(leave2 / (60 * 1000))
      //计算相差秒数
      let leave3 = leave2 % (60 * 1000) //计算分钟数后剩余的毫秒数
      let seconds = Math.round(leave3 / 1000)
      if (days > 0) r += days + '天'
      if (hours > 0) r += hours + '小时'
      if (days > 0) {
        return r
      }
      if (minutes > 0) r += minutes + '分钟'
      if (hours > 0) {
        return r
      }
      if (seconds > 0) r += seconds + '秒'
      if (minutes == 0 && seconds >= 0) {
        return '小于1分钟'
      }
      //r.slice(0, r.indexOf('时'));
      return r
    },
    search(item) {
      this.$refs.filePreview.preview(item)
    },
    getOpinion(opinion) {
      return Base64.decode(opinion)
    }
  },
  created() {
    if (this.instId) {
      this.data.instId = this.instId
      this.data.taskId = this.taskId
      this.data.referOpinion = this.referOpinion
      this.data.nodeType = this.nodeType
      this.data.defId = this.defId
      this.data.nodeId = this.nodeId
      //类型为我的请求时添加参数isRequest进行过滤
      if (this.myReadType === 'request') {
        this.data.isRequest = true
      }
      this.$store.dispatch('storeProcess/getOpinionsById', this.data)
    }
  }
}
</script>
<style lang="scss" scoped>
@import '@/assets/css/element-variables.scss';

.div_fj {
  text-align: left;
  padding: 5px 0px;
}

.fj_left {
  padding: 0 15px;
  border-left: 1px solid #d8d8d8;
}

.fj_right {
  padding: 0 15px 0 0;
}

.title {
  display: block;
  color: #a2a2a2;
  font-weight: bold;
}

.record-container {
  border-bottom: 1px solid #ebeef5;
  padding-bottom: 10px;
}

.record-container > span {
  border-left: 3px solid $--theme-color;
  font-weight: bold;
  font-size: 14px;
  padding-left: 10px;
  color: #666;
}

.record-content {
  padding: 20px 0;
}

.files {
  cursor: pointer;
  font-size: 12px;
  color: #5eade6;
}

.files:hover {
  color: $--theme-color;
}

::v-deep .el-table .cell.el-tooltip {
  min-width: 50px;
}

::v-deep .el-table .cell {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-break: break-all;
  line-height: 23px;
  padding-left: 10px;
  padding-right: 10px;
}

::v-deep .owner-span {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.btn__wrap {
  display: flex;
  flex-wrap: wrap;

  p {
    margin: 0;
  }
}

.qualfied-more__icon {
  &:hover {
    cursor: pointer;
  }
}
</style>
