<template>
  <!-- 协议管理 -->
  <div class="platinum_agreement_tab">
    <Filter @search="updateColumn">
      <BtnList :btnList="firstBtn"
               @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="key"
             :data-source="filterTable()">
      <!-- 额外的展开行 -->
      <template #expandedRowRender="{ record }">
        <BtnList :btnList="handlePermissionBtn(secondBtn, record)"
                 :record="record"
                 class="btn-list-sticky"
                 @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="handlePermissionBtn(secondBtn, selectedRow)">
    </contextMenu>
    <component :is="componentId"
               v-if="componentId"
               :selectedRow="selectedRow"
               @cancel="closeComponent"></component>
  </div>
</template>

<script lang="ts">
import { queryTableList, BtnList, contextMenu, defineAsyncComponent, defineComponent, ModalEnum, handleComposeTable, ComposeTableParam } 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';

const Detail = defineAsyncComponent(() => import('../../compoments/detail/index.vue'));
const Modify = defineAsyncComponent(() => import('../../compoments/modify/index.vue'));
const Add = defineAsyncComponent(() => import('../../compoments/add/index.vue'));
const Delete = defineAsyncComponent(() => import('../../compoments/delete/index.vue'));
const Resume = defineAsyncComponent(() => import('../../compoments/resume/index.vue'));
const Stop = defineAsyncComponent(() => import('../../compoments/stop/index.vue'));

export default defineComponent({
    name: EnumRouterName.platinum_agreement_tab,
    components: {
        Filter,
        contextMenu,
        BtnList,
        [ModalEnum.detail]: Detail,
        [ModalEnum.platinum_agreement_modify]: Modify,
        [ModalEnum.platinum_agreement_add]: Add,
        [ModalEnum.platinum_agreement_delete]: Delete,
        [ModalEnum.platinum_agreement_resume]: Resume,
        [ModalEnum.platinum_agreement_stop]: Stop,
    },
    setup() {
        // 表格列表数据
        const { loading, tableList, queryTable } = queryTableList<QhjAgreementConfig>();
        // 获取列表数据
        const queryTableAction = () => queryTable(queryAgreementConfig);
        // 表格通用逻辑
        const param: ComposeTableParam = {
            queryFn: queryTableAction,
            menuType: EnumRouterName.platinum_agreement_tab,
            tableName: 'table_pcweb_agreement',
            tableFilterKey: ['agreementno', 'agreementtype'],
            isDetail: true,
        };

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

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