<template>
  <div class="leader-todo">
    <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"
      :card-item-mode="false"
      :nopagination="isShowPagination"
      :header-cell-class-name="headerCellClassName"
      :row-class-name="rowClassName"
      :auto-fix="true"
      @load="loadData"
      @view-change="handleViewChange"
      @selection-change="handleSelectionChange"
    >
      <template #toolbar>
        <el-button size="small" :disabled="isDisabled" @click="handleCirculate">
          {{ $t('myTask.Circulate') }}
        </el-button>
        <!-- <el-button
          size="small"
          :disabled="isDisabled"
          @click="handleBatchProcessing"
        >
          批量处理
        </el-button> -->
        <todo-setting />
      </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.flowCode')"
            prop="bt.proc_inst_id_"
            operation="LIKE"
          />
          <ht-table-search-field
            :label="$t('myTask.flowSubject')"
            prop="bt.subject_"
            operation="LIKE"
          />
          <ht-table-search-field
            :label="$t('myTask.flowProcDefName')"
            prop="bt.proc_def_name_"
            operation="LIKE"
          />
          <ht-table-search-field
            :label="$t('myTask.flowTaskName')"
            prop="bt.name_"
            operation="LIKE"
          />
          <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.flowCreateTime')"
            prop="createDate"
            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"
          align="center"
        >
          <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="procInstId"
          width="200"
          :label="$t('myTask.flowCode')"
          show-overflow-tooltip
        >
          <template #default="{ row }">
            <div class="instance-id_wrap">
              <i
                class="icon-follow special-focus-icon"
                :class="{ 'has-special-focus': row.isFocus }"
                @click.stop="handleSpecialFocus(row)"
              ></i>
              {{ 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
        >
          <template #default="{ row }">
            <span class="subject" @click.stop="handleClick(row, 'leaderTodo')">
              {{ 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.flowTaskName')"
          width="160"
          show-overflow-tooltip
        ></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>
        <ht-table-column
          :label="$t('myTask.flowStatus')"
          align="left"
          width="100"
          prop="status"
        >
          <template #default="{ row }">
            <span>
              <ht-icon
                name="dot"
                :class="statusDotClassName[row.status]"
              ></ht-icon>
              {{ leaderStatus[row.status] }}
            </span>
          </template>
        </ht-table-column>
        <!--<ht-table-column
          align="left"
          width="120"
          prop="status"
          label="类型"
          :render-header="renderHeaderMethod"
          :filters="statusArr"
        >
          <template #default="{ row }">
            <span>
              <ht-icon
                name="dot"
                :class="statusDotClassName[row.status]"
              ></ht-icon>
              {{
                row.status === 'BACKSHARE'
                  ? '驳回共享'
                  : leaderStatus[row.status]
              }}
            </span>
          </template>
        </ht-table-column>-->
        <ht-table-column
          :label="$t('myTask.flowDeadline')"
          width="200"
          align="left"
        >
          <template #default="{ row }">
            <span
              v-if="row.instIsForbidden !== '1'"
              :class="currentDateClassName(row.deadline)"
            >
              {{ calcExpireTime(row.deadline) }}
            </span>
          </template>
        </ht-table-column>
      </template>
      <template #card="{ data }">
        <card-todo
          :card-data="data"
          :card-loading="cardLoading"
          card-type="leaderTodo"
          @card-click="(item) => handleCardClick(item, 'leaderTodo')"
          @checkbox-change="handleCheckboxChange"
          @click-more="(item) => handleClickMore(item, 'leaderTodo')"
          @card-back="handleCardBack"
        ></card-todo>
      </template>
    </ht-table>

    <leader-dialog ref="leaderDialog" />
    <ht-flow-chart
      ref="flowChart"
      :inst-id="instanceId"
      :bpmn-inst-id="bpmnInstId"
    />
    <!-- 传阅 -->
    <circulate ref="circulate" :task-id="selectedIds" />
    <!-- 弹窗模式 -->
    <approval-dialog
      ref="approvalDialogForm"
      :current-task-id="currentTaskId"
      :current-inst-id="currentInstId"
      :current-learder-id="currentLearderId"
      @close-approval-dialog="handleComplete"
    />
  </div>
</template>

<script>
  import todoCommon from '@/mixins/todoCommon'
  import tableHeaderFilter from '@/mixins/tableHeaderFilter'

  import TodoSetting from '@/views/matter/components/TodoSetting.vue'
  import { LEADER_TODO_QUICK_SEARCH_PROPS, LEADER_STATUS } from './const'

  export default {
    name: 'LeaderTodo',
    components: { TodoSetting },
    mixins: [todoCommon, tableHeaderFilter],
    data() {
      return {
        quickSearchProps: LEADER_TODO_QUICK_SEARCH_PROPS,
        leaderStatus: LEADER_STATUS,
      }
    },
    computed: {
      statusArr() {
        return Object.keys(LEADER_STATUS).map((item) => {
          return {
            text: LEADER_STATUS[item],
            value: item,
          }
        })
      },
    },
    activated() {
      this.handleComplete()
    },
    methods: {
      loadData(param, cb) {
        if (param && param.querys) {
          param.querys.forEach((query) => {
            if (query.property.startsWith('bt.')) {
              query.property = query.property.split('.')[1]
            }
          })
        }
        const data = {
          pageBean: this.pageResult,
          querys: this.getCurrentQuery(param, 'type_id_'),
          sorter: param ? [...param.sorter] : [],
          ...param,
        }
        const isGetCardList =
          (this.isCardView && !this.isShowMore) || param?.isBack
        isGetCardList
          ? this.getTodoCardList(param?.isBack ? {} : data, 'leaderTodo', cb)
          : this.getTodoList(data, 'leaderTodo', cb)
      },
      handleComplete() {
        this.$nextTick(() => {
          this.$refs.htTable.load()
        })
      },
    },
  }
</script>

<style lang="scss" scoped>
  @import '~@/styles/dot-mixin.scss';
  .leader-todo {
    height: 100%;
    ::v-deep {
      .ht-card .ht-card__container {
        .el-card__body {
          padding: 12px 10px 14px 10px;
        }
      }
    }
    .open-model {
      font-size: 14px;
    }
    .open-next-type {
      display: inline-block;
      height: 28px;
      line-height: 28px;
      margin-left: 10px;
      font-size: 14px;
      font-weight: 400;
      padding: 0 10px;
      border-radius: $base-radius;
      color: $base-color-second-color;
      border: 1px solid $base-border-color;
      ::v-deep {
        .el-switch__core {
          width: 34px !important;
          height: 18px;
          &::after {
            width: 15px;
            height: 15px;
            top: 0;
          }
        }
      }
    }
    .subject,
    .process-icon {
      cursor: pointer;
      color: var(--themeColor);
    }
    .card-item__wrap {
      display: flex;
      width: 250px;
      .items {
        list-style: none;
        padding-left: 8px;
        .item {
          color: $base-color-second-color;
          font-size: $base-font-size-small;
          padding-left: 1px;
          &:last-child {
            padding-left: 2px;
          }
        }
        .card-item-title {
          margin: 0;
          width: calc(100% - 30px);
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          font-weight: bold;
          color: $base-menu-color;
          font-size: $base-font-size-default;
        }
        .item-padding {
          padding: 10px 0;
        }
      }
    }
  }
  ::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>