<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="w-[154px] h-[124px] flex items-center flex-col">
          <div class="text-[#44C1EF] italic text-[20px] font-700">总缴费</div>
          <div class="mb-[15px] z-10 font-700 leading-[1] flex items-baseline">
            <span class="text-[40px] italic text-color" :data-text="`${paymentData.chargeTotal || 0}`">{{ paymentData.chargeTotal || 0 }}</span>
            <span class="text-[20px] text-color" data-text="人">人</span>
          </div>
          <SvgComponent :content="lightningBoxSvg" class="box-light translate-y-[-70%]" />
        </div>
        <div>
          <div class="flex items-center justify-between text-[12px]">
            <div class="text-[#6B89BC]">当前值{{ paymentData.chargeTotal }}人</div>
            <div class="text-[#6B89BC]">退款{{ paymentData.refundTotal || 0 }}人</div>
            <div class="text-[#69D4FF]">计划:{{ paymentData.estimatedTotal }}人</div>
          </div>
        </div>
        <YProgress :percentage="Math.round((paymentData.chargeTotal / paymentData.estimatedTotal) * 100)" height="12px" class="mt-[7px]" />
      </div>
      <div class="ml-[4px] relative w-[143px] h-[143px] flex flex-col">
        <ProportionCharts :chart-data="chartData" class="" />
        <div class="w-max h-max text-[18px] text-[#fff] font-700 italic translate-x-[150%] translate-y-[-185%] flex flex-col">
          <span>缴费</span>
          <span>占比</span>
        </div>
      </div>
      <ul class="ml-[10px] flex flex-col justify-evenly h-full flex-1">
        <li class="flex items-center flex-wrap" v-for="item in chartData" :key="item.name">
          <div class="w-[6px] h-[6px] rounded-full" :style="{ backgroundColor: item.color }"></div>
          <div class="flex-1 flex items-center text-[#C0EEFF] text-[12px] justify-between">
            <span class="ml-[4px] mr-[9px]">{{ item.name }}</span>
            <span class="w-max break-keep">{{ item.value }}人</span>
          </div>
          <div class="border-image w-full mt-[6px]"></div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import SvgComponent from "@/components/SvgComponent.vue";
  import YProgress from "@/components/progress/YProgress.vue";
  import ProportionCharts from "@/views/components/chartsComponents/ProportionCharts.vue";

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

  const paymentData = inject("paymentData", ref({ chargeTotal: 0, estimatedTotal: 0, items: [], refundTotal: 0 }));
  const colors = ["#0783FA", "#07D1FA", "#20E6A4", "#FFD15C", "#9A68FF"];
  const chartData = ref<any>([]);

  watchEffect(() => {
    if (paymentData.value.items) {
      chartData.value = paymentData.value.items.map((item: any, index) => {
        return { ...item, color: colors[index % colors.length] };
      });
    }
  });

  const lightningBoxSvg = ref("");
  const getLightningBoxSvg = async () => {
    const { default: svg } = await import("/src/assets/svg-img/box-light.svg?raw");
    lightningBoxSvg.value = svg;
  };

  onBeforeMount(() => {
    getGroupBackgroundSvg();
    getLightningBoxSvg();
  });
</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>
