<template>
    <div class="dateSelectListBox flex-col">
      <div class="Tabs1 flex-col">
        <div class="timeTabBox">
          <div class="timeTab" :class="{ active: timeType === '0' }" @click="timeChange('0')">
            {{ "日K" }}</div>
          <div class="timeTab" :class="{ active: timeType === '1' }" @click="timeChange('1')">
            {{ "周K" }}</div>
          <div class="timeTab" :class="{ active: timeType === '2' }" @click="timeChange('2')">
            {{ "月K" }}</div>
          <div class="timeTab" :class="{ active: timeType === '3' }" @click="timeChange('3')">
            {{ "更多" }}
            <div class="block3 flex-col"></div>
          </div>
          <!-- 日期选择 -->
          <van-calendar color="#FF3456" v-model:show="calendarShow" type="range" :show-confirm="false"
            :allow-same-day="true" :min-date="minDate" @confirm="calendarConfirm" />
        </div>
      </div>
    </div>
  </template>
  
  <script>
  import { ref } from "vue";
  import dateUtil from "@/utils/dateUtil";
  
  export default {
    name: "dateSelectList",
    components: {},
    setup(props, { emit }) {
      const minDate = new Date(2018, 1, 1);
      // 时间类型
      const timeType = ref("0");
      // 时间类型切换
      const timeChange = (data) => {
        timeType.value = data;
        // 当时时间类型切换为其他时间弹出日期控件
        (data === "3") ? calendarShow.value = true : outputDate();
      };
      let calendarDate = [];
      const calendarShow = ref(false);
      // 其他时间日期组件确认返回
      const calendarConfirm = (data) => {
        calendarShow.value = false;
        calendarDate = data;
        outputDate();
      };
      const outputDate = async () => {
        const params = {};
        // 今日
        if (timeType.value === "0") {
          params.chartType = "day";
          params.startDate = dateUtil.formateDate(
            new Date(new Date(new Date().getTime()).setHours(0, 0, 0, 0)),
            "yyyy-MM-dd hh:mm:ss"
          );
          params.endDate = dateUtil.formateDate(
            new Date(new Date(new Date().getTime()).setHours(23, 59, 59, 59)),
            "yyyy-MM-dd hh:mm:ss"
          );
        }
    
        // 本周
        if (timeType.value === "1") {
          const curr = new Date();
          const dayOfWeek = curr.getDay();
          // 如果是周日，将当前日期设置到本周的周一
          if (dayOfWeek === 0) {
            curr.setDate(curr.getDate() - 6); // 将当前日期设置为本周的周一
          }
          const firstday = new Date(
            curr.setDate(curr.getDate() - curr.getDay() + 1)
          );
          const lastday = new Date(
            curr.setDate(curr.getDate() - curr.getDay() + 7)
          );
          params.chartType = "week";
          params.startDate =
            dateUtil.formateDate(firstday, "yyyy-MM-dd") + " 00:00:00";
          params.endDate =
            dateUtil.formateDate(lastday, "yyyy-MM-dd") + " 23:59:59";
        }
        // 本月
        if (timeType.value === "2") {
          const now = new Date(); //当前日期
          const nowMonth = now.getMonth(); //当前月
          const nowYear = now.getFullYear(); //当前年
          params.chartType = "month";
          params.startDate =
            dateUtil.formateDate(new Date(nowYear, nowMonth, 1), "yyyy-MM-dd") +
            " 00:00:00";
          params.endDate =
            dateUtil.formateDate(
              new Date(nowYear, nowMonth + 1, 0),
              "yyyy-MM-dd"
            ) + " 23:59:59";
        }
        // 其他时间
        if (timeType.value === "3") {
          const firstday = Date.parse(calendarDate[0]);
          const lastday = Date.parse(calendarDate[1]);
          const diffDate = Math.abs(firstday - lastday);
          const totalDays = Math.floor(diffDate / (1000 * 3600 * 24));
          if (totalDays === 0) {
            params.chartType = "day";
          } else if (dateUtil.isSameWeek(calendarDate[0], calendarDate[1])) {
            params.chartType = "week";
          } else {
            params.chartType = "month";
          }
          params.startDate =
            dateUtil.formateDate(calendarDate[0], "yyyy-MM-dd") + " 00:00:00";
          params.endDate =
            dateUtil.formateDate(calendarDate[1], "yyyy-MM-dd") + " 23:59:59";
        }
        emit('update', params);
      };
      return {
        minDate,
        timeType,
        timeChange,
        calendarShow,
        calendarConfirm
      };
    },
  };
  </script>
  
  <style lang="less" scoped>
  @import "@/common/style/common.less";
  @import "@/styles/dateSelectList/index.less";
  </style>