<template>
    <Header :backgroundBox="backgroundBox" :show="false">
        <div class="header">
            <div class="title">分类</div>
            <div class="search">
                <div class="s-box">
                    <van-icon name="search" color="#303030" />
                    <input class="placeholder" placeholder="请输入关键词" v-model="queryParams.classifyType"
                        @confirm="handleRefresh" />
                </div>
                <van-icon v-if="queryParams.classifyType" name="clear" color="#969696" @tap="clear" />
            </div>
        </div>
    </Header>
    <div class="bg">
        <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-list', params: { typeClassify: item.classifyType } })">
                            <img src="/static/image/defaultPic.png">
                            <div class="blurbox">
                                <div class="bg"></div>
                                <div class="title">{{ item.classifyType }}</div>
                            </div>
                        </div>
                    </div>
                </van-list>
            </van-pull-refresh>
        </div>
    </div>
</template>


<script setup>
import { selectClassifyTypeList } 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


import { useInitScroll } from '@/hooks/useScroll'
useInitScroll()

const backgroundBox = ref('#D2E4FF');
// 监听页面滚动
onPageScroll((e) => {
  if (e.scrollTop > 40) {
    backgroundBox.value = '#fff';
  } else {
    backgroundBox.value = '#D2E4FF';
  }
});

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

const page = reactive({
    pageNum: 0,
    pageSize: 12
})
const queryParams = reactive({
    materialType: 3,
    classifyType: '',
})
const dataList = ref([])

const getList = async () => {
    page.pageNum++
    loading.value = true
    const res = await selectClassifyTypeList(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 = () => {
    queryParams.classifyType = ''
    handleRefresh()
}

</script>

<style scoped lang="scss">
.header {
    display: flex;
    align-items: center;
    padding: 0 20px;
    height: 50px;
    gap: 15px;
    // background-color: #D2E4FF;

    .title {
        font-size: 18px;
        font-weight: bold;
    }

    .search {
        width: 45%;
        background-color: #F7F8FA;
        border-radius: 20px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 32px;
        opacity: 0.7;
        padding: 0 10px;

        .s-box {
            display: flex;
            align-items: center;
            gap: 5px;

            .placeholder {
                color: #303030;
                font-size: 14px;
            }
        }


    }
}

.bg {
    height: 100vh;
    background: linear-gradient(to bottom, #D2E4FF 5%, #fff 25%);



    .content {
        padding: 10px 10px 0 10px;
        min-height: 100vh;

        .list {
            display: flex;
            flex-wrap: wrap;
            gap: 12rpx;

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

                img {
                    width: 100%;
                    height: 170px;
                    object-fit: cover;
                    border-radius: 5px;
                }

                .blurbox {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    position: absolute;
                    bottom: 0;
                    height: 32px;
                    width: 100%;
                    border-radius: 0 0 5px 5px;

                    .bg {
                        position: absolute;
                        border-radius: 0 0 5px 5px;
                        width: 100%;
                        height: 100%;
                        background: rgba(255, 255, 255, 0.25);
                        backdrop-filter: blur(10px);
                    }

                    .title {
                        font-size: 28rpx;
                        color: #fff;
                        font-weight: bold;
                        z-index: 1;
                    }
                }
            }
        }
    }
}
</style>
