<script setup lang="ts">
import type { VbenFormProps } from '#/adapter/form';
import type { VxeGridProps } from '#/adapter/vxe-table';
import type { AppData } from '#/api/core/server';

import { inject, onMounted, ref } from 'vue';

import { Page } from '@vben/common-ui';

import { useVbenVxeGrid } from '#/adapter/vxe-table';
import { getUserlogOrderApi } from '#/api/core/log';
import { getAppListApi } from '#/api/core/server';
import { globalState } from '#/store/globalState';
import { rechargeData } from '#/store/recharge';

const state = inject('globalState', globalState);

interface RowType {
  Uid: string;
  Event: string;
  Param: string;
  timestamp: string;
}
const appList = ref<AppData[]>([]);

const formOptions: VbenFormProps = {
  // 默认展开
  collapsed: false,
  schema: [
    {
      component: 'Input',
      componentProps: {
        placeholder: 'Uid',
      },
      defaultValue: state.uid,
      fieldName: 'Uid',
      label: 'Uid',
    },
    {
      component: 'Select',
      defaultValue: 1,
      componentProps: {
        filterOption: true,
        options: [],
        placeholder: '请选择',
        showSearch: true,
      },
      fieldName: 'AppId',
      label: 'APP：',
    },
  ],
  // 控制表单是否显示折叠按钮
  showCollapseButton: true,
  submitButtonOptions: {
    content: '查询',
  },
  // 是否在字段值改变时提交表单
  submitOnChange: false,
  // 按下回车时是否提交表单
  submitOnEnter: false,
};
const gridOptions: VxeGridProps<RowType> = {
  columns: [
    { field: 'Uid', title: 'id' },
    { field: 'OrderId', title: '订单号' },
    { field: 'PayChannelOrderId', title: '3th订单号' },
    { field: 'Price', title: '金额' },
    {
      field: 'ProductId',
      title: 'chargeId',
      formatter: ({ cellValue }) => {
        return rechargeData[cellValue] || cellValue;
      },
    },
    { field: 'CreateTimeStr', title: '创建时间' },
    { field: 'PayTimeStr', title: '支付时间' },
    {
      field: 'PayType',
      title: '支付类型',
      formatter: ({ cellValue }) => {
        if (cellValue === 0) return '谷歌';
        if (cellValue === 1) return '微信';
        if (cellValue === 2) return '支付宝';
        if (cellValue === 3) return '苹果内购';
        return cellValue;
      },
    },
    { field: 'Param', title: '参数' },
  ],
  exportConfig: {
    filename: '用户订单日志',
    type: 'csv',
    mode: 'current',
    download: true,
  },
  toolbarConfig: {
    custom: true,
    export: true,
    refresh: true,
    zoom: true,
  },
  stripe: true,
  height: 'auto',
  pagerConfig: {},
  proxyConfig: {
    response: {
      total: 'total',
      result: 'data',
    },
    ajax: {
      query: async ({ page }, formValues) => {
        const Uid = Number.parseInt(formValues.Uid, 10);
        state.uid = Uid;
        state.Event = formValues.Event;
        return await getUserlogOrderApi({
          Id: Uid,
          Event: formValues.Event,
          CurrentPage: page.currentPage,
          PageSize: page.pageSize,
          AppId: formValues.AppId,
        });
      },
    },
  },

  rowConfig: {
    isHover: true,
  },
};

const [Grid, GridApi] = useVbenVxeGrid({ formOptions, gridOptions });
onMounted(async () => {
  try {
    const response = await getAppListApi();
    appList.value = Array.isArray(response) ? response : [];
    const app = appList.value[0];
    if (!app) return;
    GridApi.formApi.updateSchema([
      {
        component: 'Select',
        componentProps: {
          options: appList.value.map((item) => ({
            label: item.AppName,
            value: item.AppId,
          })),
        },
        fieldName: 'AppId',
      },
    ]);
  } catch {
    appList.value = [];
    // console.log(e);
  }
});
</script>

<template>
  <Page auto-content-height class="h-[800px]">
    <Grid />
  </Page>
</template>
