<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 flex  leading-[30px] items-baseline">
        <SvgComponent :content="arrowLeftSvg" class="w-[15px] h-[18px]" />
        <div class="text-[20px] ml-[9px] font-700 text-color" data-text="经营趋势">经营趋势</div>
      </div>
    </div>
    <div class="w-full h-[calc(100%-36px)]">
      <OperatingTrendsChart :chartDataArray="acqTrend" @date-change="handleDateChange" />
    </div>
  </div>
</template>

<script setup lang="ts">
  import { getRequest } from "@/api/customFetch";
  import { getAcqTrend } from "@/api/fetchUrl";
  import SvgComponent from "@/components/SvgComponent.vue";
  import OperatingTrendsChart from "@/views/components/chartsComponents/OperatingTrendsChart.vue";
  import { addRequest,removeRequest,runImmediatelyByKey } from "@/composables/usePolling";

  let DateType = 0;
  const acqTrend = ref<any>([]);
  const getAcqTrendData = (type: number) => {
    getRequest(getAcqTrend(), { Type: type }, {}).then((resp) => {
      if (resp.code === 200) {
        acqTrend.value = resp.result;        
      }
    });
  };

  addRequest("getAcqTrendData", getAcqTrendData, [DateType]);
  runImmediatelyByKey("getAcqTrendData");

  const handleDateChange = (type: string) => {
    DateType = type === "week" ? 0 : 1;
    removeRequest("getAcqTrendData"),
    addRequest("getAcqTrendData", getAcqTrendData, [DateType]);
    runImmediatelyByKey("getAcqTrendData");
  };

  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;
  };

  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>
