<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] pl-[14px] pr-[19px] flex items-center">
        <div class="w-[144px]">
          <div class="relative w-[144px] h-[113px] flex items-center flex-col">
            <div class="text-[#44C1EF] italic text-[20px] font-700">今日获客</div>
            <div class="leading-[1] flex items-baseline mb-[15px] z-10 font-700">
              <span class="text-[34px] italic text-color" :data-text="gainData.toDayAcq || 0">{{ gainData.toDayAcq || 0 }}</span>
              <span class="text-[18px] text-color" data-text="人">人</span>
            </div>
            <SvgComponent :content="hexagonalBoxSvg" class="box-light absolute" />
          </div>

        </div>
        <div class="relative 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]">{{ gainData.yestertDayAcq || 0 }}人</p>
            <div :class="`${gainDifferentTody > 0 ?'text-[#4AFFA2]':'text-[#FF4E4E]'} text-[12px] flex items-center`">
              <span class="">今日较昨日</span>
              <SvgIcon :name="gainDifferentTody > 0 ? 'arrow-up' : 'arrow-down'" class="text-[9px]" />
              <span>{{ Math.abs(gainDifferentTody) }}人</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 gainData = inject("gainData",ref({toDayAcq:0,yestertDayAcq:0}))
  
    const groupSvg = ref("");
    const getGroupBackgroundSvg = async () => {
      const { default: svg } = await import("/src/assets/svg-img/short-background.svg?raw");
      groupSvg.value = svg;
    };
  
    const gainDifferentTody = computed(() => {
      if((Object.prototype.toString.call(gainData.value.toDayAcq) !== "[object Undefined]") && (Object.prototype.toString.call(gainData.value.yestertDayAcq) !== "[object Undefined]")){
        return gainData.value.toDayAcq - gainData.value.yestertDayAcq
      }else{
        return 0;
      }
    })

  
    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>
  