<template>
    <div class="p-20">
        <Classify />
        <div class="mt-20">
            <div class="mb-20 flex">
                <el-button @click="switchCheck">{{ isCheck ? '取消选择' : '请选择' }}</el-button>
                <el-button type="primary">上传文件</el-button>
                <div class="round-6 bg-fff p-4 ml-12 flex gap-6" style="border: 1px solid #ddd;">
                    <div class="round-6 w-24 h-24 flex-center pointer" :class="btnIndex === 1 ? 'active' : ''" link @click="btnIndex = 1">
                        <SvgIcon name="HD" size="18" class="iconscoal" :color="btnIndex === 1? 'rgba(var(--main-color), 1)': '#888'" />
                    </div>
                    <div class="round-6 w-24 h-24 flex-center pointer" :class="btnIndex === 2 ? 'active' : ''" link @click="btnIndex = 2">
                        <SvgIcon name="redraw" size="18" class="iconscoal" :color="btnIndex === 2? 'rgba(var(--main-color), 1)': '#888'"/>
                    </div>
                    <div class="round-6 w-24 h-24 flex-center pointer" :class="btnIndex === 3 ? 'active' : ''" link @click="btnIndex = 3">
                        <SvgIcon name="room" size="18" class="iconscoal" :color="btnIndex === 3? 'rgba(var(--main-color), 1)': '#888'"/>
                    </div>
                </div>
            </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="bg-fff round-12 relative hidden pointer 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/audio/components/Item.vue'

const router = useRouter()
const checkedList = ref<any>([])
const btnIndex = ref(0)
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/audio/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;
}
.active {
    background-color: rgba(var(--main-color), 0.1);
}


/* 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>