<template>
  <div class="h-[358px] relative bg-[#082059] custom-border">
    <div class="flex">
      <SvgComponent :content="headerLeftSvg" class="w-[255px] h-[36px]" />
      <SvgComponent :content="headerRightSvg" class="w-[669px] h-[36px]" />
      <div class="absolute top-[2px] left-[15px] flex items-center">
        <SvgComponent :content="arrowLeftSvg" class="w-[15px] h-[18px]" />
        <div class="ml-[9px] font-700 flex items-baseline">
          <span class="text-[20px] text-color" data-text="咨询学段">咨询学段</span>
          <span class="text-[14px] text-color" data-text="(已标记)">(已标记)</span>
        </div>
      </div>
    </div>
    <div class="w-full h-[calc(100%-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">
  @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;
  }
</style>
