<template>
    <div class="control-view">
        <!-- 主要内容 -->
        <div class="main-content">
            <!-- 顶部状态栏 -->
            <div class="header-status">
                <div class="time-info">
                    <span>{{ currentTime }} {{ week }}</span>
                </div>
                <div class="page-title">
                    <h1>自动模式设置</h1>
                </div>
                <div class="system-status">
                    <!-- <span>系统已运行：{{ systemRuntime }}</span> -->
                </div>
            </div>

            <!-- 主体区域 -->
            <div class="control-content" element-loading-text="加载中..." v-loading="startTaskLoading || stopTaskLoading || middleTaskLoading" element-loading-background="rgba(122, 122, 122, 0.8)">
                <div class="power-section">
                    <div class="tabBox">
                        <div class="tabItem" :class="{ selected: item === deviceMode }" v-for="item in [0, 1, 2]" @click="changeViewMode(item)">
                            模式{{ item + 1 }}
                        </div>
                    </div>
                    <div class="power-params">
                        <div class="energy-card" v-for="(item, index) in ['开始任务', '结束任务']">
                            <div class="energy-name"><span>{{ item.substring(0, 1) }}</span><span>{{ item.substring(1, 2) }}</span><span>{{ item.substring(2, 3) }}</span><span>{{ item.substring(3) }}</span></div>
                            <div class="param-list">
                                <div class="item">
                                    <div>通道</div>
                                    <div>回路</div>
                                    <div>亮度</div>
                                </div>
                                <div class="item" v-for="(ele, idx) in tasks[index].loops">
                                    <div>{{ idx + 1 }}</div>
                                    <div :class="{ red: !ele.turnOn, green: ele.turnOn }">{{ ele.turnOn ? '通' : '断' }}</div>
                                    <div>{{ ele.pwm }}</div>
                                </div>
                            </div>
                            <div class="time">
                                <div>{{ tasks[index].timeType === 0 ? '定时时间' : '经纬度时间' }}</div>
                                <div>{{ tasks[index].execTime ? dayjs(tasks[index].execTime).format('HH:mm:ss') : '' }}</div>
                            </div>
                            <div class="iconBox">
                                <el-icon @click="openSettingDialog(item, index)">
                                    <Setting />
                                </el-icon>
                            </div>
                        </div>
                        <div class="energy-card" v-for="(item, index) in tasks[2]">
                            <div class="energy-name"><span>中</span><span>间</span><span>任</span><span>务</span></div>
                            <div class="param-list">
                                <div class="item">
                                    <div>通道</div>
                                    <div>回路</div>
                                    <div>亮度</div>
                                </div>
                                <div class="item" v-for="(ele, idx) in item.loops">
                                    <div>{{ idx + 1 }}</div>
                                    <div :class="{ red: !ele.turnOn }">{{ ele.turnOn ? '通' : '断' }}</div>
                                    <div>{{ ele.pwm }}</div>
                                </div>
                            </div>
                            <div class="time">
                                <div>{{ item.timeType === 0 ? '定时时间' : '经纬度时间' }}</div>
                                <div>{{ item.execTime ? dayjs(item.execTime).format('HH:mm:ss') : '' }}</div>
                            </div>
                            <div class="iconBox">
                                <el-icon @click="openSettingDialog('中间任务', index)">
                                    <Setting />
                                </el-icon>
                                <el-icon color="#f12323" @click="delTask(index)" style="margin-left: 10px;">
                                    <Delete />
                                </el-icon>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 右侧控制面板 -->
                <div class="control-panel">
                    <!-- 切换模式 -->
                    <div class="control-group">
                        <div class="control-title">

                            <el-icon>
                                <Setting />
                            </el-icon>
                            控制模式
                        </div>
                        <el-button class="mode-button active" @click="changeMode">自动模式{{ currentMode + 1 }}</el-button>
                    </div>

                    <div class="buttonBox">
                        <el-button icon="ArrowUp" style="margin-left: 0;" class="brightness-button" @click="prev">上滑</el-button>
                        <el-button icon="ArrowDown" style="margin-left: 0;" class="brightness-button" @click="next">下滑</el-button>
                        <el-button icon="RefreshRight" style="margin-left: 0;" class="mode-button" @click="restartSystem">远程重启</el-button>
                        <el-button icon="Refresh" style="margin-left: 0;" class="brightness-button" @click="getTask">刷新</el-button>
                        <el-button icon="Plus" style="margin-left: 0;" class="brightness-button add" @click="addTask">新增</el-button>
                        <!-- <el-button icon="Delete" style="margin-left: 0;" class="brightness-button del" @click="delMode">删除</el-button> -->
                    </div>
                </div>
            </div>
        </div>
        <!-- 底部信息 -->
        <div class="bottom-info">
            <div class="bottom_item">
                <div class="time-item">
                    <span>日出时间：{{ sunriseTime }}</span>
                </div>
                <div class="time-item">
                    <span>日落时间：{{ sunsetTime }}</span>
                </div>
            </div>
            <div style="color:#fff">
                设备号：{{ commit_uid }}
            </div>
            <div class="bottom_item">
                <!-- <el-button class="restart-button" @click="restartSystem">
                    <el-icon>
                        <RefreshRight />
                    </el-icon>
                    远程重启
                </el-button> -->
                <el-button class="back-button" @click="goBack">
                    <el-icon>
                        <HomeFilled />
                    </el-icon>
                    返回主界面
                </el-button>
            </div>
        </div>

        <!-- 亮度调节弹窗 -->
        <!-- <el-dialog v-model="brightnessDialogVisible" title="亮度调节" width="400px" :modal="true" class="brightness-dialog">
            <div class="brightness-content">
                <div class="brightness-label">亮度值：{{ currentBrightness }}%</div>
                <div class="brightness-slider-container">
                    <el-slider v-model="currentBrightness" :min="0" :max="100" :show-stops="true" class="brightness-slider" />
                </div>
            </div>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="brightnessDialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="confirmBrightness">确认</el-button>
                </div>
            </template>
