<!-- src/components/alarm/AlarmManagement.vue -->
<template>
    <div class="alarm-management">
        <!-- 左侧P0紧急告警 -->
        <div class="alarm-column p0-alarms">
            <dv-border-box-12>
                <div class="column-header">
                    <span class="level-tag p0">P0</span>
                    <span class="column-title">紧急告警</span>
                </div>
                <div class="alarm-list">
                    <AlarmItem v-for="alarm in p0Alarms" :key="alarm.id" :alarm="alarm" @click="selectAlarm(alarm)" />
                </div>
            </dv-border-box-12>
        </div>
        <!-- 中间告警详情 -->
        <div class="alarm-detail">
            <div class="center-top">
                <dv-border-box-12>
                    <div class="detail-container">
                        <div class="video-container">
                            <video autoplay loop muted>
                                <source :src="selectedAlarm.videoSrc" type="video/mp4">
                            </video>
                        </div>
                        <div class="alarm-info">
                            <div class="info-item">
                                <span class="info-label">事件名称：</span>
                                <span class="info-value">{{ selectedAlarm.name }}</span>
                                <span class="info-label">时间：</span>
                                <span class="info-value">{{ selectedAlarm.time }}</span>
                            </div>
                            <div class="info-item">
                                <span class="info-label">告警等级：</span>
                                <span class="level-tag p0">P0</span>
                            </div>
                            <div class="info-item">
                                <span class="info-label">详细信息：</span>
                                <span class="info-label">1231312312312321312312</span>
                            </div>
                            <button class="confirm-btn" @click="openConfirmDialog">人员二次确认</button>
                        </div>
                    </div>
                </dv-border-box-12>
            </div>

            <div class="center-bottom">
                <div class="bottom-column">
                    <dv-border-box-12>
                        <div class="column-header">
                            <span class="level-tag p1">P1</span>
                            <span class="column-title">高级告警</span>
                        </div>
                        <div class="alarm-list">
                            <AlarmItem v-for="alarm in p1Alarms" :key="alarm.id" :alarm="alarm"
                                @click="selectAlarm(alarm)" />
                        </div>
                    </dv-border-box-12>
                </div>

                <div class="bottom-column">
                    <dv-border-box-12>
                        <div class="column-header">
                            <span class="level-tag p2">P2</span>
                            <span class="column-title">一般告警</span>
                        </div>
                        <div class="alarm-list">
                            <AlarmItem v-for="alarm in p2Alarms" :key="alarm.id" :alarm="alarm"
                                @click="selectAlarm(alarm)" />
                        </div>
                    </dv-border-box-12>
                </div>
            </div>
        </div>

        <!-- 右侧P3提示信息 -->
        <div class="alarm-column p3-notices">
            <dv-border-box-12>
                <div class="column-header">
                    <span class="level-tag p3">P3</span>
                    <span class="column-title">提示信息</span>
                </div>
                <div class="notice-list">
                    <NoticeItem v-for="notice in p3Notices" :key="notice.id" :notice="notice" />
                </div>
            </dv-border-box-12>
        </div>
    </div>

    <div v-if="showConfirmDialog" class="confirm-dialog-overlay">
        <div class="confirm-dialog">
            <div class="dialog-header">告警二次确认</div>
            <div class="dialog-content">
                <div class="input-group">
                    <span class="input-label">唯一ID：</span>
                    <input type="text" v-model="uniqueId" placeholder="请输入" class="id-input" />
                </div>
            </div>
            <div class="dialog-footer">
                <button class="cancel-btn" @click="closeDialog">取消</button>
                <button class="confirm-btn" @click="handleConfirm">保存应用设置</button>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue'
import AlarmItem from './AlarmItem.vue'
import NoticeItem from './NoticeItem.vue'
const showConfirmDialog = ref(false)
const uniqueId = ref('')
const selectedAlarm = ref({
    name: '',
    time: '',
    confirmed: true,
    videoSrc: ''
})

const p0Alarms = ref([
    {
        id: 1,
        name: '非法登轮事件识别',
        time: '2025/10/15 15:48',
        hasNew: true
    },
    {
        id: 2,
        name: '暴力行为识别',
        time: '2025/10/15 16:12',
        hasNew: true
    },
    {
        id: 3,
        name: '执法岗长时间无人值守',
        time: '2025/10/15 16:30',
        hasNew: false
    },
    {
        id: 4,
        name: '黑名单人员出现在控制区域',
        time: '2025/10/15 17:05',
        hasNew: true
    },
    {
        id: 5,
        name: '越界穿越警戒线',
        time: '2025/10/15 17:22',
        hasNew: false
    },
    {
        id: 6,
        name: '重点物品丢失检测',
        time: '2025/10/15 17:45',
        hasNew: true
    },
    {
        id: 7,
        name: '电脑屏幕长时间未锁定+无人状态',
        time: '2025/10/15 18:03',
        hasNew: false
    },
    {
        id: 8,
        name: '可疑行为',
        time: '2025/10/15 18:20',
        hasNew: true
    }
])
const p1Alarms = ref([
    {
        id: 1,
        name: '员工办公室内长时间离岗',
        time: '2025/10/15 09:30',
        hasNew: true
    },
    {
        id: 2,
        name: '电脑屏幕未锁定+短时无人',
        time: '2025/10/15 10:15',
        hasNew: false
    },
    // 其他P1告警...
])

