<template>
  <div class="record-wrap">
    <!-- <div class="record-container">处理记录</div> -->
    <div class="record-content">
      <!--
        :default-sorter="[
          { direction: 'DESC', property: 'createTime,completeTime' },
        ]" -->
      <ht-table
        :data="rows"
        :selectable="false"
        :show-export="false"
        :show-custom-column="false"
        :nopagination="true"
        @loading="loadData"
      >
        <ht-table-column
          width="60"
          align="center"
          :label="$t('processRecord.index')"
          type="index"
        />
        <ht-table-column
          :label="$t('processRecord.ApprovalNode')"
          width="170"
          align="center"
          prop="taskName"
          :show-overflow-tooltip="overToolTip"
        />
        <ht-table-column
          :label="$t('processRecord.ApprovedBy')"
          :show-overflow-tooltip="overToolTip"
          width="110"
          align="center"
        >
          <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="$t('processRecord.Handler')"
          width="110"
          align="center"
          prop="auditorName"
          :show-overflow-tooltip="overToolTip"
        >
          <template #default="{ row }">
            <span>{{ row.auditorName }}</span>
          </template>
        </ht-table-column>

        <ht-table-column
          align="center"
          :label="$t('processRecord.Treatment')"
          width="140"
          :show-overflow-tooltip="overToolTip"
        >
          <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="$t('processRecord.HandlingOpinions')"
          :show-overflow-tooltip="overToolTip"
          align="center"
        >
          <template #default="{ row: { opinion, filesArray } }">
            <strong>
              <span style="white-space: pre-wrap">{{ opinion }}</span>
            </strong>

            <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="bottom-start" effect="light">
                    <div slot="content">
                      <el-button
                        icon="el-icon-download"
                        circle
                        @click="downloadAttachments(item)"
                      ></el-button>
                    </div>
                    <el-tag @click="search(item)">
                      {{
                        item.response && item.response.fileName
                          ? item.response.fileName
                          : item.name
                      }}
                    </el-tag>
                  </el-tooltip>
                </div>
              </div>
            </div>
            <!-- <div
              v-if="row.textFiles && row.textFiles.length != 0"
              class="appendix"
            >
              <span class="title">正文：</span>
              <span
                v-for="(item, index) in row.textFiles"
                :key="index"
                style="float: left"
              >
                <span
                  class="files"
                  :class="index == 0 ? 'appendix_right' : 'appendix_left'"
                  @click="search(item)"
                >
                  {{ item.name }}
                </span>
              </span>
            </div> -->
          </template>
        </ht-table-column>

        <ht-table-column
          :label="$t('processRecord.OperationTime')"
          width="170"
          align="center"
          :show-overflow-tooltip="overToolTip"
        >
          <template #default="{ row }">
            <span style="white-space: pre-wrap">{{ row.completeTime }}</span>
          </template>
        </ht-table-column>

        <ht-table-column
          align="center"
          :label="$t('processRecord.Duration')"
          width="110"
          :show-overflow-tooltip="overToolTip"
        >
          <template #default="{ row }">
            <span>{{ formatTimeLag(row) }}</span>
          </template>
        </ht-table-column>
      </ht-table>
    </div>

    <!-- <el-dialog
      :visible.sync="previewNodeFormDialogVisible"
      :title="opinionTaskName + '-审批表单'"
      width="80%"
      :close-on-click-modal="false"
      :before-close="closeFromDialog"
    >
      <DoneFormContent
        v-if="opinionSelectNodeId"
        ref="doneFormContent"
        :inst-id="opinionInstId"
        :node-id="opinionSelectNodeId"
        :task-id="opinionTaskId"
        :def-id="opinionProcDefId"
        :p-data="opinionFormData"
      />
    </el-dialog> -->
  </div>
</template>
<script>
  /* eslint-disable */
  // import FilePreview from '@/components/common/FilePreview.vue'
  // import DoneFormContent from '@/components/flow/doneFormContent.vue'
  import moment from 'moment'
  import { downloadFile } from '@/api/portal.js'
  // import { Base64 } from 'js-base64'
  import storeProcess from '@/api/storeProcess'
  import { isJSON, isJsonStr } from '@/utils'
  export default {
    name: 'ProcessRecord',
    // components: { FilePreview, DoneFormContent },
    props: {
      instId: String,
      taskId: String,
      referOpinion: Boolean,
      nodeType: String,
      defId: String,
      nodeId: String,
      myReadType: {
        type: String,
        default: '',
      },
      overToolTip: {
        type: Boolean,
        default: true,
      },
    },
    data() {
      return {
        src: '',
        data: { taskId: '', referOpinion: false },
        fileId: '',
        // 获取row的key值
        // getRowKeys(row) {
        //   return row.id
        // },
        previewNodeFormDialogVisible: false,
        opinionSelectNodeId: '',
        opinionInstId: '',
        opinionTaskId: '',
        opinionFormData: '',
        opinionTaskName: '',
        opinionProcDefId: '',
        rows: [], // 表格数据
      }
    },
    // 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)
    //   },
    // },
    created() {
      this.initParams()
    },
    methods: {
      showQualfiedsNames(status, qualfieds, qualfiedNames) {
        const length = this.qualfiedsName(qualfiedNames, true)
        return (
          (length < 2 && status != 'awaiting_check') ||
          (status == 'awaiting_check' &&
            qualfieds &&
            qualfieds.length == 1 &&
            !qualfieds[0].users)
        )
      },
      initParams() {
        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)
        }
      },
      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) {
        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分钟'
      },
      search(item) {
        window.open(
          this.$requestConfig.filePreview(item.response && item.response.fileId)
        )
      },
      downloadAttachments(item) {
        downloadFile(item.response?.fileId, item.response?.fileName)
      },
      // getOpinion(opinion) {
      //   return Base64.decode(opinion)
      // },
      loadData(param, cb) {
        const params = {
          instId: this.instId,
          taskId: this.taskId,
          referOpinion: this.referOpinion,
          nodeType: this.nodeType,
          defId: this.defId,
          nodeId: this.nodeId,
        }
        storeProcess
          .getOpinionsById(params)
          .then((response) => {
            response.map((e) => {
              //有可能出现e.files是"\"\""的情况
              try {
                e.files = JSON.parse(e.files)
                e.filesArray = eval(e.files)
                // e.filesArray = JSON.parse(JSON.parse(e.files))
              } catch (e) {
                e.filesArray = []
              }
            })
            if (response && response.length) {
              // this.rows = response.filter((item) => item.status !== 'skip')
              this.rows = response
            }
          })
          .finally(() => {
            cb?.()
          })
      },
    },
  }
</script>
<style lang="scss" scoped>
  .el-message-box__body {
    border-top: none;
  }
  .el-main {
    padding: 0;
  }
  .appendix {
    padding: 5px 0px;
    text-align: left;
    display: flex;
    .file-content {
      flex: 1;
    }
  }

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

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

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

  .attachment {
    display: block;
    margin-bottom: 10px;
    cursor: pointer;
    ::v-deep {
      .el-tooltip {
        max-width: 500px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
    }
  }

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

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

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

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

  ::v-deep .el-table .cell {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding-right: 10px;
    padding-left: 10px;
    overflow: hidden;
    line-height: 23px;
    text-overflow: ellipsis;
    word-break: break-all;
    white-space: nowrap;
  }
  ::v-deep .owner-span {
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .btn__wrap {
    display: flex;
    flex-wrap: wrap;
    p {
      margin: 0;
    }
  }
  .qualfied-more__icon {
    &:hover {
      cursor: pointer;
    }
  }
</style>
