<template>
    <div class="w-max h-max relative">
      <SvgComponent :content="groupSvg" class="w-[544px] h-[210px]" />
      <div class="w-full h-full absolute top-0 left-0 pt-[31px] pb-[21px] pl-[14px] pr-[19px] flex items-center">
        <div class="w-[216px]">
          <div class="relative w-[144px] h-[113px] flex items-center flex-col">
            <div class="text-[#44C1EF] italic text-[20px] font-700">今日缴费</div>
            <div class="bg-gradient-to-b from-[#8FC8FF] to-white bg-clip-text text-transparent mb-[15px] z-10">
              <span class="text-[34px] italic">125</span>
              <span class="text-[18px]">人</span>
            </div>
            <SvgComponent :content="hexagonalBoxSvg" class="box-light absolute" />
          </div>
          <div>
            <div class="flex items-center justify-between text-[12px]">
              <div class="text-[#6B89BC]">当前值1265人</div>
              <div class="text-[#69D4FF]">
                计划:
                <span class="text-[15px]">4000</span>
                <span class="text-[13px]">人</span>
              </div>
            </div>
          </div>

        </div>
        <div class="ml-[22px] relative">
          <SvgComponent :content="paymentBorderSvg" class="w-[127px] h-[130px] top-0 left-0 z-1" />
        </div>

      </div>
    </div>
  </template>
  
  <script lang="ts" setup>
    import SvgComponent from "@/components/SvgComponent.vue";


  
    const groupSvg = ref("");
    const getGroupBackgroundSvg = async () => {
      const { default: svg } = await import("/src/assets/svg-img/group-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;
    };
  
    onBeforeMount(() => {
      getGroupBackgroundSvg();
      getLightningBoxSvg();
      getPaymentChartSvg();
    });
  </script>
  
  <style scoped lang="scss">
    @use "@/styles/text-color.scss";
  
    .border-image {
      border: 1px solid;
      border-image: linear-gradient(
          90deg,
          #217ac600,
          #227cc8,
          #217ac600
        )
        1 1;
        opacity: 0.3;
    }
  
    .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>
  