<template>
    <div class="ultabs">
        <el-date-picker
                v-model="dateRange"
                type="daterange"
                start-placeholder="Start date"
                end-placeholder="End date"
                format="YYYY/MM/DD"
                value-format="YYYY-MM-DD"
                style="display: inline-block"
                @change="dateChange"
                unlink-panels>
        </el-date-picker>
        <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";

    const emit = defineEmits(['dataChange'])
    const props = defineProps({
        lineData: {
            type: Object,
            default: {
                lineXData: [],
                data: []
            }
        },
        title: {
            type: String,
            default: null
        }
    });
    const dateRange = ref([]);
    const isActive = ref('DAY');
    // DOM 挂载完成后
    onMounted(() => {
        // 可以访问 DOM 元素
        setTimeout(() => {
            getLastDays(6);
        },500);
    });
    function toggle(val, num) {
        isActive.value = val;
        if (val && val !== 'MONTH') {
            getLastDays(num-1);
        } else {
            getDaysOfPreviousMonth();
        }
    }
    function dateChange() {
        console.log('ccccc===',dateRange);
        getDaysOfPreviousMonth(dateRange.value[0],dateRange.value[1]);
    }
    // 获取当前日期前7天的所有日期（格式：YYYY-MM-DD）
    function 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}`);
        }
        emit("dataChange", isActive, dayList);
    }
    function 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);
        }
        emit("dataChange", isActive, oneMonthDays);
    }
</script>
<style scoped>
    .ultabs {
        float: right;
        position: relative;
        z-index: 9;
        margin-top: 20px;
        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 10px;
    }
    .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;
    }
</style>
