<template>
  <div class="w-full h-[320px] relative bg-[#082059] custom-border">
    <div class="flex">
      <SvgComponent :content="headerLeftSvg" class="w-[188px] h-[36px]" />
      <div class="absolute top-[2px] left-[15px] flex items-center">
        <SvgComponent :content="arrowLeftSvg" class="w-[15px] h-[18px]" />
        <div class="text-[20px] ml-[9px] font-700 text-color" data-text="六纬志愿">六纬志愿</div>
      </div>
      <SvgComponent :content="headerRightSvg" class="w-[108px] h-[36px]" />
    </div>
    <div class="w-full h-[calc(100%-36px)] flex flex-col">
      <!-- <div class="flex items-center justify-end mr-[13px] transform-translate-y-[-50%] h-0">
        <div class="text-[15px] text-[#84E8FF]">更多</div>
        <SvgComponent :content="moreArrowSvg" class="w-[14px] h-[22px]" />
      </div> -->
      <div class="flex items-baseline leading-[1] mt-[29px] mx-[27px]">
        <div class="text-[#44C1EF] italic text-[20px] font-700">总获客</div>
        <div class="text-[40px] font-700 italic pr-[4px] text-color" :data-text="sixStatisticsData.total || 0">{{ sixStatisticsData.total || 0 }}</div>
        <div class="text-[18px] font-700 text-color" data-text="人">人</div>
        <SvgIcon name="arrow-up" class="text-[9px] text-[#4AFFA2] ml-[9px]" />
      </div>
      <SixStatisticsChart :chartData="sixStatisticsData.items || []" />
    </div>
  </div>
</template>

<script setup lang="ts">
  import SvgComponent from "@/components/SvgComponent.vue";
  import SvgIcon from "@/components/svg-icon/SvgIcon.vue";
  import SixStatisticsChart from "@/views/components/chartsComponents/SixStatisticsChart.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 moreArrowSvg = ref("");
  // const getMoreArrowSvg = async () => {
  //   const { default: svg } = await import("/src/assets/svg-img/more-arrow.svg?raw");
  //   moreArrowSvg.value = svg;
  // };

  const sixStatisticsData = inject("sixStatisticsData", ref<{ total: number; items: { data: string; total: number }[] }>({ total: 0, items: [] }));

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

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