<template>
  <div class="w-full h-full flex">
    <StudentSourceChart class="w-full h-full" :chartData="chartData" :ringSize="0.8" />
    <ul class="ml-[4rem] pt-[4rem] pr-[3rem]">
      <li class="flex flex-col w-[32.5rem]">
        <div class="flex items-center justify-between">
          <div class="text-[3rem] text-[#C7F0FF]">未标记来源</div>
          <span class="text-[3.5rem] font-500 text-color" :data-text="`${unMarkTotal}人`">{{ unMarkTotal }}人</span>
        </div>
        <div class="border-image w-full mt-[3rem]"></div>
      </li>
      <li class="flex flex-col w-[32.5rem] mt-[3rem]">
        <div class="flex items-center justify-between">
          <div class="text-[3rem] text-[#C7F0FF]">线上来源</div>
          <div class="flex items-center" @click="handleOpenDrawer('线上详情')">
            <span class="text-[3.5rem] font-500 text-color" :data-text="`${onlineTotal}人`">{{ onlineTotal }}人</span>
            <SvgComponent :content="moreArrowSvg" class="w-[14px] h-[22px]" />
          </div>
        </div>
        <div class="border-image w-full mt-[3rem]"></div>
      </li>
      <li class="flex flex-col w-[32.5rem] mt-[3rem]">
        <div class="flex items-center justify-between">
          <div class="text-[3rem] text-[#C7F0FF]">线下来源</div>
          <div class="flex items-center" @click="handleOpenDrawer('线下详情')">
            <span class="text-[3.5rem] font-500 text-color" :data-text="`${offlineTotal}人`">{{ offlineTotal }}人</span>
            <SvgComponent :content="moreArrowSvg" class="w-[14px] h-[22px]" />
          </div>
        </div>
      </li>
    </ul>
  </div>
  <MobileDrawer v-model="isDrawerVisible" :transition-duration="300" panelStyle="border-radius:8rem 8rem 0 0;background-color:#072362;">
    <!-- 自定义头部 -->
    <template #header>
      <div class="drawer-header aspect-[10.7/1] w-full bg-[#072362] flex items-center justify-center relative rounded-[8rem_8rem_0_0]">
        <div class="text-color text-[4.5rem] font-700 italic" style="--mask-gradient: linear-gradient(to top, transparent, #000)" :data-text="drawerTitle">
          {{ drawerTitle }}
        </div>
        <img src="/images/close.png" class="w-[3rem] h-[3rem] absolute right-[5rem] top-[3.75rem]" alt="" @click="isDrawerVisible = false" />
      </div>
    </template>

    <!-- 自定义内容 -->
    <OnlineStatic v-if="drawerTitle === '线上详情'" />
    <OfflineStatic v-else />
  </MobileDrawer>
</template>

<script lang="ts" setup>
  import StudentSourceChart from "@/views/components/chartsComponents/StudentSourceChart.vue";
 
  import SvgComponent from "@/components/SvgComponent.vue";
  import MobileDrawer from "../MobileDrawer.vue";
  import OnlineStatic from "../OnlineStatic.vue";
  import OfflineStatic from "../OfflineStatic.vue";

  const askSectionData = inject("askSectionData", ref({ online: [], offline: [] }));
  const gainData = inject("gainData", ref({ acqTotal: 0 }));
  const onlineTotal = ref(0);
  const offlineTotal = ref(0);
  const unMarkTotal = ref(0);
  const chartData = ref<any[]>([]);
  const isDrawerVisible = ref(false);

  const drawerTitle = ref("线上详情");

  const handleOpenDrawer = (title:string) => {
    isDrawerVisible.value = true;
    drawerTitle.value = title
  }
  const initData = () => {
    if (askSectionData.value.online && askSectionData.value.online.length > 0) {
      onlineTotal.value = askSectionData.value.online.reduce((acc, curr: any) => acc + curr.total, 0);
    }
    if (askSectionData.value.offline && askSectionData.value.offline.length > 0) {
      offlineTotal.value = askSectionData.value.offline.reduce((acc, curr: any) => acc + curr.total, 0);
    }
    if (gainData.value.acqTotal && askSectionData.value.offline && askSectionData.value.online) {
      unMarkTotal.value = gainData.value.acqTotal - offlineTotal.value - onlineTotal.value;
    }
    chartData.value = [
      { name: "线下", value: offlineTotal.value, itemStyle: { color: "rgba(147, 219, 255, 1)" } },
      { name: "线上", value: onlineTotal.value, itemStyle: { color: "rgb(79, 214, 169)" } },
      { name: "未标记", value: unMarkTotal.value, itemStyle: { color: "#FF4E4E" } },
    ];
  };

  const moreArrowSvg = ref("");
  const getMoreArrowSvg = async () => {
    const { default: svg } = await import("/src/assets/svg-img/more-arrow.svg?raw");
    moreArrowSvg.value = svg;
  };

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


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

  :deep(.particle-base) {
    width: 50rem;
    height: 21rem;
  }

  .drawer-header {
    background-image: url("/images/drawer-header.png");
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
  }
</style>