</el-dialog> -->
        <el-dialog v-model="brightnessDialogVisible" title="亮度调节" width="400px" :modal="true" class="brightness-dialog">
            <div class="setting-content">
                <div style="margin-top: 20px;display: flex;justify-content: center;align-items: center;">
                    <span style="margin-right: 20px;">亮度调节</span> <el-input-number style="width: 200px" v-model="lightFrom.a" :min="0" :max="100">
                        <template #suffix>
                            <span>%</span>
                        </template>
                    </el-input-number>
                </div>
            </div>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="brightnessDialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="brightnessDialogVisible = false">确认</el-button>
                </div>
            </template>
        </el-dialog>

        <el-dialog v-model="modeDialogVisible" title="选择模式" width="600px" :modal="true" class="brightness-dialog">
            <div class="setting-content">
                <div class="modeBox">
                    <el-button v-for="(item, index) in 3" :class="index === modeActive ? 'mode-button active' : 'brightness-button dark'" @click="modeActive = index">模式{{ item }}</el-button>
                </div>
            </div>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="modeDialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="confirmMode">确认</el-button>
                </div>
            </template>
        </el-dialog>
        <el-dialog v-model="addDialogVisible" title="新增模式" width="600px" :modal="true" class="brightness-dialog">
            <div class="setting-content">
                <div style="margin-top: 20px;display: flex;justify-content: center;align-items: center;">
                    <span style="margin-right: 20px;">模式名称</span> <el-input style="width: 200px" v-model="modeName">

                    </el-input>
                </div>
            </div>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="addDialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="addDialogVisible = false">确认</el-button>
                </div>
            </template>
        </el-dialog>

        <el-dialog v-model="settingDialogVisible" title="设置" width="800px" :modal="true" class="brightness-dialog">
            <div class="setting-content">
                <div class="loopBox">
                    <div class="title">
                        <div class="left">通道回路
                            <!-- <span class="selectAll" @click="selectAll">全选</span> -->
                        </div>
                        <!-- <div class="right">通道回路 <el-switch v-model="switchValue" inline-prompt active-text="通" inactive-text="断" /></div> -->
                    </div>
                    <div class="selectBox">
                        <el-checkbox-group v-model="selectBoxValue">
                            <el-checkbox v-for="item in 10" :label="'通道回路' + item" :value="item" border />
                        </el-checkbox-group>
                    </div>
                </div>
                <!-- <div style="margin:10px 0 "><el-button type="primary" @click="brightnessDialogVisible = true">一键调光</el-button></div> -->
                <div style="margin-bottom: 10px;">调光通道</div>
                <div class="lightBox">
                    <div class="item" v-for="(item, index) in currentTask.loops">
                        <div class="title">调光通道{{ index + 1 }}</div>
                        <BaseKeyboardInput style="width: 95%;" v-model="item.pwm" layout-name="number"></BaseKeyboardInput>
                        <!-- <el-input-number style="width: 95%;" v-model="item.pwm" :min="0" :max="100">
                            <template #suffix>
                                <span>%</span>
                            </template>
                        </el-input-number> -->
                    </div>
                </div>
                <div class="timeBox">
                    <span>时间</span>
                    <el-time-picker arrow-control v-model="currentTask.execTime" placeholder="请选择" />
                    <el-radio-group style="margin-left: 20px;" v-model="currentTask.timeType">
                        <el-radio :value="0">定时时间</el-radio>
                        <el-radio :value="1">经纬度时间</el-radio>
                    </el-radio-group>
                </div>
            </div>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="settingDialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="confirmSetting">确认</el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted, watch } from 'vue'
