<template>
    <el-dialog :model-value="visible" @update:modelValue="$emit('update:visible', $event)" title="视频设备接入设置"
        width="900px" :class="['custom-dialog', 'add-scene-dialog']">
        <div class="dialog-content">
            <div class="form-section">
                <div class="form-item">
                    <label>摄像头名称:</label>
                    <el-input v-model="formData.name" placeholder="请输入" />
                </div>
                <div class="form-item">
                    <label>摄像头ID:</label>
                    <el-input v-model="formData.id" placeholder="请输入" />
                </div>
                <div class="form-item">
                    <label>摄像头IP地址:</label>
                    <el-input v-model="formData.ip" placeholder="请输入" />
                </div>
                <div class="form-item">
                    <label>摄像头通道号:</label>
                    <el-input v-model="formData.channel" placeholder="请输入" />
                </div>
                <div class="form-item">
                    <label>所属分组与场景:</label>
                    <el-select v-model="formData.group" placeholder="请选择">
                        <el-option v-for="scene in scenes" :key="scene.id" :label="scene.name" :value="scene.id" />
                    </el-select>
                </div>
            </div>

            <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>
        </div>
        <template #footer>
            <el-button class="cancel-btn" @click="$emit('update:visible', false)">测试接入效果</el-button>
            <el-button class="confirm-btn" @click="saveDevice">保存应用设置</el-button>
        </template>
    </el-dialog>
</template>

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

const props = defineProps({
    visible: Boolean,
    scenes: {
        type: Array,
        default: () => []
    }
})

const emit = defineEmits(['update:visible', 'save'])

const formData = ref({
    name: '',
    id: '',
    ip: '',
    channel: '',
    group: '',
    algorithm: ''
})

const saveDevice = () => {
    emit('save', formData.value)
    emit('update:visible', false)
    resetForm()
}

const resetForm = () => {
    formData.value = {
        name: '',
        id: '',
        ip: '',
        channel: '',
        group: '',
        algorithm: ''
    }
}
</script>
<style scoped>
.dialog-content {
    display: flex;
    gap: 30px;

    .form-section {
        flex: 1;

        .form-item {
            margin-bottom: 20px;
            display: flex;
            justify-content: space-between;

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

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

        .video-placeholder {
            text-align: center;
            color: #7cd0ff;

            p {
                margin-top: 10px;
            }
        }
    }
}

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

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

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

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