<template>
  <div class="flex items-stretch pl-[6rem]">
    <div class="relative flex items-center justify-center">
      <ProportionCharts :chart-data="chartData" class="w-[31rem] h-[31rem]" :width="canvasWidth" :height="canvasWidth" />
      <div class="leading-[1] absolute top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] z-3 flex items-center flex-col font-700 italic">
        <div class="flex items-baseline">
          <div class="text-[4.5rem] text-color" :data-text="paymentData.chargeTotal">{{ paymentData.chargeTotal }}</div>
          <div class="text-[2.75rem] text-color" data-text="人">人</div>
        </div>
      </div>
    </div>

    <ul class="flex flex-col justify-evenly flex-1 h-[31rem] px-[6.5rem]">
      <li class="flex items-center flex-wrap" v-for="item in chartData" :key="item.name">
        <div class="w-[1.5rem] h-[1.5rem] rounded-full" :style="{ backgroundColor: item.color }"></div>
        <div class="flex-1 flex items-center text-[#C0EEFF] text-[3rem] justify-between">
          <span class="ml-[1rem] mr-[2.25rem]">{{ item.name }}</span>
          <span class="w-max break-keep">{{ item.value }}人</span>
        </div>
        <div class="border-image w-full mt-[1.5rem]"></div>
      </li>
    </ul>
  </div>
</template>

<script lang="ts" setup>
  import ProportionCharts from "@/views/components/chartsComponents/ProportionCharts.vue";
  const chartData = ref<any[]>([]);
  const paymentData = inject("paymentData", ref({ chargeTotal: 0, estimatedTotal: 0, items: [] }));
  const colors = ["#0783FA", "#07D1FA", "#20E6A4", "#FFD15C", "#9A68FF"];

  watchEffect(() => {
    if (paymentData.value.items) {
      chartData.value = paymentData.value.items.map((item: any, index) => {

        return { ...item, color: colors[index % colors.length] };
      });
    }
  });

  const canvasWidth = ref(0);

  const handleResize = () => {
    canvasWidth.value = 31 * (document.documentElement.clientWidth / 93.75);
  };
  onMounted(() => {
    handleResize();
    window.addEventListener("resize", handleResize);
  });

  onBeforeUnmount(() => {
    window.removeEventListener("resize", handleResize);
  });
</script>

<style lang="scss" scoped>
  @use "@/styles/text-color.scss";

  .border-image {
    border: 1px solid;
    border-image: linear-gradient(90deg, #217ac600, #227cc8, #217ac600) 1 1;
    opacity: 0.3;
  }
</style>
