<template>
  <PageWrapper contentBackground>
    <!-- <template #footer>
      <a-tabs v-model:activeKey="language" @change="changeTable">
        <a-tab-pane key="cn" tab="Chinese" />
        <a-tab-pane key="en" tab="English" />
      </a-tabs>
    </template> -->

    <div class="desc-wrap-BasicTable">
      <BasicTable @register="registerTable">
        <template #toolbar>
          <a-button type="primary" @click="hendleAddNew" v-if="getCheckPerm('dealer-export')">
            导出excel</a-button
          >
        </template>
      </BasicTable>
    </div>
  </PageWrapper>
</template>
<script lang="ts">
import { defineComponent, h, ref } from 'vue';
import {
  BasicTable,
  useTable,
  TableAction,
  BasicColumn,
  TableImg,
  FormProps,
} from '/@/components/Table';
import { PageWrapper } from '/@/components/Page';
import { Time } from '/@/components/Time';
import { logListApi, DownExport } from '/@/api/dealer';
import {  Descriptions, Tabs } from 'ant-design-vue';
import { useModal } from '/@/components/Modal';
import { useI18n } from '/@/hooks/web/useI18n';
import { useMessage } from '/@/hooks/web/useMessage';
import { usePermissionStore } from '/@/store/modules/permission';
export default defineComponent({
  components: {
    BasicTable,
    TableAction,
    PageWrapper,
    TableImg,
    [Descriptions.name]: Descriptions,
    [Descriptions.Item.name]: Descriptions.Item,
    [Tabs.name]: Tabs,
    [Tabs.TabPane.name]: Tabs.TabPane,
  },
  setup() {
    const { t } = useI18n();
    const { createMessage } = useMessage();
    const permissionStore = usePermissionStore();
    const { getCheckPerm } = permissionStore;
    const [register, { openModal }] = useModal();
    const language = ref<string>('cn'); //未处理，0已处理（默认1）
    const columns: BasicColumn[] = [
      {
        title: '经销商名称',
        dataIndex: 'agentName',
        ellipsis: true,
        width: 250,
      },
      {
        title: '专业会员(年)销售数量',
        dataIndex: 'majorNum',
        ellipsis: true,
        width: 80,
      },
      {
        title: '高级会员（月）销售数量',
        ellipsis: true,
        dataIndex: 'highNum',
        width: 120,
      },
      {
        title: '场景下载销售数量',
        ellipsis: true,
        dataIndex: 'downNum',
        width: 120,
      },
    ];
    const searchForm: Partial<FormProps> = {
      labelWidth: 100,
      autoSubmitOnEnter: true,
      schemas: [
        {
          field: 'timeList',
          label: '时间段',
          component: 'RangePicker',
          componentProps: {
            maxLength: 100,
            format: 'YYYY-MM-DD',
            valueFormat: 'YYYY-MM-DD',
            showTime: true,
          },
          colProps: {
            xl: 8,
            xxl: 8,
          },
        },
      ],
    };
    const [registerTable, { reload }] = useTable({
      api: logListApi,
      title: '销售统计列表',
      titleHelpMessage: ['统计规则：', '1、会员权益：统计当前经销商新授权的记录、以及相关权益ID续费记录，包括经销商授权和续费、平台授权（续费）、官网自购（续费）；','2、场景下载：统计当前经销售新授权（除相关用户）的下载次数；'],
      columns: columns,
      useSearchForm: true,
      formConfig: searchForm,
      showTableSetting: true,
      showIndexColumn: false,
      searchInfo: { language },
      rowKey: 'id',
      fetchSetting: {
        pageField: 'pageNum',
        sizeField: 'pageSize',
        listField: 'list',
        totalField: 'total',
      },
      beforeFetch: (T) => {
        if (T.ctivated) {
          T.publicTimeStart = T.ctivated[0];
          T.publicTimeEnd = T.ctivated[1];
        }
        return T;
      },
      canResize: true,
    });
    async function hendleAddNew() {
      await DownExport()
      console.log('新增新闻');
    }
    return {
      registerTable,
      hendleAddNew,
      reload,
      language,
      register,
      openModal,
      getCheckPerm,
    };
  },
});
</script>