<template>
    <main class="step4-main flex-1 flex-col hidden">
        <section class="flex-1 over-y-auto hide-scroll py-20 px-20">


            <div class="video-list flex flex-wrap gap-18">
                <div v-for="item in videos" :key="item.id" class="video-card flex-col round-8 hidden bg-fff"
                    :class="{ active: selectedVideoIds.includes(item.id) }">
                    <div class="video-cover relative hidden">
                        <img :src="item.cover" :alt="item.name" class="w-full h-full cover" />
                        <el-checkbox :model-value="selectedVideoIds.includes(item.id)"
                            class="select-check absolute top-12 left-12" @change="toggleVideo(item.id)" />
                        <span v-if="item.recommend"
                            class="recommend-tag absolute top-10 right-10 h-24 lh-24 px-10 round-4 fs-12 fw-700 color-fff">
                            推荐
                        </span>
                        <span class="duration-tag absolute right-10 bottom-10 h-24 lh-24 px-8 round-4 fs-12 color-fff">
                            {{ item.duration }}
                        </span>
                    </div>
                    <div class="p-12">
                        <div class="fs-12 fw-700 color-000 lh-18 ellipsis mb-10">{{ item.name }}</div>
                        <div class="flex">
                            <el-button class="detail-btn flex-1 h-34 fs-12">
                                <el-icon>
                                    <View />
                                </el-icon>
                                <span>详情</span>
                            </el-button>
                            <el-button class="icon-btn wh-34 p-0">
                                <el-icon>
                                    <Upload />
                                </el-icon>
                            </el-button>
                            <el-button class="icon-btn wh-34 p-0">
                                <el-icon>
                                    <Download />
                                </el-icon>
                            </el-button>
                        </div>
                    </div>
                </div>
            </div>


        </section>

        <footer class="flex-between items-center px-20 py-12" style="border-top: 1px solid #eee;">
            <div class="flex justify-end">
                <el-checkbox v-model="isAllSelected" :indeterminate="isIndeterminate" class="fs-12">全选</el-checkbox>
            </div>
            <div class="flex-items-center gap-10">
                <div class="fs-12 color-888 text-right">
                    已选择 <span class="color-main fw-700">{{ selectedVideoIds.length }}</span> 个视频
                </div>
                <el-button type="primary" class="fs-12 border-none create-btn" @click="emit('uploadResource')">
                    上传资源库
                </el-button>
            </div>
        </footer>
    </main>
</template>

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

type VideoItem = {
    id: string;
    name: string;
    cover: string;
    duration: string;
    recommend?: boolean;
};

const emit = defineEmits<{
    uploadResource: [];
}>();

const videos: VideoItem[] = [
    {
        id: 'video-1',
        name: '推荐版_玻璃油膜擦营销成片.mp4',
        cover: productImg,
        duration: '00:28',
        recommend: true,
    },
    {
        id: 'video-2',
        name: '备选1版_玻璃油膜擦营销成片.mp4',
        cover: peopleImg,
        duration: '00:30',
    },
];

const selectedVideoIds = ref<string[]>(['video-1']);

const isAllSelected = computed({
    get: () => selectedVideoIds.value.length === videos.length,
    set: (value: boolean) => {
        selectedVideoIds.value = value ? videos.map((item) => item.id) : [];
    },
});

const isIndeterminate = computed(() => selectedVideoIds.value.length > 0 && selectedVideoIds.value.length < videos.length);

const toggleVideo = (id: string) => {
    if (selectedVideoIds.value.includes(id)) {
        selectedVideoIds.value = selectedVideoIds.value.filter((item) => item !== id);
        return;
    }
    selectedVideoIds.value = [...selectedVideoIds.value, id];
};
</script>

<style scoped lang="scss">
.step4-main {
    min-width: 0;
}

.video-list {
    align-content: flex-start;
}

.video-card {
    flex: 0 0 260px;
    border: 1px solid #dce6f2;
    transition: border-color .2s, box-shadow .2s;

    &.active {
        border-color: rgba(var(--main-color), 1);
        box-shadow: 0 0 0 1px rgba(var(--main-color), .35);
    }
}

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

.recommend-tag,
.create-btn {
    background: #7d28ff;
}

.duration-tag {
    background: rgba(18, 24, 38, .78);
}

.detail-btn,
.icon-btn {
    border-color: #dce6f2;
}

:deep(.select-check .el-checkbox__label) {
    display: none;
}

:deep(.select-check .el-checkbox__inner) {
    width: 18px;
    height: 18px;
    border-radius: 4px;
}

:deep(.select-check .el-checkbox__inner::after) {
    left: 8px;
    top: 7px;
}
</style>
