<template>
    <div class="w-max h-max relative">
      <SvgComponent :content="groupSvg" class="w-[312px] h-[210px]" />
      <div class="w-full h-full absolute top-0 left-0 pt-[31px] pb-[21px] flex pl-[14px] pr-[19px] flex items-center">
        <div class="relative w-[144px] h-[113px] flex items-center flex-col">
          <SvgComponent :content="hexagonalBoxSvg" class="box-light absolute" />
          <div class="text-[#44C1EF] italic text-[20px] font-700">今日缴费</div>
          <div class="mb-[15px] font-700 leading-[1] flex items-baseline">
            <span class="text-[34px] italic text-color" :data-text="paymentData.toDayTotal">{{paymentData.toDayTotal || 0}}</span>
            <span class="text-[18px] text-color" data-text="人">人</span>
          </div>
        </div>
        <div class="relative flex-auto ml-[12px]">
          <SvgComponent :content="paymentBorderSvg" class="w-[127px] h-[104px] z-1" />
          <div class="w-[127px] h-[104px] top-0 left-0 z-1 absolute pl-[14px] flex flex-col justify-center">
            <p class="text-[#C0EEFF] text-[12px]">昨日缴费人数</p>
            <p class="text-[#C0EEFF] text-[16px] font-500 mt-[18px] mb-[9px]">{{paymentData.yesterdayTotal || 0}}人</p>
            <div :class="`${paymentDifferent > 0 ?'text-[#4AFFA2]': 'text-[#FF4E4E]'} text-[12px] flex items-center`">
              <span class="">今日较昨日</span>
              <SvgIcon :name="paymentDifferent > 0 ? 'arrow-up' : 'arrow-down'" class="text-[9px]" />

              <span>{{Math.abs(paymentDifferent)}}人</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </template>
  
  <script lang="ts" setup>
    import SvgComponent from "@/components/SvgComponent.vue";
    import SvgIcon from "@/components/svg-icon/SvgIcon.vue";

    const paymentData = inject("paymentData",ref({toDayTotal:0,yesterdayTotal:0}))

  
    const groupSvg = ref("");
    const getGroupBackgroundSvg = async () => {
      const { default: svg } = await import("/src/assets/svg-img/short-background.svg?raw");
      groupSvg.value = svg;
    };
  

  
    const hexagonalBoxSvg = ref("");
    const getLightningBoxSvg = async () => {
      const { default: svg } = await import("/src/assets/svg-img/hexagonal-light.svg?raw");
      hexagonalBoxSvg.value = svg;
    };
  
    const paymentBorderSvg = ref("");
    const getPaymentChartSvg = async () => {
      const { default: svg } = await import("/src/assets/svg-img/payment-border.svg?raw");
      paymentBorderSvg.value = svg;
    };

    const paymentDifferent = computed(() => {
      if(Object.prototype.toString.call(paymentData.value.toDayTotal) !== "[object Undefined]" && Object.prototype.toString.call(paymentData.value.yesterdayTotal)!== "[object Undefined]"){
        return paymentData.value.toDayTotal - paymentData.value.yesterdayTotal
      }else{
        return 0
      }
    })
  
    onBeforeMount(() => {
      getGroupBackgroundSvg();
      getLightningBoxSvg();
      getPaymentChartSvg();
    });
  </script>
  
  <style scoped lang="scss">
    @use "@/styles/text-color.scss";
    @use "@/styles/custom-border.scss";
  
    .rotate-animation {
      animation: rotate-animation 1s infinite;
    }
  
    @keyframes rotate-animation {
      0% {
        transform: rotate(0deg);
      }
      100% {
        transform: rotate(-180deg);
      }
    }
  
    :deep(.box-light) {
      .lightning-flashing {
        animation: lightning-flashing 1s infinite;
      }
      @keyframes lightning-flashing {
        0% {
          fill-opacity: 0;
        }
        50% {
          fill-opacity: 1;
        }
        100% {
          fill-opacity: 0;
        }
      }
    }
  </style>
  