const p2Alarms = ref([
    {
        id: 1,
        name: '会议期间频繁查看手机',
        time: '2025/10/15 11:20',
        hasNew: true
    },
    {
        id: 2,
        name: '门口区域逗留/张望行为',
        time: '2025/10/15 12:45',
        hasNew: false
    },
    // 其他P2告警...
])
const p3Notices = ref([
    {
        id: 1,
        content: '摄像头恢复在线',
    },
    {
        id: 2,
        content: '摄像头恢复在线',
    },
    {
        id: 3,
        content: '摄像头恢复在线',
    },
    {
        id: 4,
        content: '摄像头恢复在线',
    },
    // 其他P3通知...
])

const selectAlarm = (alarm) => {
    selectedAlarm.value = alarm
    // 标记为已读
    alarm.hasNew = false
}
const openConfirmDialog = () => {
    showConfirmDialog.value = true
}

const closeDialog = () => {
    showConfirmDialog.value = false
    uniqueId.value = ''
}

const handleConfirm = () => {
    // 处理确认逻辑
    console.log('确认ID:', uniqueId.value)
    closeDialog()
}

// 修改confirm-btn的点击事件
const confirmBtn = document.querySelector('.confirm-btn')
if (confirmBtn) {
    confirmBtn.addEventListener('click', openConfirmDialog)
}
</script>

<style lang="scss">
.alarm-management {
    display: flex;
    height: 84vh;
    background: #0a1d3c;
}

.alarm-column {
    width: 25%;
    padding: 15px;
    overflow-y: auto;
    scrollbar-width: none;

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

.p0-alarms {
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.p0-alarms .alarm-list {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.alarm-detail {
    flex: 1;
    display: flex;
    flex-direction: column;

    .center-top {
        padding: 20px;
        height: 35vh;

        .detail-container {
            display: flex;
            align-items: center;
            height: 100%;
            padding: 20px;

            .video-container {
                width: 40%;
                height: 100%;
                background: #000;
                border-radius: 4px;

                video {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                }
            }

            .alarm-info {
                position: relative; // 添加相对定位
                width: 60%;
                padding: 20px;
                border-radius: 4px;
                height: 100%;
                display: flex;
                flex-direction: column;

                .info-item {
                    display: flex;
                    align-items: center;
                    margin-bottom: 10px;
                    font-size: 15px;

                    .info-label {
                        color: rgba(124, 208, 255, 0.8);
                        width: 100px;
                        text-align: right;
                        margin-right: 15px;
                    }

                    .info-value {
                        color: white;
                        flex: 1;
                    }

                    .level-tag.p0 {
                        padding: 4px 12px;
                        background: #ff4d4f;
                        border-radius: 4px;
                        font-weight: bold;
                    }
                }

                .confirm-btn {
                    position: absolute;
                    bottom: 20px; // 距离底部20px
                    left: 50%; // 水平居中
                    transform: translateX(-50%); // 精确居中
                    padding: 8px 20px;
                    background: rgba(124, 208, 255, 0.2);
                    border: 1px solid #7cd0ff;
                    border-radius: 4px;
                    color: #7cd0ff;
                    cursor: pointer;
                    transition: all 0.3s;

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

    .center-bottom {
        height: 48vh;
        display: flex;
        gap: 15px;
        padding: 0 20px 20px;

        .bottom-column {
            flex: 1;
            height: 100%;



            .alarm-list {
                height: calc(100% - 50px);
                overflow-y: auto;
                scrollbar-width: none;
                display: flex;
                flex-direction: column;
                align-items: center;

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

}

.column-header {
    width: 95%;
    display: flex;
    flex-direction: row;
    padding: 20px;
}

.column-title {
    font-size: 16px;
    color: #7cd0ff;
    margin-left: 10px;
}

.level-tag {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: bold;

    &.p0 {
        background: #ff4d4f;
        color: white;
    }

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

    &.p1 {
        background: #FFA500; // 橙色
        color: white;
    }

    &.p2 {
        background: #FFFF00; // 黄色
        color: #0a1d3c;
    }
}

.notice-list {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

// 在style中添加
.confirm-dialog-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.confirm-dialog {
    width: 400px;
    background: #0a1d3c;
    border-radius: 4px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    overflow: hidden;

    .dialog-header {
        padding: 15px 20px;
        font-size: 18px;
        color: white;
        background: rgba(16, 42, 87, 0.8);
        border-bottom: 1px solid rgba(124, 208, 255, 0.2);
    }

    .dialog-content {
        padding: 20px;

        .input-group {
            display: flex;
            align-items: center;

            .input-label {
                color: white;
                width: 80px;
                text-align: right;
                margin-right: 15px;
            }

            .id-input {
                flex: 1;
                padding: 8px 12px;
                background: rgba(16, 42, 87, 0.6);
                border: 1px solid #7cd0ff;
                border-radius: 4px;
                color: white;

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

    .dialog-footer {
        display: flex;
        justify-content: flex-end;
        padding: 15px 20px;
        border-top: 1px solid rgba(124, 208, 255, 0.2);

        button {
            padding: 8px 20px;
            border-radius: 4px;
            cursor: pointer;
            transition: all 0.3s;

            &.cancel-btn {
                background: transparent;
                border: 1px solid #7cd0ff;
                color: #7cd0ff;
                margin-right: 15px;

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

            &.confirm-btn {
                background: #03051a;
                border: 1px solid #00ffc0;
                color: white;
                font-weight: bold;

                &:hover {
                    background: #00e6ac;
                }
            }
        }
    }
}
</style>