<template>
  <div class="done">
    <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"
      :page-sizes="pageSizes"
      :header-cell-class-name="headerCellClassName"
      :row-class-name="rowClassName"
      :default-sorter="defaultSorter"
      :auto-fix="true"
      @load="loadData"
      @row-click="handleRowClick"
      @selection-change="handleSelectionChange"
    >
      <template #toolbar>
        <el-button
          size="small"
          :disabled="isDisabled"
          icon="icon-my-todo-circulate"
          @click="handleCirculate"
        >
          {{ $t('myTask.Circulate') }}
        </el-button>
      </template>
      <template #search>
        <ht-table-search-panel
          v-model="baseSearchQuery"
          :divide="3"
          :label-width="100"
          display-style="block"
        >
          <ht-table-search-field
            :label="$t('myTask.flowCreator')"
            prop="creator"
            operation="LIKE"
          />
          <ht-table-search-field
            v-model="baseSearchQuery.orgId"
            :label="$t('myTask.flowCreatorOrganization')"
            prop="CREATE_ORG_ID_"
          >
            <ht-org-selector-input
              v-model="baseSearchQuery.orgName"
              display-style="block"
              :config="{ id: 'data.baseSearchQuery.orgId' }"
            />
          </ht-table-search-field>
          <ht-table-search-field
            :label="$t('myTask.flowTaskCompleteTime')"
            prop="bco.complete_time_"
            type="datetimerange"
            operation="BETWEEN"
          />
          <ht-table-search-field
            :label="$t('myTask.flowCode')"
            prop="wfInst.id_"
            operation="LIKE"
          />
          <ht-table-search-field
            :label="$t('myTask.flowProcDefName')"
            prop="proc_def_name_"
            operation="LIKE"
          />
          <ht-table-search-field
            :label="$t('myTask.flowTaskUpdateTime')"
            prop="wfInst.update_time_"
            type="datetimerange"
            operation="BETWEEN"
          />
          <ht-table-search-field
            :label="$t('myTask.flowSubject')"
            prop="subject_"
            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('myTask.flowIndex')"
        />
        <ht-table-column
          align="left"
          prop="id"
          width="200"
          :label="$t('myTask.flowCode')"
          show-overflow-tooltip
          fixed="left"
        >
          <template #default="{ row }">
            <div class="instance-id_wrap">
              {{ row.id }}
              <span
                class="copy-icon"
                @click="(event) => clipboard(row.id, event)"
              >
                <i class="icon-copy"></i>
              </span>
            </div>
          </template>
        </ht-table-column>
        <ht-table-column
          :label="$t('myTask.flowChart')"
          width="70"
          align="center"
          fixed="left"
        >
          <template #default="{ row }">
            <div class="process-box">
              <ht-icon
                name="process"
                class="process-icon"
                @click="handleShowFlowChart(row)"
              ></ht-icon>
            </div>
          </template>
        </ht-table-column>
        <ht-table-column
          :label="$t('myTask.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('myTask.flowProcDefName')"
          width="160"
          show-overflow-tooltip
        />
        <ht-table-column
          align="left"
          prop="completeTime"
          :label="$t('myTask.flowTaskCompleteTime')"
          width="160"
          sortable
          show-overflow-tooltip
        ></ht-table-column>
        <ht-table-column
          :label="$t('myTask.flowNodeName')"
          show-overflow-tooltip
          align="left"
          width="120"
        >
          <template #default="{ row }">
            <span v-if="extraField[row.id] && extraField[row.id].nodeName">
              <span
                v-for="(name, index) in extraField[row.id].nodeName"
                :key="`node-name_${row.id}_${index}`"
                class="flowlist-node-name"
              >
                {{ name }}
              </span>
            </span>
          </template>
        </ht-table-column>
        <ht-table-column
          align="left"
          prop="wfInst.status_"
          :label="$t('myTask.flowStatus')"
          width="160"
          show-overflow-tooltip
          :render-header="renderHeaderMethod"
          :filters="statusArr"
        >
          <template #default="{ row }">
            <span
              :class="{
                'grey-color': ['end', 'manualend'].includes(row.status),
              }"
            >
              <ht-icon
                name="dot"
                :class="statusDotClassNameMap[row.status]"
              ></ht-icon>
              {{ statusMap[row.status] }}
            </span>
          </template>
        </ht-table-column>
        <ht-table-column
          align="left"
          prop="updateTime"
          :label="$t('myTask.flowTaskUpdateTime')"
          width="160"
          sortable
          show-overflow-tooltip
        ></ht-table-column>
        <ht-table-column
          align="left"
          prop="creator"
          :label="$t('myTask.flowCreator')"
          width="120"
          show-overflow-tooltip
        ></ht-table-column>
      </template>
    </ht-table>

    <ht-flow-chart
      ref="flowChart"
      :inst-id="instanceId"
      :bpmn-inst-id="bpmnInstId"
    />
    <processForecast
      ref="processForecast"
      :inst-id="instanceId"
      :def-id="defId"
      :node-id="nodeId"
      :bpmn-inst-id="bpmnInstId"
    ></processForecast>
    <!-- 传阅 -->
    <circulate ref="circulate" :inst-id="selectedIds" />
  </div>
