<template>
  <PageWrapper contentBackground>
    <template #footer>
      <a-tabs v-model:activeKey="tableType" @change="changeTable">
        <a-tab-pane :key="0" :tab="t('routes.count.name1')" />
        <a-tab-pane :key="1" :tab="t('routes.count.name2')" />
        <!-- <a-tab-pane :key="3" :tab="t('routes.scene.tableType.3')" />  -->
      </a-tabs></template
    >
    <div class="desc-wrap-BasicTable">
      <BasicTable class="registerTable1" v-if="!tableType" @register="registerTable1">
        <template #toolbar>
          <a-button type="primary" @click="exportExcel(true)">
            {{ t('routes.equity.exportExcel') }}</a-button
          >
        </template>
      </BasicTable>
      <BasicTable class="registerTable" v-else @register="registerTable">
        <template #toolbar>
          <a-button type="primary" @click="exportExcel(false)">
            {{ t('routes.equity.exportExcel') }}</a-button
          >
        </template>
      </BasicTable>
    </div>
  </PageWrapper>
</template>
<script lang="ts">
  import { defineComponent, onMounted, computed, ref, h } from 'vue';
  import { PageWrapper } from '/@/components/Page';
  import { Tabs } from 'ant-design-vue';
  import { BasicTable, useTable, BasicColumn, FormProps } from '/@/components/Table';
  import { useI18n } from '/@/hooks/web/useI18n';
  import { usePermissionStore } from '/@/store/modules/permission';
  import { dincrementList, cameraIncrementLog } from '/@/api/equity';
  import { contactUsList, pointList, DownCountExport1, DownCountExport2 } from '/@/api/finance';
  import { useLocaleStore } from '/@/store/modules/locale';
  import { columns1, columns } from './data';
  import { useMessage } from '/@/hooks/web/useMessage';
  export default defineComponent({
    components: {
      BasicTable,
      PageWrapper,
      [Tabs.name]: Tabs,
      [Tabs.TabPane.name]: Tabs.TabPane,
    },
    setup() {
      const { t } = useI18n();
      const permissionStore = usePermissionStore();
      const localeStore = useLocaleStore();
      const tableType = ref(0);
      const { createConfirm } = useMessage();
      const { getCheckPerm } = permissionStore;
      const isEn = computed(() => localeStore.getLocale === 'en');
      const searchForm1: Partial<FormProps> = {
        labelWidth: 120,
        autoAdvancedLine: 1,
        actionColOptions: {
          span: 24,
        },
        schemas: [
          {
            field: 'email',
            component: 'Input',
            label: t('routes.account.email'),
            colProps: {
              xl: 7,
              xxl: 7,
            },
          },
          {
            field: 'timeList',
            label: t('routes.count.submitTime'),
            component: 'RangePicker',
            componentProps: {
              maxLength: 100,
              valueFormat: 'YYYY-MM-DD',
              format: 'YYYY-MM-DD',
            },
            colProps: {
              xl: 7,
              xxl: 7,
            },
          },
          {
            field: 'country',
            component: 'Input',
            label: t('routes.count.submitLocation'),
            colProps: {
              xl: 7,
              xxl: 7,
            },
          },
        ],
      };

      const searchForm: Partial<FormProps> = {
        labelWidth: 120,
        autoAdvancedLine: 1,
        actionColOptions: {
          span: 24,
        },
        schemas: [
          {
            field: 'email',
            component: 'Input',
            label: t('routes.account.email'),
            colProps: {
              xl: 7,
              xxl: 7,
            },
          },
          // {
          //   field: 'timeList',
          //   label: t('routes.count.submitTime'),
          //   component: 'RangePicker',
          //   componentProps: {
          //     maxLength: 100,
          //     valueFormat: 'YYYY-MM-DD',
          //     format: 'YYYY-MM-DD',
          //   },
          //   colProps: {
          //     xl: 7,
          //     xxl: 7,
          //   },
          // },
          {
            field: 'timeList',
            label: t('routes.count.visitTime'),
            component: 'RangePicker',
            componentProps: {
              maxLength: 100,
              valueFormat: 'YYYY-MM-DD',
              format: 'YYYY-MM-DD',
            },
            colProps: {
              xl: 7,
              xxl: 7,
            },
          },
          {
            field: 'utmSource',
            component: 'Input',
            label: t('routes.count.sourceChannel'),
            colProps: {
              xl: 7,
              xxl: 7,
            },
          },
        ],
      };
      const [registerTable, { reload: reload0 }] = useTable({
        api: pointList,
        columns: columns,
        useSearchForm: true,
        formConfig: searchForm,
        showIndexColumn: true,
        showTableSetting: true,
        rowKey: 'id',
        fetchSetting: {
          pageField: 'pageNum',
          sizeField: 'pageSize',
          listField: 'list',
          totalField: 'total',
        },
        canResize: false,
      });
      const [registerTable1, { reload: reload1 }] = useTable({
        api: contactUsList,
        columns: columns1,
        useSearchForm: true,
        formConfig: searchForm1,
        showTableSetting: true,
        showIndexColumn: true,
        rowKey: 'id',
        fetchSetting: {
          pageField: 'pageNum',
          sizeField: 'pageSize',
          listField: 'list',
          totalField: 'total',
        },
        canResize: false,
      });
      function reload() {
        reload0();
        reload1();
      }
      function exportExcel(val) {
        createConfirm({
          iconType: 'warning',
          title: () => h('span', t('common.reminder')),
          content: () => h('span', t('routes.equity.excelTitle')),
          onOk: async () => {
            let exportUrl = val ? DownCountExport1 : DownCountExport2;
            await exportUrl({
              lang: isEn.value ? 'en' : 'cn',
            });
          },
        });
      }
      return {
        registerTable,
        registerTable1,
        reload,
        exportExcel,
        tableType,
        t,
        getCheckPerm,
      };
    },
  });
</script>
<style lang="less" scoped>
  .desc-wrap-BasicTable {
    background-color: #f0f2f5;
    .vben-basic-table-form-container {
      padding: 0;
    }
  }
</style>
