<template>
    <div class="device-page p-2">
        <!-- 头部信息栏 -->
        <div class="header-bar">
            <div>设备名称：6170零零一</div>
            <div>设备型号：BJQ6170</div>
            <div class="device-status">设备状态：<span class="online">在线</span></div>
            <div>电量：80%</div>
            <div>续航：1小时55分钟</div>
        </div>

        <!-- 主体内容区域 -->
        <div class="content-wrapper">
            <!-- 第一行：灯光模式 + 灯光亮度、强制报警、位置信息 -->
            <el-row :gutter="20" class="content-row">
                <el-col :lg="16" :xs="24">
                    <div class="content-card">
                        <h4 class="section-title">灯光模式</h4>
                        <div class="light-mode">
                            <!-- 使用v-for循环渲染灯光模式卡片 -->
                            <div class="mode-card" :class="{ 'active': mode.active }" @click="handleModeClick(mode.id)"
                                v-for="mode in lightModes" :key="mode.id">
                                <img :src="mode.active ? mode.activeIcon : mode.icon" :alt="mode.name"
                                    class="mode-icon" />
                                <div class="mode-name">{{ mode.name }}</div>
                                <el-switch v-model="mode.switchStatus" />
                            </div>
                        </div>
                    </div>
                </el-col>
                <el-col :lg="8" :xs="24">
                    <div class="brightness-alarm">
                        <div class="brightness-control">
                            <span class="brightness-label">灯光亮度</span>
                            <el-input class="inputTFT" v-model="brightness" :min="0" :max="100" :step="1"
                                size="small" />
                            <span class="brightness-value">%</span>
                            <el-button type="primary" class="save-btn">保存</el-button>
                        </div>
                        <el-button type="danger" class="alarm-btn">强制报警</el-button>
                    </div>
                    <div class="content-card_gps">
                        <h4 class="section-title">位置信息</h4>
                        <div class="location-info">
                            <div class="location-item">
                                <span class="location-icon"></span>
                                <span>经纬度 114°7'E 30°28'N</span>
                            </div>
                            <div class="location-item">
                        
                                <div>地址 <span class="lacatin_gps">ksjkjwekrnjewrnjewrnjwerjweb</span></div>
                                <el-button link type="primary" class="view-btn">查看</el-button>
                            </div>
                        </div>
                    </div>
                </el-col>
            </el-row>

            <!-- 第二行：人员信息登记 + 发送信息 -->
            <el-row :gutter="20" class="content-row">
                <el-col :lg="16" :xs="24">
                    <div class="content-card">
                        <h4 class="section-title">人员信息登记</h4>
                        <div class="form-grid">
                            <div class="form-item">
                                <span class="form-label">单位:</span>
                                <el-input placeholder="请输入设备名称" />
                            </div>
                            <div class="form-item">
                                <span class="form-label">职位:</span>
                                <el-input placeholder="请输入设备名称" />
                            </div>
                            <div class="form-item">
                                <span class="form-label">姓名</span>
                                <el-input value="王平安" />
                            </div>
                            <div class="form-item">
                                <span class="form-label">ID:</span>
                                <el-input placeholder="请输入设备名称" />
                            </div>
                            <el-button type="primary" class="register-btn">登记</el-button>
                        </div>
                    </div>
                </el-col>
                <el-col :lg="8" :xs="24">
                    <div class="content-card">
                        <h4 class="section-title">发送信息</h4>
                        <div class="message-content">
                            <el-input type="textarea" class="textareaTFT" :rows="4" value="现场危险，停止救援！紧急撤离至安全区域！"
                                resize="none" />
                            <el-button type="primary" class="send-btn">发送</el-button>
                        </div>
                    </div>
                </el-col>
            </el-row>
        </div>
    </div>
</template>
<script setup name="DeviceControl" lang="ts">
import { ref } from 'vue';

