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

const currentYear = new Date().getFullYear();
const currentMonth = new Date().getMonth();
const monthlyDataTime = ref([
  new Date(currentYear, 0, 1),
  new Date(new Date().getFullYear(), currentMonth, 0),
]);

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

const initializeDates = () => {
  const startOfMonth = new Date(new Date().getFullYear(), 0, 1);
  const endOfMonth = new Date(new Date().getFullYear(), new Date().getMonth() + 1, 0); // 设置下个月的第一天减去1天，得到当前月的最后一天
  monthlyDataTime.value = [startOfMonth, endOfMonth];
  const formattedStartDate = dayjs(startOfMonth).format('YYYY-MM-DD');
  const formattedEndDate = dayjs(endOfMonth).format('YYYY-MM-DD');
  startDate.value = formattedStartDate;
  endDate.value = formattedEndDate;
  monthDateChange()
};

onMounted(() => {
  initializeDates();
});

const monthShortCuts = [
  {
    text: '本月',
    value: [new Date(), new Date()],
  },
  {
    text: '今年',
    value: () => {
      const end = new Date();
      const start = new Date(new Date().getFullYear(), 0);
      return [start, end];
    },
  },
  {
    text: '上六个月',
    value: () => {
      const end = new Date();
      const start = new Date();
      start.setMonth(start.getMonth() - 6);
      return [start, end];
    },
  },
];

const emit = defineEmits(['monthDateChange']);
const monthDateChange = async () => {
  emit('monthDateChange', {
    startDate: startDate.value,
    endDate: endDate.value,
  });
};

const handleMonthChange = (value) => {
  if (value) {
    if (monthlyDataTime.value[0]) {
      const start = new Date(monthlyDataTime.value[0]);
      const year = start.getFullYear();
      const month = start.getMonth();
      startDate.value = `${year}-${String(month + 1).padStart(2, '0')}-01`;
      if (monthlyDataTime.value[1]) {
        const end = new Date(monthlyDataTime.value[1]);
        const year = end.getFullYear();
        const month = end.getMonth() + 1;
        const lastDay = new Date(year, month, 0).getDate();
        endDate.value = `${year}-${String(month).padStart(2, '0')}-${lastDay}`;
      }
      monthDateChange();
    }
  }
};

const disabledDate = (time) => {
  return time.getTime() > Date.now();
};
</script>

<template>
  <div class="block">
    <span class="demonstration">月数据时间:</span>
    <el-date-picker
        v-model="monthlyDataTime"
        :clearable="false"
        type="monthrange"
        unlink-panels
        range-separator="To"
        start-placeholder="开始月"
        end-placeholder="结束月"
        :disabled-date="disabledDate"
        @change="handleMonthChange"
        :shortcuts="monthShortCuts"
        :popper-options="{
              modifiers: [
                  {
                      name: 'flip',
                      options: {
                          fallbackPlacements: ['bottom'],
                          allowedAutoPlacements: ['bottom'],
                      }
                  }
              ]
  }"
    />
  </div>
</template>

<style scoped>
.block {
  margin: 10px 0;
}
.demonstration {
  color: var(--el-text-color-secondary);
  font-size: 14px;
  margin: 8px;
  white-space: nowrap;
}
</style>