<template>
    <Dialog v-model="dialogVisible" bg-color="#fff" width="800">
        <div class="reference-video-dialog flex-col bg-fff round-8 hidden">
            <header class="dialog-header flex-items-center h-56 px-20">
                <h3 class="fs-14 fw-700 color-000">选择参考视频</h3>
            </header>

            <section class="dialog-body flex-1 flex-col px-20 py-20">
                <el-input v-model="keyword" class="search-input mb-16" placeholder="搜索历史投放素材">
                    <template #prefix>
                        <el-icon>
                            <Search />
                        </el-icon>
                    </template>
                </el-input>

                <div class="video-list flex flex-wrap gap-12">
                    <div v-for="item in filteredVideos" :key="item.id" class="video-card round-6 hidden pointer bg-fff"
                        :class="{ active: selectedVideoId === item.id }" @click="selectedVideoId = item.id">
                        <div class="video-cover relative hidden">
                            <img :src="item.cover" :alt="item.name" class="w-full h-full cover" />
                            <span
                                class="duration-tag absolute right-8 bottom-8 h-20 lh-20 px-6 round-4 fs-10 color-fff">
                                {{ item.duration }}
                            </span>
                            <span v-if="item.canDelete"
                                class="delete-btn absolute top-8 right-8 flex-center wh-22 round pointer">
                                <el-icon class="fs-14">
                                    <Delete />
                                </el-icon>
                            </span>
                        </div>
                        <div class="px-6 py-4">
                            <div class="fs-12 color-333 ellipsis">{{ item.name }}</div>
                            <div class="fs-10 color-999">{{ item.size }}</div>
                        </div>
                    </div>
                </div>
            </section>

            <footer class="dialog-footer flex justify-end gap-8 px-20 py-12">
                <el-button class="px-18" @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" class="px-20 border-none" @click="confirmVideo">
                    确认选择
                </el-button>
            </footer>
        </div>
    </Dialog>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue';
import { Delete, Search } from '@element-plus/icons-vue';
import Dialog from '@/components/Dialog/index.vue';
import peopleImg from '@/static/image/meinv.png';
import productImg from '@/static/image/huaban.png';
import longImg from '@/static/image/long.png';

type ReferenceVideo = {
    id: string;
    name: string;
    size: string;
    duration: string;
    cover: string;
    canDelete?: boolean;
};

const props = defineProps<{
    modelValue: boolean;
}>();

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

const keyword = ref('');
const selectedVideoId = ref('');

const videos: ReferenceVideo[] = [
    {
        id: 'video-1',
        name: 'r_434f2d996de64f6bb6c5af85311481...',
        size: '7.3 MB',
        duration: '00:30',
        cover: productImg,
        canDelete: true,
    },
    {
        id: 'video-2',
        name: '夏日防晒实测高转化素材.mp4',
        size: '24.6 MB',
        duration: '00:28',
        cover: peopleImg,
    },
    {
        id: 'video-3',
        name: '通勤穿搭口播投放素材.mp4',
        size: '38.1 MB',
        duration: '00:42',
        cover: longImg,
    },
    {
        id: 'video-4',
        name: '厨房清洁前后对比素材.mp4',
        size: '31.8 MB',
        duration: '00:35',
        cover: productImg,
    },
    {
        id: 'video-5',
        name: '新品卖点快速展示素材.mp4',
        size: '18.2 MB',
        duration: '00:26',
        cover: peopleImg,
    },
    {
        id: 'video-6',
        name: '产品使用过程参考素材.mp4',
        size: '21.4 MB',
        duration: '00:32',
        cover: longImg,
    },
];

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

const filteredVideos = computed(() => {
    const value = keyword.value.trim();
    if (!value) {
        return videos;
    }
    return videos.filter((item) => item.name.includes(value));
});

const confirmVideo = () => {
    emit('confirm', selectedVideoId.value);
    dialogVisible.value = false;
};
</script>

<style scoped lang="scss">
.reference-video-dialog {
    height: 600px;
}

.dialog-header {
    flex: 0 0 56px;
    border-bottom: 1px solid #edf2f7;
}

.dialog-body {
    min-height: 0;
}

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

.video-card {
    flex: 0 0 calc((100% - 48px) / 5);
    border: 1px solid #dce6f2;
    transition: border-color .2s, box-shadow .2s;

    &:hover,
    &.active {
        border-color: #7d28ff;
        box-shadow: 0 0 0 1px rgba(125, 40, 255, .5);
    }
}

.video-cover {
    height: 82px;
    background: #f3f6fb;
}

.duration-tag {
    background: rgba(0, 0, 0, .68);
}

.delete-btn {
    color: #fff;
    background: rgba(0, 0, 0, .62);
}

:deep(.search-input .el-input__wrapper) {
    height: 38px;
    border-radius: 6px;
    box-shadow: 0 0 0 1px #dce6f2 inset;
}

:deep(.search-input .el-input__inner) {
    font-size: 12px;
}
</style>
