<template>
    <view class="switchBox">
        <text class="name">{{ label }}</text>
        <switch
            :value="status"
            @change="handleChange"
            :active-value="1"
            :inactive-value="0"
            size="24px"
            active-color="#07c160"
            inactive-color="#eeeff1"
            style="transform: scale(0.8)"
        />

        <!-- 时间范围选择 -->
        <view class="timeRanges">
            <view
                v-for="(timeRange, index) in timeRanges"
                :key="index"
                class="timeRangeBox"
            >
                <view class="timeItem">
                    <text class="timeLabel">开始时间</text>
                    <picker
                        mode="time"
                        :value="timeRange.startTime"
                        @change="handleStartTimeChange(index, $event)"
                    >
                        <view class="pickerButton">{{
                            timeRange.startTime
                        }}</view>
                    </picker>
                </view>
                <view class="timeItem">
                    <text class="timeLabel">结束时间</text>
                    <picker
                        mode="time"
                        :value="timeRange.endTime"
                        @change="handleEndTimeChange(index, $event)"
                    >
                        <view class="pickerButton">{{
                            timeRange.endTime
                        }}</view>
                    </picker>
                </view>
                <view class="removeBtn" @click="removeTimeRange(index)"
                    >删除</view
                >
            </view>
        </view>

        <!-- 单独保存按钮 -->
        <view class="addTimeRangeBtn" @click="addTimeRange">+ 添加时间段</view>
        <view class="saveBtn" @click="saveSettings">保存配置</view>
    </view>
</template>

<script>
export default {
    name: "SwitchItem",
    props: {
        label: {
            type: String,
            required: true,
        },
        value: {
            type: Number,
            default: 1,
        },
        timeRanges: {
            type: Array,
            default: () => [{ startTime: "00:00", endTime: "00:00" }],
        },
    },
    data() {
        return {
            status: this.value,
        };
    },
    methods: {
        handleChange(newValue) {
            this.$emit("update:value", newValue.detail.value);
        },

        handleStartTimeChange(index, event) {
            const newTimeRange = [...this.timeRanges];
            newTimeRange[index].startTime = event.detail.value;
            this.$emit("update:timeRanges", newTimeRange);
        },

        handleEndTimeChange(index, event) {
            const newTimeRange = [...this.timeRanges];
            newTimeRange[index].endTime = event.detail.value;
            this.$emit("update:timeRanges", newTimeRange);
        },

        addTimeRange() {
            const newTimeRange = [
                ...this.timeRanges,
                { startTime: "00:00", endTime: "00:00" },
            ];
            this.$emit("update:timeRanges", newTimeRange);
        },

        removeTimeRange(index) {
            const newTimeRange = [...this.timeRanges];
            newTimeRange.splice(index, 1);
            this.$emit("update:timeRanges", newTimeRange);
        },

        saveSettings() {
            console.log(`配置已保存：${this.label}`, {
                status: this.status,
                timeRanges: this.timeRanges,
            });

            uni.showToast({
                title: `${this.label} 配置已保存`,
                icon: "success",
                duration: 2000,
            });
        },
    },
};
</script>

<style lang="less" scoped>
.switchBox {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding-top: 20rpx;
    padding-bottom: 20rpx;
    border-bottom: 2rpx solid #eef2f6;
    background: #ffffff;
    margin-bottom: 20rpx;

    .name {
        margin-left: 18rpx;
        color: #111111;
        font-size: 32rpx;
        margin-bottom: 10rpx;
    }
}

.timeRanges {
    margin-top: 20rpx;
    width: 100%;
}

.timeRangeBox {
    padding: 10rpx;
    background-color: #f4f4f4;
    margin-bottom: 10rpx;
    border-radius: 10rpx;
}

.timeItem {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20rpx;
}

.timeLabel {
    font-size: 28rpx;
    color: #333;
}

.pickerButton {
    padding: 10rpx;
    border: 1rpx solid #ccc;
    border-radius: 5rpx;
    font-size: 28rpx;
    color: #666;
}

.removeBtn {
    text-align: center;
    color: #111111;
    font-size: 32rpx;
    padding: 20rpx;
    margin-top: 20rpx;
    background-color: #f9eee4;
    border-radius: 28rpx;
    transition: background-color 0.3s;
}

.addTimeRangeBtn {
    width: 93%;
    text-align: center;
    color: #111111;
    font-size: 32rpx;
    padding: 20rpx;
    cursor: pointer;
    border: 2rpx solid #feece5;
    border-radius: 28rpx;
    background-color: #feece5;
    transition: background-color 0.3s, color 0.3s;
}

.saveBtn {
    width: 93%;
    text-align: center;
    color: #fff;
    font-size: 32rpx;
    padding: 20rpx;
    margin-top: 20rpx;
    cursor: pointer;
    background-color: #7d5246;
    border-radius: 28rpx;
    transition: background-color 0.3s;
}
</style>
