<template>
    <view class="container">
        <view class="nomalNotice">
            <view class="nomalTitle">异常提醒</view>
            <view class="nomal_contain">
                <SwitchItem
                    v-for="(item, index) in switchItems"
                    :key="index"
                    :label="item.label"
                    :value="item.value"
                    :timeRanges="item.timeRanges"
                    @update:value="handleSwitchChange(index, $event)"
                    @update:timeRanges="updateTimeRanges(index, $event)"
                />
            </view>
        </view>
    </view>
</template>

<script>
import SwitchItem from "./SwitchItem.vue"; // 引入 SwitchItem 组件

export default {
    name: "MyPage",
    components: {
        SwitchItem,
    },
    data() {
        return {
            switchItems: [
                {
                    label: "起夜频次",
                    value: 1,
                    timeRanges: [{ startTime: "08:00", endTime: "09:00" }],
                },
                {
                    label: "如厕频次",
                    value: 1,
                    timeRanges: [{ startTime: "08:00", endTime: "09:00" }],
                },
                {
                    label: "卫生间频次",
                    value: 1,
                    timeRanges: [{ startTime: "08:00", endTime: "09:00" }],
                },
                {
                    label: "夜间如厕频次",
                    value: 1,
                    timeRanges: [{ startTime: "08:00", endTime: "09:00" }],
                },
                {
                    label: "如厕频次异常",
                    value: 1,
                    timeRanges: [{ startTime: "08:00", endTime: "09:00" }],
                },
            ],
        };
    },
    methods: {
        handleSwitchChange(index, newValue) {
            this.switchItems[index].value = newValue;
        },
        updateTimeRanges(index, newTimeRanges) {
            this.switchItems[index].timeRanges = newTimeRanges;
        },
    },
};
</script>

<style lang="less" scoped>
.container {
    height: 100vh;
    background: linear-gradient(180deg, #faede2 0%, #f4f4f4 100%);
    box-sizing: border-box;
    padding-top: 20rpx;

    .nomalNotice {
        width: 712rpx;
        margin: 0 auto;
        box-sizing: border-box;

        .nomalTitle {
            padding-left: 38rpx;
            font-family: MiSans;
            color: #9d8179;
            font-size: 28rpx;
        }

        .nomal_contain {
            padding: 10rpx 37rpx;
            margin-top: 18rpx;
            background: #ffffff;
            border-radius: 37rpx;
        }
    }
}
</style>
