<template>
    <Header backgroundBox="#ffffff">
        <div class="header">
            <van-search shape="round" placeholder="请输入专题关键字" />
        </div>
    </Header>
    <div class="container">
        
        <div class="content">
            <div class="c-title">热门专题</div>
            <div class="list">
                <div class="item"
                    @click="router.push({ name: 'subject-list', params: { tagId: item.tagId, tagName: item.tagName } })"
                    v-for="(item, index) in dataList" :key="index">
                    <img class="cover" src="../../static/image/banner5.jpg">
                    <div class="title">{{ item.tagName }}</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { selectTagsList } from '@/api/subject'
import { useInitScroll } from '@/hooks/useScroll'

useInitScroll()

const router = useRouter()

const queryParams = reactive({
    tagName: '专题',
    type: 1
})
const dataList = ref([])
const getList = async () => {
    const res = await selectTagsList(queryParams)
    dataList.value = res.data
}
getList()
</script>

<style lang="scss" scoped>
.container {
    .content {
        padding: 20px 15px 0 15px;

        .c-title {
            font-size: 16px;
            color: #232524;
        }

        .list {
            display: flex;
            flex-wrap: wrap;
            gap: 12px;
            margin-top: 10px;

            .item {
                width: calc(50% - 12px);
                text-align: center;
                padding: 13px 0;
                box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.1);
                background-image: url('../../static/image/subject-bg.png');
                background-size: cover;
                background-repeat: no-repeat;
                background-position: center;

                .cover {
                    width: 77px;
                    height: 77px;
                    border-radius: 50%;
                    object-fit: cover;
                }

                .title {
                    margin-top: 19px;
                    font-size: 14px;
                    color: #363636;
                }
            }
        }
    }
}
</style>@/hooks/useScroll