<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>
        <n-card
          title="访问量"
          :segmented="{ content: true, footer: true }"
          size="small"
          :bordered="false"
        >
          <template #header-extra>
            <n-tag type="success" :bordered="false">日</n-tag>
          </template>
          <div class="flex justify-between px-1 py-1">
            <n-skeleton v-if="loading" :width="100" size="medium" />
            <CountTo v-else :startVal="1" :endVal="visits?.dayVisits" class="text-3xl" />
          </div>
          <div class="flex justify-between px-1 py-1">
            <div class="text-sn">
              <n-skeleton v-if="loading" :width="100" size="medium" />
              <template v-else>
                日同比
                <CountTo :startVal="1" suffix="%" :endVal="visits?.rise" />
                <n-icon size="12" color="#00ff6f">
                  <CaretUpOutlined />
                </n-icon>
              </template>
            </div>
            <div class="text-sn">
              <n-skeleton v-if="loading" :width="100" size="medium" />
              <template v-else>
                周同比
                <CountTo :startVal="1" suffix="%" :endVal="visits?.decline" />
                <n-icon size="12" color="#ffde66">
                  <CaretDownOutlined />
                </n-icon>
              </template>
            </div>
          </div>
          <template #footer>
            <div class="flex justify-between">
              <n-skeleton v-if="loading" text :repeat="2" />
              <template v-else>
                <div class="text-sn"> 总访问量：</div>
                <div class="text-sn">
                  <CountTo :startVal="1" :endVal="visits?.amount" />
                </div>
              </template>
            </div>
          </template>
        </n-card>
      </n-grid-item>
      <n-grid-item>
        <n-card
          title="销售额"
          :segmented="{ content: true, footer: true }"
          size="small"
          :bordered="false"
        >
          <template #header-extra>
            <n-tag type="info" :bordered="false">周</n-tag>
          </template>
          <div class="flex justify-between px-1 py-1">
            <n-skeleton v-if="loading" :width="100" size="medium" />
            <CountTo
              v-else
              prefix="￥"
              :startVal="1"
              :endVal="saleroom?.weekSaleroom"
              class="text-3xl"
            />
          </div>
          <div class="flex justify-between px-2 py-2">
            <div class="flex-1 text-sn">
              <n-progress
                type="line"
                :percentage="saleroom?.degree"
                :indicator-placement="'inside'"
                processing
              />
            </div>
          </div>
          <template #footer>
            <div class="flex justify-between">
              <n-skeleton v-if="loading" :width="100" size="medium" />
              <template v-else>
                <div class="text-sn"> 总销售额：</div>
                <div class="text-sn">
                  <CountTo prefix="￥" :startVal="1" :endVal="saleroom?.amount" />
                </div>
              </template>
            </div>
          </template>
        </n-card>
      </n-grid-item>
      <n-grid-item>
        <n-card
          title="订单量"
          :segmented="{ content: true, footer: true }"
          size="small"
          :bordered="false"
        >
          <template #header-extra>
            <n-tag type="warning" :bordered="false">周</n-tag>
          </template>
          <div class="flex justify-between px-1 py-1">
            <n-skeleton v-if="loading" :width="100" size="medium" />
            <CountTo v-else :startVal="1" :endVal="orderLarge?.weekLarge" class="text-3xl" />
          </div>
          <div class="flex justify-between px-1 py-1">
            <div class="text-sn">
              <n-skeleton v-if="loading" :width="100" size="medium" />
              <template v-else>
                日同比
                <CountTo :startVal="1" suffix="%" :endVal="orderLarge?.rise" />
                <n-icon size="12" color="#00ff6f">
                  <CaretUpOutlined />
                </n-icon>
              </template>
            </div>
            <div class="text-sn">
              <n-skeleton v-if="loading" :width="100" size="medium" />
              <template v-else>
                周同比
                <CountTo :startVal="1" suffix="%" :endVal="orderLarge?.rise" />
                <n-icon size="12" color="#ffde66">
                  <CaretDownOutlined />
                </n-icon>
              </template>
            </div>
          </div>
          <template #footer>
            <div class="flex justify-between">
              <n-skeleton v-if="loading" :width="100" size="medium" />
              <template v-else>
                <div class="text-sn"> 转化率：</div>
                <div class="text-sn">
                  <CountTo :startVal="1" suffix="%" :endVal="orderLarge?.amount" />
                </div>
              </template>
            </div>
          </template>
        </n-card>
      </n-grid-item>
      <n-grid-item>
        <n-card
          title="成交额"
          :segmented="{ content: true, footer: true }"
          size="small"
          :bordered="false"
        >
          <template #header-extra>
            <n-tag type="error" :bordered="false">月</n-tag>
          </template>
          <div class="flex justify-between px-1 py-1">
            <n-skeleton v-if="loading" :width="100" size="medium" />
            <CountTo
              v-else
              prefix="￥"
              :startVal="1"
              :endVal="volume?.weekLarge"
              class="text-3xl"
            />
          </div>
          <div class="flex justify-between px-1 py-1">
            <div class="text-sn">
              <n-skeleton v-if="loading" :width="100" size="medium" />
              <template v-else>
                月同比
                <CountTo :startVal="1" suffix="%" :endVal="volume?.rise" />
                <n-icon size="12" color="#00ff6f">
                  <CaretUpOutlined />
                </n-icon>
              </template>
            </div>
            <div class="text-sn">
              <n-skeleton v-if="loading" :width="100" size="medium" />
              <template v-else>
                月同比
                <CountTo :startVal="1" suffix="%" :endVal="volume?.decline" />
                <n-icon size="12" color="#ffde66">
                  <CaretDownOutlined />
                </n-icon>
              </template>
            </div>
          </div>
          <template #footer>
            <div class="flex justify-between">
              <n-skeleton v-if="loading" :width="100" size="medium" />
              <template v-else>
                <div class="text-sn"> 总成交额：</div>
                <div class="text-sn">
                  <CountTo prefix="￥" :startVal="1" :endVal="volume?.amount" />
                </div>
              </template>
            </div>
          </template>
        </n-card>
      </n-grid-item>
    </n-grid>

    <!--导航卡片-->
    <div class="mt-3">
      <n-grid cols="1 s:2 m:3 l:8 xl:8 2xl:8" responsive="screen" :x-gap="12" :y-gap="8">
        <n-grid-item v-for="(item, index) in iconList" :key="index">
          <n-card
            content-style="padding-top: 0;"
            size="small"
            :bordered="false"
            v-on="item.eventObject || {}"
          >
            <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" />
                    </n-icon>
                  </span>
                </p>
                <p class="flex justify-center"
                  ><span>{{ item.title }}</span></p
                >
              </div>
            </template>
          </n-card>
        </n-grid-item>
      </n-grid>
    </div>

    <n-grid cols="1 s:1 m:1 l:2 xl:2 2xl:2" responsive="screen" :x-gap="12" :y-gap="8" class="mt-3">
      <n-grid-item>
        <n-card
          size="small"
          title="访问量"
          :segmented="{ content: true }"
          :bordered="false"
          hoverable
        >
          <NewVisitAmount />
        </n-card>
      </n-grid-item>
      <n-grid-item>
        <n-card
          size="small"
          title="区域排行"
          :segmented="{ content: true }"
          :bordered="false"
          hoverable
        >
          <AreaRanking />
          <!-- <div class="-mt-6">
            <n-space justify="space-around">
              <n-statistic label="搜索引擎" value="45.8%" />
              <n-statistic label="直接访问" value="35.5%" />
              <n-statistic label="邮件营销" value="25.56%" />
            </n-space>
          </div> -->
        </n-card>
      </n-grid-item>
    </n-grid>

    <n-grid cols="1 s:1 m:2 l:2 xl:2 2xl:2" responsive="screen" :x-gap="12" :y-gap="8" class="mt-3">
      <n-grid-item>
        <n-card
          size="small"
          title="销售额"
          :segmented="{ content: true }"
          :bordered="false"
          hoverable
        >
          <Percent />
        </n-card>
      </n-grid-item>
      <n-grid-item>
        <n-card
          size="small"
          title="访问来源"
          :segmented="{ content: true }"
          :bordered="false"
          hoverable
        >
          <VisitSource />
          <!-- <div class="-mt-6">
            <n-space justify="space-around">
              <n-statistic label="搜索引擎" value="45.8%" />
              <n-statistic label="直接访问" value="35.5%" />
              <n-statistic label="邮件营销" value="25.56%" />
            </n-space>
          </div> -->
        </n-card>
      </n-grid-item>
    </n-grid>
  </div>
