<template>
    <div>
        <div v-for="(item, index) in timeSlots" :key="index">
            <el-time-select 
              placeholder="起始时间" 
              v-model="item.startTime" 
              :picker-options="{
                start: '00:00',
                step: '00:15',
                end: '23:59',
              }">
            </el-time-select>
            <el-time-select 
              placeholder="结束时间" 
              v-model="item.endTime" 
              :picker-options="{
                start: '00:00',
                step: '00:15',
                end: '24:00',
                minTime: item.startTime
              }">
            </el-time-select>
            <el-button type="danger" @click="removeTimeSlot(index)">删除</el-button>
        </div>
        <el-button type="primary" @click="addTimeSlot">增加</el-button>
        <el-button type="success" @click="saveTimeSlots">确定</el-button>
    </div>
</template>

<script>
export default {
    data() {
        return {
            timeSlots: [
                {
                    startTime: '',
                    endTime: ''
                }
            ]
        };
    },
    methods: {
        addTimeSlot() {
            if (this.timeSlots.length >= 10) {
                this.$message.error('最多只能设置10条规则');
                return;
            }
            const newEndTime = this.timeSlots[this.timeSlots.length - 1].endTime || '';
            this.timeSlots.push({
                startTime: newEndTime,
                endTime: ''
            });
        },
        removeTimeSlot(index) {
            this.timeSlots.splice(index, 1);
        },
        saveTimeSlots() {
            if (this.timeSlots.some(slot => !slot.startTime || !slot.endTime)) {
                this.$message.error('每条规则数据不能为空');
                return;
            }
            for (let i = 0; i < this.timeSlots.length; i++) {
                const start = this.parseTime(this.timeSlots[i].startTime);
                const end = this.parseTime(this.timeSlots[i].endTime);
                if (start >= end) {
                    this.$message.error(`第${i + 1}条的开始时间必须小于结束时间`);
                    return;
                }
                if (i > 0 && this.timeSlots[i - 1].endTime > this.timeSlots[i].startTime) {
                    this.$message.error('上一条的结束时间要小于等于下一条的开始时间');
                    return;
                }
            }
            console.log('保存的时间段:', this.timeSlots);
        },
        parseTime(time) {
            const [hours, minutes] = time.split(':').map(Number);
            return hours * 60 + minutes;
        },
    }
}
</script>

<style scoped>
.el-time-select {
    margin-right: 10px;
}
</style>