import { useRouter } from 'vue-router'
import RPC from '@/utils/rpc'
import dayjs from 'dayjs'
import BaseKeyboardInput from './BaseKeyboardInput.vue';
const commit_uid = sessionStorage.getItem('central_control_comm_uid')
// const commit_uid = '868656077692382'

const switchValue = ref(true)
const selectBoxValue = ref([])
const lightFrom = ref({})
const timeValue = ref('')
const modeName = ref('')

const currentTaskName = ref('开始任务')
const currentTask = ref({})
const currentMiddleIndex = ref(null)

const next = () => {
    document.querySelector('.power-params').scrollTop = document.querySelector('.power-params').scrollTop + 120
}
const prev = () => {
    document.querySelector('.power-params').scrollTop = document.querySelector('.power-params').scrollTop - 120
}

const openSettingDialog = (item, index) => {
    currentTaskName.value = item
    if (item === '中间任务') {
        currentTask.value = middleTask.value[index]
        currentMiddleIndex.value = index
    } else {
        currentTask.value = tasks.value[index]
    }
    // console.log(' currentTask.value', JSON.stringify(currentTask.value))
    // if (currentTask.value.turnOn) {
    //     selectBoxValue.value = ['通道回路']
    // } else {
    //     selectBoxValue.value = []
    // }
    selectBoxValue.value = []
    currentTask.value.loops.forEach((item, index) => {
        if (item.turnOn) selectBoxValue.value.push(index + 1)
    })
    settingDialogVisible.value = true
}

