<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>
            <img src="/src/assets/images/tip.png" style="width: 1.125rem; height: 1.125rem" />
          </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>
            <img src="/src/assets/images/tip.png" style="width: 1.125rem; height: 1.125rem" />
          </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>
            <img src="/src/assets/images/tip.png" style="width: 1.125rem; height: 1.125rem" />
          </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>
</template>
<script lang="ts" setup>
  import { ref, onMounted, defineComponent } 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';
  defineProps<{
    role: string;
  }>();
  defineExpose({
    isAdmin,
    toThousands,
  });
  defineComponent({
    Card,
  });
  interface CardList {
    deviceInfo: {
      sumCount: number;
      onLine: number;
      offLine: number;
      inActive: number;
      todayAdd: number;
    };
    tenantInfo?: { sumCount: number; todayAdd: number };
    customerInfo?: { sumCount: number; todayAdd: number };
    alarmInfo?: {
      sumCount: number;
      todayAdd: number;
    };
    messageInfo?: {
      dataPointsCount: number;
      messageCount: number;
      todayDataPointsAdd: number;
      todayMessageAdd: number;
    };
  }
  const growCardList = ref<CardList>();
  onMounted(async () => {
    const res = await getHomeData();
    growCardList.value = res;
  });
</script>
