<template>
  <div>
    <n-card :bordered="false" class="proCard">
      <div class="n-layout-page-header">
        <n-card :bordered="false" title="综合统计">
          <n-alert :show-icon="false">
            至今为止全平台产出各类宝石的数量和占比，数据来源于宝石镶嵌埋点，存在一定误差，数据每天凌晨2点更新一次
          </n-alert>
        </n-card>
      </div>
      <n-space vertical :size="12">
        <n-space>
          <n-tag checkable> 服务器 </n-tag>
          <n-tag checkable>
            <n-select
              v-model:value="serverId"
              style="width: 200px"
              :options="useUserStore.config.server_option"
              @update:value="handleUpdateValue"
            />
          </n-tag>
        </n-space>
        <n-data-table size="small" :columns="statColumns" :data="statData" :single-line="false" />
      </n-space>
    </n-card>
    <n-card :bordered="false" class="proCard">
      <div class="n-layout-page-header">
        <n-card :bordered="false">
          <n-alert :show-icon="false">
            至今为止全平台玩家镶嵌宝石，各个部位解锁槽位个数和镶嵌宝石等级统计
          </n-alert>
        </n-card>
      </div>
      <BasicForm @register="register" @submit="handleSubmit" @reset="handleReset">
        <template #statusSlot="{ model, field }">
          <n-input v-model:value="model[field]" />
        </template>
      </BasicForm>
      <BasicTable
        :columns="columns"
        :request="loadDataTable"
        :row-key="(row) => row.id"
        ref="actionRef"
        @update:checked-row-keys="onCheckedRow"
        :scroll-x="1090"
        :pagination="false"
        :resizeHeightOffset="-10000"
      />
    </n-card>
    <Everyday />
  </div>
</template>

<script lang="ts" setup>
  import { onMounted, reactive, ref, Component, h } from 'vue';
  import { NTooltip, NIcon, NButton, NTag } from 'naive-ui';
  import { HelpCircleOutline } from '@vicons/ionicons5';
  import { BasicTable } from '@/components/Table';
  import Everyday from './everyday.vue';
  import { defaultStatisticsTimeOptions, timestampToDate } from '@/utils/dateUtil';
  import { PartStat, Stat } from '@/api/gem/gem';
  import { useUserStoreWidthOut } from '@/store/modules/user';
  import { FormSchema, useForm } from '@/components/Form';

  const useUserStore = useUserStoreWidthOut();
  const serverId = ref<any>(null);

  const statColumns = [
    {
      title: '宝石类型',
      key: 'name',
      rowSpan: (rowData, rowIndex) => 7,
      render(row) {
        return row.name + '(' + row.index + ')';
      },
    },
    {
      title: '宝石等级',
      key: 'level',
      render(row) {
        if (row.level == 0) {
          return h(
            NTag,
            {
              style: {
                marginRight: '6px',
              },
              type: 'info',
              bordered: false,
            },
            {
              default: () => '总产出',
            }
          );
        }

        return 'Lv.' + row.level;
      },
    },
    {
      title: '产出量',
      key: 'count',
      render(row) {
        return row.count;
      },
    },
    {
      title: '所占百分比',
      key: 'ratio',
      render(row) {
        if (row.level == 0) {
          return '-';
        }
        return row.ratio + '%';
      },
    },
  ];

  const statData = ref([]);

  const renderTooltip = (trigger, content) => {
    return h(NTooltip, null, {
      trigger: () => trigger,
      default: () => content,
    });
  };

  function renderIcon(icon: Component) {
    return () => h(NIcon, null, { default: () => h(icon) });
  }

  const columns = [
    {
      dataIndex: 'part',
      key: 'part',
      width: 80,
      title: '镶嵌部位',
      render(row) {
        return row.name + '(' + row.part + ')';
      },
    },
    {
      dataIndex: 'slot1',
      key: 'slot1',
      width: 80,
      title(column) {
        return renderTooltip(
          h(
            NButton,
            {
              ghost: true,
              strong: true,
              tertiary: true,
              size: 'small',
              text: true,
              iconPlacement: 'right',
            },
            { default: () => '第1槽位', icon: renderIcon(HelpCircleOutline) }
          ),
          '解锁第1槽位的人数'
        );
      },
    },
    {
      dataIndex: 'slot2',
      key: 'slot2',
      width: 80,
      title: '第2槽位',
    },
    {
      dataIndex: 'slot3',
      key: 'slot3',
      width: 80,
      title: '第3槽位',
    },
    {
      dataIndex: 'slot4',
      key: 'slot4',
      width: 80,
      title: '第4槽位',
    },
    {
      dataIndex: 'lv1',
      key: 'lv1',
      width: 80,
      title(column) {
        return renderTooltip(
          h(
            NButton,
            {
              ghost: true,
              strong: true,
              tertiary: true,
              size: 'small',
              text: true,
              iconPlacement: 'right',
            },
            { default: () => 'Lv.1', icon: renderIcon(HelpCircleOutline) }
          ),
          '镶嵌1级宝石的数量'
        );
      },
    },
    {
      dataIndex: 'lv2',
      key: 'lv2',
      width: 80,
      title: 'Lv.2',
    },
    {
      dataIndex: 'lv3',
      key: 'lv3',
      width: 80,
      title: 'Lv.3',
    },
    {
      dataIndex: 'lv4',
      key: 'lv4',
      width: 80,
      title: 'Lv.4',
    },
    {
      dataIndex: 'lv5',
      key: 'lv5',
      width: 80,
      title: 'Lv.5',
    },
    {
      dataIndex: 'lv6',
      key: 'lv6',
      width: 80,
      title: 'Lv.6',
    },
  ];
  const actionRef = ref();
  const formParams = reactive({
    day: timestampToDate(defaultStatisticsTimeOptions()),
  });

  const params = ref<any>({ 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;
        },
      },
    },
  ];

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

  const loadDataTable = async (res) => {
    return await PartStat(params.value);
  };

  function onCheckedRow(rowKeys) {
    console.log(rowKeys);
  }

  async function getStat() {
    statData.value = await Stat({ server_id: serverId.value });
  }

  onMounted(() => {
    getStat();
  });

  function handleUpdateValue(value, _option) {
    serverId.value = value;
    getStat();
  }

  function reloadTable() {
    actionRef.value.reload();
  }

  function handleSubmit(values: Recordable) {
    console.log(values);
    reloadTable();
  }

  function handleReset(values: Recordable) {
    console.log(values);
    params.value = {
      server_id: 1,
    };
    reloadTable();
  }
</script>

<style scoped></style>