const confirmSetting = () => {
    // console.log(selectBoxValue.value)
    currentTask.value.loops.forEach(item => {
        item.turnOn = false
    })
    selectBoxValue.value?.forEach(item => {
        currentTask.value.loops[item - 1].turnOn = true
    })
    const params = {
        "comm_uid": commit_uid,
        "mode": deviceMode.value,
        "execTime": dayjs(currentTask.value.execTime).format('YYYY-MM-DD HH:mm:ss'),
        // "turnOn": selectBoxValue.value.length > 0,
        // "pwm": currentTask.value.pwm,
        timeType: currentTask.value.timeType,
        loops: currentTask.value.loops
    }
    // if (1 == 1) {
    //     console.log(params)
    //     return
    // }
    if (currentTaskName.value === '开始任务') {
        RPC.post('/m9z/setStartTask2', params).then(res => {
            settingDialogVisible.value = false
            ElMessage.success('修改成功')
            getTask()
        })
    }
    if (currentTaskName.value === '结束任务') {
        RPC.post('/m9z/setStopTask2', params).then(res => {
            settingDialogVisible.value = false
            ElMessage.success('修改成功')
            getTask()
        })
    }
    if (currentTaskName.value === '中间任务') {
        middleTask.value[currentMiddleIndex.value].execTime = dayjs(currentTask.value.execTime).format('YYYY-MM-DD HH:mm:ss')
        middleTask.value[currentMiddleIndex.value].timeType = currentTask.value.timeType
        middleTask.value[currentMiddleIndex.value].loops = currentTask.value.loops
        const middleParams = {
            "comm_uid": commit_uid,
            "mode": deviceMode.value,
            "controlTaskList": middleTask.value
        }
        RPC.post('/m9z/setMiddleTask2', middleParams).then(res => {
            settingDialogVisible.value = false
            ElMessage.success('修改成功')
            getTask()
        })
    }
}


const startTask = ref({})
const stopTask = ref({})
const middleTask = ref([])
const startTaskLoading = ref(false)
const stopTaskLoading = ref(false)
const middleTaskLoading = ref(false)

const tasks = computed(() => [startTask.value, stopTask.value, middleTask.value])

const deviceMode = ref(0)
const currentMode = ref(0)
RPC.post('/m9z/getDeviceMode', { comm_uid: commit_uid }).then(res => {
    currentMode.value = res
})

const changeMode = () => {
    modeActive.value = currentMode.value
    modeDialogVisible.value = true
}

const confirmMode = () => {
    RPC.post('/m9z/setDeviceMode', { comm_uid: commit_uid, mode: modeActive.value }).then(res => {
        currentMode.value = modeActive.value
        ElMessage.success('操作成功')
        modeDialogVisible.value = false
    })
}

const changeViewMode = index => {
    deviceMode.value = index
    getTask()
}

const getTask = () => {
    startTaskLoading.value = true
    stopTaskLoading.value = true
    middleTaskLoading.value = true
    RPC.post('/m9z/getStartTask2', { comm_uid: commit_uid, mode: deviceMode.value }).then(res => {
        startTask.value = res
    }).finally(() => {
        startTaskLoading.value = false
    })
    RPC.post('/m9z/getStopTask2', { comm_uid: commit_uid, mode: deviceMode.value }).then(res => {
        stopTask.value = res
    }).finally(() => {
        stopTaskLoading.value = false
    })
    RPC.post('/m9z/getMiddleTask2', { comm_uid: commit_uid, mode: deviceMode.value }).then(res => {
        middleTask.value = res.controlTaskList || []
    }).finally(() => {
        middleTaskLoading.value = false
    })
}
getTask()

const addTask = () => {
    middleTask.value.push({
        "execTime": '2025-06-07 19:00:00',
        "turnOn": true,
        "pwm": 50
    })
    const middleParams = {
        "comm_uid": commit_uid,
        "mode": deviceMode.value,
        "controlTaskList": middleTask.value
    }
    console.log(middleParams)
    middleTaskLoading.value = true
    RPC.post('/m9z/setMiddleTask2', middleParams).then(res => {
        settingDialogVisible.value = false
        ElMessage.success('添加成功')
        middleTaskLoading.value = false
        getTask()
    }).catch(() => {
        middleTaskLoading.value = false
    })
}
const delTask = (index) => {
    ElMessageBox.confirm(
        '确认删除?',
        '',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
            customClass: 'del_Message_box'
        }
    )
        .then(() => {
            middleTask.value.splice(index, 1)
            const middleParams = {
                "comm_uid": commit_uid,
                "mode": deviceMode.value,
                "controlTaskList": middleTask.value
            }
            console.log(middleParams)
            middleTaskLoading.value = true
            RPC.post('/m9z/setMiddleTask2', middleParams).then(res => {
                settingDialogVisible.value = false
                ElMessage.success('删除成功')
                middleTaskLoading.value = false
                getTask()
            }).catch(() => {
                middleTaskLoading.value = false
            })
        })
}

