<template>
    <section>
        <div class="flex-between mb-16">
            <h2 class="fs-18 lh-28 fw-700">电商爆款灵感画廊</h2>
            <div class="category-tabs flex-items-center gap-4 h-34 p-4 round-10 bg-fff">
                <el-button
                    v-for="item in categories"
                    :key="item"
                    class="tab-btn h-26 px-12 round-8 border-none fs-12 fw-700"
                    :class="{ active: activeCategory === item }"
                    text
                    @click="activeCategory = item"
                >
                    {{ item }}
                </el-button>
            </div>
        </div>

        <div class="gallery-list flex flex-wrap gap-20">
            <el-card
                v-for="(item, index) in filteredList"
                :key="item.title"
                class="gallery-card flex-item round-14 hidden pointer"
                shadow="never"
                @click="openPreview(index)"
            >
                <div class="image-wrap relative h-240 hidden">
                    <img :src="item.cover" :alt="item.title" class="w-full h-full cover" />
                    <span class="play-btn absolute flex-center wh-50 round color-fff fs-24">
                        <el-icon><VideoPlay /></el-icon>
                    </span>
                    <span class="copy-btn absolute flex-center gap-6 h-30 px-12 round-8 color-fff fs-12 fw-700">
                        <el-icon><MagicStick /></el-icon>
                        <span>一键同款</span>
                    </span>
                    <span class="duration absolute h-20 lh-20 px-6 round-4 color-fff fs-10 fw-700">{{ item.duration }}</span>
                </div>

                <div class="p-16">
                    <h3 class="fs-14 lh-22 fw-700 ellipsis">{{ item.title }}</h3>
                    <div class="flex-between mt-12">
                        <div class="flex-items-center minw-0">
                            <span class="avatar flex-center wh-18 round mr-6 color-fff fs-10">{{ item.author.slice(0, 1) }}</span>
                            <span class="fs-12 color-789 ellipsis">{{ item.author }}</span>
                        </div>
                        <div class="flex-items-center gap-10 fs-12 color-789">
                            <span class="flex-items-center gap-4">
                                <el-icon class="like-icon"><Star /></el-icon>
                                {{ item.likes }}
                            </span>
                            <span class="flex-items-center gap-4">
                                <el-icon><View /></el-icon>
                                {{ item.views }}
                            </span>
                        </div>
                    </div>
                </div>
            </el-card>
        </div>

        <InspirationPreviewDialog v-model="previewVisible" :items="filteredList" :index="previewIndex" />
    </section>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue';
import { MagicStick, Star, VideoPlay, View } from '@element-plus/icons-vue';
import productImg from '@/static/image/huaban.png';
import peopleImg from '@/static/image/meinv.png';
import detailImg from '@/static/image/long.png';
import InspirationPreviewDialog from './InspirationPreviewDialog.vue';

type GalleryCategory = '全部爆款' | '日化美妆' | '数码科技' | '鞋履服饰';

type GalleryItem = {
    title: string;
    author: string;
    category: GalleryCategory;
    cover: string;
    duration: string;
    likes: number;
    views: number;
    heat: number;
    prompt: string;
    tags: string[];
};

const categories: GalleryCategory[] = ['全部爆款', '日化美妆', '数码科技', '鞋履服饰'];
const activeCategory = ref<GalleryCategory>('全部爆款');
const previewVisible = ref(false);
const previewIndex = ref(0);

