<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-skeleton v-if="loading" :width="100" size="medium" />
    <template v-else>
      <VisiTab />
    </template>
  </div>
</template>
<script lang="ts" setup>
  import { ref, onMounted } from 'vue';
  import { getConsoleInfo } from '@/api/dashboard/console';
  import VisiTab from '../console/components/VisiTab.vue';
  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;
  });
</script>

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