const selectAll = () => {
    if (selectBoxValue.value.length !== 10) {
        selectBoxValue.value = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map(item => '通道回路' + item)
    } else {
        selectBoxValue.value = []
    }
}

const router = useRouter()
const currentTime = ref('')
const systemRuntime = ref('38分钟')
const brightnessDialogVisible = ref(false)
const currentBrightness = ref(50)
const selectedChannelName = ref(null)

const settingDialogVisible = ref(false)
const modeDialogVisible = ref(false)
const addDialogVisible = ref(false)
const modeActive = ref(1)

const week = ref('')
const weekDays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];


const sunriseTime = ref('')
const sunsetTime = ref('')

RPC.post('/m9z/getDeviceSunRiseTime', { comm_uid: commit_uid }).then(res => {
    sunriseTime.value = res.Sunrise ? dayjs(res.Sunrise).format('HH:mm:ss') : ''
    sunsetTime.value = res.Sunset ? dayjs(res.Sunset).format('HH:mm:ss') : ''
})

// 更新时间
const updateTime = () => {
    const now = new Date()
    const year = now.getFullYear()
    const month = String(now.getMonth() + 1).padStart(2, '0')
    const day = String(now.getDate()).padStart(2, '0')
    const hours = String(now.getHours()).padStart(2, '0')
    const minutes = String(now.getMinutes()).padStart(2, '0')
    const seconds = String(now.getSeconds()).padStart(2, '0')

    week.value = weekDays[now.getDay()]

    currentTime.value = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
}

// 切换回路状态
const toggleCircuit = (circuitName) => {
    if (!info.value.disable) return ElMessage.warning('请切换至手动模式')
    const circuit = info.value.loops.find(c => c.name === circuitName)
    if (circuit) {
        circuit.is_open = !circuit.is_open
    }
}

// 打开亮度调节弹窗
const openBrightnessDialog = (channelName) => {
    if (!info.value.disable) return ElMessage.warning('请切换至手动模式')
    selectedChannelName.value = channelName
    const channel = info.value.loops.find(c => c.name === channelName)
    if (channel) {
        currentBrightness.value = channel.pwm
        brightnessDialogVisible.value = true
    }
}

// 确认亮度设置
const confirmBrightness = () => {
    const channel = info.value.loops.find(c => c.name === selectedChannelName.value)
    if (channel) {
        channel.pwm = currentBrightness.value
        // ElMessage.success(`${channel.name}亮度已设置为${currentBrightness.value}%`)
    } else {
        info.value.loops.forEach(channel => {
            channel.pwm = currentBrightness.value
        })
    }
    brightnessDialogVisible.value = false
}

// 打开全局亮度调节
const openGlobalBrightnessDialog = () => {
    if (!info.value.disable) return ElMessage.warning('请切换至手动模式')
    selectedChannelName.value = null
    currentBrightness.value = 50
    brightnessDialogVisible.value = true
}


// 返回主界面
const goBack = () => {
    router.push('/')
}

// 重启系统
const restartSystem = () => {
    RPC.post('/m9z/setRestart', { comm_uid: commit_uid }).then(res => {
        ElMessage.success('远程重启成功')
    })
}

let timeInterval = null

