<template>
  <div class="w-full h-[320px] relative bg-[#082059]">
    <div class="flex h-full custom-border absolute top-0 left-0">
      <SvgComponent :content="headerLeftSvg" class="w-[188px] h-[36px]" />
      <SvgComponent :content="headerRightSvg" class="flex-auto h-[36px]" />
      <div class="absolute top-[2px] left-[15px] flex items-center">
        <SvgComponent :content="arrowLeftSvg" class="w-[15px] h-[18px]" />
        <div class="text-color text-[20px] ml-[9px] font-700" data-text="学生来源">学生来源</div>
      </div>
    </div>
    <div class="w-full h-[calc(100%-36px)] mt-[36px] flex flex-col">
      <StudentSourceChart class="w-full h-full" :chartData="chartData" :ringSize="0.8" />
      <div class="flex items-center justify-between mx-[20px] my-[33px]">
        <div class="flex items-center flex-col">
          <div class="flex flex-col ml-[9px] items-center justify-center">
            <div class="font-700 flex items-baseline mb-[2px]">
              <span class="text-[18px] text-color" :data-text="onlineTotal">{{ onlineTotal }}</span>
              <span class="text-[14px] text-color" data-text="人">人</span>
            </div>
            <span class="text-[#C7F0FF] text-[12px]">线上来源</span>
          </div>
          <div class="border-image w-full mt-[6px]"></div>
        </div>
        <div class="flex items-center flex-col">
          <div class="flex flex-col ml-[9px] items-center justify-center">
            <div class="font-700 flex items-baseline mb-[2px]">
              <span class="text-[18px] text-color" :data-text="offlineTotal">{{ offlineTotal }}</span>
              <span class="text-[14px] text-color" data-text="人">人</span>
            </div>
            <span class="text-[#C7F0FF] text-[12px]">线下来源</span>
          </div>
          <div class="border-image w-full mt-[6px]"></div>
        </div>
        <div class="flex items-center flex-col">
          <div class="flex flex-col ml-[9px] items-center justify-center">
            <div class="font-700 flex items-baseline mb-[2px]">
              <span class="text-[18px] text-color" :data-text="unMarkTotal">{{ unMarkTotal }}</span>
              <span class="text-[14px] text-color" data-text="人">人</span>
            </div>
            <span class="text-[#C7F0FF] text-[12px]">未标记</span>
          </div>
          <div class="border-image w-full mt-[6px]"></div>
        </div>
      </div>
    </div>
  </div>
</template>

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

  const headerLeftSvg = ref("");
  const headerRightSvg = ref("");

  const getHeaderLeftSvg = async () => {
    const { default: svg } = await import("/src/assets/svg-img/header-bg-left-sort.svg?raw");
    headerLeftSvg.value = svg;
  };

  const getHeaderRightSvg = async () => {
    const { default: svg } = await import("/src/assets/svg-img/header-bg-right-sort.svg?raw");
    headerRightSvg.value = svg;
  };

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

  const onlineSvg = ref("");
  const offlineSvg = ref("");
  const getOfflineSvg = async () => {
    const { default: svg } = await import("/src/assets/svg-img/offline.svg?raw");
    offlineSvg.value = svg;
  };
  const getOnlineSvg = async () => {
    const { default: svg } = await import("/src/assets/svg-img/online.svg?raw");
    onlineSvg.value = svg;
  };

  const askSectionData = inject("askSectionData", ref<{ online: any[]; offline: any[] }>({ 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[]>([]);
  watch(
    () => askSectionData.value,
    () => {
      initData();
    },
  );

  const initData = () => {
    if (askSectionData.value.online && askSectionData.value.online.length > 0) {
      onlineTotal.value = askSectionData.value.online.reduce((acc, curr) => acc + curr.total, 0);
    }
    if (askSectionData.value.offline && askSectionData.value.offline.length > 0) {
      offlineTotal.value = askSectionData.value.offline.reduce((acc, curr) => 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" } },
    ];
  };

  onBeforeMount(() => {
    getHeaderLeftSvg();
    getHeaderRightSvg();
    getArrowLeftSvg();

    getOfflineSvg();
    getOnlineSvg();
    initData();
  });
</script>

<style scoped lang="scss">
  @use "@/styles/text-color.scss";
  .custom-border {
    border-image-slice: 27 27 27 27;
    border-image-width: 1px 1px 2px 1px;
    border-image-outset: 0px 0px 0px 0px;
    border-image-repeat: stretch stretch;
    border-image-source: url("src/assets/svg-img/border-image.png");
    border-style: solid;
  }

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