<template>
    <div class="h-full over-y-auto p-20 bgmr">
        <div class="remove-content">
            <div class=" mb-20">
                <div class="fw-600 fs-16 flex-items-center color-000 gap-10">视频画质增强<span
                        class="color-main fs-10 round-4 px-6 py-2 tagssss">SUPERSAMPLING AI</span></div>
                <div class="fs-12 color-888 mt-6">智能重构低清素材、还原奢华微距材质、平滑运动插帧，挽救失焦素材</div>
            </div>

            <div class="quality-main 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 color-000">选择素材库中的电商视频</div>
                                <p class="fs-12 color-999">支持选择 5 分钟以内的 mp4 / mov / avi 素材</p>
                            </div>
                        </div>
                    </el-card>

                    <el-card class="panel-card round-10" shadow="never">
                        <template #header>
                            <div class="lh-22 fw-700 color-000">画质重构设置</div>
                        </template>
                        <div class="quality-form flex-col gap-20">
                            <div class="flex gap-16">
                                <div class="flex-1">
                                    <div class="form-label fs-12 lh-20 mb-8 color-888">输出分辨率 / RESOLUTION</div>
                                    <el-select v-model="resolution" class="w-full" size="large">
                                        <el-option label="1080P 超高清极速渲染" value="1080p" />
                                        <el-option label="2K 商业展示画质" value="2k" />
                                        <el-option label="4K 品质重写" value="4k" />
                                    </el-select>
                                </div>
                                <div class="flex-1">
                                    <div class="form-label fs-12 lh-20 color-888 mb-8">目标帧率 / MOTION FRAME</div>
                                    <el-select v-model="frameRate" class="w-full" size="large">
                                        <el-option label="AI 智能插帧 60fps (超流畅)" value="60fps" />
                                        <el-option label="保持原帧率" value="source" />
                                        <el-option label="电影感 24fps" value="24fps" />
                                    </el-select>
                                </div>
                            </div>
                            <div>
                                <div class="form-label fs-12 lh-20 color-888 mb-8">超分辨率计算引擎 / AI ENGINE</div>
                                <el-select v-model="engine" class="w-full" size="large">
                                    <el-option label="UltraEnhance-v3.0 (高细节材质深度还原)" value="ultra" />
                                    <el-option label="FastRestore-v2.5 (极速清晰增强)" value="fast" />
                                    <el-option label="PortraitClean-v1.8 (人像肤质优化)" value="portrait" />
                                </el-select>
                            </div>
                        </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-main">超分增强操作指引</span>
                        </div>
                        <div class="fs-12 lh-26 color-888">
                            <p>• 本算法针对珠宝类纹理、服装皮质、毛发质感有深度重构增强作用。</p>
                            <p>• 超分渲染时间受视频源时长及分辨率选项影响，一般在 1-3 分钟内完成。</p>
                            <p>• 开始增强预计将消耗 5.00 积分点。</p>
                        </div>
                    </el-card>

                    <el-button type="primary" class="run-btn h-40 round-6 border-none">
                        一键激发 4K 画质重构 (预计 5.00)
                    </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 ref="compareRef" class="compare-stage relative hidden round-10 pointer"
                        @pointerdown="handlePointerMove">
                        <img :src="previewImage" alt="画质增强后预览" class="compare-img w-full h-full cover" />
                        <div class="before-layer absolute top-0 left-0 w-full h-full hidden"
                            :style="{ clipPath: `inset(0 ${100 - comparePercent}% 0 0)` }">
                            <img :src="previewImage" alt="画质增强前预览" class="before-img w-full h-full cover" />
                        </div>

                        <el-tag class="compare-tag before-tag absolute top-14 left-14 h-20 lh-20 px-10 round-10 fs-10"
                            effect="dark">
                            BEFORE / 480P 压缩源图
                        </el-tag>
                        <el-tag class="compare-tag after-tag absolute top-14 right-14 h-20 lh-20 px-10 round-10 fs-10"
                            effect="dark">
                            AFTER / 4K 质感重写
                        </el-tag>

                        <div class="compare-line absolute top-0 h-full" :style="{ left: `${comparePercent}%` }">
                            <span class="handle-dot absolute flex-center wh-28 round">
                                <span class="handle-bar h-12"></span>
                                <span class="handle-bar h-12"></span>
                            </span>
                        </div>
                    </div>

                    <div class="effect-list flex gap-12 mt-24">
                        <div class="effect-card flex-1 flex-col flex-center h-78 round-10">
                            <el-icon class="color-main fs-18 mb-6">
                                <MagicStick />
                            </el-icon>
                            <div class="fs-12 lh-20 fw-700 color-000">GPU 硬件加速</div>
                            <p class="fs-12 lh-20 color-999">双核 Tensor A100 并行解算</p>
                        </div>
                        <div class="effect-card flex-1 flex-col flex-center h-78 round-10">
                            <el-icon class="quality-pink fs-18 mb-6">
                                <Picture />
                            </el-icon>
                            <div class="fs-12 lh-20 fw-700 color-000">质感智能补强</div>
                            <p class="fs-12 lh-20 color-999">还原奢侈品反射与纯面高光</p>
                        </div>
                    </div>
                </el-card>
            </div>
            <MediaMaterialDialog v-model="mediaVisible" v-model:selected="selectedMaterials" />
        </div>
    </div>
