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

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

        <el-table-column align="center" label="处理情况" width="140" show-overflow-tooltip>
          <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 label="处理意见" show-overflow-tooltip align="center">
          <template slot-scope="scope">
            <strong><span style=" white-space: pre-wrap;">{{ scope.row.opinion }}</span></strong> <br />
            <div class="div_fj" v-if="scope.row.files && scope.row.files.length != 0">
              <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 class="div_fj" v-if="scope.row.zfiles && scope.row.zfiles.length != 0">
              <span class="title">正文：</span>
              <span style="float: left;" v-for="(item, index) in scope.row.zfiles" :key="index">
                <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 prop="completeTime" label="操作时间" width="170" align="center" show-overflow-tooltip></el-table-column>

        <el-table-column align="center" label="持续时间" width="110" show-overflow-tooltip>
          <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
      :visible.sync="previewNodeFormDialogVisible"
      :title="opinionTaskName + '-审批表单'"
      width="80%"
      :close-on-click-modal="false"
      :before-close="closeFromDialog"
    >
      <DoneFormContent
        ref="doneFormContent"
        v-if="opinionSelectNodeId"
        :instId="opinionInstId"
        :nodeId="opinionSelectNodeId"
        :taskId="opinionTaskId"
        :defId="opinionProcDefId"
        :pData="opinionFormData"
      />
      <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;
}

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

/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;
}
/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>
