<template>
    <div class="ultabs">
        <el-date-picker
                v-model="dateRange"
                type="daterange"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                range-separator="至"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
                style="display: inline-block!important;width: 55%!important;"
                @change="dateChange"/>
        <ul style="display: inline-block">
            <li :class="{ 'activesbgs' : isActive == 'DAY' }" @click="toggle('DAY',7)">前7天</li>
            <li :class="{ 'activesbgs' : isActive == 'WEEK' }" @click="toggle('WEEK',15)">前15天</li>
            <li :class="{ 'activesbgs' : isActive == 'MONTH' }" @click="toggle('MONTH')">前一个月</li>
        </ul>
    </div>
</template>

<script setup>
    import {onMounted} from "vue";
    export default {
      name: 'dateTimeSelect',
      props: {},
      data() {
        return {
          dateRange: [],
          isActive: 'DAY'
        }
      },
      // DOM 挂载完成后
      mounted() {
        // 可以访问 DOM 元素
        setTimeout(() => {
          this.getLastDays(6);
        }, 500);
      },
      methods: {
        toggle(val, num) {
          this.isActive = val;
          if (val && val !== 'MONTH') {
            this.getLastDays(num - 1);
          } else {
            this.getDaysOfPreviousMonth();
          }
        },
        dateChange() {
          this.getDaysOfPreviousMonth(this.dateRange[0], this.dateRange[1]);
        },
        // 获取当前日期前7天的所有日期（格式：YYYY-MM-DD）
        getLastDays(num) {
          const dayList = [];
          const today = new Date();

          for (let i = num; i >= 0; i--) {
            const d = new Date(today);
            d.setDate(today.getDate() - i);

            // 格式化日期为 YYYY-MM-DD
            const year = d.getFullYear();
            const month = String(d.getMonth() + 1).padStart(2, '0');
            const day = String(d.getDate()).padStart(2, '0');

            dayList.push(`${year}-${month}-${day}`);
          }
          this.$emit("dataChange", this.isActive, dayList);
        },
        getDaysOfPreviousMonth(star, end) {
          const currentDate = new Date();
          const currentYear = currentDate.getFullYear();
          const currentMonth = currentDate.getMonth(); // 0-11 表示 1-12 月

          // 计算前一个月的年份和月份
          const prevMonth = currentMonth - 1;
          const prevYear = prevMonth >= 0 ? currentYear : currentYear - 1;
          const prevMonthActual = prevMonth >= 0 ? prevMonth : 11; // 11 表示 12 月

          // 获取第一天和最后一天
          const firstDay = star ? new Date(star) : new Date(prevYear, prevMonthActual, 1);
          const lastDay = end ? new Date(end) : new Date(prevYear, prevMonthActual + 1, 0); // 下个月首日减 1 天

          // 生成所有日期
          const oneMonthDays = [];
          let currentDay = firstDay;
          while (currentDay <= lastDay) {
            // 格式化为 YYYY-MM-DD
            const formattedDate = currentDay.toISOString().split('T')[0];
            oneMonthDays.push(formattedDate);
            currentDay = new Date(currentDay); // 避免引用同一对象
            currentDay.setDate(currentDay.getDate() + 1);
          }
          this.$emit("dataChange", this.isActive, oneMonthDays);
        }
      }
    }
</script>
<style scoped>
    .ultabs {
        float: right;
        position: relative;
        z-index: 9;
        margin-top: 30px;
        margin-right: 2%;
    }

    .ultabs ul li {
        user-select: none;
        cursor: pointer;
        list-style: none;
        display: inline-block;
        width: 70px;
        text-align: center;
        height: 38px;
        line-height: 38px;
    }
    /*.ultabs ul li:nth-child样式做了更改*/
    .ultabs ul li {
        border-radius: 4px;
        border: 1px solid #CCCCCC;
        margin: 0 5px;
    }
    .activesbgs {
        color: #FFF;
        background: #5D78FF;
        cursor: pointer;
        list-style: none;
        display: inline-block;
        width: 70px;
        text-align: center;
        height: 40px !important;
        line-height: 40px !important;
        border: 1px solid #5D78FF;
    }
    ::v-deep .ultabs .el-range-editor--medium .el-range-input{
      vertical-align: super!important;
    }
    ::v-deep .ultabs .el-range-editor--medium .el-range-separator{
      vertical-align: super!important;
    }
</style>
