<!-- src/components/device/DeviceManagement.vue -->
<template>
    <div class="device-management">
        <template v-if="!editingDevice">
            <!-- 左侧导航栏 -->
            <div class="device-nav">
                <dv-border-box-12>
                    <div class="nav-header">
                        <div class="nav-title">分组与场景管理</div>
                    </div>
                    <div class="nav-actions">
                        <div class="all-scenes" :class="{ active: activeScene === 'all' }" @click="selectScene('all')">
                            全部
                        </div>
                        <div class="add-scene" @click="showAddSceneDialog">
                            <svg viewBox="0 0 30 30" width="40" height="40">
                                <path fill="#ffffff" d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" />
                            </svg>
                        </div>
                    </div>
                    <div class="scene-list">
                        <div v-for="scene in scenes" :key="scene.id" class="scene-item"
                            :class="{ active: activeScene === scene.id }" @click="selectScene(scene.id)">
                            <div class="scene-name">{{ scene.name }}</div>
                            <div class="scene-indicator" v-if="activeScene === scene.id"></div>
                        </div>
                    </div>
                </dv-border-box-12>
            </div>

            <!-- 右侧设备列表 -->
            <div class="device-list">
                <dv-border-box-8>
                    <!-- 顶部操作栏 -->
                    <div class="device-header">
                        <div class="search-box">
                            <input type="text" placeholder="搜索设备名称、IP或分组" v-model="searchText" />
                            <div class="search-icon">
                                <svg viewBox="0 0 24 24" width="18" height="18">
                                    <path fill="currentColor"
                                        d="M15.5 14h-.79l-.28-.27a6.5 6.5 0 0 0 1.48-5.34c-.47-2.78-2.79-5-5.59-5.34a6.505 6.505 0 0 0-7.27 7.27c.34 2.8 2.56 5.12 5.34 5.59a6.5 6.5 0 0 0 5.34-1.48l.27.28v.79l4.25 4.25c.41.41 1.08.41 1.49 0 .41-.41.41-1.08 0-1.49L15.5 14zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z" />
                                </svg>
                            </div>
                        </div>
                        <button class="add-device-btn" @click="showAddDeviceDialog">
                            <svg viewBox="0 0 24 24" width="16" height="16">
                                <path fill="currentColor" d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" />
                            </svg>
                            接入视频设备
                        </button>
                    </div>

                    <!-- 设备表格 -->
                    <div class="device-table-container">
                        <table class="device-table">
                            <thead>
                                <tr>
                                    <th>分组</th>
                                    <th>设备ID</th>
                                    <th>IP地址</th>
                                    <th>状态</th>
                                    <th>算法任务</th>
                                    <th>算法状态</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody>
                                <template v-for="device in filteredDevices" :key="device.id">
                                    <tr v-for="(algorithm, index) in device.algorithms" :key="index">
                                        <td v-if="index === 0" :rowspan="device.algorithms.length">{{ device.group }}
                                        </td>
                                        <td v-if="index === 0" :rowspan="device.algorithms.length">{{ device.id }}</td>
                                        <td v-if="index === 0" :rowspan="device.algorithms.length">{{ device.ip }}</td>
                                        <td v-if="index === 0" :rowspan="device.algorithms.length">
                                            <span class="status-badge" :class="device.status">
                                                {{ device.status === 'online' ? '在线' : '离线' }}
                                            </span>
                                        </td>
                                        <td>{{ algorithm.name }}</td>
                                        <td>
                                            <span class="algorithm-status" :class="{ enabled: algorithm.enabled }">
                                                {{ algorithm.enabled ? '启用' : '停用' }}
                                            </span>
                                        </td>
                                        <td v-if="index === 0" :rowspan="device.algorithms.length">
                                            <button class="action-btn view-btn" @click="viewDevice(device)">
                                                <svg viewBox="0 0 24 24" width="14" height="14">
                                                    <path fill="currentColor"
                                                        d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z" />
                                                </svg>
                                            </button>
                                            <button class="action-btn edit-btn" @click="editDevice(device)">
                                                <svg viewBox="0 0 24 24" width="14" height="14">
                                                    <path fill="currentColor"
                                                        d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z" />
                                                </svg>
                                            </button>
                                            <button class="action-btn delete-btn" @click="deleteDevice(device)">
                                                <svg viewBox="0 0 24 24" width="14" height="14">
                                                    <path fill="currentColor"
                                                        d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z" />
                                                </svg>
                                            </button>
                                        </td>
                                    </tr>
                                </template>
                            </tbody>
                        </table>
                    </div>

                </dv-border-box-8>
            </div>

            <!-- 添加场景对话框 -->
            <el-dialog v-model="showSceneDialog" title="添加新场景" width="30%"
                :class="['custom-dialog', 'add-scene-dialog']">
                <div class="dialog-content">
                    <div class="form-item">
                        <label>场景名称</label>
                        <el-input v-model="newScene.name" placeholder="例如：XXXXX场景007" />
                    </div>
                </div>
                <template #footer>
                    <el-button class="cancel-btn" @click="showSceneDialog = false">取消</el-button>
                    <el-button class="confirm-btn" type="primary" @click="confirmAddScene">确认添加</el-button>
                </template>
            </el-dialog>
            <!-- 添加设备对话框 -->
            <AddDeviceDialog v-model:visible="showAddDialog" :scenes="scenes" @save="handleSaveDevice" />
        </template>
        <!-- 当处于编辑状态时显示事件编辑界面 -->
        <EventEditor v-else :device-data="editingDevice" @close="cancelEdit" @save="saveEvent" />
    </div>