const brightness = ref(50);
// 定义灯光模式的类型接口
interface LightMode {
    id: string;
    name: string;
    icon: string;
    activeIcon: string;
    active: boolean;
    switchStatus: boolean;
}
// 导入图片资源（确保路径正确）
import strongLightDefault from '@/assets/images/strong-light.png';
import strongLightActive from '@/assets/images/strong-light_HL.png';
import weakLightDefault from '@/assets/images/weak-light.png';
import weakLightActive from '@/assets/images/weak-light_HL.png';
import strobeLightDefault from '@/assets/images/strobe-light.png';
import strobeLightActive from '@/assets/images/strobe-light_HL.png';
import floodLightDefault from '@/assets/images/flood-light.png';
import floodLightActive from '@/assets/images/flood-light_HL.png';
import laserLightDefault from '@/assets/images/laser-light.png';
import laserLightActive from '@/assets/images/laser-light_HL.png';

// 灯光模式数据
// 灯光模式数据（引用导入的图片）
const lightModes = ref<LightMode[]>([
    {
        id: 'strong',
        name: '强光',
        icon: strongLightDefault, // 直接使用导入的变量
        activeIcon: strongLightActive,
        active: true,
        switchStatus: true
    },
    {
        id: 'weak',
        name: '弱光',
        icon: weakLightDefault,
        activeIcon: weakLightActive,
        active: false,
        switchStatus: false
    },
    {
        id: 'strobe',
        name: '爆闪',
        icon: strobeLightDefault,
        activeIcon: strobeLightActive,
        active: false,
        switchStatus: false
    },
    {
        id: 'flood',
        name: '泛光',
        icon: floodLightDefault,
        activeIcon: floodLightActive,
        active: false,
        switchStatus: false
    },
    {
        id: 'laser',
        name: '激光',
        icon: laserLightDefault,
        activeIcon: laserLightActive,
        active: false,
        switchStatus: false
    }
]);
// 当前选中的模式
const currentMode = computed(() => {
    return lightModes.value.find(mode => mode.active);
});
// 处理模式点击事件
const handleModeClick = (modeId: string) => {
    // 重置所有模式状态
    lightModes.value.forEach(mode => {
        const isTargetMode = mode.id === modeId;
        mode.active = isTargetMode;
        mode.switchStatus = isTargetMode;
    });

    // 可以在这里添加模式切换的业务逻辑
    console.log(`切换到${lightModes.value.find(m => m.id === modeId)?.name}模式`);
};