</template>

<script>
  import Circulate from '../components/Circulate'

  import matter from '@/mixins/matter'
  import tableHeight from '@/mixins/tableHeight'
  import tableHeaderFilter from '@/mixins/tableHeaderFilter'
  import nodeAndApprover from '@/mixins/nodeAndApprover'
  import processForecast from '@/views/matter/processForecast/processForecast.vue'
  import { getDoneList } from '@/api/process'
  import { DONE_QUICK_SEARCH_PROPS } from './const'
  import { MY_REQUEST_STATUS, STATUS_DOT_CLASS_NAME } from '../myRequest/const'
  export default {
    name: 'Done',
    components: {
      Circulate,
      processForecast,
    },
    mixins: [matter, tableHeight, tableHeaderFilter, nodeAndApprover],
    data() {
      return {
        defaultSorter: [{ property: 'completeTime', direction: 'DESC' }],
        tableData: [],
        quickSearchProps: DONE_QUICK_SEARCH_PROPS,
        selectedIds: '',
        isDisabled: true,
        selectedList: [],
      }
    },
    computed: {
      statusMap() {
        delete MY_REQUEST_STATUS.draft
        return MY_REQUEST_STATUS
      },
      statusDotClassNameMap() {
        delete STATUS_DOT_CLASS_NAME.draft
        return STATUS_DOT_CLASS_NAME
      },
      statusArr() {
        return Object.keys(MY_REQUEST_STATUS)
          .filter((item) => item !== 'draft')
          .map((key) => {
            return {
              text: MY_REQUEST_STATUS[key],
              value: key,
            }
          })
      },
    },
    watch: {
      selectedList(val) {
        this.isDisabled = val.length < 1 ? true : false
      },
      tableData(val) {
        val?.length > 0 && this.loadTaskInfo(val)
      },
    },

    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: 'proc_def_key_',
            value: this.$route.query.flowKey,
            operation: 'EQUAL',
            relation: 'AND',
            group: 'main',
          })
        }
        const data = {
          pageBean: this.pageResult,
          ...param,
          querys: this.getCurrentQuery(param, 'type_id_'),
        }
        getDoneList(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: {
            instId: row.id,
            isReadonly: true,
            type: 'done',
            doneTaskId: row.taskId,
            nodeId: row.nodeId,
          },
        })
      },

      handleCirculate() {
        this.$refs.circulate.handleOpen()
      },
      handleSelectionChange(selection) {
        this.selectedIds = selection?.map((item) => item.id).join(',')
        this.selectedList = selection
      },
      handleRowClick(row, column) {
        if (column && column.label == '流程图') {
          this.$refs.htTable.$refs.htTable.toggleRowSelection(row)
          return
        }
        this.isDisabled = false
        this.selectedIds = row.id
      },
    },
  }
</script>

<style lang="scss" scoped>
  .done {
    height: 100%;
    .subject,
    .process-icon {
      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>