<template>
  <!-- 我收到的 -->
  <div class="received">
    <ht-table
      ref="htTable"
      :data="tableData"
      :page-result="pageResult"
      :selectable="false"
      :quick-search-props="quickSearchProps"
      :quick-search-width="300"
      :show-export="false"
      pagination-justify="end"
      :show-custom-column="false"
      :header-cell-class-name="headerCellClassName"
      :page-sizes="pageSizes"
      :default-sorter="defaultSorter"
      @load="loadData"
      @selection-change="handleSelectionChange"
    >
      <template #toolbar>
        <el-button
          size="small"
          icon="icon-circulate-item-read"
          :disabled="isDisabled"
          @click="handleSetRead"
        >
          {{ $t('myReceived.CirculateRead') }}
        </el-button>
      </template>
      <template #search>
        <ht-table-search-panel
          :divide="3"
          :label-width="100"
          display-style="block"
        >
          <ht-table-search-field
            :label="$t('myReceived.flowSubject')"
            prop="bpm_pro_inst.subject_"
            operation="LIKE"
          />
          <ht-table-search-field
            :label="$t('myReceived.flowCode')"
            prop="bpm_task_notice.proc_inst_id_"
            operation="LIKE"
          />
          <ht-table-search-field
            :label="$t('myReceived.flowProcDefName')"
            prop="bpm_pro_inst.proc_def_name_"
            operation="LIKE"
          />
          <ht-table-search-field
            :label="$t('myReceived.flowTaskName')"
            prop="bpm_task_notice.name_"
            operation="LIKE"
          />
          <ht-table-search-field
            :label="$t('myReceived.flowTaskNoticeCreateTime')"
            prop="bpm_task_notice.create_time_"
            type="datetimerange"
            operation="BETWEEN"
            sortable
          />
          <ht-table-search-field
            :label="$t('myReceived.circulator')"
            prop="bpm_task_notice.owner_name_"
            operation="LIKE"
          />
        </ht-table-search-panel>
      </template>
      <template #default>
        <ht-table-column
          type="selection"
          width="50"
          align="center"
          fixed="left"
        />
        <ht-table-column
          type="index"
          width="50"
          align="center"
          fixed="left"
          :label="$t('myReceived.flowIndex')"
        />
        <ht-table-column
          prop="procInstId"
          width="200"
          align="left"
          :label="$t('myReceived.flowCode')"
          fixed="left"
        >
          <template #default="{ row }">
            <div class="instance-id_wrap">
              {{ row.procInstId }}
              <span
                class="copy-icon"
                @click="(event) => clipboard(row.procInstId, event)"
              >
                <i class="icon-copy"></i>
              </span>
            </div>
          </template>
        </ht-table-column>
        <ht-table-column
          :label="$t('myReceived.flowSubject')"
          align="left"
          min-width="300"
          show-overflow-tooltip
          fixed="left"
        >
          <template #default="{ row }">
            <span class="subject" @click="handleClick(row)">
              {{ row.subject }}
            </span>
          </template>
        </ht-table-column>
        <ht-table-column
          align="left"
          prop="procDefName"
          :label="$t('myReceived.flowProcDefName')"
          width="160"
          show-overflow-tooltip
        />
        <ht-table-column
          align="left"
          prop="name"
          :label="$t('myReceived.flowTaskName')"
          width="160"
          show-overflow-tooltip
        />
        <ht-table-column
          align="left"
          prop="bpm_task_notice.create_time_"
          :label="$t('myReceived.flowTaskNoticeCreateTime')"
          width="160"
          show-overflow-tooltip
          sortable
        >
          <template #default="{ row }">
            <span>
              {{ row.createTime }}
            </span>
          </template>
        </ht-table-column>
        <ht-table-column
          align="left"
          prop="ownerName"
          :label="$t('myReceived.circulator')"
          width="160"
          show-overflow-tooltip
        />
        <ht-table-column
          align="left"
          :label="$t('myReceived.flowTaskNoticeStatus')"
          width="120"
          :filters="todoReadStatus"
          :render-header="renderHeaderMethod"
          prop="bpm_task_notice.status_"
        >
          <template #default="{ row }">
            <span>
              <ht-icon
                name="dot"
                :class="statusDotClassName[row.status]"
              ></ht-icon>
              {{ todoReadStatusMap[row.status] }}
            </span>
          </template>
        </ht-table-column>
        <ht-table-column
          align="left"
          :label="$t('myReceived.flowTaskNoticeIsread')"
          width="100"
          :render-header="renderHeaderMethod"
          :filters="readStatus"
          prop="bpm_task_notice.is_read_"
        >
          <template #default="{ row }">
            <span :class="row.isRead === 0 ? 'default-color' : 'green-color'">
              {{ row.isRead === 1 ? '已阅' : '待阅' }}
            </span>
          </template>
        </ht-table-column>
      </template>
    </ht-table>
  </div>
