<script setup lang="ts">
import { Page } from '@vben/common-ui';

import { getStatisticsOrder } from '#/api/core/statistics';
import { useVbenVxeGrid } from '#/adapter/vxe-table';

import type { VxeGridProps } from '#/adapter/vxe-table';
import type { VbenFormProps } from '#/adapter/form';
import { getServerListApi, getAppListApi } from '#/api/core/server';
import type { AppData, ServerData } from '#/api/core/server';
import { onMounted, ref } from 'vue';
const appList = ref<AppData[]>([]);
const ServerList = ref<ServerData[]>([]);
let Emit = ref<string[]>([]);
interface RowType {
  Uid: number;
  change_type: string;
  change_num: string;
  change_after: string;
  item_id: string;
  timestamp: string;
}

const formOptions: VbenFormProps = {
  // 默认展开
  collapsed: false,
  schema: [
    {
      component: 'Select',
      defaultValue: 1,
      componentProps: {
        onChange: async (value: number) => {
          const serverResponse = await getServerListApi({ AppId: value, Type: 1 });
          ServerList.value = Array.isArray(serverResponse) ? serverResponse : [];
          GridApi.formApi.updateSchema([
            {
              component: 'CheckboxGroup',
              componentProps: {
                options: ServerList.value.map((item) => ({
                  label: item.ServerName,
                  value: item.ServerId,
                })),
              },
              fieldName: 'ServerList',
            },
          ]);
        },
        filterOption: true,
        options: [

        ],
        placeholder: '请选择',
        showSearch: true,
      },
      fieldName: 'AppId',
      label: 'APP：',
    },
    {
      component: 'CheckboxGroup',
      componentProps: {
        name: 'cname',
        options: [
          { label: 'A', value: 'A' },
          { label: 'B', value: 'B' },
          { label: 'C', value: 'C' },
          { label: 'D', value: 'D' },
          { label: 'E', value: 'E' },
          { label: 'F', value: 'F' },
          { label: 'G', value: 'G' },
          { label: 'H', value: 'H' },
          { label: 'I', value: 'I' }, { label: 'J', value: 'J' }, { label: 'K', value: 'K' }, { label: 'L', value: 'L' }, { label: 'M', value: 'M' }, { label: 'N', value: 'N' }, { label: 'O', value: 'O' }, { label: 'P', value: 'P' }, { label: 'Q', value: 'Q' }, { label: 'R', value: 'R' }, { label: 'S', value: 'S' }, { label: 'T', value: 'T' }, { label: 'U', value: 'U' }, { label: 'V', value: 'V' }, { label: 'W', value: 'W' }, { label: 'X', value: 'X' }, { label: 'Y', value: 'Y' }, { label: 'Z', value: 'Z' },
        ],
      },
      fieldName: 'Emit',
      label: '发射器系列',
    },
  ],
  // 控制表单是否显示折叠按钮
  showCollapseButton: true,
  submitButtonOptions: {
    content: '查询',
  },
  // 是否在字段值改变时提交表单
  submitOnChange: false,
  // 按下回车时是否提交表单
  submitOnEnter: false,
}
const gridOptions: VxeGridProps<RowType> = {
  columns: [
    { field: 'Type', title: '订单类型' },
    { field: 'Num', title: '该类订单持有数量', formatter: ({ cellValue }) => cellValue === 0 ? '总数' : cellValue },
    { field: 'Sum', title: '流失玩家数' },
    { field: 'Prop', title: '占比', formatter: ({ cellValue }) => `${cellValue}%`, cellRender: { name: 'pie' } },
  ],
  border: true,
  mergeCells: [
    { row: 0, col: 0, rowspan: 5, colspan: 1 },
    { row: 5, col: 0, rowspan: 5, colspan: 1 },
  ],
  height: 'auto',
  pagerConfig: {},
  proxyConfig: {
    response: {
      total: "total",
      result: "data"
    },
    ajax: {
      query: async ({ }, formValues) => {
        let AppId = parseInt(formValues.AppId, 10);
        Emit = formValues.Emit;
        return await getStatisticsOrder({
          AppId: AppId,
          Emit: formValues.Emit
        });
      },
    },
  },
};

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',
      },
    ]);
    const serverResponse = await getServerListApi({ AppId: app.AppId, Type: 1 });
    ServerList.value = Array.isArray(serverResponse) ? serverResponse : [];
  } catch (e) {
    appList.value = [];
    //console.log(e);
  }
});
</script>

<template>
  <div>
    <Page auto-content-height class="h-[800px]">
      <Grid>
        <template #toolbar-tools>
          <span class="mr-5 font-semibold" style="color: red;">该类订单持有数量为0的流失玩家数为该订单难度的总流失玩家数</span>
          <span class="mr-5 font-semibold">发射器系列:</span>
          <div v-for="e in (Emit || [])" :key="e" style="margin-right: 8px;">
            <img :src="`../../../../merge/Launcher_${e}_LV4.png`" style="height: 32px;" />
          </div>
        </template>
      </Grid>
    </Page>
  </div>
</template>
