<template>
    <Dialog v-model="dialogVisible" bg-color="#fff" width="900">
        <div v-if="currentItem" class="preview-dialog flex bg-fff hidden">
            <aside class="preview-aside flex-col items-center justify-between py-18">
                <div class="nav-btn wh-24 flex-center pointer" @click="prevItem">
                    <el-icon>
                        <ArrowUp />
                    </el-icon>
                </div>

                <div class="thumb-list flex-col gap-10">
                    <div v-for="(item, index) in items" :key="item.title"
                        class="thumb-btn w-46 h-58 p-0 round-8 hidden pointer"
                        :class="{ active: index === activeIndex }" text @click="activeIndex = index">
                        <img :src="item.cover" :alt="item.title" class="w-full h-full cover" />
                    </div>
                </div>

                <div class="nav-btn wh-24 flex-center pointer" @click="nextItem">
                    <el-icon>
                        <ArrowDown />
                    </el-icon>
                </div>
            </aside>

            <section class="preview-stage relative flex-1 hidden">
                <img :src="currentItem.cover" :alt="currentItem.title" class="stage-cover w-full h-full cover" />
                <div class="stage-shade absolute top-0 left-0 w-full h-full"></div>
                <span class="video-badge absolute top-14 left-14 h-22 lh-22 px-8 round-6 color-fff fs-12">
                    {{ currentItem.duration }} VIDEO
                </span>
                <span class="play-large absolute flex-center wh-64 round color-fff fs-30">
                    <el-icon>
                        <VideoPlay />
                    </el-icon>
                </span>

                <!-- <div class="fake-controls absolute left-16 right-16 bottom-18">
                    <div class="flex-between color-fff mb-10">
                        <div class="flex-items-center gap-18">
                            <el-icon class="fs-20">
                                <VideoPlay />
                            </el-icon>
                            <span class="fs-16">0:00</span>
                        </div>
                        <div class="flex-items-center gap-20 fs-18">
                            <span>◔</span>
                            <span>□</span>
                            <span>⋮</span>
                        </div>
                    </div>
                    <div class="progress-line h-4 round-4"></div>
                </div> -->
            </section>

            <section class="preview-info flex-col p-20" style="max-width: 380px;min-width: 380px;">
                <div class="flex-1 over-y-auto hide-scroll">
                    <div class="flex-items-center gap-10 fs-12 color-789">
                        <span>创意详情</span>
                        <span>|</span>
                        <span class="heat flex-items-center gap-4">
                            <span>🔥</span>
                            <span>热度</span>
                            <strong>{{ currentItem.heat }}</strong>
                        </span>
                    </div>
                    <h2 class="mt-10 fs-16 lh-30 color-001">{{ currentItem.title }}</h2>
                    <div class="flex-items-center gap-8 mt-6">
                        <span class="avatar flex-center wh-22 round color-fff fs-12">{{ currentItem.author.slice(0, 1)
                        }}</span>
                        <span class="fs-12 color-334">{{ currentItem.author }}</span>
                        <span class="dot wh-4 round"></span>
                        <span class="type-tag h-22 lh-22 px-10 round-6 fs-12">视频</span>
                    </div>
                    <div class="flex-between mt-10">
                        <span class="fs-12 color-789">视频提示词</span>
                        <el-button class="copy-text h-24 p-0 border-none fs-12 color-main" text>
                            <el-icon>
                                <CopyDocument />
                            </el-icon>
                            <span>复制</span>
                        </el-button>
                    </div>
                    <div class="prompt-box mt-4 p-10 round-6 fs-12 lh-22 color-334">
                        {{ currentItem.prompt }}
                    </div>
                    <div class="mt-20">
                        <div class="fs-12 color-789 mb-10">视频参考图</div>
                        <div class="reference-img relative w-96 h-96 round-12 hidden">
                            <img :src="currentItem.cover" :alt="currentItem.title" class="w-full h-full cover" />
                            <span
                                class="source-tag absolute top-8 left-8 h-20 lh-20 px-8 round-6 color-fff fs-10">参考</span>
                        </div>
                    </div>
                </div>

                <div class="mt-20">
                    <div class="fs-12 color-789 mb-12">视频标签</div>
                    <div class="flex-items-center flex-wrap gap-10">
                        <span v-for="tag in currentItem.tags" :key="tag"
                            class="tag-pill h-28 lh-28 px-12 round-14 fs-12 color-main">
                            {{ tag }}
                        </span>
                    </div>
                </div>

                <div class="dialog-footer flex-items-center mt-20 pt-16">
                    <el-button class="footer-icon wh-32 p-0" plain>
                        <el-icon>
                            <Star />
                        </el-icon>
                    </el-button>
                    <el-button class="footer-icon wh-32 p-0" plain>
                        <el-icon>
                            <Share />
                        </el-icon>
                    </el-button>
                    <el-button type="primary" class="same-btn flex-1">
                        <el-icon>
                            <MagicStick />
                        </el-icon>
                        <span>一键同款</span>
                    </el-button>
                </div>
            </section>
        </div>
    </Dialog>