</template>

<script setup>
import { ref, computed } from 'vue'
import AddDeviceDialog from './AddDeviceDialog.vue'
import EventEditor from './EventEditor.vue'
const searchText = ref('')
const activeScene = ref('all')
const showSceneDialog = ref(false)
const showAddDialog = ref(false)

const editingDevice = ref(null)

const newScene = ref({
    name: '',
    description: ''
})

// 场景数据
const scenes = ref([
    { id: 'scene-001', name: 'XXXXX场景001' },
    { id: 'scene-002', name: 'XXXXX场景002' },
    { id: 'scene-003', name: 'XXXXX场景003' },
    { id: 'scene-004', name: 'XXXXX场景004' },
    { id: 'scene-005', name: 'XXXXX场景005' },
    { id: 'scene-006', name: 'XXXXX场景006' }
])

// 模拟设备数据
const devices = ref([
    {
        id: 'VIDEO_214IOISHEK454',
        group: '港口区',
        ip: '192.268.0.1',
        status: 'online',
        algorithms: [
            { name: '目标检测（如靠泊、登轮）', enabled: true },
            { name: '行为识别（如玩手机、离岗）', enabled: true },
            { name: '目标检测（计数）', enabled: false }
        ]
    },
    {
        id: 'CAM_002',
        group: 'XXXXX场景002',
        ip: '192.168.1.102',
        status: 'online',
        algorithms: [
            { name: '越界检测', enabled: true },
            { name: '车辆识别', enabled: false }
        ]
    },
    {
        id: 'CAM_003',
        group: 'XXXXX场景003',
        ip: '192.168.1.103',
        status: 'offline',
        algorithms: [
            { name: '货物识别', enabled: false }
        ]
    }
])

// 过滤设备
const filteredDevices = computed(() => {
    let result = devices.value
    if (activeScene.value && activeScene.value !== 'all') {
        const activeSceneName = scenes.value.find(s => s.id === activeScene.value)?.name || ''
        result = result.filter(device => device.group === activeSceneName)
    }
    if (searchText.value) {
        const search = searchText.value.toLowerCase()
        result = result.filter(device =>
            device.id.toLowerCase().includes(search) ||
            device.ip.toLowerCase().includes(search) ||
            device.group.toLowerCase().includes(search) ||
            device.algorithm.toLowerCase().includes(search)
        )
    }
    return result
})

// 选择场景
const selectScene = (sceneId) => {
    activeScene.value = sceneId
}

// 显示添加场景对话框
const showAddSceneDialog = () => {
    newScene.value = {
        name: '',
        description: ''
    }
    showSceneDialog.value = true
}

// 确认添加场景
const confirmAddScene = () => {
    const newId = `scene-${String(scenes.value.length + 1).padStart(3, '0')}`
    scenes.value.push({
        id: newId,
        name: newScene.value.name || `XXXXX场景${String(scenes.value.length + 1).padStart(3, '0')}`,
        description: newScene.value.description
    })
    showSceneDialog.value = false
}

