<template>
  <div>
    <GrowCard :loading="loading" class="enter-y" :list="growCardList" />
    <BasicTable @register="registerTable">
      <template #toolbar>
        <a-button type="primary" @click="exportExcel">
          {{ t('routes.equity.exportExcel') }}</a-button
        >
      </template>
    </BasicTable>
    <AddModal @update="reload" @register="registerAddModal" />
    <EditModal @register="registerEditModal" @update="reload" />
  </div>
</template>
<script lang="ts">
  import { defineComponent, h, reactive, ref, onMounted, computed } from 'vue';
  import GrowCard from './GrowCard.vue';
  import { BasicTable, useTable, TableAction, TableImg } from '/@/components/Table';
  import { PageWrapper } from '/@/components/Page';
  import { useModal } from '/@/components/Modal';
  import { Descriptions } from 'ant-design-vue';
  import { useI18n } from '/@/hooks/web/useI18n';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { logData, logList, DownExport } from '/@/api/finance';
  import { searchForm, columns } from './data';
  import AddModal from './InvoiceModal.vue';
  import EditModal from './EditModal.vue';
  import { usePermissionStore } from '/@/store/modules/permission';
  import { useLocaleStore } from '/@/store/modules/locale';
  import { usePermission } from '/@/hooks/web/usePermission';

  interface apiDataParam {
    orderSn?: string;
    payTimeStart?: string;
    payTimeEnd?: string;
    invoiceTimeStart?: string;
    invoiceTimeEnd?: string;
    endTimeUser?: string;
    startTimeUser?: string;
    orderBy?: string;
    sortBy?: string;
  }
  interface GrowCardItem {
    icon: string;
    title: string;
    value: number;
    unit: string;
    color: string;
    action: string;
    name: string;
  }
  export default defineComponent({
    components: {
      AddModal,
      GrowCard,
      EditModal,
      BasicTable,
      TableAction,
      PageWrapper,
      TableImg,
      [Descriptions.name]: Descriptions,
      [Descriptions.Item.name]: Descriptions.Item,
    },
    setup() {
      const { t } = useI18n();
      const loading = ref(true);
      const { hasPermission } = usePermission();
      const growCardList = ref<GrowCardItem[]>([]);
      const localeStore = useLocaleStore();
      const isEn = computed(() => localeStore.getLocale === 'en');
      onMounted(async () => {
        const { agentData, subAgentData = {} } = await logData({});
        loading.value = false;
        growCardList.value = [
          {
            title: t('routes.equity.CardMajorNum'),
            name: t('routes.finance.equityType.0'),
            // icon: 'fa6-solid:users-gear',
            icon: 'visit-count|svg',
            value: agentData.lastMajorNum || 0,
            unit: t('routes.equity.unit.-1'),
            color: 'blue',
            action: t('routes.retailer.jxs'),
          },
          {
            title: t('routes.equity.CardHighNum'),
            name: t('routes.finance.equityType.1'),
            icon: 'akar-icons:person-add',
            value: agentData.lastHighNum || 0,
            unit: t('routes.equity.unit.-2'),
            color: 'blue',
            action: t('routes.retailer.jxs'),
          },
          {
            title: t('routes.equity.CardDownNum'),
            name: t('routes.finance.equityType.2'),
            icon: 'carbon:user-role',
            value: agentData.lastDownNum || 0,
            unit: t('routes.equity.unit.2'),
            color: 'blue',
            action: t('routes.retailer.jxs'),
          },
          {
            title: t('routes.equity.CardMajorNum'),
            name: t('routes.finance.equityType.0'),
            // icon: 'fa6-solid:users-gear',
            icon: 'visit-count|svg',
            value: subAgentData && subAgentData.lastMajorNum || 0,
            unit: t('routes.equity.unit.-1'),
            color: 'orange',
            action: t('routes.retailer.fxs'),
          },
          {
            title: t('routes.equity.CardHighNum'),
            name: t('routes.finance.equityType.1'),
            icon: 'akar-icons:person-add',
            value: subAgentData && subAgentData.lastHighNum || 0,
            unit: t('routes.equity.unit.-2'),
            color: 'orange',
            action: t('routes.retailer.fxs'),
          },
          {
            title: t('routes.equity.CardDownNum'),
            name: t('routes.finance.equityType.2'),
            icon: 'carbon:user-role',
            value: subAgentData && subAgentData.lastDownNum || 0,
            unit: t('routes.equity.unit.2'),
            color: 'orange',
            action: t('routes.retailer.fxs'),
          },
        ];
      });
      const permissionStore = usePermissionStore();
      const { getCheckPerm } = permissionStore;
      const apiData = reactive<apiDataParam>({
        orderSn: '',
        payTimeStart: '',
        payTimeEnd: '',
        invoiceTimeStart: '',
        invoiceTimeEnd: '',
        userCreateTimeStart: '',
        userCreateTimeEnd: '',
        orderBy: '',
        sortBy: '',
      });
      const { createMessage, createConfirm } = useMessage();
      const [registerAddModal, { openModal: openAddModal }] = useModal();
      const [registerEditModal, { openModal: openEditModal }] = useModal();
      const [registerTable, { reload }] = useTable({
        api: logList,
        title: t('routes.equity.listTitle'),
        titleHelpMessage: [
          t('routes.equity.titleHelpMessage.1'),
          t('routes.equity.titleHelpMessage.2'),
          t('routes.equity.titleHelpMessage.3'),
        ],
        columns: columns,
        useSearchForm: true,
        formConfig: searchForm,
        showTableSetting: true,
        showIndexColumn: false,
        rowKey: 'id',
        beforeFetch: (params) => {
          let searchData = {
            orderSn: params.orderSn,
            payTimeStart: params.payTime && params.payTime[0],
            payTimeEnd: params.payTime && params.payTime[1],
            invoiceTimeStart: params.invoiceTime && params.invoiceTime[0],
            invoiceTimeEnd: params.invoiceTime && params.invoiceTime[1],
            userCreateTimeStart: params.timeListUser && params.timeListUser[0],
            userCreateTimeEnd: params.timeListUser && params.timeListUser[1],
          };
          apiData.orderSn = searchData.orderSn;
          apiData.payTimeStart = searchData.payTimeStart;
          apiData.payTimeEnd = searchData.payTimeEnd;
          apiData.invoiceTimeStart = searchData.invoiceTimeStart;
          apiData.invoiceTimeEnd = searchData.invoiceTimeEnd;
          apiData.startTimeUser = searchData.userCreateTimeStart;
          apiData.endTimeUser = searchData.userCreateTimeEnd;
          return {
            ...params,
            ...searchData,
          };
        },
        fetchSetting: {
          pageField: 'pageNum',
          sizeField: 'pageSize',
          listField: 'list',
          totalField: 'total',
        },
        canResize: false,
      });
      function handleDelete(record: Recordable) {
        console.log('点击了删除', record);
      }
      function handleInvoice(record: Recordable) {
        openAddModal(true, {
          ...record,
        });
      }
      function handleEdit(record: Recordable) {
        console.log('record', record);
      }
      function headleDetails(record: Recordable) {
        console.log('record', record);
        openEditModal(true, {
          ...record,
        });
      }
      function exportExcel() {
        createConfirm({
          iconType: 'warning',
          title: () => h('span', t('common.reminder')),
          content: () => h('span', t('routes.equity.excelTitle')),
          onOk: async () => {
            await DownExport({
              ...apiData,
              lang: isEn.value ? 'en' : 'cn',
            });
          },
        });
      }
      return {
        registerTable,
        handleDelete,
        registerAddModal,
        registerEditModal,
        handleInvoice,
        exportExcel,
        handleEdit,
        headleDetails,
        reload,
        getCheckPerm,
        loading,
        growCardList,
        t,
      };
    },
  });
</script>
