<script setup lang="ts">
import { shallowRef, ref, watch } from "vue";
import { createCompanyGrossMaginConfig } from "./config/companyGrossMargin.config";
import { createCompanyMonthGrossMarginConfig } from "./config/companyMonthGrossMargin.config";

import grossMarginConfig from "./config/grossMargin.config";
import motnhGrossMarginConfig from "./config/monthGrossMargin.config";

const PageName = "grossMargin";

const companies = [
  {
    companyNo: "GS2302231125079621",
    companyName: "北京百辰荣达国际科贸有限公司"
  },
  {
    companyNo: "GS2302231323386950",
    companyName: "北京泓源广诚国际商贸有限公司"
  },
  {
    companyNo: "GS2304031312553746",
    companyName: "北京锦兴弘昌科技有限公司"
  },
  {
    companyNo: "GS2302231124114965",
    companyName: "北京普润心堂商贸有限公司"
  },
  {
    companyNo: "GS2203161855277894",
    companyName: "北京万宇恒通国际科贸有限公司"
  }
];

const daytime = shallowRef("");

const singleDashBoardRef = ref<any>(null);
const dashboardRef = ref<any[]>([]);

const transformTime = function () {
  let time = new Date();
  let y = time.getFullYear();
  let M = time.getMonth() + 1;
  let d = time.getDate();
  return y + "-" + (M < 10 ? "0" + M : M) + "-" + (d < 10 ? "0" + d : d);
};

daytime.value = transformTime();

watch(
  () => daytime.value,
  daytime => {
    [singleDashBoardRef.value, ...dashboardRef.value].forEach(dashboard => {
      if (!dashboard) return;
      const contentRef = dashboard.getContent();
      if (!contentRef) return;
      contentRef.value.getPageData({ daytime });
    });
  }
);
</script>

<template>
  <PageAuth :pageName="PageName">
    <div class="bg-white">
      <div w-full flex justify-end p-2>
        <ElDatePicker
          v-model="daytime"
          value-format="YYYY-MM-DD"
          format="YYYY-MM-DD"
          type="date"
          placeholder="选择日期"
          :disabledDate="time => time.getTime() > Date.now()"
        />
      </div>
      <h2 class="font-bold ml-[15px] pt-[10px]" style="font-size: 16px">
        平台维度
      </h2>
      <PageContainer
        ref="singleDashBoardRef"
        :contentConfig="grossMarginConfig"
      />
      <PageContainer :contentConfig="motnhGrossMarginConfig" />

      <h2 class="font-bold ml-[15px] pt-[10px]" style="font-size: 16px">
        公司维度
      </h2>

      <div v-for="(company, index) in companies" :key="company.companyNo">
        <h2 class="font-bold ml-[15px] pt-[10px]" style="font-size: 14px">
          {{ index + 1 }}. {{ company.companyName }}
        </h2>
        <PageContainer
          ref="dashboardRef"
          :contentConfig="createCompanyGrossMaginConfig(company.companyNo)"
        />
        <PageContainer
          :contentConfig="
            createCompanyMonthGrossMarginConfig(company.companyNo)
          "
        />
      </div>
    </div>
  </PageAuth>
</template>
