<template>
    <div class="p-20">
        <Classify />
        <div class="mt-20">
            <div class="mb-20">
                <el-button @click="switchCheck">{{ isCheck ? '取消选择' : '请选择' }}</el-button>
                <el-button type="primary">上传文件</el-button>
            </div>
            <div class="flex flex-wrap gap-20">
                <el-checkbox-group v-model="checkedList" class="flex flex-wrap gap-20 w-full">
                    <div v-for="(item, index) in list" :key="index" @click="goDetail(item)"
                        class="w-200 bg-fff round-12 relative hidden flex-item"
                        :class="{ 'is-selected': checkedList.includes(item.id) }">
                        <Item :item="item" :isCheck="isCheck" />
                    </div>
                </el-checkbox-group>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { useRouter } from 'vue-router'
import Classify from '../components/Classify.vue';
import Item from '@/views/resource/components/VideoItem.vue'

const router = useRouter()
const checkedList = ref<any>([])
const isCheck = ref(false)
const list = ref([{ id: '1' }, { id: '2' }, { id: '3' }]);

const switchCheck = () => {
    isCheck.value = !isCheck.value
    checkedList.value = []
}
const goDetail = (item: any) => {
    if(isCheck.value) return
    router.push(`/resource/material/detail/${item.id}`)
}
</script>

<style scoped lang="scss">
.flex-item {
    flex: 0 0 calc((100% - 20px * 5) / 6);
    border-radius: 8px;
    box-sizing: border-box;
    aspect-ratio: 1 / 1.5;
}


/* 1600px 以下：一行 5 个 */
@media (max-width: 2100px) {
    .flex-item {
        flex: 0 0 calc((100% - 20px * 4) / 5);
    }
}

/* 1200px 以下：一行 4 个 */
@media (max-width: 1800px) {
    .flex-item {
        flex: 0 0 calc((100% - 20px * 3) / 4);
    }
}

/* 900px 以下：一行 3 个 */
@media (max-width: 1400px) {
    .flex-item {
        flex: 0 0 calc((100% - 20px * 2) / 3);
    }
}


// 复选框的样式
.is-selected {
    box-shadow: 0 0 2px 2px rgb(var(--main-color));
}
.el-checkbox-group {
    font-size: inherit;
    line-height: inherit;
}
</style>