const galleryList: GalleryItem[] = [
    {
        title: '极简日系高奢美妆主视觉视频',
        author: 'Mika_Design',
        category: '日化美妆',
        cover: productImg,
        duration: '12s',
        likes: 1240,
        views: 8900,
        heat: 2630,
        prompt: 'A bottle of luxury cosmetic serum on a minimalist beige sand surface, soft studio lighting, organic shadows, high-end editorial product video.',
        tags: ['美妆', '日化', '极简高奢', '大理石晨光'],
    },
    {
        title: '时尚轻奢真丝吊带裙模特视频',
        author: '电商爆款制造机',
        category: '鞋履服饰',
        cover: peopleImg,
        duration: '10s',
        likes: 852,
        views: 12400,
        heat: 2280,
        prompt: 'Fashion model wearing a silk dress in a modern corridor, cinematic walking shot, soft contrast, premium apparel campaign.',
        tags: ['服饰', '模特', '轻奢', '街拍'],
    },
    {
        title: '多功能不粘锅户外场景画质增强',
        author: 'Chef_Creative',
        category: '日化美妆',
        cover: detailImg,
        duration: '15s',
        likes: 412,
        views: 3100,
        heat: 1860,
        prompt: 'Outdoor cooking scene with non-stick pan, natural daylight, joyful lifestyle composition, clean product close-up.',
        tags: ['厨具', '户外', '画质增强', '生活方式'],
    },
    {
        title: '智能运动手表多机位动态展示视频',
        author: 'Tech_Reviewer',
        category: '数码科技',
        cover: productImg,
        duration: '8s',
        likes: 981,
        views: 6540,
        heat: 1988,
        prompt: 'Smart sports watch rotating on a clean gray surface, multi-angle product showcase, premium tech lighting.',
        tags: ['数码', '手表', '动态展示', '科技感'],
    },
    {
        title: '法式复古高帮帆布鞋户外场景视频',
        author: 'SoleMate',
        category: '鞋履服饰',
        cover: peopleImg,
        duration: '15s',
        likes: 1540,
        views: 11000,
        heat: 2960,
        prompt: 'Red canvas sneaker on vivid red background, dynamic product hero shot, energetic streetwear commercial.',
        tags: ['鞋履', '红色视觉', '户外', '潮流'],
    },
    {
        title: '暮华金箔高脚杯澄澈饮品倾倒视频',
        author: 'Mika_Design',
        category: '日化美妆',
        cover: detailImg,
        duration: '10s',
        likes: 672,
        views: 4200,
        heat: 1740,
        prompt: 'Refreshing drink poured into a glass with mint and lime, dark moody background, crisp bubbles, summer beverage video.',
        tags: ['饮品', '清爽', '慢动作', '暗调'],
    },
    {
        title: '蓝牙耳机通勤痛点对比短视频',
        author: 'Tech_Reviewer',
        category: '数码科技',
        cover: productImg,
        duration: '11s',
        likes: 736,
        views: 7820,
        heat: 2050,
        prompt: 'Wireless earbuds commute pain point comparison, split scene, clean tech product lighting, fast-paced social video.',
        tags: ['数码科技', '痛点对比', '通勤', '蓝牙耳机'],
    },
    {
        title: '夏季防晒衣户外试穿种草视频',
        author: 'SoleMate',
        category: '鞋履服饰',
        cover: peopleImg,
        duration: '13s',
        likes: 1188,
        views: 9340,
        heat: 2410,
        prompt: 'Summer sun-protection jacket try-on in outdoor daylight, lightweight fabric detail, natural model movement.',
        tags: ['服饰', '防晒衣', '试穿', '户外'],
    },
];

const filteredList = computed(() => {
    if (activeCategory.value === '全部爆款') {
        return galleryList;
    }
    return galleryList.filter((item) => item.category === activeCategory.value);
});

const openPreview = (index: number) => {
    previewIndex.value = index;
    previewVisible.value = true;
};
</script>

<style lang="scss" scoped>
.category-tabs,
.gallery-card {
    border: 1px solid #dfe7f2;
    box-shadow: 0 2px 6px rgba(21, 44, 76, .05);
}

:deep(.el-button + .el-button) {
    margin-left: 0;
}

.tab-btn {
    color: #4c6583;
}

.tab-btn.active {
    color: #001a3d;
    background: #fff;
    box-shadow: 0 1px 4px rgba(17, 36, 62, .1);
}

.gallery-card {
    flex: 0 0 calc((100% - 80px) / 5);
    background: #fff;
    transition: border-color .24s, box-shadow .24s, transform .24s;
}

:deep(.gallery-card .el-card__body) {
    padding: 0;
}

.image-wrap img {
    transition: transform .42s ease, filter .42s ease;
}

.gallery-card:hover {
    border-color: rgba(var(--main-color), .55);
    box-shadow: 0 14px 30px rgba(28, 46, 76, .14);
    transform: translateY(-3px);
}

.gallery-card:hover .image-wrap img {
    filter: brightness(.88);
    transform: scale(1.08);
}

.play-btn {
    top: 50%;
    left: 50%;
    background: rgba(var(--main-color), 1);
    box-shadow: 0 10px 24px rgba(var(--main-color), .34);
    transform: translate(-50%, -50%);
    transition: transform .24s, box-shadow .24s;
}

.gallery-card:hover .play-btn {
    box-shadow: 0 14px 30px rgba(var(--main-color), .46);
    transform: translate(-50%, -50%) scale(1.12);
}

.copy-btn {
    left: 14px;
    bottom: 12px;
    background: rgba(var(--main-color), 1);
    box-shadow: 0 6px 16px rgba(var(--main-color), .3);
}

.duration {
    right: 10px;
    bottom: 12px;
    background: rgba(9, 16, 28, .72);
}

.avatar {
    flex: 0 0 auto;
    background: linear-gradient(135deg, #9d19ff, #ff8a00);
}

h3 {
    color: #001a3d;
}

.color-789 {
    color: #7890ae;
}

.like-icon {
    color: #ff4ca0;
}

@media (max-width: 1280px) {
    .gallery-card {
        flex-basis: calc((100% - 60px) / 4);
    }
}

@media (max-width: 900px) {
    .gallery-card {
        flex-basis: calc((100% - 20px) / 2);
    }
}
</style>