// 处理 session 恢复后的重新加载
const handleSessionRestored = () => {
    console.log('Session 已恢复，重新加载数据')
    getTask()
    RPC.post('/m9z/getDeviceMode', { comm_uid: commit_uid }).then(res => {
        currentMode.value = res
    })
    RPC.post('/m9z/getDeviceSunRiseTime', { comm_uid: commit_uid }).then(res => {
        sunriseTime.value = res.Sunrise ? dayjs(res.Sunrise).format('HH:mm:ss') : ''
        sunsetTime.value = res.Sunset ? dayjs(res.Sunset).format('HH:mm:ss') : ''
    })
}

onMounted(() => {
    updateTime()
    timeInterval = setInterval(updateTime, 1000)

    // 监听 session 恢复事件
    window.addEventListener('m9z:session-restored', handleSessionRestored)
})

onUnmounted(() => {
    if (timeInterval) {
        clearInterval(timeInterval)
    }

    // 移除事件监听
    window.removeEventListener('m9z:session-restored', handleSessionRestored)
})

const delMode = () => {
    ElMessageBox.confirm(
        '确认删除?',
        '',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
            customClass: 'del_Message_box'
        }
    )
        .then(() => {
            ElMessage({
                type: 'success',
                message: '删除成功',
            })
        })
}
</script>

<style scoped lang="scss">
.control-view {
    width: 100vw;
    height: 100vh;
    box-sizing: border-box;
    position: relative;
    overflow: auto;
    background: center / cover url('@/assets/images/背景小@2x.png') no-repeat;
    background-color: #0A3933;
}

.main-content {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    padding: 10px 20px;
    box-sizing: border-box;
}

.header-status {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    color: rgba(255, 255, 255, 0.9);
}

.time-info {
    font-size: 18px;
    font-weight: 300;
    width: 270px;
}

.page-title h1 {
    font-size: 30px;
    font-weight: bold;
    margin: 0;
    color: #ffffff;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
}

.system-status {
    min-width: 200px;
    font-size: 18px;
    font-weight: 300;
    width: 270px;
}

.control-content {
    display: flex;
    width: 100%;
    gap: 30px;
    box-sizing: border-box;
    height: calc(100% - 120px);
}

.power-section {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    /* width: 500px; */
    gap: 20px;
    font-size: 14px;

    .tabBox {
        display: flex;
        align-items: center;
        justify-content: center;

        .tabItem {
            width: 100px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: #373C47;
            color: #fff;

            &:first-child {
                border-radius: 8px 0 0 8px;
            }

            &:last-child {
                border-radius: 0 8px 8px 0;
            }

            &.selected {
                background-color: #FFAF11;
            }
        }
    }
}

.power-params {
    display: flex;
    flex-direction: column;
    // justify-content: space-between;
    overflow-y: auto;
    overflow-x: hidden;
    gap: 10px;
    height: 100%;

    // &::-webkit-scrollbar {
    //     width: 32px;
    //     /* 滚动条宽度 */
    //     height: 22px;
    //     /* 滚动条高度 */
    // }

    // &::-webkit-scrollbar-thumb {
    //     background-color: darkgrey;
    //     /* 滚动条滑块颜色 */
    //     border-radius: 10px;
    //     /* 滑块圆角 */
    // }

    .time {
        width: 100px;
        border-left: 1px solid #ccc;

        div {
            margin: 10px 0;
            text-align: center;
        }
    }

    .iconBox {
        height: 100%;
        width: 100px;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: rgba($color: #188549, $alpha: .3);

        .el-icon {
            font-size: 30px;
            background-color: #fff;
            background: linear-gradient(180deg, rgba(244, 248, 247, 1) 0%, rgba(142, 198, 185, 1) 96%);
            width: 40px;
            height: 40px;
            border-radius: 5px;
            box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.31);
        }
    }
}

.phase-card,
.energy-card {
    display: flex;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    align-items: center;
    width: 99%;
    height: 30%;
    flex-shrink: 0;
    overflow: hidden;
    /* padding: 15px; */
    backdrop-filter: blur(10px);
    color: #fff;
}