</template>

<script setup lang="ts">
import { computed, ref, watch } from 'vue';
import { ArrowDown, ArrowUp, CopyDocument, MagicStick, Share, Star, VideoPlay } from '@element-plus/icons-vue';

export type InspirationPreviewItem = {
    title: string;
    author: string;
    cover: string;
    duration: string;
    heat: number;
    prompt: string;
    tags: string[];
};

const props = defineProps<{
    modelValue: boolean;
    items: InspirationPreviewItem[];
    index: number;
}>();

const emit = defineEmits<{
    'update:modelValue': [value: boolean];
}>();

const activeIndex = ref(0);

const dialogVisible = computed({
    get: () => props.modelValue,
    set: (value) => emit('update:modelValue', value),
});

const currentItem = computed(() => props.items[activeIndex.value]);

watch(
    () => props.index,
    (value) => {
        activeIndex.value = Math.max(0, Math.min(value, props.items.length - 1));
    },
    { immediate: true },
);

const prevItem = () => {
    if (!props.items.length) return;
    activeIndex.value = activeIndex.value === 0 ? props.items.length - 1 : activeIndex.value - 1;
};

const nextItem = () => {
    if (!props.items.length) return;
    activeIndex.value = activeIndex.value === props.items.length - 1 ? 0 : activeIndex.value + 1;
};
</script>

<style lang="scss" scoped>
.preview-dialog {
    height: 572px;
    border-radius: 10px;
}

.preview-aside {
    flex: 0 0 74px;
    background: #02091d;
}

.nav-btn {
    &:hover {
        background-color: #ffffff13;
        border-radius: 6px;
    }
}

.thumb-list {
    max-height: 390px;
    overflow: hidden;
}

.thumb-btn {
    border: 2px solid transparent !important;
    opacity: .58;
}

.thumb-btn.active {
    border-color: rgba(var(--main-color), 1) !important;
    opacity: 1;
}

:deep(.thumb-btn > span) {
    width: 100%;
    height: 100%;
}

.preview-stage {
    background: #2f2f2f;
}

.stage-cover {
    opacity: .32;
    filter: grayscale(.08);
}

.stage-shade {
    background: rgba(0, 0, 0, .36);
}

.video-badge,
.source-tag {
    background: rgba(9, 13, 22, .76);
}

.play-large {
    top: 50%;
    left: 50%;
    background: rgba(var(--main-color), 1);
    transform: translate(-50%, -50%);
}

.fake-controls {
    z-index: 1;
}

.progress-line {
    background: rgba(255, 255, 255, .36);
}

.preview-info {
    background: #fff;
}

.heat {
    color: #ff8200;
}

.avatar {
    background: linear-gradient(135deg, #1877ff, #9d19ff);
}

.dot {
    background: #d4deeb;
}

.type-tag {
    color: #526f91;
    background: #edf3fb;
}

.prompt-box {
    background: #f8fbff;
    border: 1px solid #e6edf5;
}

.reference-img {
    border: 1px solid #e6edf5;
}

.tag-pill {
    background: #fbf0ff;
    border: 1px solid #ead0ff;
}

.dialog-footer {
    border-top: 1px solid #edf2f7;
}

.footer-icon {
    color: #526f91;
    border-color: #dfe7f2;
}

.same-btn {
    background: rgba(var(--main-color), 1);
    border-color: rgba(var(--main-color), 1);
}

.color-001 {
    color: #001a3d;
}

.color-334 {
    color: #334b68;
}

.color-789 {
    color: #7890ae;
}
</style>
