<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 size="small" :bordered="false" hoverable>
          <n-space justify="space-between" align="center">
            <div>
              <img src="~@/assets/images/visits.svg" class="top-card-img" />
              <div class="pt-2">访问量</div>
            </div>
            <div>
              <n-text depth="3">周</n-text>
            </div>
          </n-space>
          <n-space justify="space-between" align="center">
            <n-h1 class="mb-0">98735</n-h1>
            <div>
              <n-tag
                :color="{ color: '#18a058', textColor: '#fff', borderColor: '#18a058' }"
                type="success"
                round
                size="small"
              >
                +10%
              </n-tag>
              <n-text type="success" class="ml-2">
                <n-icon size="16">
                  <ArrowUpOutlined />
                </n-icon>
              </n-text>
            </div>
          </n-space>
        </n-card>
      </n-grid-item>
      <n-grid-item>
        <n-card size="small" :bordered="false" hoverable>
          <n-space justify="space-between" align="center">
            <div>
              <img src="~@/assets/images/sale.svg" class="top-card-img" />
              <div class="pt-2">销售额</div>
            </div>
            <div>
              <n-text depth="3">周</n-text>
            </div>
          </n-space>
          <n-space justify="space-between" align="center">
            <n-h1 class="mb-0">￥3980</n-h1>
            <div>
              <n-tag
                :color="{ color: '#d03050', textColor: '#fff', borderColor: '#d03050' }"
                type="error"
                round
                size="small"
              >
                -20%
              </n-tag>
              <n-text type="error" class="ml-2">
                <n-icon size="16">
                  <ArrowDownOutlined />
                </n-icon>
              </n-text>
            </div>
          </n-space>
        </n-card>
      </n-grid-item>
      <n-grid-item>
        <n-card size="small" :bordered="false" hoverable>
          <n-space justify="space-between" align="center">
            <div>
              <img src="~@/assets/images/order_count.svg" class="top-card-img" />
              <div class="pt-2">订单量</div>
            </div>
            <div>
              <n-text depth="3">周</n-text>
            </div>
          </n-space>
          <n-space justify="space-between" align="center">
            <n-h1 class="mb-0">3685</n-h1>
            <div>
              <n-tag
                :color="{ color: '#18a058', textColor: '#fff', borderColor: '#18a058' }"
                type="success"
                round
                size="small"
              >
                +35%
              </n-tag>
              <n-text type="success" class="ml-2">
                <n-icon size="16">
                  <ArrowUpOutlined />
                </n-icon>
              </n-text>
            </div>
          </n-space>
        </n-card>
      </n-grid-item>
      <n-grid-item>
        <n-card size="small" :bordered="false" hoverable>
          <n-space justify="space-between" align="center">
            <div>
              <img src="~@/assets/images/volume.svg" class="top-card-img" />
              <div class="pt-2">成交额</div>
            </div>
            <div>
              <n-text depth="3">月</n-text>
            </div>
          </n-space>
          <n-space justify="space-between" align="center">
            <n-h1 class="mb-0">￥29856</n-h1>
            <div>
              <n-tag
                :color="{ color: '#d03050', textColor: '#fff', borderColor: '#d03050' }"
                type="error"
                round
                size="small"
              >
                -5%
              </n-tag>
              <n-text type="error" class="ml-2">
                <n-icon size="16">
                  <ArrowDownOutlined />
                </n-icon>
              </n-text>
            </div>
          </n-space>
        </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">
            <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>
          </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 { onMounted, h } from 'vue';
  import { ArrowUpOutlined, ArrowDownOutlined } from '@vicons/antd';
  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 {
    CaretUpOutlined,
    CaretDownOutlined,
    UsergroupAddOutlined,
    BarChartOutlined,
    ShoppingCartOutlined,
    AccountBookOutlined,
    CreditCardOutlined,
    MailOutlined,
    TagsOutlined,
    SettingOutlined,
  } from '@vicons/antd';

  // 图标列表
  const iconList = [
    {
      icon: UsergroupAddOutlined,
      size: '32',
      title: '用户',
      color: '#69c0ff',
      eventObject: {
        click: () => {},
      },
    },
    {
      icon: BarChartOutlined,
      size: '32',
      title: '分析',
      color: '#69c0ff',
      eventObject: {
        click: () => {},
      },
    },
    {
      icon: ShoppingCartOutlined,
      size: '32',
      title: '商品',
      color: '#ff9c6e',
      eventObject: {
        click: () => {},
      },
    },
    {
      icon: AccountBookOutlined,
      size: '32',
      title: '订单',
      color: '#b37feb',
      eventObject: {
        click: () => {},
      },
    },
    {
      icon: CreditCardOutlined,
      size: '32',
      title: '票据',
      color: '#ffd666',
      eventObject: {
        click: () => {},
      },
    },
    {
      icon: MailOutlined,
      size: '32',
      title: '消息',
      color: '#5cdbd3',
      eventObject: {
        click: () => {},
      },
    },
    {
      icon: TagsOutlined,
      size: '32',
      title: '标签',
      color: '#ff85c0',
      eventObject: {
        click: () => {},
      },
    },
    {
      icon: SettingOutlined,
      size: '32',
      title: '配置',
      color: '#ffc069',
      eventObject: {
        click: () => {},
      },
    },
  ];

  const notification = useNotification();
  onMounted(() => {
    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>