</template>

<script setup lang="ts">
import { onBeforeUnmount, ref } from 'vue';
import { BrushFilled, MagicStick, Picture, QuestionFilled, UploadFilled } from '@element-plus/icons-vue';
import previewImage from '@/static/image/meinv.png';
import MediaMaterialDialog from './components/MediaMaterialDialog.vue';
import type { MaterialItem } from './types';

const mediaVisible = ref(false);
const selectedMaterials = ref<MaterialItem[]>([]);
const resolution = ref('1080p');
const frameRate = ref('60fps');
const engine = ref('ultra');
const compareRef = ref<HTMLElement>();
const comparePercent = ref(48);

const updateComparePercent = (event: PointerEvent) => {
    if (!compareRef.value) {
        return;
    }
    const rect = compareRef.value.getBoundingClientRect();
    const percent = ((event.clientX - rect.left) / rect.width) * 100;
    comparePercent.value = Math.min(88, Math.max(12, Math.round(percent)));
};

const stopDrag = () => {
    window.removeEventListener('pointermove', updateComparePercent);
    window.removeEventListener('pointerup', stopDrag);
};

const handlePointerMove = (event: PointerEvent) => {
    updateComparePercent(event);
    window.addEventListener('pointermove', updateComparePercent);
    window.addEventListener('pointerup', stopDrag);
};

onBeforeUnmount(stopDrag);
</script>

<style scoped lang="scss">
.remove-content {
    max-width: 1600px;
    margin: auto;
}

.tagssss {
    background-color: rgba(var(--main-color), .04);
    box-shadow: 0 0 0 1px rgba(var(--main-color), .1);
}

.left-panel {
    flex: 0 0 49%;
}

.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 {
    border: 1px dashed #d9e4f2;
    border-radius: 10px;
    background: #fbfdff;
}

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

.guide-card {
    background: #f8fbff;
}

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

.preview-card {
    min-width: 0;
}

.compare-stage {
    height: 292px;
    background: #eef3f8;
    touch-action: none;
    user-select: none;
}

.compare-img {
    filter: saturate(1.12) contrast(1.08);
}

.before-layer {
    filter: blur(2px) saturate(.72) contrast(.78);
}

.compare-tag {
    border: 0;
    font-weight: 700;
}

.before-tag {
    background: #ff4d5f;
}

.after-tag {
    background: #26c486;
}

.compare-line {
    width: 2px;
    background: rgba(255, 255, 255, .9);
    transform: translateX(-1px);
}

.handle-dot {
    top: 50%;
    left: 50%;
    gap: 3px;
    color: rgba(var(--main-color), 1);
    background: #fff;
    border: 2px solid rgba(var(--main-color), 1);
    box-shadow: 0 4px 14px rgba(var(--main-color), .2);
    transform: translate(-50%, -50%);
}

.handle-bar {
    width: 2px;
    background: currentColor;
}

.effect-card {
    border: 1px solid #dfe7f2;
    background: #fbfdff;
}

.quality-pink {
    color: #f23594;
}

@media (max-width: 1180px) {
    .quality-main {
        flex-wrap: wrap;
    }

    .left-panel,
    .preview-card {
        flex: 0 0 100%;
    }
}
</style>