<template>
  <div>
    <!-- 首页基础信息 -->
    <div class="md:flex">
      <Card size="small" class="md:w-1/3 w-full !md:mt-0 !mt-4 !md:mr-4" style="color: #666">
        <div class="flex" style="height: 100px">
          <div class="mr-4"
            ><img
              src="/src/assets/images/device-count.png"
              style="width: 5.625rem; height: 5.625rem"
          /></div>
          <div class="flex-auto">
            <div class="flex justify-between" style="align-items: center">
              <div style="font-size: 1.625rem; color: #333; font-weight: bold">
                <CountTo
                  v-if="growCardList?.deviceInfo?.sumCount"
                  :endVal="growCardList.deviceInfo.sumCount"
                />
                <CountTo v-else :endVal="0" />
              </div>
              <Tooltip>
                <template #title>
                  设备数 : {{ growCardList?.deviceInfo.sumCount }} 今日新增
                  {{ toThousands(growCardList?.deviceInfo?.todayAdd) }}
                </template>
                <img src="/src/assets/images/tip.png" style="width: 1.125rem; height: 1.125rem" />
              </Tooltip>
            </div>
            <div> 设备数 </div>
          </div>
        </div>
        <div class="ml-2 pt-4" style="border-top: 2px solid #f0f2f5">
          今日新增 {{ toThousands(growCardList?.deviceInfo?.todayAdd) }}
        </div>
      </Card>
      <Card size="small" class="md:w-1/3 w-full !md:mt-0 !mt-4 !md:mr-4" style="color: #666">
        <div class="flex" style="height: 100px">
          <div class="mr-4">
            <img
              v-if="!isAdmin(role)"
              src="/src/assets/images/alarm-count.png"
              style="width: 5.625rem; height: 5.625rem"
            />
            <img v-else src="/src/assets/images/zh.png" style="width: 5.625rem; height: 5.625rem" />
          </div>
          <div class="flex-auto">
            <div class="flex justify-between" style="align-items: center">
              <div
                v-if="!isAdmin(role)"
                style="font-size: 1.625rem; color: #333; font-weight: bold"
              >
                <CountTo
                  v-if="growCardList?.alarmInfo?.sumCount"
                  :end-val="growCardList.alarmInfo.sumCount"
                />
                <CountTo v-else :end-val="0" />
              </div>
              <div style="font-size: 1.625rem; color: #333; font-weight: bold" v-else>
                <CountTo
                  v-if="growCardList?.tenantInfo?.sumCount"
                  :end-val="growCardList.tenantInfo.sumCount"
                />
                <CountTo v-else :end-val="0" />
              </div>
              <Tooltip>
                <template #title>
                  {{
                    !isAdmin(role)
                      ? `告警数：${growCardList?.alarmInfo?.sumCount} 今日新增 ${toThousands(
                          growCardList?.alarmInfo?.todayAdd
                        )}`
                      : `租户总量：${growCardList?.tenantInfo?.sumCount} 今日新增 ${toThousands(
                          growCardList?.alarmInfo?.todayAdd
                        )}`
                  }}
                </template>
                <img src="/src/assets/images/tip.png" style="width: 1.125rem; height: 1.125rem" />
              </Tooltip>
            </div>
            <div> {{ !isAdmin(role) ? `告警数` : '租户总量' }}</div>
          </div>
        </div>
        <div v-if="!isAdmin(role)" class="ml-2 pt-4" style="border-top: 2px solid #f0f2f5">
          今日新增 {{ toThousands(growCardList?.alarmInfo?.todayAdd) }}</div
        >
        <div v-else class="ml-2 pt-4" style="border-top: 2px solid #f0f2f5">
          今日新增 {{ toThousands(growCardList?.tenantInfo?.todayAdd) }}</div
        >
      </Card>
      <Card size="small" class="md:w-1/3 w-full !md:mt-0 !mt-4" style="color: #666">
        <div class="flex" style="height: 100px">
          <div class="mr-4">
            <img
              v-if="!isAdmin(role)"
              src="/src/assets/images/msg-count.png"
              style="width: 5.625rem; height: 5.625rem"
            />
            <img v-else src="/src/assets/images/kf.png" style="width: 5.625rem; height: 5.625rem" />
          </div>
          <div class="flex-auto">
            <div class="flex justify-between" style="align-items: center">
              <div
                v-if="!isAdmin(role)"
                style="font-size: 1.625rem; color: #333; font-weight: bold"
              >
                <CountTo
                  v-if="growCardList?.messageInfo?.messageCount"
                  :end-val="growCardList.messageInfo.messageCount"
                />
                <CountTo v-else :end-val="0" />
              </div>
              <div style="font-size: 1.625rem; color: #333; font-weight: bold" v-else>
                <CountTo
                  v-if="growCardList?.customerInfo?.sumCount"
                  :end-val="growCardList.customerInfo.sumCount"
                />
                <CountTo v-else :end-val="0" />
              </div>
              <Tooltip>
                <template #title>
                  {{
                    !isAdmin(role)
                      ? `消息数：${growCardList?.messageInfo?.messageCount} 今日新增 ${toThousands(
                          growCardList?.messageInfo?.todayMessageAdd
                        )}`
                      : `客户总量：${growCardList?.customerInfo?.sumCount} 今日新增 ${toThousands(
                          growCardList?.messageInfo?.todayMessageAdd
                        )}`
                  }}
                </template>
                <img src="/src/assets/images/tip.png" style="width: 1.125rem; height: 1.125rem" />
              </Tooltip>
            </div>
            <div> {{ !isAdmin(role) ? `消息数` : '客户总量' }}</div>
          </div>
        </div>
        <div v-if="!isAdmin(role)" class="ml-2 pt-4" style="border-top: 2px solid #f0f2f5">
          今日新增 {{ toThousands(growCardList?.messageInfo?.todayMessageAdd) }}</div
        >
        <div v-else class="ml-2 pt-4" style="border-top: 2px solid #f0f2f5">
          今日新增 {{ toThousands(growCardList?.customerInfo?.todayAdd) }}</div
        >
      </Card>
      <Card
        v-if="!isAdmin(role)"
        size="small"
        class="md:w-1/3 w-full !md:mt-0 !mt-4 !md:ml-4"
        style="color: #666"
      >
        <div class="flex" style="height: 100px">
          <div class="mr-4">
            <img
              v-if="!isAdmin(role)"
              src="/src/assets/images/product.png"
              style="width: 5.625rem; height: 5.625rem"
            />
            <img
              v-else
              src="/src/assets/images/product.png"
              style="width: 5.625rem; height: 5.625rem"
            />
          </div>
          <div class="flex-auto">
            <div class="flex justify-between" style="align-items: center">
              <div
                v-if="!isAdmin(role)"
                style="font-size: 1.625rem; color: #333; font-weight: bold"
              >
                <CountTo
                  v-if="growCardList?.productInfo?.sumCount"
                  :end-val="growCardList.productInfo.sumCount"
                />
                <CountTo v-else :end-val="0" />
              </div>
              <div style="font-size: 1.625rem; color: #333; font-weight: bold" v-else>
                <CountTo
                  v-if="growCardList?.productInfo?.sumCount"
                  :end-val="growCardList.productInfo?.sumCount"
                />
                <CountTo v-else :end-val="0" />
              </div>
              <Tooltip>
                <template #title>
                  {{
                    !isAdmin(role)
                      ? `产品数：${growCardList?.productInfo?.sumCount} 今日新增 ${toThousands(
                          growCardList?.productInfo?.todayAdd
                        )}`
                      : `产品数：${growCardList?.customerInfo?.sumCount} 今日新增 ${toThousands(
                          growCardList?.productInfo?.todayAdd
                        )}`
                  }}
                </template>
                <img src="/src/assets/images/tip.png" style="width: 1.125rem; height: 1.125rem" />
              </Tooltip>
            </div>
            <div> {{ !isAdmin(role) ? `产品数` : '产品数' }}</div>
          </div>
        </div>
        <div v-if="!isAdmin(role)" class="ml-2 pt-4" style="border-top: 2px solid #f0f2f5">
          今日新增 {{ toThousands(growCardList?.productInfo?.todayAdd) }}</div
        >
        <div v-else class="ml-2 pt-4" style="border-top: 2px solid #f0f2f5">
          今日新增 {{ toThousands(growCardList?.productInfo?.todayAdd) }}</div
        >
      </Card>
    </div>
    <!-- 首页饼图 -->
    <div class="md:flex mt-4" v-if="!isAdmin(role)">
      <Card
        size="small"
        class="md:w-1/3 w-full !md:mt-0 !mt-4 !md:mr-4"
        style="color: #666; width: 50%"
      >
        <div class="flex container">
          <div class="mr-4 flex chart-top">
            <PieChartDeviceSub :legendData="legendData" :seriesData="seriesData" :isCircle="true" />
          </div>
          <div class="ml-20 flex justify-around right-text">
            <div class="text">
              直连设备：{{ growCardList?.deviceInfo?.directConnection ?? 0 }}个
            </div>
            <div class="text"> 网关设备：{{ growCardList?.deviceInfo?.gateWay ?? 0 }}个 </div>
            <div class="text"> 网关子设备：{{ growCardList?.deviceInfo?.sensor ?? 0 }}个 </div>
          </div>
        </div>
      </Card>
      <Card
        size="small"
        class="md:w-1/3 w-full !md:mt-0 !mt-4 !md:ml-1"
        style="color: #666; width: 50%"
      >
        <div class="flex container">
          <div class="mr-4 flex chart-top">
            <PieChartDeviceSub
              :legendData="legendStatusData"
              :seriesData="seriesStatusData"
              :isCircle="false"
            />
          </div>
          <div class="ml-20 flex justify-around right-text">
            <div class="text"> 待激活设备：{{ growCardList?.deviceInfo?.inActive ?? 0 }}个 </div>
            <div class="text"> 在线设备：{{ growCardList?.deviceInfo?.onLine ?? 0 }}个 </div>
            <div class="text"> 离线设备：{{ growCardList?.deviceInfo?.offLine ?? 0 }}个 </div>
          </div>
        </div>
      </Card>
    </div>
  </div>