// 显示添加设备对话框
const showAddDeviceDialog = () => {
    showAddDialog.value = true
}

// 保存设备
const handleSaveDevice = (deviceData) => {
    devices.value.push({
        id: deviceData.id,
        group: scenes.value.find(s => s.id === deviceData.group)?.name || '',
        ip: deviceData.ip,
        status: 'online',
        algorithms: []
    })
}

// 操作方法
const viewDevice = (device) => {
    console.log('查看设备:', device)
}

const editDevice = (device) => {
    editingDevice.value = {
        ...device,
        eventName: device.eventName || '',
        ip: device.ip || '192.168.5.44', // 示例IP
        status: device.status || '在线'
    }
}

const cancelEdit = () => {
    editingDevice.value = null
}

const saveEvent = (eventData) => {
    // 更新设备数据
    const deviceIndex = devices.value.findIndex(d => d.id === editingDevice.value.id)
    if (deviceIndex !== -1) {
        devices.value[deviceIndex] = {
            ...devices.value[deviceIndex],
            ...eventData
        }
    }
    editingDevice.value = null
}

const deleteDevice = (device) => {
    console.log('删除设备:', device)
    const index = devices.value.findIndex(d => d.id === device.id)
    if (index !== -1) {
        devices.value.splice(index, 1)
    }
}
</script>

<style scoped>
.device-management {
    display: flex;
    height: 85vh;
    background: #0a1d3c;
}

/* 左侧导航栏 */
.device-nav {
    width: 300px;
    padding: 15px;

    .nav-header {
        padding: 15px 0;
        display: flex;
        align-items: center;
        justify-content: center;

        .nav-title {
            font-size: 16px;
            color: #7cd0ff;
            font-weight: 500;
        }
    }

    .nav-actions {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        border: 1px solid #09D2FF;
        padding: 5px 0;
        width: 90%;
        margin: 0 auto;

        .all-scenes {
            color: rgba(255, 255, 255, 0.8);
            cursor: pointer;
            padding: 4px 12px;
            border-radius: 4px;
            font-size: 14px;
            transition: all 0.3s;
        }

        .add-scene {
            width: 30px;
            height: 30px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            border-radius: 4px;
            transition: all 0.3s;
            color: rgba(255, 255, 255, 0.8);

            &:hover {
                background: rgba(124, 208, 255, 0.1);
            }
        }
    }

    .scene-list {
        padding: 15px 0;
        width: 90%;
        margin: 0 auto;

        .scene-item {
            position: relative;
            padding: 12px 15px;
            margin: 8px 0;
            color: rgba(255, 255, 255, 0.8);
            cursor: pointer;
            border-radius: 4px;
            transition: all 0.3s;
            display: flex;
            justify-content: space-between;
            align-items: center;

            &:hover {
                background: rgba(124, 208, 255, 0.1);
            }

            &.active {
                background: rgba(124, 208, 255, 0.2);
                color: white;

                .scene-indicator {
                    position: absolute;
                    right: -15px;
                    top: 50%;
                    transform: translateY(-50%);
                    width: 4px;
                    height: 16px;
                    background-color: #FFD700;
                    border-radius: 2px;
                }
            }

            .scene-name {
                flex: 1;
            }
        }
    }

    .scene-tip {
        margin-top: 20px;
        padding: 15px 10px;
        border-top: 1px dashed rgba(124, 208, 255, 0.2);

        .tip-content {
            display: flex;
            align-items: center;
            gap: 10px;
            color: #FFD700;
            font-size: 14px;
            padding: 10px;
            border-radius: 4px;
            background: rgba(255, 215, 0, 0.1);

            .tip-text {
                flex: 1;

                .tip-signature {
                    margin-top: 6px;
                    font-size: 12px;
                    color: rgba(255, 255, 255, 0.6);
                }
            }
        }
    }
}

