<template>
  <div class="console">
    <a-row :gutter="[16, 16]">
      <a-col :xs="24" :sm="24" :md="12" :lg="8" :xl="6">
        <a-card size="small" :bordered="false" hoverable>
          <a-skeleton v-if="loading" :width="100" size="medium" />
          <template v-else>
            <div class="flex justify-between">
              <div>
                <img src="~@/assets/images/visits.svg" class="top-card-img" />
                <div class="pt-2">访问量</div>
              </div>
              <div>
                <a-typography-text type="secondary">周</a-typography-text>
              </div>
            </div>
            <div class="flex justify-between">
              <a-typography-title :level="2" class="mb-0">
                <CountTo :startVal="1" :endVal="3232" class="text-3xl" />
              </a-typography-title>
              <div>
                <a-tag color="#18a058" round size="small"> +10% </a-tag>
                <ArrowUpOutlined style="color: #18a058" />
              </div>
            </div>
          </template>
        </a-card>
      </a-col>
      <a-col :xs="24" :sm="24" :md="12" :lg="8" :xl="6">
        <a-card size="small" :bordered="false" hoverable>
          <a-skeleton v-if="loading" :width="100" size="medium" />
          <template v-else>
            <div class="flex justify-between">
              <div>
                <img src="~@/assets/images/sale.svg" class="top-card-img" />
                <div class="pt-2">销售额</div>
              </div>
              <div>
                <a-typography-text type="secondary">周</a-typography-text>
              </div>
            </div>
            <div class="flex justify-between">
              <a-typography-title :level="2" class="mb-0">
                <CountTo
                  prefix="￥"
                  :startVal="1"
                  :endVal="7856"
                  class="text-3xl"
                />
              </a-typography-title>
              <div>
                <a-tag color="#d03050" type="error" round size="small"> -20% </a-tag>
                <ArrowDownOutlined style="color: #d03050" />
              </div>
            </div>
          </template>
        </a-card>
      </a-col>
      <a-col :xs="24" :sm="24" :md="12" :lg="8" :xl="6">
        <a-card size="small" :bordered="false" hoverable>
          <a-skeleton v-if="loading" :width="100" size="medium" />
          <template v-else>
            <div class="flex justify-between">
              <div>
                <img src="~@/assets/images/order_count.svg" class="top-card-img" />
                <div class="pt-2">订单量</div>
              </div>
              <div>
                <a-typography-text type="secondary">周</a-typography-text>
              </div>
            </div>
            <div class="flex justify-between">
              <a-typography-title :level="2" class="mb-0">
                <CountTo :startVal="1" :endVal="9323" class="text-3xl" />
              </a-typography-title>
              <div>
                <a-tag color="#18a058" type="success" round size="small"> +35% </a-tag>
                <ArrowUpOutlined style="color: #18a058" />
              </div>
            </div>
          </template>
        </a-card>
      </a-col>
      <a-col :xs="24" :sm="24" :md="12" :lg="8" :xl="6">
        <a-card size="small" :bordered="false" hoverable>
          <a-skeleton v-if="loading" :width="100" size="medium" />
          <template v-else>
            <div class="flex justify-between">
              <div>
                <img src="~@/assets/images/volume.svg" class="top-card-img" />
                <div class="pt-2">成交额</div>
              </div>
              <div>
                <a-typography-text type="secondary">月</a-typography-text>
              </div>
            </div>
            <div class="flex justify-between">
              <a-typography-title :level="2" class="mb-0">
                <CountTo prefix="￥" :startVal="1" :endVal="9853" class="text-3xl" />
              </a-typography-title>
              <div>
                <a-tag color="#d03050" type="error" round size="small"> -5% </a-tag>
                <ArrowDownOutlined style="color: #d03050" />
              </div>
            </div>
          </template>
        </a-card>
      </a-col>
    </a-row>

    <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 } from 'vue';
  import { ArrowUpOutlined, ArrowDownOutlined } from '@ant-design/icons-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';

  const loading = ref<boolean>(true);
  const visits = ref<TypeVisits>();
  const saleroom = ref<TypeSaleroom>();
  const orderLarge = ref<TypeOrderLarge>();
  const volume = ref<TypeOrderLarge>();

  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;
  });
</script>

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