<template>
  <div class="main-bg aspect-[16/9]">
    <header class="relative flex items-center">
      <SvgComponent :content="headerSvg" class="w-full h-[98px]" />
      <SvgComponent :content="titleSvg" class="w-[50%] h-[69px] absolute top-0 left-50% translate-x-[-50%]" />
      <div class="absolute top-[25%] right-[24px] translate-y-[-25%] z-1 flex items-center justify-center w-max">
        <div class="text-[#45A2FF] text-[14px]">{{ year }}-{{ month }}-{{ day }}&nbsp;{{ weekday }}</div>
        <DigitalWatch class="ml-[10px]" />
      </div>
    </header>
    <div class="flex items-center justify-end pr-[24px] cursor-pointer">
      <SvgIcon name="circle" class="text-[14px] text-[#C0EEFF] hover:rotate-90 transition-all duration-300" />
      <div class="text-[#C0EEFF] text-[12px] ml-[5px]">数据更新时间:6.12 12:00:00</div>
    </div>

    <div class="flex items-center px-[24px]">
      <PaymentTotal />
      <TodayPayment class="ml-[20px]" />
    </div>
    <!-- <TDCharts :optionData="chartData" /> -->
  </div>
</template>

<script lang="ts" setup>
  import SvgComponent from "@/components/SvgComponent.vue";
  import SvgIcon from "@/components/svg-icon/SvgIcon.vue";

  import TDCharts from "@/components/ease-charts/TDCharts.vue";
  import DigitalWatch from "@/components/watch/DigitalWatch.vue";
  import PaymentTotal from "@/views/components/PaymentTotal.vue";
  import TodayPayment from "@/views/components/TodayPayment.vue";


  import { useDate } from "@/composables/useDate";


  const { year, month, day, weekday, updateTime } = useDate();

  const headerSvg = ref("");
  const headerBackgroundSvg = async () => {
    const { default: svg } = await import("/src/assets/svg-img/header-background.svg?raw");
    headerSvg.value = svg;
  };

  const titleSvg = ref("");
  const headerTitleSvg = async () => {
    const { default: svg } = await import("/src/assets/svg-img/header-title.svg?raw");
    titleSvg.value = svg;
  };


  onBeforeMount(() => {
    updateTime();
    headerBackgroundSvg();
    headerTitleSvg();

  });

  // 示例数据
  const chartData = ref([
    { name: "线上", value: 335, itemStyle: { color: "#d62728" } },
    { name: "线下", value: 310, itemStyle: { color: "#ffcc5c" } },
  ]);
</script>

<style scoped lang="scss">
  .main-bg {
    background-image: url("/images/main-bg.png");
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
  }

</style>
