<template>
  <div class="md:flex mt-4">
    <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"
            :radisData="radisData"
          />
        </div>
        <div class="ml-20 flex justify-around right-text">
          <div class="text"> 直连设备：4个 </div>
          <div class="text"> 网关设备：1个 </div>
          <div class="text"> 网关子设备：6个 </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"
            :radisData="radisStatusData"
          />
        </div>
        <div class="ml-20 flex justify-around right-text">
          <div class="text"> 待激活设备：2个 </div>
          <div class="text"> 在线设备：1个 </div>
          <div class="text"> 离线设备：4个 </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 PieChartDeviceSub from './PieChartDeviceSub.vue';

  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;
    };
  }
  type seriesDataT = {
    value: number;
    name: string;
    itemStyle: object;
  };
  const radisData: any = ref('70%');
  const radisStatusData = ref<string[]>(['40%', '70%']);
  const growCardList = ref<CardList>();
  const legendData = ref(['gateway', 'directly', 'sub-device']);
  const seriesData: Ref<seriesDataT[]> = ref([
    { value: 1048, name: 'gateway', itemStyle: { color: '#3079FF' } },
    { value: 735, name: 'directly', itemStyle: { color: '#36cbcb' } },
    { value: 580, name: 'sub-device', itemStyle: { color: '#4ecb73' } },
  ]);
  const legendStatusData = ref(['inactive', 'online', 'offline']);
  const seriesStatusData: Ref<seriesDataT[]> = ref([
    { value: 1048, name: 'inactive', itemStyle: { color: '#3079FF' } },
    { value: 735, name: 'online', itemStyle: { color: '#36cbcb' } },
    { value: 580, name: 'offline', itemStyle: { color: '#4ecb73' } },
  ]);
  onMounted(async () => {
    const res = await getHomeData();
    growCardList.value = res;
  });
</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>