<template>
    <Header backgroundBox="#ffffff" :title="queryParams.typeClassify" :showTitle="true"></Header>
    <van-sticky :offset-top="contentHeight">
        <div class="header">
            <div class="tools">
                <van-search v-model="queryParams.materialTitle" shape="round" placeholder="请输入搜索关键词"
                    @search="handleRefresh" @clear="clear" />
            </div>
        </div>
    </van-sticky>
    <div class="content">
        <van-pull-refresh v-model="refreshing" @refresh="handleRefresh">
            <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" :offset="50" @load="getList"
                v-if="dataList.length">
                <div class="list">
                    <div class="item" v-for="(item, index) in dataList" :key="index"
                        @click="router.push({ name: 'classify-detail', params: { id: item.materialId } })">
                        <img :src="fileDomain + item.coverpicture">
                        <div class="desc">
                            <span class="title">
                                <van-text-ellipsis :content="item.materialTitle" />
                            </span>
                            <!-- <div class="tag">
                                <span v-for="(tagName, index) in item.tagName.split(',')" :key="index">{{ tagName
                                    }}</span>
                            </div> -->
                            <div class="info">
                                <div class="user">
                                    <img src="../../static/image/avatar.png">
                                    <span>{{ item.author }}</span>
                                </div>
                                <div class="collect">
                                    <van-icon name="star-o" color="#9F9F9F" />
                                    <!-- <van-icon name="star-o" color="#9F9F9F" v-if="index < 5" />
                                    <van-icon name="star" color="#F1C13E" v-else /> -->
                                    <span>收藏</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </van-list>
            <van-empty description="暂无数据" v-else />
        </van-pull-refresh>
    </div>
</template>

<script setup>
import { selectClassifyList } from '@/api/classify';
const router = useRouter()
const refreshing = ref(false)
const loading = ref(false)
const finished = ref(true)
const fileDomain = import.meta.env.VITE_APP_FILE_URL

const contentHeight = ref(50)
onLoad((options) => {
    console.log(options)
    queryParams.typeClassify = options.typeClassify
    getList()
    xma.xh.getMenuButtonBoundingClientRect({
      success(res) {
        contentHeight.value = (res.top + res.bottom) / 2 + 25;
      },
    });
})

const page = reactive({
    pageNum: 0,
    pageSize: 10
})
const queryParams = reactive({
    materialTitle: '',
    materialType: 3,
    typeClassify: null,
    organizeId: 0
})
const dataList = ref([])

const getList = async () => {
    page.pageNum++
    loading.value = true
    const res = await selectClassifyList(page, queryParams)
    setDataList(res)
}

const setDataList = (res) => {
    if (refreshing.value) {
        dataList.value = res.data.list
    } else {
        dataList.value.push(...res.data.list)
    }
    loading.value = false
    finished.value = dataList.value.length >= res.data.total
    refreshing.value = false
}

const handleRefresh = () => {
    refreshing.value = true
    page.pageNum = 0
    getList()
}

const clear = (e) => {
    console.log(e)
    console.log(111111)
}
</script>

<style scoped lang="scss">
.header {
    padding: 10px;
    // margin-left: 20rpx;
    background-color: #ffffff;
    box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.1);

    .tools {

        :deep(.van-search) {
            flex: 1;
            padding: 0;


        }
    }
}

.header-placeholder {
    height: 117px;
}

.content {
    background-color: #f3f3f3;
    padding: 10px 10px 0 10px;
    min-height: 100vh;

    .list {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;

        .item {
            break-inside: avoid;
            background-color: #ffffff;
            border-radius: 5px;
            margin-bottom: 10px;
            width: 49%;

            img {
                width: 100%;
                height: 150px;
                object-fit: cover;
            }

            .desc {
                padding: 5px 10px;
                display: flex;
                flex-direction: column;
                gap: 5px;

                .title {
                    font-size: 16px;

                }

                .tag {
                    display: flex;
                    flex-wrap: wrap;
                    gap: 3px;

                    span {
                        font-size: 14px;
                        padding: 0 5px;
                        background-color: #F3F8FF;
                        color: #4C70AC;
                        font-size: 12PX;
                        border-radius: 3px;
                    }
                }

                .info {
                    display: flex;
                    justify-content: space-between;
                    padding: 5px 0;

                    .user {
                        display: flex;
                        gap: 7px;
                        align-items: center;

                        img {
                            width: 23px;
                            height: 23px;
                            border-radius: 50%;
                        }

                        span {
                            color: #9F9F9F;
                            font-size: 12px;
                        }
                    }
                }

                .collect {
                    display: flex;
                    align-items: center;
                    gap: 3px;

                    span {
                        color: #9F9F9F;
                        font-size: 12px;
                    }
                }
            }
        }
    }
}

.active {
    background-color: #0e7ce3 !important;
    color: #ffffff !important;
}
</style>