<template>
    <div class="h-[358px] relative bg-[#082059]">
      <div class="flex h-full custom-border absolute top-0 left-0">
          <div class="relative h-[36px]">
              <div class="absolute top-[50%] translate-y-[-50%] left-[15px] flex items-center">
                  <SvgComponent :content="arrowLeftSvg" class="w-[15px] h-[18px]" />
                  <div class="bg-gradient-to-b from-[#8FC8FF] to-white bg-clip-text text-transparent text-[20px] ml-[9px] font-700">咨询学段</div>
              </div>
              <SvgComponent :content="headerLeftSvg" class="w-[255px] h-[36px]" />
          </div>
        <SvgComponent :content="headerRightSvg" class="w-[669px] h-[36px]" />
      </div>
      <div class="w-full h-[calc(100%-36px)] mt-[36px]">
          <AskSectionChart :chart-data="askSectionData.stages || []" />
      </div>
    </div>
  </template>
  
  <script setup lang="ts">
    import SvgComponent from "@/components/SvgComponent.vue";
    import AskSectionChart from "@/views/components/chartsComponents/AskSectionChart.vue";
  
    const headerLeftSvg = ref("");
    const headerRightSvg = ref("");
  
    const getHeaderLeftSvg = async () => {
      const { default: svg } = await import("/src/assets/svg-img/header-bg-left.svg?raw");
      headerLeftSvg.value = svg;
    };
  
    const getHeaderRightSvg = async () => {
      const { default: svg } = await import("/src/assets/svg-img/header-bg-right.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 askSectionData = inject("askSectionData",ref({stages:[]}))

    
    onBeforeMount(() => {
      getHeaderLeftSvg();
      getHeaderRightSvg();
      getArrowLeftSvg();
    });
  </script>
  
  <style scoped lang="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;
    }
  </style>
  