<template>
  <div class="console">
    <!--数据卡片-->
    <a-row :gutter="[16, 16]">
      <a-col :xs="24" :sm="24" :md="12" :lg="8" :xl="6">
        <a-card title="访问量" size="small" :bordered="false" hoverable>
          <template #extra>
            <a-tag color="green">日</a-tag>
          </template>
          <a-skeleton v-if="loading" :width="100" :paragraph="{ rows: 2, width: '100%' }" />
          <template v-else>
            <div class="flex justify-between px-1 py-1">
              <CountTo :startVal="1" :endVal="visits.dayVisits" class="text-3xl" />
            </div>
            <div class="flex justify-between px-1 py-1">
              <div class="text-sn">
                日同比
                <CountTo :startVal="1" suffix="%" :endVal="visits.rise" />
              </div>
              <div class="text-sn">
                周同比
                <CountTo :startVal="1" suffix="%" :endVal="visits.decline" />
              </div>
            </div>
            <a-divider style="margin: 16px 0 10px 0" />
            <div class="flex justify-between py-1">
              <div class="text-sn"> 总访问量：</div>
              <div class="text-sn">
                <CountTo :startVal="1" :endVal="visits.amount" />
              </div>
            </div>
          </template>
        </a-card>
      </a-col>
      <a-col :xs="24" :sm="24" :md="12" :lg="8" :xl="6">
        <a-card title="销售额" size="small" :bordered="false" hoverable>
          <template #extra>
            <a-tag color="blue">周</a-tag>
          </template>
          <a-skeleton v-if="loading" :width="100" :paragraph="{ rows: 2, width: '100%' }" />
          <template v-else>
            <div class="flex justify-between px-1 py-1">
              <CountTo prefix="￥" :startVal="1" :endVal="saleroom.weekSaleroom" class="text-3xl" />
            </div>
            <div class="flex justify-between px-2 py-1">
              <div class="flex-1 text-sn">
                <a-progress :percent="70" status="active" />
              </div>
            </div>
            <a-divider style="margin: 16px 0 10px 0" />
            <div class="flex justify-between py-1">
              <div class="text-sn"> 总销售额：</div>
              <div class="text-sn">
                <CountTo prefix="￥" :startVal="1" :endVal="saleroom.amount" />
              </div>
            </div>
          </template>
        </a-card>
      </a-col>
      <a-col :xs="24" :sm="24" :md="12" :lg="8" :xl="6">
        <a-card title="订单量" size="small" :bordered="false" hoverable>
          <template #extra>
            <a-tag color="warning">周</a-tag>
          </template>
          <a-skeleton v-if="loading" :width="100" :paragraph="{ rows: 2, width: '100%' }" />
          <template v-else>
            <div class="flex justify-between px-1 py-1">
              <CountTo :startVal="1" :endVal="orderLarge.weekLarge" class="text-3xl" />
            </div>
            <div class="flex justify-between px-1 py-1">
              <div class="text-sn">
                日同比
                <CountTo :startVal="1" suffix="%" :endVal="orderLarge.rise" />
              </div>
              <div class="text-sn">
                周同比
                <CountTo :startVal="1" suffix="%" :endVal="orderLarge.rise" />
              </div>
            </div>
            <a-divider style="margin: 16px 0 10px 0" />
            <div class="flex justify-between py-1">
              <a-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>
        </a-card>
      </a-col>
      <a-col :xs="24" :sm="24" :md="12" :lg="8" :xl="6">
        <a-card title="成交额" size="small" :bordered="false" hoverable>
          <template #extra>
            <a-tag color="error">月</a-tag>
          </template>
          <a-skeleton v-if="loading" :width="100" :paragraph="{ rows: 2, width: '100%' }" />
          <template v-else>
            <div class="flex justify-between px-1 py-1">
              <CountTo prefix="￥" :startVal="1" :endVal="volume.weekLarge" class="text-3xl" />
            </div>
            <div class="flex justify-between px-1 py-1">
              <div class="text-sn">
                月同比
                <CountTo :startVal="1" suffix="%" :endVal="volume.rise" />
              </div>
              <div class="text-sn">
                月同比
                <CountTo :startVal="1" suffix="%" :endVal="volume.decline" />
              </div>
            </div>
            <a-divider style="margin: 16px 0 10px 0" />
            <div class="flex justify-between py-1">
              <a-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>
        </a-card>
      </a-col>
    </a-row>

    <!--导航卡片-->
    <div class="mt-4">
      <a-row :gutter="[16, 16]">
        <a-col
          :xs="24"
          :sm="12"
          :md="6"
          :lg="4"
          :xl="3"
          v-for="(item, index) in iconList"
          :key="index"
        >
          <a-card size="small" :bordered="false" hoverable>
            <a-skeleton v-if="loading" :paragraph="{ rows: 1, width: '100%' }" />
            <div class="cursor-pointer py-2" v-else>
              <p class="flex justify-center">
                <component
                  :is="item.icon"
                  :style="{ color: item.color, fontSize: `${item.size}px` }"
                  v-on="item.eventObject || {}"
                />
              </p>
              <p class="flex justify-center mb-0"
                ><span>{{ item.title }}</span></p
              >
            </div>
          </a-card>
        </a-col>
      </a-row>
    </div>

    <a-row :gutter="[16, 16]" class="mt-4">
      <a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
        <a-card title="访问量" :bordered="false" hoverable>
          <a-skeleton v-if="loading" :width="100" size="medium" />
          <template v-else>
            <NewVisitAmount />
          </template>
        </a-card>
      </a-col>
      <a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
        <a-card title="区域排行" :bordered="false" hoverable>
          <a-skeleton v-if="loading" :width="100" size="medium" />
          <template v-else>
            <AreaRanking />
          </template>
          <!-- <div class="-mt-6">
            <a-space justify="space-around">
              <a-statistic label="搜索引擎" value="45.8%" />
              <a-statistic label="直接访问" value="35.5%" />
              <a-statistic label="邮件营销" value="25.56%" />
            </a-space>
          </div> -->
        </a-card>
      </a-col>
    </a-row>

    <a-row :gutter="[16, 16]" class="mt-4">
      <a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
        <a-card title="销售额" :bordered="false" hoverable>
          <a-skeleton v-if="loading" :width="100" size="medium" />
          <template v-else>
            <Percent />
          </template>
        </a-card>
      </a-col>
      <a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
        <a-card title="访问来源" :bordered="false" hoverable>
          <a-skeleton v-if="loading" :width="100" size="medium" />
          <template v-else>
            <VisitSource />
          </template>
          <!-- <div class="-mt-6">
            <a-space justify="space-around">
              <a-statistic label="搜索引擎" value="45.8%" />
              <a-statistic label="直接访问" value="35.5%" />
              <a-statistic label="邮件营销" value="25.56%" />
            </a-space>
          </div> -->
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>

<script lang="ts" setup>
  import { ref, onMounted, h } from 'vue';
  import { notification } from 'ant-design-vue';
  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 { getConsoleInfo } from '@/api/dashboard/console';
  import { CountTo } from '@/components/CountTo/index';
  import {
    UsergroupAddOutlined,
    BarChartOutlined,
    ShoppingCartOutlined,
    AccountBookOutlined,
    CreditCardOutlined,
    MailOutlined,
    TagsOutlined,
    SettingOutlined,
  } from '@ant-design/icons-vue';

  /**
   * 定义参数
   */
  const loading = ref(true);
  const visits = ref<any>({});
  const saleroom = ref<any>({});
  const orderLarge = ref<any>({});
  const volume = ref<any>({});

  // 图标列表
  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: () => {},
      },
    },
  ];

  /**
   * 钩子函数
   */
  onMounted(async () => {
    const { visits, saleroom, orderLarge, volume } = await getConsoleInfo();
    visits.value = visits;
    saleroom.value = saleroom;
    orderLarge.value = orderLarge;
    volume.value = volume;
    loading.value = false;

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

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