<template>
  <div class="circulated">
    <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"
      @load="loadData"
    >
      <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"
          />
          <ht-table-search-field
            :label="$t('myReceived.flowTaskNoticeOwnerName')"
            prop="bpm_task_notice.assignee_name_"
            operation="LIKE"
          />
        </ht-table-search-panel>
      </template>
      <template #default>
        <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"
          sortable
          show-overflow-tooltip
        >
          <template #default="{ row }">
            <span>
              {{ row.createTime }}
            </span>
          </template>
        </ht-table-column>
        <ht-table-column
          align="left"
          prop="assigneeName"
          :label="$t('myReceived.flowTaskNoticeOwnerName')"
          width="160"
          show-overflow-tooltip
        />
        <ht-table-column
          :label="$t('myReceived.flowTaskNoticeStatus')"
          width="160"
          prop="bpm_task_notice.is_read_"
          show-overflow-tooltip
          align="left"
          :render-header="renderHeaderMethod"
          :filters="readStatusArr"
        >
          <template #default="{ row }">
            <span :class="row.isRead === 1 ? 'green-color' : 'default-color'">
              {{ row.isRead === 1 ? '已阅' : '待阅' }}
            </span>
          </template>
        </ht-table-column>
        <ht-table-column
          :label="$t('myReceived.flowTaskNoticeIsrevoke')"
          width="160"
          prop="bpm_task_notice.is_revoke_"
          show-overflow-tooltip
          align="left"
          :render-header="renderHeaderMethod"
          :filters="statusArr"
        >
          <template #default="{ row }">
            <span>{{ row.isRevoke === 1 ? '已撤回' : '未撤回' }}</span>
          </template>
        </ht-table-column>
        <ht-table-column
          :label="$t('myReceived.operation')"
          align="center"
          width="100"
          fixed="right"
        >
          <template #default="{ row }">
            <el-button
              v-if="row.isRevoke === 0"
              type="text"
              class="theme-color"
              size="small"
              @click="handleRevoke(row)"
            >
              撤回
            </el-button>
          </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 { getMyNoticeReadList, revokeProcessById } from '@/api/process'

  import { CIRCULATED_QUICK_SEARCH_PROPS, READ_STATUS } from './const'

  export default {
    name: 'Circulated',
    mixins: [matter, tableHeight, tableHeaderFilter],
    data() {
      return {
        tableData: [],
        quickSearchProps: CIRCULATED_QUICK_SEARCH_PROPS,
        statusArr: [
          {
            text: '已撤回',
            value: 1,
          },
          {
            text: '未撤回',
            value: 0,
          },
        ],
        readStatusArr: READ_STATUS,
      }
    },
    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_'),
        }
        getMyNoticeReadList(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,
            instId: row.procInstId,
            from: 'circulate',
            nodeId: row.nodeId,
            // __isFull__: false,
          },
        })
      },
      handleRevoke(row) {
        this.$confirm('确认撤回此流程?', '提示', {
          cancelButtonText: '取消',
          confirmButtonText: '确定',
          type: 'warning',
          closeOnClickModal: false,
          beforeClose: (action, instance, done) => {
            if (action === 'confirm') {
              instance.confirmButtonLoading = true
              revokeProcessById(row.id)
                .then((res) => {
                  if (!res.state) return this.$message.error(res.message)
                  this.$message.success(res.message)
                  this.$refs.htTable.load()
                })
                .finally(() => {
                  done()
                  instance.confirmButtonLoading = false
                })
            } else {
              done()
              instance.confirmButtonLoading = false
            }
          },
        }).then(() => {})
      },
    },
  }
</script>

<style lang="scss" scoped>
  .circulated {
    height: 100%;
    .subject {
      cursor: pointer;
      color: var(--themeColor);
    }
    .red-color {
      color: $base-color-red;
    }
  }
  ::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>