<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"></BasicTable>
    </div>
  </PageWrapper>
</template>
<script lang="ts">
  import { defineComponent, h, ref, onMounted } from 'vue';
  import {
    BasicTable,
    useTable,
    TableAction,
    BasicColumn,
    TableImg,
    FormProps,
  } from '/@/components/Table';
  import { PageWrapper } from '/@/components/Page';
  import { Time } from '/@/components/Time';
  import { AgentLoglist } 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';
  import { useUserStore } from '/@/store/modules/user';
  import dayjs from 'dayjs';
  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 userStore = useUserStore();
      const iseur = userStore.isEnv;
      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: '账号',
          ellipsis: true,
          dataIndex: 'agentUserName',
          width: 120,
        },
        {
          title: '授权详情',
          ellipsis: true,
          dataIndex: 'majorAddNum',
          customRender: ({ record }) => {
            let streur = `专业会员${record.majorAddNum}年、高级会员${record.highAddNum}月、场景下载${record.downAddNum}次`
            let str = `专业会员${record.majorAddNum}年、场景下载${record.downAddNum}次`
            return iseur ? streur : str;
          },
          width: 250,
        },
        {
          title: '授权累计',
          ellipsis: true,
          customRender: ({ record }) => {
            let streur = `专业会员${record.majorAddNumTotal}年、高级会员${record.highAddNumTotal}月、场景下载${record.downAddNumTotal}次`
            let str = `专业会员${record.majorAddNumTotal}年、场景下载${record.downAddNumTotal}次`
            return iseur ? streur : str;
          },
          dataIndex: 'majorAddNumTotal',
          width: 250,
        },
        {
          title: '操作人',
          ellipsis: true,
          dataIndex: 'sysNickName',
          width: 120,
        },
        {
          title: '操作时间',
          ellipsis: true,
          dataIndex: 'updateTime',
          width: 120,
        },
      ];
      const searchForm: Partial<FormProps> = {
        labelWidth: 100,
        autoSubmitOnEnter: true,
        schemas: [
          {
            field: 'agentName',
            label: '经销商名称',
            component: 'Input',
            colProps: {
              xl: 7,
              xxl: 7,
            },
          },
          {
            field: 'agentUserName',
            label: '账户',
            component: 'Input',
            colProps: {
              xl: 7,
              xxl: 7,
            },
          },
          {
            field: 'sysNickName',
            label: '操作人',
            component: 'Input',
            colProps: {
              xl: 7,
              xxl: 7,
            },
          },
        ],
      };
      const [registerTable, { reload }] = useTable({
        api: AgentLoglist,
        title: '经销商授权记录列表',
        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.timeList) {
            T.timeList[0] = dayjs(T.timeList[0]).format('YYYY-MM-DD');
            T.timeList[1] = dayjs(T.timeList[1]).format('YYYY-MM-DD');
          }
          return T;
        },
        canResize: true,
      });
      async function hendleAddNew() {
        await DownExport();
        console.log('新增新闻');
      }
      onMounted(() => {
        console.log('商家欧酷', dayjs().subtract(6, 'month'), dayjs())
      })
      return {
        registerTable,
        hendleAddNew,
        reload,
        language,
        register,
        openModal,
        getCheckPerm,
      };
    },
  });
</script>