</template>
<script lang="ts" setup>
  import { ref, onMounted, defineComponent, Ref } from 'vue';
  import { Card } from 'ant-design-vue';
  import { getHomeData } from '/@/api/dashboard';
  import { isAdmin } from '/@/enums/roleEnum';
  import { toThousands } from '/@/utils/fnUtils';
  import { CountTo } from '/@/components/CountTo/index';
  import { Tooltip } from 'ant-design-vue';
  import { CardList, seriesDataT } from './props';
  import PieChartDeviceSub from './PieChartDeviceSub.vue';

  defineProps<{
    role: string;
  }>();

  defineExpose({
    isAdmin,
    toThousands,
  });

  defineComponent({
    Card,
  });

  const legendData = ref(['网关设备', '直连设备', '网关子设备']);

  const seriesData: Ref<seriesDataT[]> = ref([]);

  const legendStatusData = ref(['待激活', '在线', '离线']);

  const seriesStatusData: Ref<seriesDataT[]> = ref([]);

  const growCardList = ref<CardList>();

  onMounted(async () => {
    const res = await getHomeData();
    growCardList.value = res;
    const devObj = growCardList.value?.deviceInfo;
    for (let o in devObj) {
      if (o === 'directConnection' || o === 'gateWay' || o === 'sensor') {
        seriesData.value.push({
          value:
            o === 'directConnection'
              ? devObj?.directConnection
              : o === 'gateWay'
              ? devObj?.gateWay
              : devObj?.sensor,
          name: o === 'directConnection' ? '直连设备' : o === 'gateWay' ? '网关设备' : '网关子设备',
          itemStyle:
            o === 'directConnection'
              ? { color: '#5C7BD9' }
              : o === 'gateWay'
              ? { color: '#91CC75' }
              : { color: '#FAC859' },
        });
      }
      if (o === 'inActive' || o === 'onLine' || o === 'offLine') {
        seriesStatusData.value.push({
          value:
            o === 'inActive' ? devObj?.inActive : o === 'onLine' ? devObj?.onLine : devObj?.offLine,
          name: o === 'inActive' ? '待激活' : o === 'onLine' ? '在线' : '离线',
          itemStyle:
            o === 'inActive'
              ? { color: '#5C7BD9' }
              : o === 'onLine'
              ? { color: '#91CC75' }
              : { color: '#FAC859' },
        });
      }
    }
  });
</script>
<style lang="css">
  .right-text {
    width: 40%;
    flex-direction: column;
    height: 240px;
    margin: 10px 0 10px 50px;
  }

  .text {
    color: #333;
    font-weight: bold;
    display: flex;
    flex-wrap: nowrap;
  }

  .chart-top {
    width: 60%;
    height: 300px;
    align-items: center;
    margin-top: -30px;
  }

  .container {
    width: 100%;
  }
</style>