/* 右侧设备列表 */
.device-list {
    flex: 1;
    padding: 15px;

    .device-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;
        padding: 0 15px;
    }

    .search-box {
        position: relative;
        margin-top: 15px;
        width: 300px;

        input {
            width: 100%;
            padding: 8px 35px 8px 15px;
            background: rgba(16, 42, 87, 0.6);
            border: 1px solid #7cd0ff;
            border-radius: 4px;
            color: white;
            font-size: 14px;

            &::placeholder {
                color: rgba(124, 208, 255, 0.5);
            }
        }

        .search-icon {
            position: absolute;
            right: 10px;
            top: 55%;
            transform: translateY(-50%);
            color: #7cd0ff;
            pointer-events: none;
        }
    }

    .add-device-btn {
        display: flex;
        align-items: center;
        gap: 6px;
        padding: 8px 15px;
        background: linear-gradient(90deg, #3a7bd5, #00d2ff);
        color: white;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        transition: all 0.3s;
        margin-top: 15px;

        &:hover {
            opacity: 0.9;
        }
    }

    .device-table-container {
        height: calc(100vh - 150px);
        overflow-y: auto;
        scrollbar-width: none;

        &::-webkit-scrollbar {
            display: none;
        }
    }

    .device-table {
        width: 98%;
        color: white;
        margin: 0 auto;
        border: 1px solid #7cd0ff;
        font-size: 14px;

        th,
        td {
            padding: 6px 10px;
            text-align: center;
            border-bottom: 1px solid rgba(124, 208, 255, 0.2);
            border-right: 1px solid rgba(124, 208, 255, 0.3);
        }

        td {
            vertical-align: middle;
        }

        th {
            background-color: rgba(16, 42, 87, 0.8);
            font-weight: 500;
        }

        tr:hover {
            background-color: rgba(124, 208, 255, 0.05);
        }

        .algorithm-status {
            display: inline-block;
            padding: 4px 10px;
            border-radius: 4px;
            font-size: 12px;

            &.enabled {
                background-color: rgba(0, 255, 0, 0.2);
                color: #00ff00;
            }

            &:not(.enabled) {
                background-color: rgba(255, 0, 0, 0.2);
                color: #ff4d4f;
            }
        }
    }
}

.status-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 12px;

    &.online {
        background-color: #00ffc0;
        color: #0a1d3c;
    }

    &.offline {
        background-color: #ff4d4f;
    }
}

.action-btn {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 4px;
    margin-right: 6px;
    cursor: pointer;
    transition: all 0.3s;

    &.view-btn {
        background-color: rgba(124, 208, 255, 0.2);
        color: #7cd0ff;

        &:hover {
            background-color: rgba(124, 208, 255, 0.4);
        }
    }

    &.edit-btn {
        background-color: rgba(255, 193, 7, 0.2);
        color: #ffc107;

        &:hover {
            background-color: rgba(255, 193, 7, 0.4);
        }
    }

    &.delete-btn {
        background-color: rgba(255, 77, 79, 0.2);
        color: #ff4d4f;

        &:hover {
            background-color: rgba(255, 77, 79, 0.4);
        }
    }
}

/* 对话框样式 */
:deep(.custom-dialog.add-scene-dialog) {
    background: #0a1d3c;
    border: 1px solid #1a5fb4;
    border-radius: 4px;

    .el-dialog__header {
        border-bottom: 1px solid rgba(124, 208, 255, 0.2);
        padding: 15px 20px;

        .el-dialog__title {
            color: white;
            font-size: 16px;
            font-weight: 500;
        }

        .el-dialog__headerbtn {
            color: white;

            &:hover {
                color: white;
            }
        }
    }

    .el-dialog__body {
        padding: 20px;

        .form-item {
            margin-bottom: 20px;

            label {
                display: block;
                margin-bottom: 8px;
                color: #7cd0ff;
            }
        }
    }

    .el-dialog__footer {
        border-top: 1px solid rgba(124, 208, 255, 0.2);
        padding: 10px 20px;
        text-align: right;

        .el-button.cancel-btn {
            background: transparent;
            border-color: #7cd0ff;
            color: #7cd0ff;

            &:hover {
                background: rgba(124, 208, 255, 0.1);
            }
        }

        .el-button.confirm-btn {
            background: #00d2ff;
            border-color: #00d2ff;
            color: white;

            &:hover {
                opacity: 0.9;
            }
        }
    }
}
</style>