<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="ml-[22px] relative mt-[13px] flex items-center justify-center">
        <ProportionCharts :chart-data="chartData" class="" />
        <div class="leading-[1] absolute top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] z-3 flex items-center flex-col font-700 italic">
          <div class="flex items-baseline">
            <div class="text-[25px] text-color" :data-text="offlineTotal">{{ offlineTotal }}</div>
            <div class="text-[20px] text-color" data-text="人">人</div>
          </div>
          <div class="text-[#FFFFFF] text-[16px] text-shadow-[0px_2px_2px_rgba(12,32,72,0.42)] mt-[7px]">线下</div>
        </div>
      </div>
      <ul class="px-[24px] grid grid-cols-2 gap-x-[20px] gap-y-[16px] mt-[20px] leading-[1]">
        <li class="flex items-center flex-col" v-for="item in chartData" :key="item.name">
          <div class="flex items-center justify-between w-full">
            <div class="w-[6px] h-[6px] rounded-full" :style="{ backgroundColor: item.color }"></div>
            <div class="flex-1 flex items-center text-[#C0EEFF] text-[12px] justify-between">
              <span class="ml-[4px] mr-[9px]">{{ item.name }}</span>
              <span>{{ item.value }}人</span>
            </div>
          </div>
          <div class="border-image w-full mt-[6px]"></div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script setup lang="ts">
  import SvgComponent from "@/components/SvgComponent.vue";
  import ProportionCharts from "@/views/components/chartsComponents/ProportionCharts.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 colorList = ref(["#0783FA", "#07D1FA", "#20E6A4", "#FFD15C"]);

  const askSectionData = inject("askSectionData", ref<{ offline: any[]; scource: any[] }>({ offline: [], scource: [] }));

  const chartData = ref<any[]>([]);

  watch(
    () => askSectionData.value,
    () => {
      initData();
    },
  );

  const offlineTotal = ref<any>(0);

  const initData = () => {
    if (askSectionData.value.offline && askSectionData.value.offline.length > 0) {
      chartData.value = askSectionData.value.offline.map((item, index) => ({
        name: item.tag,
        value: item.total,
        color: colorList.value[index % colorList.value.length],
      }));
      offlineTotal.value = askSectionData.value.scource.filter((item) => item.tag === "线下")[0].total;
    }
  };

  onBeforeMount(() => {
    getHeaderLeftSvg();
    getHeaderRightSvg();
    getArrowLeftSvg();
    initData();
  });
</script>

<style scoped lang="scss">
  @use "@/styles/custom-border.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>
