<template>
  <div class="relative mt-[6.25rem] flex items-center justify-center">
    <ProportionCharts :chart-data="chartData" class="w-[41.25rem] h-[41.25rem]" :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-[7rem] text-color" :data-text="onlineTotal">{{ onlineTotal }}</div>
        <div class="text-[5.75rem] text-color" data-text="人">人</div>
      </div>
      <div class="text-[#FFFFFF] text-[4.5rem] text-shadow-[0px_2px_2px_rgba(12,32,72,0.42)] mt-[2rem]">线上</div>
    </div>
  </div>
  <ul class="px-[3.75rem] grid grid-cols-2 gap-x-[2.5rem] gap-y-[2.25rem] mt-[5rem] leading-[1] pb-[11rem]">
    <li class="flex items-center flex-col" v-for="item in chartData" :key="item.name">
      <div class="flex items-center justify-between w-full">
        <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-[3.5rem] justify-between">
          <span class="ml-[1.5rem] mr-[2rem]">{{ item.name }}</span>
          <span>{{ item.value }}人</span>
        </div>
      </div>
      <div class="border-image w-full mt-[1.5rem]"></div>
    </li>
  </ul>
</template>

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

  const canvasWidth = ref(0);

  const handleResize = () => {
    canvasWidth.value = 41.25 * (document.documentElement.clientWidth / 93.75);
  };

  const colorList = ref(["#0783FA", "#07D1FA", "#20E6A4", "#FFD15C", "#9A68FF"]);

  const askSectionData = inject("askSectionData", ref<{ online: any[]; scource: any[] }>({ online: [], scource: [] }));

  const chartData = ref<any[]>([]);
  const onlineTotal = ref<any>(0);

  watch(
    () => askSectionData.value,
    () => {
      initData();
    },
  );

  const initData = () => {
    if (askSectionData.value.online && askSectionData.value.online.length > 0) {
      chartData.value = askSectionData.value.online.map((item, index) => ({
        name: item.tag,
        value: item.total,
        color: colorList.value[index % colorList.value.length],
      }));
      onlineTotal.value = askSectionData.value.scource.filter((item) => item.tag === "线上")[0].total;
    }
  };

  onMounted(() => {
    initData();
    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>
