<template>
  <div class="console">
    <n-grid cols="1 s:2 m:3 l:4 xl:4 2xl:4" responsive="screen" :x-gap="12" :y-gap="8">
      <n-grid-item>
        <NCard
          title="总用户量"
          :segmented="{ content: true, footer: true }"
          size="small"
          :bordered="false"
        >
          <template #header-extra>
            <n-tag type="info">总</n-tag>
          </template>
          <div class="py-1 px-1 flex justify-between">
            <n-skeleton v-if="loading" :width="100" size="medium" />
            <CountTo v-else :startVal="0" :endVal="data.TotalUser ?? 0" class="text-3xl" />
          </div>
        </NCard>
      </n-grid-item>
      <n-grid-item>
        <NCard
          title="日新增用户"
          :segmented="{ content: true, footer: true }"
          size="small"
          :bordered="false"
        >
          <template #header-extra>
            <n-tag type="error">今日</n-tag>
          </template>
          <div class="py-1 px-1 flex justify-between">
            <n-skeleton v-if="loading" :width="100" size="medium" />
            <CountTo
              v-else
              :startVal="1"
              :endVal="data.Today > 0 ? data.Today : 1"
              class="text-3xl"
            />
          </div>
        </NCard>
      </n-grid-item>
      <n-grid-item>
        <NCard
          title="周新增用户"
          :segmented="{ content: true, footer: true }"
          size="small"
          :bordered="false"
        >
          <template #header-extra>
            <n-tag type="info">7天内</n-tag>
          </template>
          <div class="py-1 px-1 flex justify-between">
            <n-skeleton v-if="loading" :width="100" size="medium" />
            <CountTo
              v-else
              :startVal="1"
              :endVal="data.Week > 0 ? data.Week : 1"
              class="text-3xl"
            />
          </div>
        </NCard>
      </n-grid-item>
      <n-grid-item>
        <NCard
          title="月新增用户"
          :segmented="{ content: true, footer: true }"
          size="small"
          :bordered="false"
        >
          <template #header-extra>
            <n-tag type="info">30天内</n-tag>
          </template>
          <div class="py-1 px-1 flex justify-between">
            <n-skeleton v-if="loading" :width="100" size="medium" />
            <CountTo
              v-else
              :startVal="1"
              :endVal="data.Moon > 0 ? data.Moon : 1"
              class="text-3xl"
            />
          </div>
        </NCard>
      </n-grid-item>
    </n-grid>
    <div class="mt-4">
      <n-grid cols="1 s:2 m:3 l:8 xl:8 2xl:8" responsive="screen" :x-gap="16" :y-gap="8">
        <n-grid-item v-for="(item, index) in iconList" :key="index">
          <NCard content-style="padding-top: 0;" size="small" :bordered="false">
            <template #footer>
              <n-skeleton v-if="loading" size="medium" />
              <div class="cursor-pointer" v-else>
                <p class="flex justify-center">
                  <span>
                    <n-icon :size="item.size" class="flex-1" :color="item.color">
                      <component :is="item.icon" v-on="item.eventObject || {}" />
                    </n-icon>
                  </span>
                </p>
                <p class="flex justify-center"
                  ><span>{{ item.title }}</span></p
                >
              </div>
            </template>
          </NCard>
        </n-grid-item>
      </n-grid>
    </div>
  </div>
</template>
<script lang="ts" setup>
  import { ref, onMounted } from 'vue';
  import { getConsoleInfo } from '@/api/dashboard/console';
  import { CountTo } from '@/components/CountTo/index';
  import {
    UsergroupAddOutlined,
    BarChartOutlined,
    ShoppingCartOutlined,
    AccountBookOutlined,
    SettingOutlined,
  } from '@vicons/antd';
  import { useRouter } from 'vue-router';

  const loading = ref(true);
  const router = useRouter();

  // 图标列表
  const iconList = [
    {
      icon: UsergroupAddOutlined,
      size: '32',
      title: '玩家列表',
      color: '#69c0ff',
      eventObject: {
        click: () => router.push({ name: 'account-list' }),
      },
    },
    /*{
      icon: BarChartOutlined,
      size: '32',
      title: '基础数据',
      color: '#69c0ff',
      eventObject: {
        click: () => router.push({ name: 'basic-echarts' }),
      },
    },
    {
      icon: ShoppingCartOutlined,
      size: '32',
      title: '消费明细',
      color: '#ff9c6e',
      eventObject: {
        click: () => router.push({ name: 'consumption-details' }),
      },
    },
    {
      icon: AccountBookOutlined,
      size: '32',
      title: '充值订单',
      color: '#b37feb',
      eventObject: {
        click: () => router.push({ name: 'recharge-list' }),
      },
    },*/
    {
      icon: SettingOutlined,
      size: '32',
      title: '服务配置',
      color: '#ffc069',
      eventObject: {
        click: () => router.push({ path: '/tool/config' }),
      },
    },
  ];

  const data = ref([]);
  onMounted(async () => {
    data.value = await getConsoleInfo();
    console.log('data:' + JSON.stringify(data.value));
    loading.value = false;
  });
</script>

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