<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.acqTotal || 0">{{gainData.acqTotal || 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-[37px] flex flex-col items-center">
        <span class="text-[#C0EEFF] text-[12px]">目标值{{ convertNumber(gainData.goalTotal || 0)}}</span>
        <SvgComponent :content="powerSvg" class="w-[55px] h-[121px] z-1 my-[4px]" />
        <span class="text-[#769CBF] text-[12px]">当前值{{convertNumber(gainData.acqTotal ||0) }}</span>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import SvgComponent from "@/components/SvgComponent.vue";
  import {convertNumber} from "@/utils/convertNumber"

  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 powerFlag = ref(false)
  const powerSvg = ref("");
  const getPaymentChartSvg = async () => {
    const { default: svg } = await import("/src/assets/svg-img/process.svg?raw");
    powerSvg.value = svg;
    powerFlag.value = true;
  };

  const setChargePercentageByPath = (percent: number) => {
    // 图形宽55 高121 以此建立用户坐标系
    if(percent > 100) {
      percent = 100;
    }

    // 这个图形的原本数据为 y="85" height="30"
    const pw1 = document.querySelector("g rect#pw1");
    const pw2 = document.querySelector("g rect#pw2");
    const ellipse1 = document.querySelector("g ellipse#ellipse1");
    if(pw1 && pw2 && ellipse1) {
      let rectY = percent / 100 * (85 + 30)
      
      pw1.setAttribute("y", `${85 + 30 - rectY} `)
      pw1.setAttribute("height", `${rectY}`)
      pw2.setAttribute("y", `${85 + 30 - rectY}`)
      pw2.setAttribute("height", `${rectY}`)
      ellipse1.setAttribute("cy", `${85 + 30 - rectY}`)

    }
  };

  const gainData = inject("gainData",ref({acqTotal:0,goalTotal:0}))
  
  watch([() => powerFlag.value,()=>gainData.value], () => {
    nextTick(() => {
      if(gainData.value.goalTotal){        
        setChargePercentageByPath(gainData.value.acqTotal/gainData.value.goalTotal*100);
      }
    });
  });

  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>