.phase-name,
.energy-name {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: rgba($color: #188549, $alpha: .3);
    width: 30px;
    height: 100%;
}

.param-list {
    display: flex;
    flex: 1;
    height: 100%;

    .red {
        color: #f12323;
    }

    .green {
        color: rgb(39, 167, 39);
    }

    .item {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        flex: 1;

        div {
            flex: 1;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    }
}

.param-item {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
}

.param-label {
    color: rgba(255, 255, 255, 0.7);
}

.param-value {
    color: rgba(255, 255, 255, 0.9);
    font-weight: 500;
}

.circuit-section {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.circuit-row {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
}

.circuit-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    width: 18%;
}

.circuit-status {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    padding: 8px 12px;
    color: rgba(255, 255, 255, 0.7);
    text-align: center;
    width: 100%;
    box-sizing: border-box;
}

.circuit-status.active {
    background: rgba(33, 150, 243, 0.2);
    border-color: rgba(33, 150, 243, 0.5);
    color: #64b5f6;
}

.circuit-icon {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    color: rgba(255, 255, 255, 0.5);
}

.circuit-icon.active {
    background: rgba(255, 193, 7, 0.2);
    border-color: rgba(255, 193, 7, 0.6);
    color: #ffc107;
    box-shadow: 0 0 15px rgba(255, 193, 7, 0.3);
}

.circuit-icon:hover {
    transform: scale(1.05);
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.2);
}

.dimming-section {
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-size: 12px;
}

.dimming-row {
    display: flex;
    justify-content: space-between;
}

.dimming-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    width: 18%;
}

.channel-label {
    color: rgba(255, 255, 255, 0.8);
    text-align: center;
}

.brightness-display {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    padding: 6px;
    color: rgba(255, 255, 255, 0.7);
    font-weight: bold;
    text-align: center;
    width: 100%;
    box-sizing: border-box;
    cursor: pointer;
    transition: all 0.3s ease;
}

.brightness-display.active {
    background: rgba(33, 150, 243, 0.3);
    border-color: rgba(33, 150, 243, 0.6);
    color: #64b5f6;
    box-shadow: 0 0 10px rgba(33, 150, 243, 0.3);
}

.brightness-display:hover {
    background: rgba(255, 255, 255, 0.12);
    transform: translateY(-2px);
}

.bottom-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid #eee;
    width: 100vw;
    padding: 0 30px;
    height: 50px;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 999;
    box-sizing: border-box;

    .bottom_item {
        display: flex;
        align-items: center;
    }

    .time-item {
        color: #fff;
        font-size: 16px;
        margin: 0 20px;
    }

    .back-button,
    .restart-button {
        width: 100%;
        height: 38px;
        border-radius: 19px;
        font-size: 16px;
        font-weight: 500;
        transition: all 0.3s ease;
    }

    .back-button {
        // background-color: #000;
        // color: #fff;
        border: #000;
        background: linear-gradient(180deg, rgba(223, 196, 137, 1) 0%, rgba(190, 151, 99, 1) 100%);
        color: #fff;
    }
}

.control-panel {
    width: 150px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 20px;

    .buttonBox {
        .el-button {
            margin: 10px 0;

            &:last-child {
                margin-bottom: 0;
            }
        }
    }
}

.control-group {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    padding: 20px 10px;
    backdrop-filter: blur(10px);
}

.control-title {
    color: rgba(255, 255, 255, 0.9);
    font-size: 16px;
    font-weight: 500;
    text-align: center;
    margin-bottom: 15px;
    display: flex;
    align-items: center;

    .el-icon {
        font-size: 20px;
        margin-right: 10px;
    }
}

