<template>
  <!-- 协议管理 -->
  <div class="platinum_agreement_tab">
    <Filter @search="updateColumn">
      <mtp-table-button class="btn-list-sticky" :buttons="addBtn" :record="record" @click="openComponent" />
    </Filter>
    <a-table :columns="columns" class="srcollYTable" :scroll="{ x: '100%', y: 'calc(100vh - 163px)' }" :pagination="false" :loading="loading" :expandedRowKeys="expandedRowKeys" :customRow="Rowclick" :rowKey="(record,index)=>index" :data-source="filterTable()">
      <!-- 额外的展开行 -->
      <template #expandedRowRender="{ record }">
        <mtp-table-button class="btn-list-sticky" :buttons="handleBtn(record)" :record="record" @click="openComponent" />
      </template>
      <!-- 协议类型-->,
      <template #isvalid="{ record }">
        <span>{{ getAgreementStatus(record.isvalid) }}</span>
      </template>
      <template #agreementtype="{ record }">
        <span>{{ getAgreementTypeName(record.agreementtype) }}</span>
      </template>
      <template #agreementfrequency="{ record }">
        <span>{{ getRateEnumName(record.agreementfrequency) }}</span>
      </template>
    </a-table>
    <!-- 右键 -->
    <contextMenu :contextMenu="contextMenu" @cancel="closeContext" :list="handleBtn(selectedRow)">
    </contextMenu>
    <component :is="componentId" v-if="componentId" :selectedRow="selectedRow" @cancel="closeComponent"></component>
  </div>
</template>

<script lang="ts">
import { ComposeTableParam, contextMenu, defineAsyncComponent, defineComponent, handleComposeTable, MtpTableButton, queryTableList } from '@/common/export/commonTable';
import { queryAgreementConfig } from '@/services/go/ermcp/qhj';
import { QhjAgreementConfig } from '@/services/go/ermcp/qhj/interface';
import Filter from '../../compoments/filter/index.vue';
import { getAgreementStatus, getAgreementTypeName } from '@/common/constants/enumsName';
import { handleArgreementType, handlePermissionBtn } from '../../setup';
import { EnumRouterName } from '@/common/constants/enumRouterName';
import { getTableButton } from '@/common/setup/table/button';

export default defineComponent({
  name: EnumRouterName.platinum_agreement_tab,
  components: {
    Filter,
    contextMenu,
    MtpTableButton,
    detail: defineAsyncComponent(() => import('../../compoments/detail/index.vue')),
    modify: defineAsyncComponent(() => import('../../compoments/modify/index.vue')),
    add: defineAsyncComponent(() => import('../../compoments/add/index.vue')),
    delete: defineAsyncComponent(() => import('../../compoments/delete/index.vue')),
    resume: defineAsyncComponent(() => import('../../compoments/resume/index.vue')),
    disable: defineAsyncComponent(() => import('../../compoments/stop/index.vue')),
  },
  setup() {
    const addBtn = getTableButton(['add']);

    // 表格列表数据
    const { loading, tableList, queryTable } = queryTableList<QhjAgreementConfig>();
    // 获取列表数据
    const queryTableAction = () => queryTable(queryAgreementConfig);
    // 表格通用逻辑
    const param: ComposeTableParam = {
      queryFn: queryTableAction,
      tableName: 'table_pcweb_agreement',
    };

    const { getRateEnumName } = handleArgreementType();
    // 过滤注销数据
    const filterTable = () => tableList.value.filter((e) => e.isvalid !== 3);

    function handleBtn(record: QhjAgreementConfig) {
      if (!record) return [];
      const buttons = getTableButton(['detail', 'modify', 'delete', 'resume', 'disable']);
      const { isvalid } = record;
      if (isvalid === 1) {
        // 正常
        return buttons.filter((e) => e.code !== 'resume');
      } else if (isvalid === 2) {
        // 停用
        return buttons.filter((e) => e.code !== 'disable');
      }
      return [];
    }

    return {
      ...handleComposeTable<QhjAgreementConfig>(param),
      getRateEnumName,
      loading,
      handlePermissionBtn,
      filterTable,
      getAgreementTypeName,
      getAgreementStatus,
      addBtn,
      handleBtn,
    };
  },
});
</script>