<template>
  <div class="custom-bg aspect-[1.8/1] overflow-hidden flex flex-col">
    <ul class="grid grid-cols-4 items-center mt-[5px]">
      <li
        @click="handleChoose(index)"
        :class="`parallelogram aspect-[8/3] text-[3.25rem] flex items-center justify-center text-[#fff] font-500 ${chosenItem === index ? 'choose' : ''}`"
        v-for="(item, index) in tabList"
        :key="index">
        <span v-if="chosenItem !== index">{{ item }}</span>
        <span v-else class="text-[3.75rem] text-color font-700" :data-text="item">{{ item }}</span>
      </li>
    </ul>
    <div class="flex-1">
      <PaymentChart class="mt-[4rem]" v-if="chosenItem === 0" />
      <OperatingTrendsChart :chartDataArray="acqTrend" v-if="chosenItem === 1" :need-date="false" :ledge-gap="ledgeGap" :grid="grid" :tooltipFixed="true"/>
      <AskSectionChart :chart-data="askSectionData.stages || []" v-if="chosenItem === 2" :shorthand="true"/>
      <StudentStatus v-if="chosenItem === 3"/>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { getRequest } from "@/api/customFetch";
  import PaymentChart from "./appEchart/PaymentChart.vue";
  import OperatingTrendsChart from "@/views/components/chartsComponents/OperatingTrendsChart.vue";
  import AskSectionChart from "@/views/components/chartsComponents/AskSectionChart.vue";
  import StudentStatus from "./appEchart/StudentStatus.vue";




  import { getAcqTrend } from "@/api/fetchUrl";
  import { addRequest, runImmediatelyByKey } from "@/composables/usePolling";



  const tabList = ["缴费占比", "经营趋势", "咨询学段", "学生来源"];

  const askSectionData = inject("askSectionData", ref({ stages: [],}));

  const chosenItem = ref(0);
  const handleChoose = (index: number) => {
    chosenItem.value = index;
  };

  const ledgeGap = ref(0);
  const grid = ref({
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
  });
  const handleResize = () => {
    let draftsSize = document.documentElement.clientWidth / 93.75;
    ledgeGap.value = draftsSize * 3.75;
    grid.value = { top: 50, left: 50, right: 10, bottom: 30 };
  };

  let DateType = 0;
  const acqTrend = ref<any>([]);
  const getAcqTrendData = (type: number) => {
    getRequest(getAcqTrend(), { Type: type }, {}).then((resp) => {
      if (resp.code === 200) {
        acqTrend.value = resp.result;
      }
    });
  };

  addRequest("getAcqTrendData", getAcqTrendData, [DateType]);
  runImmediatelyByKey("getAcqTrendData");




  onMounted(() => {
    window.addEventListener("resize", handleResize);
  });

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

<style lang="scss" scoped>
  @use "@/styles/text-color.scss";
  .custom-bg {
    background-image: url("/images/top-bg.png");
    background-position: center;
    background-size: cover;
  }

  .parallelogram {
    width: 100%;
    height: 7.5rem;
    position: relative;
    background-image: url("/images/tab-border.png");
    background-position: center center;
    background-size: 100%;
    background-repeat: no-repeat;
    &::after {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      scale: 0.8;
      transform: skewX(-45deg);
      //   background-color: red;
    }
  }

  .parallelogram.choose {
    width: calc(100% + 2.5rem);
    height: 9rem;
    background-image: url("/images/tab-border-choose.png");
  }
</style>
