<template>
  <div class="aspect-[4/1] custom-bg p-[3.5rem] flex">
    <div class="flex flex-col justify-between">
        <div class="text-[#44C1EF] text-[3.75rem] italic font-700 w-max">六纬志愿获客</div>
        <div class="mt-[2.25rem] flex items-center">
            <span class="mr-[1rem] text-[6.5rem] text-color font-500 italic" :data-text="sixStatisticsData.total">{{ sixStatisticsData.total }}</span>
            <span class="text-[3.5rem] font-500 text-color" data-text="人">人</span>
            <SvgIcon name="arrow-up" class="text-[9px] text-[#4AFFA2] ml-[1rem]" />
        </div>
    </div>
    <SixStatisticsChart :chartData="sixStatisticsData.items || []" class="flex-1 h-full ml-[6rem]"/>
  </div>
</template>

<script setup lang="ts">
  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 sixStatisticsData = inject("sixStatisticsData", ref<{ total: number; items: { data: string; total: number }[] }>({ total: 0, items: [] }));

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

  });
</script>

<style scoped lang="scss">
  @use "@/styles/text-color.scss";

  .custom-bg {
    background-image: url("/images/top-bg.png");
    background-position: center;
    background-size: cover;
  }
</style>