// 监听开关状态变化
lightModes.value.forEach(mode => {
    watch(() => mode.switchStatus, (newVal) => {
        if (newVal) {
            // 如果打开当前开关，关闭其他所有开关
            handleModeClick(mode.id);
        } else {
            // 如果关闭当前开关
            mode.active = false;
        }
    });
});
</script>
<style lang="scss" scoped>
.device-page {
    .header-bar {
        border-radius: 8px;
        background: linear-gradient(135deg, #3400e7, #009bff);
        color: white;
        padding: 20px;
        margin-bottom: 20px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-weight: 600;

        .device-status {
            .online {
                color: #00ff00;
            }
        }
    }

    .content-wrapper {
        .content-row {
            margin-bottom: 10px;
        }

        .content-card {
            border-radius: 8px;
            box-shadow: 0 2px 12px rgba(0, 34, 96, 0.1);
            background: white;
            padding: 0px 20px 50px;
            border: 1px solid #ebeef5;
            height: 100%;
            position: relative;
        }

        .content-card_gps {
            border-radius: 8px;
            box-shadow: 0 2px 12px rgba(0, 34, 96, 0.1);
            background: white;
            padding: 0px 20px 50px;
            border: 1px solid #ebeef5;
            height: 78%;

        }

        .section-title {
            font-size: 16px;
            font-weight: 600;
            margin-bottom: 20px;
            color: #303133;
        }

        .light-mode {
            display: flex;

            justify-content: space-between;
        }
          .lacatin_gps {
                height: 70px;
                border-radius: 4px;
                background: rgba(247, 248, 252, 1);
                display: inline-block;
                width: 400px;
                padding: 10px;
            }

        .mode-card {
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 15px;
            border: 1px solid #dcdfe6;
            border-radius: 8px;
            width: 125px;
            cursor: pointer;
            transition: all 0.3s ease;

            &.active {
                border-color: #409eff;
                background-color: rgba(64, 158, 255, 0.05);
            }

            .mode-icon {
                width: 48px;
                margin-bottom: 10px;
                transition: all 0.3s ease;
                object-fit: scale-down;
            }

            .mode-name {
                font-size: 14px;
                margin-bottom: 12px;
                color: #606266;
            }

            .el-switch {
                --el-switch-on-color: #409eff;
                --el-switch-off-color: #dcdfe6;
            }

          
        }

        .brightness-alarm {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 10px;

            .brightness-control {
                display: flex;
                align-items: center;
                gap: 10px;
                border-radius: 39px;
                box-shadow: 0px 0px 6px 0px rgba(0, 34, 96, 0.1);
                background: rgba(255, 255, 255, 1);
                width: 70%;
                height: 54px;
                padding: 10px 20px;

                .brightness-label {
                    font-size: 14px;
                    color: #606266;
                    min-width: 70px;
                }

                .brightness-value {
                    font-size: 14px;
                    color: #409eff;
                    font-weight: 500;
                }

                .save-btn {
                    padding: 6px 20px;
                    border-radius: 29px;
                    background: rgba(2, 124, 251, 1);
                    border: none
                }

                .inputTFT {
                    width: 130px;
                    height: 40px;
                }
            }

            .alarm-btn {
                background-color: rgba(224, 52, 52, 1);
                border-color: rgba(224, 52, 52, 1);
                padding: 8px 20px;
                border-radius: 27px;
            }
        }

        .location-info {
            .location-item {
                display: flex;
                align-items: center;
                margin-bottom: 15px;
                font-size: 14px;
                color: #606266;

                .location-icon {
                    margin-right: 8px;
                    font-weight: bold;
                    color: #409eff;
                }

                .view-btn {
                    margin: 0 8px;
                    padding: 0;
                    font-size: 13px;
                }
            }
        }

        .form-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 15px;
            margin-bottom: 15px;
            text-align: right;

            .form-item {
                display: flex;
                align-items: center;

                .form-label {
                    min-width: 35px;
                    font-size: 14px;
                    color: #606266;
                    margin-right: 10px;
                }

                .el-input {
                    flex: 1;
                }
            }

            .register-btn {
                grid-column: 1 / 3;
                justify-self: start;
                padding: 6px 20px;
                position: absolute;
                right: 19px;
                bottom: 30px;
                border-radius: 29px;
                background: rgba(2, 124, 251, 1);
                border: none
            }
        }

        .message-content {
            display: flex;
            flex-direction: column;
            gap: 10px;

            .el-textarea {
                border: 1px solid rgba(29, 111, 255, 1);
                border-radius: 4px;
                background: rgba(247, 248, 252, 1);
                border-radius: 6px;
                padding: 10px;
            }

            .el-textarea__inner {
                background: rgba(247, 248, 252, 1);
            }

            .send-btn {
                align-self: flex-end;
                padding: 10px 20px;
                border-radius: 29px;
                background: rgba(2, 124, 251, 1);
                border: none
            }
        }

        .upload-area {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100px;
            border: 1px dashed #dcdfe6;
            border-radius: 6px;
            cursor: pointer;
        }

        .video-input {
            display: flex;
            gap: 10px;
            align-items: center;

            .el-input {
                flex: 1;
            }

            .save-video-btn {
                padding: 6px 12px;
            }
        }
    }

    // 响应式调整
    @media (max-width: 768px) {
        .header-bar {
            flex-direction: column;
            align-items: flex-start;
            gap: 16px;
        }

        .form-grid {
            grid-template-columns: 1fr;
        }

        .form-grid .register-btn {
            grid-column: 1;
        }

        .light-mode .mode-group {
            gap: 10px;
        }

        .light-mode .mode-item {
            width: 60px;
        }

        .light-mode .mode-icon {
            width: 30px;
            height: 30px;
        }
    }
}
</style>