<script setup lang="ts">
import { computed, ref, watch } from 'vue';
import dayjs from 'dayjs';



const dailyEntryTime = ref(dayjs().format("YYYY-MM-DD"));
const dailyTime = ref(dayjs().subtract(1, "day").format("YYYY-MM-DD"));

const weeklyEntryTime = ref<string | null>(null);
const weeklySalesTime = ref<string | null>(null);
const weeklyAdTime = ref<string | null>(null);


const entryStartDate = ref<string>("");
const entryEndDate = ref<string>("");
const salesStartDate = ref<string>("");
const salesEndDate = ref<string>("");
const adStartDate = ref<string>("");
const adEndDate = ref<string>("");

const monthlyEntryTime = ref(null);
const startDate = ref(null);
const endDate = ref(null);

const shortcuts = [
  {
    text: "今天",
    value: new Date(),
  },
  {
    text: "昨天",
    value: () => {
      const date = new Date();
      date.setTime(date.getTime() - 3600 * 1000 * 24);
      return date;
    },
  },
  {
    text: "最近七天",
    value: () => {
      const date = new Date();
      date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
      return date;
    },
  },
];

function handleDayChange(event) {
  const $dailyEntryTime = dailyEntryTime.value;
  if ($dailyEntryTime) {
    const dailyTimeValue = new Date($dailyEntryTime);
    dailyTimeValue.setDate(dailyTimeValue.getDate());
    dailyTime.value = dailyTimeValue.toISOString().split("T")[0];
  } else {
    dailyTime.value = "";
  }
}

const handleWeekChange
    = () => {
  if (weeklyEntryTime.value) {
    entryStartDate.value = dayjs(weeklyEntryTime.value).startOf("isoWeek").format("YYYY-MM-DD");
    entryEndDate.value = dayjs(weeklyEntryTime.value).endOf("isoWeek").format("YYYY-MM-DD");

    weeklySalesTime.value = weeklyEntryTime.value;
    salesStartDate.value = entryStartDate.value;
    salesEndDate.value = entryEndDate.value;

    const adDate = dayjs(weeklyEntryTime.value).subtract(7, "day");
    weeklyAdTime.value = adDate.format("YYYY-WW");
    adStartDate.value = adDate.startOf("isoWeek").format("YYYY-MM-DD");
    adEndDate.value = adDate.endOf("isoWeek").format("YYYY-MM-DD");
  }
};

const entryFormat = computed(() => `${entryStartDate.value} to ${entryEndDate.value}`);
const salesFormat = computed(() => `${salesStartDate.value} to ${salesEndDate.value}`);
const adFormat = computed(() => `${adStartDate.value} to ${adEndDate.value}`);

watch(weeklyEntryTime, handleWeekChange
);

const handleMonthChange = (value) => {
  if (value) {
    const date = new Date(value);
    const year = date.getFullYear();
    const month = date.getMonth() + 1; // getMonth() 返回值为 0-11，需要加 1
    const lastDay = new Date(year, month, 0).getDate();
    startDate.value = `${year}-${String(month).padStart(2, "0")}-01`;
    endDate.value = `${year}-${String(month).padStart(2, "0")}-${lastDay}`;
  } else {
    startDate.value = null;
    endDate.value = null;
  }
};
const monthlyEntryFormat = computed(() => `${startDate.value} to ${endDate.value}`);

const disabledDate = (time: Date) => {
  return time.getTime() > Date.now();
};

</script>

<template>
  <div>
    <div class="demo-date-picker" v-if="dateType === 'day'">
      <div class="block">
        <span class="demonstration">日录入数据时间:</span>
        <el-date-picker
            v-model="dailyEntryTime"
            type="Date"
            :disabled-date="disabledDate"
            :shortcuts="shortcuts"
            @change="handleDayChange"
        />
      </div>
      <div class="block">
        <span class="demonstration">日数据时间:</span>
        <el-date-picker
            v-model="dailyTime"
            type="Date"
            :shortcuts="shortcuts"
            disabled
        />
      </div>
    </div>
    <div class="demo-date-picker" v-if="dateType === 'week'">
      <div class="block">
        <span class="demonstration">周录入数据时间:</span>
        <el-date-picker
            v-model="weeklyEntryTime"
            type="week"
            :format="entryFormat"
            placeholder="选择一周"
            :disabled-date="disabledDate"
            @change="handleWeekChange
"
        />
      </div>
      <div class="block">
        <span class="demonstration">周销售数据时间:</span>
        <el-date-picker
            v-model="weeklySalesTime"
            type="week"
            :format="salesFormat"
            placeholder="选择一周"
            disabled
        />
      </div>
      <div class="block">
        <span class="demonstration">周广告数据时间:</span>
        <el-date-picker
            v-model="weeklyAdTime"
            type="week"
            :format="adFormat"
            placeholder="选择一周"
            disabled
        />
      </div>
    </div>
    <div class="demo-date-picker" v-if="dateType === 'month'">
      <div class="block">
        <span class="demonstration">月录入数据时间:</span>
        <el-date-picker
            v-model="monthlyEntryTime"
            type="month"
            :format="monthlyEntryFormat"
            placeholder="选择月份"
            @change="handleMonthChange"
            :disabled-date="disabledDate"
        />
      </div>
    </div>
  </div>
</template>

<style scoped>

</style>