<template>
  <!-- TODO:对接领导已办接口 -->
  <div class="leader-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="[15, 30, 60, 100, 200, 300, 500]"
      :auto-fix="true"
      @load="loadData"
      @selection-change="handleSelectionChange"
    >
      <template #toolbar>
        <el-button size="small" :disabled="isDisabled" @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_"
            operation="IN"
          >
            <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.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.flowSubject')"
            prop="subject_"
            operation="LIKE"
          />
          <ht-table-search-field
            :label="$t('myTask.flowCreateTime')"
            prop="wfInst.create_time_"
            type="daterange"
            operation="BETWEEN"
          />
        </ht-table-search-panel>
      </template>
      <template #default>
        <ht-table-column type="selection" width="50" align="center" />
        <ht-table-column
          type="index"
          width="50"
          align="center"
          :label="$t('myTask.flowIndex')"
        />
        <ht-table-column :label="$t('myTask.flowChart')" width="70">
          <template #default="{ row }">
            <ht-icon
              name="process"
              class="process-icon"
              @click="handleShowFlowChart(row)"
            ></ht-icon>
          </template>
        </ht-table-column>
        <ht-table-column
          align="left"
          prop="id"
          width="200"
          :label="$t('myTask.flowCode')"
          show-overflow-tooltip
        />
        <ht-table-column
          :label="$t('myTask.flowSubject')"
          align="left"
          min-width="300"
          show-overflow-tooltip
        >
          <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="name"
          :label="$t('myTask.flowStatus')"
          width="160"
          show-overflow-tooltip
        >
          <template #default="{ row }">
            <span>
              {{ isDone(row.status) ? '已办结' : '未办结' }}
            </span>
          </template>
        </ht-table-column>
        <ht-table-column
          align="left"
          prop="createTime"
          :label="$t('myTask.flowCreateTime')"
          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"
    />
    <!-- 传阅 -->
    <circulate ref="circulate" :task-id="selectedIds" />
  </div>
</template>

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

  import matter from '@/mixins/matter'
  import tableHeight from '@/mixins/tableHeight'
  import { getDoneListLeader } from '@/api/process'
  import { DONE_QUICK_SEARCH_PROPS } from './const'

  export default {
    name: 'LeaderDone',
    components: {
      Circulate,
    },
    mixins: [matter, tableHeight],
    data() {
      return {
        tableData: [],
        selectedIds: '',
        isDisabled: true,
        quickSearchProps: DONE_QUICK_SEARCH_PROPS,
        selectedList: [],
      }
    },
    computed: {
      isDone() {
        return (status) => {
          return ['end', 'manualend'].includes(status)
        }
      },
    },
    watch: {
      selectedList(val) {
        this.isDisabled = val.length < 1 ? true : false
      },
    },
    activated() {
      this.$refs.htTable.load(true)
    },
    methods: {
      loadData(param, cb) {
        const data = {
          pageBean: this.pageResult,
          querys: this.getCurrentQuery(param),
          sorter: [...param.sorter],
          ...param,
        }
        getDoneListLeader(data)
          .then((res) => {
            if (!res) return
            const { rows, page, pageSize, total } = res
            this.tableData = rows || []
            this.pageResult = {
              page,
              pageSize,
              total,
            }
          })
          .finally(() => cb())
      },
      handleClick(row) {
        //TODO:1.应用模块跳转2.是否窗口打开页面
        this.$router.push({
          path: '/matter/approvalForm',
          query: {
            instId: row.id,
            isReadonly: true,
            // __isFull__: true,
          },
        })
      },

      handleCirculate() {
        this.$refs.circulate.handleOpen()
      },
      handleSelectionChange(selection) {
        this.selectedIds = selection?.map((item) => item.id).join(',')
        this.selectedList = selection
      },
    },
  }
</script>

<style lang="scss" scoped>
  .leader-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>