<template>
  <div>
    <n-card
      title="角色等级分布"
      :content-style="{ padding: '10px' }"
      :header-style="{ padding: '10px' }"
    >
      <BasicForm @register="register" @submit="handleSubmit" @reset="handleReset">
        <template #statusSlot="{ model, field }">
          <n-input v-model:value="model[field]" />
        </template>
      </BasicForm>
      <br />
      <Chart :loading="loading" :options="options4" />
    </n-card>
  </div>
</template>

<script lang="ts" setup>
  import { onMounted, reactive, ref } from 'vue';
  import { useMessage } from 'naive-ui';
  import { BasicForm, FormSchema, useForm } from '@/components/Form/index';
  import { HeroLevelDistribution } from '@/api/echarts/heroLevelDistribution';
  import Chart from '../adv/components/Chart.vue';
  import {defaultStatisticsTimeOptions, defRangeShortcuts, timestampToDate} from '@/utils/dateUtil';
  import { useUserStoreWidthOut } from '@/store/modules/user';
  const useUserStore = useUserStoreWidthOut();

  const params = ref<any>({
    startLevel: '2',
    endLevel: '20',
    day: timestampToDate(defaultStatisticsTimeOptions()),
    channel_id: '',
    server_id: 1,
  });

  const schemas: FormSchema[] = [
    {
      field: 'server_id',
      component: 'NSelect',
      label: '服务器',
      componentProps: {
        placeholder: '请选择服务器',
        defaultValue: params.value.server_id,
        options: useUserStore.config.server_simple_option,
        onUpdateValue: (e: any) => {
          console.log(e);
          params.value.server_id = e;
        },
      },
    },
    {
      field: 'channel_id',
      component: 'NTreeSelect',
      label: '推广渠道',
      componentProps: {
        placeholder: '请选择推广渠道',
        clearFilterAfterSelect: true,
        clearable: true,
        filterable: true,
        defaultExpandAll: true,
        options: useUserStore.config.channel_tree_option,
        onUpdateValue: (e: any) => {
          console.log(e);
          params.value.channel_id = e;
        },
      },
    },
    {
      field: 'startLevel',
      defaultValue: params.value.startLevel,
      component: 'NInputNumber',
      label: '开始等级',
      componentProps: {
        type: 'Number',
        placeholder: '请填写开始等级',
        clearable: true,
        min: 1,
        max: 300,
        step: 10,
        onUpdateValue: (e: any) => {
          params.value.startLevel = e;
        },
      },
    },
    {
      field: 'endLevel',
      defaultValue: params.value.endLevel,
      component: 'NInputNumber',
      label: '结束等级',
      componentProps: {
        type: 'Number',
        placeholder: '请填写结束等级',
        clearable: true,
        min: 1,
        max: 300,
        step: 10,
        onUpdateValue: (e: any) => {
          params.value.endLevel = e;
        },
      },
    },
    {
      field: 'makeDate',
      component: 'NDatePicker',
      label: '选择日期',
      defaultValue: defaultStatisticsTimeOptions(),
      componentProps: {
        type: 'date',
        clearable: true,
        shortcuts: defRangeShortcuts(),
        onUpdateValue: (e: any) => {
          console.log(e);
          params.value.day = timestampToDate(e);
        },
      },
    },
  ];

  const message = useMessage();

  const formParams = reactive({
    startLevel: '',
    endLevel: '',
  });

  const [register, {}] = useForm({
    gridProps: { cols: '1 s:1 m:2 l:3 xl:4 2xl:4' },
    labelWidth: 80,
    schemas,
  });

  const loading = ref(false);

  const loadDataTable = async (res) => {
    loading.value = true;
    new Promise((_resolve, _reject) => {
      HeroLevelDistribution({ ...formParams, ...params.value, ...res })
        .then((res) => {
          draw(res);
          loading.value = false;
        })
        .catch((error) => {
          loading.value = false;
          message.error(error.toString());
        });
    });
  };

  function reloadTable() {
    loadDataTable({});
  }

  function handleSubmit(_values: Recordable) {
    reloadTable();
  }

  function handleReset(values: Recordable) {
    console.log(values);
    params.value = {
      startLevel: '2',
      endLevel: '20',
      day: timestampToDate(defaultStatisticsTimeOptions()),
      channel_id: '',
      server_id: 1,
    };
    reloadTable();
  }

  function draw(values) {
    if (values == undefined) {
      values = {};
    }
    options4.value = {
      tooltip: {
        trigger: 'axis',
      },
      toolbox: {
        feature: {
          saveAsImage: {},
        },
      },
      legend: {
        data: values.heroName,
      },
      xAxis: {
        type: 'category',
        data: values.level,
      },
      yAxis: { type: 'value' },
      series: values.data,
      grid: {
        x: '5%',
        y: '5%',
        x2: '2%',
        y2: '5%',
      },
    };
  }

  let options4 = ref({});

  onMounted(async () => {
    await loadDataTable({});
  });
</script>

<style lang="less" scoped></style>
