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

import { getStatisticsLevel } 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[]>([]);
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: [],
      },
      fieldName: 'ServerList',
      label: '区服',
    },
  ],
  // 控制表单是否显示折叠按钮
  showCollapseButton: true,
  submitButtonOptions: {
    content: '查询',
  },
  // 是否在字段值改变时提交表单
  submitOnChange: false,
  // 按下回车时是否提交表单
  submitOnEnter: false,
}
const gridOptions: VxeGridProps<RowType> = {
  columns: [
    { field: 'Level', title: '等级' },
    { field: 'Sum', title: '人数' },
  ],
  height: 'auto',
  pagerConfig: {},
  proxyConfig: {
    response: {
      total: "total",
      result: "data"
    },
    ajax: {
      query: async ({  }, formValues) => {
        if (formValues.ServerList.length == 0) {
          return []
        }
        let AppId = parseInt(formValues.AppId, 10);
        return await getStatisticsLevel({
          AppId :AppId,
          ServerList:formValues.ServerList
        });
      },
    },
  },

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

<template>
  <Page auto-content-height>
    <Grid />
  </Page>
</template>