.mode-button,
.setting-button,
.brightness-button {
    width: 100%;
    height: 45px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 500;
    transition: all 0.3s ease;
    margin-bottom: 10px;

    &.add {
        background: linear-gradient(180deg, rgba(51, 224, 188, 1) 0%, rgba(5, 149, 117, 1) 100%);
    }

    &.del {
        background-color: #d42d1f;
    }

    &.dark {
        color: #333;
        border: 1px solid #333;
    }
}

.mode-button {
    background: rgba(255, 255, 255, 0.9);
    border: none;
    color: #333;
}

.mode-button.active {
    background: linear-gradient(180deg, rgba(51, 224, 188, 1) 0%, rgba(5, 149, 117, 1) 100%);
    color: #fff;
}

.setting-button {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: rgba(255, 255, 255, 0.9);
}

.setting-button.active {
    background: #1976d2;
    border-color: #1976d2;
    color: #ffffff;
}

.brightness-button {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: rgba(255, 255, 255, 0.9);
}


// .setting-button:hover,
// .brightness-button:hover {
//     background: rgba(255, 255, 255, 0.15);
//     transform: translateY(-2px);
// }

/* 弹窗样式 */
:deep(.brightness-dialog) {
    // background: rgba(30, 30, 30, 0.95);
    // backdrop-filter: blur(20px);
    background: linear-gradient(180.44deg, rgba(226, 232, 251, 1) 0.64%, rgba(255, 255, 255, 1) 25.32%);
}

:deep(.brightness-dialog .el-dialog__header) {
    // background: rgba(255, 255, 255, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

:deep(.brightness-dialog .el-dialog__title) {
    color: #6C75A0 100%;
    font-size: 18px;
    font-weight: 500;
}

:deep(.brightness-dialog .el-dialog__body) {
    // background: rgba(255, 255, 255, 0.05);
    color: #6C75A0 100%;
}

.brightness-content {
    padding: 20px 0;
}

.brightness-label {
    text-align: center;
    font-size: 18px;
    font-weight: 500;
    margin-bottom: 30px;
    color: #6C75A0;
}

.brightness-slider-container {
    padding: 0 20px;
}

:deep(.brightness-slider .el-slider__bar) {
    background: #1976d2;
}

:deep(.brightness-slider .el-slider__button) {
    border-color: #1976d2;
}

:deep(.brightness-slider .el-slider__stop) {
    background: rgba(255, 255, 255, 0.3);
}

.dialog-footer {
    display: flex;
    justify-content: center;
    gap: 20px;
}

.setting-content {
    .loopBox {
        .title {
            width: 100%;
            height: 50px;
            display: flex;
            justify-content: space-between;
            align-items: center;

            .selectAll {
                color: #2d5cf6;
                margin-left: 20px;
                cursor: pointer;
            }
        }
    }

    .selectBox {
        .el-checkbox-group {
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;

            .el-checkbox {
                width: 18%;
                margin-right: 0;
                height: 40px;
                margin-bottom: 20px;
            }
        }
    }

    .lightBox {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;

        .item {
            .title {
                margin-bottom: 5px;
            }

            margin-bottom: 10px;
            text-align: center;
            width: 19%;
            display: flex;
            flex-direction: column;
            align-items: center;

            :deep(.el-input-number__increase) {
                background-color: transparent;
                color: #6C75A0;
            }

            :deep(.el-input-number__decrease) {
                background-color: transparent;
                color: #6C75A0;
            }

        }
    }

    :deep(.el-input__wrapper) {
        background-color: transparent;
        color: #6C75A0;

        input {
            color: #6C75A0;
        }
    }

    .timeBox {
        margin-top: 20px;
        display: flex;
        align-items: center;

        >span {
            margin-right: 20px;
        }
    }

    .modeBox {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        margin-top: 20px;

        .el-button {
            min-width: 100px;
            width: auto;
        }
    }
}
</style>

<style lang="scss">
.del_Message_box {
    background: rgba(30, 30, 30, 0.95);
    backdrop-filter: blur(20px);

    .el-message-box__message {
        color: #fff;
    }
}
</style>
