<template>
    <div class="flex items-start gap-24">
        <div class="left-panel flex-col gap-20">
            <el-card class="panel-card round-10" shadow="never">
                <template #header>
                    <div class=" lh-22 fw-700 color-000">选择待处理视频</div>
                </template>
                <div class="upload-area w-full pointer" @click="mediaVisible = true">
                    <div class="flex-col flex-center h-150">
                        <span class="upload-icon flex-center wh-40 round mb-10">
                            <el-icon class="fs-22">
                                <UploadFilled />
                            </el-icon>
                        </span>
                        <div class="lh-22 fs-12">选择待擦除水印视频</div>
                        <p class="fs-12 color-999">智能分析格式，支持最高4K源文件输入</p>
                    </div>
                </div>
            </el-card>
            <el-card class="panel-card round-10" shadow="never">
                <template #header>
                    <div class="flex-between">
                        <div class=" lh-22 fw-700 color-000">标定水印区域 (1)</div>
                        <el-button class="h-28 px-8 fs-12 color-main" text>
                            <el-icon>
                                <Plus />
                            </el-icon>
                            <span>添加选区</span>
                        </el-button>
                    </div>
                </template>
                <div class="flex-items-center flex-wrap gap-10">
                    <el-tag class="watermark-tag h-30 lh-30 px-12 round-6 color-main" closable effect="plain">
                        水印区 1：78,4 / 96,14
                    </el-tag>
                </div>
            </el-card>
            <el-card class="guide-card round-10 pt-16" shadow="never">
                <div class="flex-items-center gap-6 mb-10">
                    <el-icon class="color-main fs-16">
                        <QuestionFilled />
                    </el-icon>
                    <span class=" lh-22 fw-700 color-333">智能擦除操作指引</span>
                </div>
                <div class="fs-12 lh-26 color-888">
                    <p>1. 上传视频素材，并在右侧视频静止帧中直接拖动/画框。</p>
                    <p>2. 如果水印在视频的不同位置，可多次点击「添加选区」进行联合擦除。</p>
                    <p>3. 点击执行，系统会提取水印周围相邻多帧的纹理流，智能重构无瑕背景。</p>
                </div>
            </el-card>
            <el-button type="primary" class="run-btn h-40 round-6 border-none">
                立即执行智能重绘擦除 (预计 2.50)
            </el-button>
        </div>
        <el-card class="preview-card flex-1 round-10" shadow="never">
            <template #header>
                <div class="flex-between">
                    <div class=" lh-22 fw-700 color-000">画面预览与划定框</div>
                    <span class="fs-12 color-999">模拟视频帧排布</span>
                </div>
            </template>
            <div class="preview-frame relative hidden round-12">
                <img :src="previewImage" alt="待处理视频预览" class="w-full h-full cover" />
                <div class="preview-mask absolute top-0 left-0 w-full h-full"></div>
                <div class="selection-box absolute top-16 right-26 w-108 h-34">
                    <el-tag class="selection-label m-6 h-22 lh-22 px-8 round-6 color-fff fs-12 border-none">选区
                        1</el-tag>
                    <el-button class="selection-close absolute top-20 right-6 wh-14 p-0 border-none color-fff"
                        type="danger" circle>
                        <el-icon class="fs-10">
                            <Close />
                        </el-icon>
                    </el-button>
                </div>
                <div class="empty-state absolute flex-col flex-center text-center">
                    <span class="video-icon flex-center wh-42 round mb-10">
                        <el-icon class="fs-22">
                            <VideoCamera />
                        </el-icon>
                    </span>
                    <div class="lh-24">尚未加载工作视频</div>
                    <p class="fs-12 lh-20 color-999">请在左侧点击上传视频，以便框选水印或字幕边界</p>
                </div>
            </div>
            <div class="status-bar flex-between h-38 px-12 mt-16 round-6 fs-12 color-999">
                <span>状态：GPU像素缓存区待命</span>
                <span>分辨率：1920 × 1080px</span>
            </div>
        </el-card>
        <MediaMaterialDialog v-model="mediaVisible" v-model:selected="selectedMaterials" />
    </div>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue';
import { Close, Plus, QuestionFilled, UploadFilled, VideoCamera } from '@element-plus/icons-vue';
import previewImage from '@/static/image/meinv.png';
import MediaMaterialDialog from './MediaMaterialDialog.vue';
import type { MaterialItem, SceneKey } from '../types';


const mediaVisible = ref(false);
const selectedMaterials = ref<MaterialItem[]>([]);

</script>

<style scoped lang="scss">
.left-panel {
    flex: 0 0 40%;
}

.panel-card,
.preview-card,
.guide-card {
    border: 1px solid #dfe7f2;
}

:deep(.el-card__header) {
    padding: 16px 16px 10px;
    border-bottom: 0;
}

:deep(.el-card__body) {
    padding: 0 20px 20px;
}

.upload-area {
    width: 100%;
    border: 1px dashed #ddd;
    border-radius: 10px;
}

:deep(.upload-area .el-upload-dragger) {
    padding: 0;
    border-color: #d9e4f2;
    border-style: dashed;
    background: #fbfdff;
}

.upload-icon,
.video-icon {
    color: #708aaf;
    background: #edf3fb;
}

.watermark-tag {
    border-color: rgba(var(--main-color), .1);
    background: rgba(var(--main-color), .06);
}

.guide-card {
    background: #f8fbff;
}

.run-btn {
    background: linear-gradient(90deg, #9d19ff 0%, #f23594 100%);
}

.preview-frame {
    height: 348px;
    background: #eef3f8;
}

.preview-mask {
    background: rgba(248, 250, 252, .68);
    backdrop-filter: blur(1px);
}

.selection-box {
    border: 2px dashed #c77dff;
    background: rgba(199, 125, 255, .08);
}

.selection-label {
    background: #b45cff;
}

.selection-close {
    background: #ff6b8b;
}

.empty-state {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.video-icon {
    color: rgba(var(--main-color), 1);
    background: #fff;
}

.status-bar {
    border: 1px solid #dfe7f2;
    background: #f8fbff;
}
</style>