<template>
    <div class="event-editor-container">
        <div class="editor-content">
            <!-- 左侧视频区域 -->
            <div class="video-section">
                <!-- 上部视频预览区域 (55%) -->
                <div class="video-preview">
                    <div class="video-placeholder">
                        <svg viewBox="0 0 24 24" width="60" height="60">
                            <path fill="#7cd0ff"
                                d="M17 10.5V7c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h12c.55 0 1-.45 1-1v-3.5l4 4v-11l-4 4z" />
                        </svg>
                        <p>视频区域</p>
                    </div>

                    <div class="video-actions">
                        <el-button class="upload-btn">
                            <svg viewBox="0 0 24 24" width="16" height="16">
                                <path fill="currentColor" d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" />
                            </svg>
                            上传模拟视频
                        </el-button>
                        <el-button class="clear-btn">
                            <svg viewBox="0 0 24 24" width="16" height="16">
                                <path fill="currentColor" d="M19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z" />
                            </svg>
                            清空模拟视频
                        </el-button>
                    </div>
                </div>

                <!-- 下部设备信息区域 (45%) -->
                <div class="device-info">
                    <h4>设备默认信息显示区域</h4>
                    <div class="info-item">
                        <span class="label">分组：</span>
                        <span class="value">港口区</span>
                    </div>
                    <div class="info-item">
                        <span class="label">摄像头ID：</span>
                        <span class="value">VIDEO_214IOISHEK454</span>
                    </div>
                    <div class="info-item">
                        <span class="label">设备状态：</span>
                        <span class="value">在线</span>
                    </div>
                    <div class="info-item">
                        <span class="label">IP地址：</span>
                        <span class="value">192.168.5.44</span>
                    </div>
                </div>
            </div>

            <!-- 右侧事件设置区域 -->
            <div class="event-section">
                <!-- 事件1 -->
                <div class="event-group">
                    <div class="event-header">
                        <h4>事件绑定设置</h4>
                        <el-button class="add-event-btn">新增事件</el-button>
                    </div>

                    <div class="form-item">
                        <label>事件名称：</label>
                        <el-input v-model="eventData.name" placeholder="例如：船舶登轮" />
                    </div>

                    <div class="form-item">
                        <label>电子围栏区域：</label>
                        <el-select v-model="eventData.area" placeholder="例如：整个监控画面">
                            <el-option label="整个监控画面" value="整个监控画面" />
                            <el-option label="自定义画面" value="自定义画面" />
                        </el-select>
                    </div>

                    <div class="form-item">
                        <label>告警等级：</label>
                        <el-select v-model="eventData.level" placeholder="例如：P0紧急告警">
                            <el-option label="P0紧急告警" value="P0" />
                            <el-option label="P1重要告警" value="P1" />
                            <el-option label="P2一般告警" value="P2" />
                        </el-select>
                    </div>

                    <div class="form-item">
                        <label>电子围栏名称：</label>
                        <el-input v-model="eventData.fenceName" placeholder="请输入" />
                    </div>

                    <div class="form-item">
                        <label>算法绑定：</label>
                        <el-select v-model="eventData.algorithm" placeholder="例如：算法XXX001">
                            <el-option v-for="alg in algorithms" :key="alg.id" :label="alg.name" :value="alg.id" />
                        </el-select>
                    </div>

                    <div class="form-hint">
                        <p>触发算法条件待定</p>
                    </div>
                </div>

                <!-- 底部操作按钮 -->
                <div class="editor-footer">
                    <el-button class="preview-btn">
                        <svg viewBox="0 0 24 24" width="16" height="16">
                            <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>
                        查看模拟效果
                    </el-button>
                    <el-button class="save-btn" @click="saveEvent">
                        保存应用设置
                    </el-button>
                    <el-button class="cancel-btn" @click="closeEditor">
                        返回设备列表
                    </el-button>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue'

const props = defineProps({
    deviceData: {
        type: Object,
        required: true
    }
})

const emit = defineEmits(['close', 'save'])

const algorithms = ref([
    { id: 'alg-001', name: '算法XXX001' },
    { id: 'alg-002', name: '算法XXX002' },
    { id: 'alg-003', name: '算法XXX003' }
])

const eventData = ref({
    name: props.deviceData.eventName || '船舶登轮',
    area: '整个监控画面',
    level: 'P0',
    fenceName: '',
    algorithm: 'alg-001',
    crossAreaName: '',
    crossAlgorithm: 'alg-001'
})

const closeEditor = () => {
    emit('close')
}

const saveEvent = () => {
    emit('save', eventData.value)
}
</script>

<style scoped>
.event-editor-container {
    height: 100vh;
    background: #0a1d3c;
    padding: 20px;
    width: 100vw;
}

.editor-content {
    display: flex;
    height: calc(100% - 40px);
    /* 减去上下padding */
    width: 100%;
}

/* 左侧视频区域 */
.video-section {
    width: 25%;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* 视频预览区域 (55%) */
.video-preview {
    height: 55%;
    display: flex;
    flex-direction: column;
}

.video-placeholder {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(16, 42, 87, 0.6);
    border: 1px dashed #7cd0ff;
    border-radius: 4px;
    color: #7cd0ff;
}

.video-placeholder p {
    margin-top: 10px;
    color: white;
    font-size: 14px;
}

.video-actions {
    display: flex;
    gap: 10px;
    margin-top: 10px;
}

.video-actions .el-button {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px;
}

.upload-btn {
    background: rgba(124, 208, 255, 0.2);
    border-color: #7cd0ff;
    color: #7cd0ff;
}

.clear-btn {
    background: rgba(255, 77, 79, 0.2);
    border-color: #ff4d4f;
    color: #ff4d4f;
}

/* 设备信息区域 (45%) */
.device-info {
    height: 45%;
    background: rgba(16, 42, 87, 0.6);
    border-radius: 4px;
    padding: 15px;
    color: white;
}

.device-info h4 {
    color: #7cd0ff;
    margin-top: 0;
    margin-bottom: 15px;
    font-size: 16px;
}

.info-item {
    display: flex;
    margin-bottom: 12px;
    font-size: 14px;
}

.info-item .label {
    color: #7cd0ff;
    width: 100px;
}

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


.event-section {
    flex: 2;
    display: flex;
    flex-direction: column;

    .event-group {
        background: rgba(16, 42, 87, 0.6);
        border-radius: 4px;
        padding: 15px;
        margin-bottom: 20px;

        .event-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;

            h4 {
                color: #7cd0ff;
                margin: 0;
                font-size: 16px;
            }

            .add-event-btn {
                background: rgba(124, 208, 255, 0.2);
                border-color: #7cd0ff;
                color: #7cd0ff;
            }
        }

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

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

        .form-hint {
            color: rgba(124, 208, 255, 0.7);
            font-size: 12px;
            margin-top: 10px;
        }
    }
}

.editor-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 20px;

    .el-button {
        &.preview-btn {
            background: rgba(0, 210, 255, 0.2);
            border-color: #00d2ff;
            color: #00d2ff;
        }

        &.save-btn {
            background: #00d2ff;
            border-color: #00d2ff;
            color: white;
        }

        &.cancel-btn {
            background: transparent;
            border-color: #7cd0ff;
            color: #7cd0ff;
        }
    }
}
</style>