<template>
  <!-- 首页基础信息 -->
  <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?.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>
  </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>
</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: '#5AEEED' }
              : o === 'gateWay'
              ? { color: '#0B55F1' }
              : { color: '#00C678' },
        });
      }
      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: '#F9C900' }
              : o === 'onLine'
              ? { color: '#5AEEED' }
              : { color: '#FF9C4A' },
        });
      }
    }
  });
</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>