</template>

<script lang="ts" setup>
  import { ref, onMounted, h } from 'vue';
  import { getConsoleInfo } from '@/api/dashboard/console';
  import { useNotification } from 'naive-ui';
  import NewVisitAmount from './components/NewVisitAmount.vue';
  import VisitSource from './components/VisitSource.vue';
  import Percent from './components/Percent.vue';
  import AreaRanking from './components/AreaRanking.vue';
  import { useRouter } from 'vue-router';
  import {
    CaretUpOutlined,
    CaretDownOutlined,
    UsergroupAddOutlined,
    BarChartOutlined,
    ShoppingCartOutlined,
    AccountBookOutlined,
    CreditCardOutlined,
    MailOutlined,
    TagsOutlined,
    SettingOutlined,
  } from '@vicons/antd';
  import type {
    TypeConsole,
    TypeOrderLarge,
    TypeSaleroom,
    TypeVisits,
  } from '@/api/dashboard/console';

  /**
   * 定义参数
   */
  const router = useRouter();
  const loading = ref(true);
  const visits = ref<TypeVisits>();
  const saleroom = ref<TypeSaleroom>();
  const orderLarge = ref<TypeOrderLarge>();
  const volume = ref<TypeOrderLarge>();

  // 图标列表
  const iconList = [
    {
      icon: UsergroupAddOutlined,
      size: '32',
      title: '用户管理',
      color: '#69c0ff',
      eventObject: {
        click: () => {
          router.push({ path: '/system/user' });
        },
      },
    },
    {
      icon: BarChartOutlined,
      size: '32',
      title: '租户管理',
      color: '#69c0ff',
      eventObject: {
        click: () => {
          router.push({ path: '/system/tenant' });
        },
      },
    },
    {
      icon: ShoppingCartOutlined,
      size: '32',
      title: '操作日志',
      color: '#ff9c6e',
      eventObject: {
        click: () => {
          router.push({ path: '/system/logger/operLog' });
        },
      },
    },
    {
      icon: AccountBookOutlined,
      size: '32',
      title: '参数管理',
      color: '#b37feb',
      eventObject: {
        click: () => {
          router.push({ path: '/data/param' });
        },
      },
    },
    {
      icon: CreditCardOutlined,
      size: '32',
      title: '字典管理',
      color: '#ffd666',
      eventObject: {
        click: () => {
          router.push({ path: '/data/dict' });
        },
      },
    },
    {
      icon: MailOutlined,
      size: '32',
      title: '消息管理',
      color: '#5cdbd3',
      eventObject: {
        click: () => {
          router.push({ path: '/data/message' });
        },
      },
    },
    {
      icon: TagsOutlined,
      size: '32',
      title: '定时任务',
      color: '#ff85c0',
      eventObject: {
        click: () => {
          router.push({ path: '/monitor/job' });
        },
      },
    },
    {
      icon: SettingOutlined,
      size: '32',
      title: '配置管理',
      color: '#ffc069',
      eventObject: {
        click: () => {
          router.push({ path: '/data/config' });
        },
      },
    },
  ];

  /**
   * 钩子函数
   */
  const notification = useNotification();
  onMounted(async () => {
    const res: TypeConsole = await getConsoleInfo();
    visits.value = res.visits;
    saleroom.value = res.saleroom;
    orderLarge.value = res.orderLarge;
    volume.value = res.volume;
    loading.value = false;

    // 消息通知
    if (!localStorage.getItem('adClosed')) {
      notification.info({
        title: '双十二限时特惠',
        content: () =>
          h('div', [
            h('span', '正在进行双十二限时促销活动，五折特平惠，'),
            h(
              'a',
              {
                href: 'https://www.baidu.com',
                target: '_blank',
              },
              '前往购买授权',
            ),
          ]),
        duration: 5000,
      });
      localStorage.setItem('adClosed', 'true');
    }
  });
</script>

<style lang="less" scoped>
  .top-card-img {
    width: 32px;
    margin-left: 5px;
  }
</style>
