<template>
  <div class="my-delegate">
    <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"
      :default-sorter="defaultSorter"
      :auto-fix="true"
      @load="loadData"
    >
      <template #search>
        <ht-table-search-panel
          :divide="3"
          :label-width="110"
          display-style="block"
        >
          <ht-table-search-field
            :label="$t('myTask.flowSubject')"
            prop="a.task_subject_"
            operation="LIKE"
          />
          <ht-table-search-field
            :label="$t('myTask.flowCode')"
            prop="a.proc_inst_id_"
            operation="LIKE"
          />
          <ht-table-search-field
            :label="$t('myTask.flowTaskName')"
            prop="a.task_name_"
            operation="LIKE"
          />
          <ht-table-search-field
            :label="$t('myTask.flowTaskCreateTime')"
            prop="a.create_time_"
            type="datetimerange"
            operation="BETWEEN"
          />
          <ht-table-search-field
            :label="$t('myTask.flowFinishTime')"
            prop="a.finish_time_"
            type="datetimerange"
            operation="BETWEEN"
          />
          <ht-table-search-field
            :label="$t('myTask.flowAssigneeName')"
            prop="a.assignee_name_"
            operation="LIKE"
          />
        </ht-table-search-panel>
      </template>
      <template #default>
        <ht-table-column
          type="index"
          width="50"
          align="center"
          :label="$t('myTask.flowIndex')"
          fixed="left"
        />
        <ht-table-column
          align="left"
          prop="procInstId"
          :label="$t('myTask.flowCode')"
          width="200"
          show-overflow-tooltip
          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('myTask.flowSubject')"
          align="left"
          min-width="300"
          show-overflow-tooltip
          fixed="left"
        >
          <template #default="{ row }">
            <span class="subject" @click="handleClick(row)">
              {{ row.taskSubject }}
            </span>
          </template>
        </ht-table-column>
        <ht-table-column
          align="left"
          prop="taskName"
          :label="$t('myTask.flowTaskName')"
          width="160"
          show-overflow-tooltip
        />
        <ht-table-column
          align="left"
          prop="a.create_time_"
          :label="$t('myTask.flowTaskCreateTime')"
          width="160"
          sortable
          show-overflow-tooltip
        >
          <template #default="{ row }">
            <span>
              {{ row.createTime }}
            </span>
          </template>
        </ht-table-column>
        <ht-table-column
          align="left"
          prop="finishTime"
          :label="$t('myTask.flowFinishTime')"
          width="160"
          show-overflow-tooltip
        ></ht-table-column>
        <ht-table-column
          align="left"
          prop="assigneeName"
          :label="$t('myTask.flowAssigneeName')"
          width="250"
        ></ht-table-column>
        <ht-table-column
          :label="$t('myTask.flowStatus')"
          align="left"
          width="120"
        >
          <template #default="{ row }">
            <span v-if="row.turnType == 'turn'" class="green-color">
              {{ $t('myTask.turn') }}
            </span>
          </template>
        </ht-table-column>
        <ht-table-column
          :label="$t('myTask.operation')"
          align="center"
          width="100"
          fixed="right"
        >
          <template #default="{ row }">
            <el-button
              v-if="!row.finishTime"
              type="text"
              class="red-color"
              size="small"
              @click="handleTakeBack(row)"
            >
              {{ $t('myTask.takeBack') }}
            </el-button>
          </template>
        </ht-table-column>
      </template>
    </ht-table>
  </div>
</template>

<script>
  import matter from '@/mixins/matter'
  import tableHeight from '@/mixins/tableHeight'
  import { getDelegateList, takeBackTask } from '@/api/process'
  import { DELEGATE_QUICK_SEARCH_PROPS } from './const'

  export default {
    name: 'MyDelegate',
    components: {},
    mixins: [matter, tableHeight],
    data() {
      return {
        defaultSorter: [{ property: 'a.create_time_', direction: 'DESC' }],
        tableData: [],
        quickSearchProps: DELEGATE_QUICK_SEARCH_PROPS,
      }
    },
    computed: {
      isDone() {
        return (status) => {
          return ['end', 'manualend'].includes(status)
        }
      },
    },
    activated() {
      this.$refs.htTable.load(true)
    },
    methods: {
      loadData(param, cb) {
        param = param || {}
        param.querys = param.querys || []
        param.sorter = param.sorter || []
        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, 'a.type_id_'),
          sorter: param.sorter,
        }
        getDelegateList(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.procInstId,
            from: 'delegate',
            nodeId: row.nodeId,
            status: row.status,
            // __isFull__: false,
          },
        })
      },
      handleTakeBack(row) {
        this.$confirm('确认收回此流程?', '提示', {
          cancelButtonText: '取消',
          confirmButtonText: '确定',
          type: 'warning',
          closeOnClickModal: false,
          beforeClose: (action, instance, done) => {
            if (action === 'confirm') {
              instance.confirmButtonLoading = true
              takeBackTask(row.taskId).then((res) => {
                instance.confirmButtonLoading = false
                done()
                if (!res.state) return this.$message.error(res.message)
                this.$message.success(res.message)
                this.$refs.htTable.load()
              })
            } else {
              done()
              instance.confirmButtonLoading = false
            }
          },
        }).then(() => {})
      },
    },
  }
</script>

<style lang="scss" scoped>
  .my-delegate {
    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>