</template>

<script>
  import matter from '@/mixins/matter'
  import tableHeight from '@/mixins/tableHeight'
  import tableHeaderFilter from '@/mixins/tableHeaderFilter'

  import { getNoticeTodoReadList, setRead, deleteTask } from '@/api/process'

  import {
    RECEIVED_STATUS,
    RECEIVED_QUICK_SEARCH_PROPS,
    STATUS_DOT_CLASS_NAME_MAP,
    READ_STATUS,
  } from './const'

  export default {
    name: 'Received',
    mixins: [matter, tableHeight, tableHeaderFilter],
    data() {
      return {
        defaultSorter: [
          { property: 'bpm_task_notice.create_time_', direction: 'DESC' },
        ],
        tableData: [],
        quickSearchProps: RECEIVED_QUICK_SEARCH_PROPS,
        isDisabled: true,
        selection: [],
        statusDotClassName: STATUS_DOT_CLASS_NAME_MAP,
        todoReadStatusMap: RECEIVED_STATUS,
        readStatus: READ_STATUS,
      }
    },
    computed: {
      todoReadStatus() {
        return Object.keys(RECEIVED_STATUS).map((item) => {
          return {
            text: RECEIVED_STATUS[item],
            value: item,
          }
        })
      },
    },
    watch: {
      selection(val) {
        this.isDisabled = val.length < 1 ? true : false
      },
    },
    activated() {
      this.$refs.htTable.load(true)
    },
    methods: {
      loadData(param, cb) {
        if (this.$route.query && this.$route.query.flowKey) {
          param.querys = param.querys || []
          param.querys.push({
            property: 'bpm_pro_inst.proc_def_key_',
            value: this.$route.query.flowKey,
            operation: 'EQUAL',
            relation: 'AND',
            group: 'main',
          })
        }
        const data = {
          pageBean: this.pageResult,
          ...param,
          querys: this.getCurrentQuery(param, 'bpm_pro_inst.type_id_'),
        }
        getNoticeTodoReadList(data)
          .then((res) => {
            if (!res) return
            const { rows, page, pageSize, total } = res
            this.tableData = rows || []
            this.pageResult = {
              page,
              pageSize,
              total,
            }
          })
          .finally(() => cb())
      },
      handleClick(row) {
        this.$router.push({
          path: '/matter/approvalForm',
          query: {
            readId: row.id, //为知会任务表的id
            instId: row.procInstId,
            from: 'received',
            receivedStatus: row.status,
            isRead: row.isRead,
            nodeId: row.nodeId,
          },
        })
      },
      handleSelectionChange(selection) {
        this.selection = selection
        if (selection.length > 0) {
          this.isDisabled = false
        } else {
          this.isDisabled = true
        }
      },
      handleSetRead() {
        let unReadidList = []
        let readSubjectList = []
        let selection = this.$refs.htTable.$refs.htTable.selection
        for (let i = selection.length - 1; i >= 0; i--) {
          if (selection[i].isRead === 0) {
            unReadidList.push(selection[i].id)
          } else {
            readSubjectList.push(selection[i].subject)
            selection.splice(i, 1)
          }
        }
        const unReadIds = unReadidList.join(',')
        if (readSubjectList.length > 0) {
          const message = `以下为已阅任务,不需重复标记:</br>${readSubjectList?.join(
            '</br>'
          )}`
          this.showTipMessage(message)
        }
        if (unReadIds) {
          {
            setRead(unReadIds).then((res) => {
              this.$message.success('标记成功')
              this.$refs.htTable.load()
              this.isDisabled = true
            })
          }
        } else {
          this.isDisabled = true
        }
      },
      showTipMessage(message) {
        this.$message({
          dangerouslyUseHTMLString: true,
          message,
          customClass: 'tip-message',
          type: 'warning',
        })
      },
    },
  }
</script>

<style lang="scss" scoped>
  .received {
    height: 100%;
    .subject {
      cursor: pointer;
      color: var(--themeColor);
    }
  }
  ::v-deep .el-table--scrollable-x .el-table__body-wrapper {
    overflow-x: auto;
    z-index: 0;
  }
  ::v-deep .el-table__body-wrapper {
    height: 100%;
  }
</style>