<template>
  <div v-if="permission != 'n'" class="ht-opinion">
    <ht-table
      :data="rows"
      :selectable="false"
      :show-export="false"
      :show-custom-column="false"
      :nopagination="true"
      :no-header="true"
      :custom-table-height="400"
      @loading="loadData"
    >
      <ht-table-column width="60" label="序号" type="index" align="left" />
      <ht-table-column
        label="审批节点"
        width="170"
        prop="taskName"
        show-overflow-tooltip
        align="left"
      />
      <ht-table-column
        label="待审批人"
        show-overflow-tooltip
        width="110"
        align="left"
      >
        <template #default="{ row: { status, qualfieds, qualfiedNames } }">
          <span v-if="showQualfiedsNames(status, qualfieds, qualfiedNames)">
            {{ qualfiedNames }}
          </span>
          <el-popover
            v-if="
              status == 'awaiting_check' ||
              qualfiedsName(qualfiedNames, true) > 1
            "
            placement="right"
            popper-class="right-popover"
            trigger="hover"
          >
            <div>
              <p class="qualfied_names">名称</p>
              <div v-if="isQualfiedListHasUser(qualfieds)" class="btn__wrap">
                <p v-for="(item, index) in qualfieds" :key="index">
                  <el-tooltip
                    v-if="item.users"
                    class="item"
                    effect="light"
                    placement="top"
                    :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 v-else class="btn__wrap">
                <p
                  v-for="(item, index) in qualfiedsName(qualfiedNames, false)"
                  :key="index"
                >
                  <el-button plain size="mini">{{ item }}</el-button>
                </p>
              </div>
            </div>
            <i
              v-if="
                isQualfiedListHasUser(qualfieds) ||
                qualfiedsName(qualfiedNames, true) > 1
              "
              slot="reference"
              class="el-icon-more qualfied-more__icon"
            ></i>
          </el-popover>
        </template>
      </ht-table-column>

      <ht-table-column
        label="处理人"
        width="110"
        prop="auditorName"
        show-overflow-tooltip
        align="left"
      />

      <ht-table-column
        label="处理情况"
        width="140"
        show-overflow-tooltip
        align="left"
      >
        <template #default="{ row: { isRead, statusVal } }">
          <span v-if="statusVal == '待审批'">
            {{ isRead == 0 ? '待阅' : '已阅' }}
          </span>
          <span v-else>
            {{ statusVal }}
          </span>
        </template>
      </ht-table-column>

      <ht-table-column label="处理意见" show-overflow-tooltip align="left">
        <template #default="{ row: { opinion, filesArray } }">
          <span style="white-space: pre-wrap">{{ opinion }}</span>
          <div v-if="filesArray && filesArray.length" class="appendix">
            <div class="title">附件：</div>
            <div class="file-content">
              <div
                v-for="(item, index) in filesArray"
                :key="index"
                class="attachment"
              >
                <el-tooltip placement="right" effect="light">
                  <div slot="content">
                    <el-button
                      icon="el-icon-download"
                      circle
                      @click="downloadAttachments(item)"
                    ></el-button>
                  </div>
                  <el-tag @click="search(item)">{{ item.name }}</el-tag>
                </el-tooltip>
              </div>
            </div>
          </div>
        </template>
      </ht-table-column>

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

      <ht-table-column
        label="停留时长"
        width="110"
        show-overflow-tooltip
        align="left"
      >
        <template #default="{ row }">
          <span>{{ formatTimeLag(row) }}</span>
        </template>
      </ht-table-column>
    </ht-table>
  </div>
</template>
<script>
  import { mapGetters } from 'vuex'
  import storeProcess from '@/api/storeProcess'
  import { downloadFile } from '@/api/portal.js'
  import moment from 'moment'
  export default {
    name: 'HtOpinions',
    props: {
      permission: {
        type: String,
        default: 'w',
        validator: function (value) {
          return ['b', 'w', 'r', 'n'].indexOf(value) !== -1
        },
      },
      flowData: {
        type: Object,
        default: () => {
          return {}
        },
      },
    },
    data() {
      return {
        rows: [], // 表格数据
      }
    },
    computed: {
      ...mapGetters('user', ['accessToken']),
    },
    methods: {
      search(item) {
        window.open(
          `${this.$file.previewUrl}?fileId=${
            item.response && item.response.fileId
          }&token=${this.accessToken}`
        )
      },
      downloadAttachments(item) {
        downloadFile(item.response?.fileId, item.response?.fileName)
      },
      isQualfiedListHasUser(data) {
        if (Array.isArray(data)) {
          for (let i = 0; i < data.length; i++) {
            if (data[i].users) {
              return true
            }
          }
          return false
        }
      },
      showQualfiedsNames(status, qualfieds, qualfiedNames) {
        let result = this.qualfiedsName(qualfiedNames, true)
        let length = result && result.length ? result.length : ''
        return (
          (length < 2 && status != 'awaiting_check') ||
          (status == 'awaiting_check' &&
            qualfieds &&
            qualfieds.length == 1 &&
            !qualfieds[0].users)
        )
      },
      qualfiedsName(names, isLength) {
        if (names && isLength) {
          return names.split(',').length
        }
        if (names && !isLength) {
          return names.split(',')
        }
      },
      loadData(param, cb) {
        console.log('意见控件测试')
        const params = {
          ...this.flowData,
        }
        storeProcess
          .getOpinionsById(params)
          .then((response) => {
            response.map((e) => {
              //有可能出现e.files是"\"\""的情况
              if (e.files && JSON.parse(e.files)) {
                e.filesArray = JSON.parse(JSON.parse(e.files))
              }
            })
            this.rows = response
          })
          .finally(() => {
            cb?.()
          })
      },
      //持续时间
      formatTimeLag(row) {
        let endTimes = new moment()
        if (!row.completeTime) {
          endTimes = new moment(new Date())
        } else {
          endTimes = new moment(new Date(row.completeTime))
        }

        let createTime = new moment(new Date(row.createTime))
        let duration = moment.duration(endTimes.diff(createTime))
        let { _data } = duration
        if (_data.days > 0) return _data.days + '天'
        if (_data.hours > 0) return _data.hours + '小时'
        if (_data.minutes > 0) return _data.minutes + '分钟'
        if (_data.minutes == 0 && _data.seconds >= 0) return '小于1分钟'
      },
    },
  }
</script>
<style lang="scss" scoped>
  .ht-opinion {
    .appendix {
      display: flex;
      .file-content {
        flex: 1;
        .attachment {
          margin-bottom: 10px;
          cursor: pointer;
        }
      }
    }
  }
</style>