<template>
    <Header :backgroundBox="backgroundBox" :show="false">
        <div class="header">
            <div class="title">推荐</div>
            <div class="search">
                <div class="s-box" @click="router.push({ name: 'home-list' })">
                    <van-icon name="search" color="#303030" />
                    <input class="placeholder" placeholder="请输入关键词" />
                </div>
            </div>
        </div>
    </Header>
    <div class="bg">
        <div class="content">
            <div class="top">
                <van-swipe :autoplay="3000" lazy-render>
                    <van-swipe-item v-for="image in images" :key="image">
                        <img class="img" :src="image" />
                    </van-swipe-item>
                </van-swipe>
            </div>
            <van-notice-bar color="#2879FE" background="#EFF4FB" left-icon="volume" text="公告信息" />
            <div class="info">
                <div class="titlebox" @click="router.push({ name: 'home-list' })" >
                    <div class="title">推荐图组</div>
                    <div class="flexend">
                        <div class="more">查看更多</div>
                        <van-icon name="arrow" color="#707070" size="12" />
                    </div>
                </div>
                <scroll-view scroll-x="true" class="scroll-view_H" style="white-space: nowrap;">
                    <div class="list">
                        <img :src="fileDomain + item.coverpicture" v-for="(item, index) in dataList" :key="index"
                            @click="router.push({ name: 'classify-detail', params: { id: item.materialId } })" />
                    </div>
                </scroll-view>
            </div>
            <div class="info">
                <div class="titlebox">
                    <div class="title">分类</div>
                    <div class="flexend" @click="router.pushTab({ name: 'classify' })">
                        <div class="more">查看更多</div>
                        <van-icon name="arrow" color="#707070" size="12" />
                    </div>
                </div>
                <div class="classifyList">
                    <div class="item" v-for="(item, index) in classifyList" :key="index"
                        @click="toClassifyDetail(item.classifyType, index)">
                        <img src="/static/image/defaultPic.png">
                        <div class="showMore" v-if="index == classifyList.length - 1">
                            <div class="more">查看更多</div>
                        </div>
                        <div class="blurbox" v-else>
                            <div class="bg"></div>
                            <div class="title">{{ item.classifyType }}</div>
                        </div>
                    </div>
                </div>
            </div>
            <div style="height: 100rpx;"></div>
        </div>
    </div>
</template>

<script setup>
import { selectFinePictureList } from '@/api/publish'
import { selectClassifyTypeList } from '@/api/classify';
import banner6 from '@/static/image/banner6.jpg'
import banner5 from '@/static/image/banner5.jpg'

const backgroundBox = ref('#D2E4FF');
const router = useRouter()
const fileDomain = import.meta.env.VITE_APP_FILE_URL
const images = ref([
banner5,
banner6
]);

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

const page = reactive({
    pageNum: 1,
    pageSize: 6
})
const catalog = reactive({
    materialTitle: '',
    collect: 1,
    materialType: 3,
    typeClassify: '',
    sourceName: '',
    organizeInt: [0],
    tagId: '',
    beginTime: '',
    endTime: ''
})

const dataList = ref([])
const handleSelectFindList = async () => {
    const res = await selectFinePictureList(page, catalog)
    dataList.value.push(...res.data.list)
}
handleSelectFindList()

const queryParams = reactive({
    materialType: 3,
    classifyType: '',
})
const classifyList = ref([])
const getList = async () => {
    page.pageNum++
    const res = await selectClassifyTypeList(page, queryParams)
    classifyList.value.push(...res.data.list)
}
getList()

const toClassifyDetail = (classifyType, idx) => {
    if (idx == classifyList.value.length - 1) {
        router.pushTab({ name: 'classify' })
    } else {
        router.push({ name: 'classify-list', params: { typeClassify: classifyType } })
    }
}
</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: 30rpx 30rpx;
        display: flex;
        flex-direction: column;
        gap: 30rpx;

        .top {
            border-radius: 14rpx;

            .img {
                width: 100%;
                height: 360rpx;
                border-radius: 14rpx;
            }
        }

        .info {
            display: flex;
            flex-direction: column;
            gap: 30rpx;
            margin-top: 20rpx;

            .titlebox {
                display: flex;
                align-items: center;
                justify-content: space-between;

                .title {
                    font-size: 32rpx;
                    font-weight: bold;
                    color: #000;
                }

                .flexend {
                    display: flex;
                    justify-content: flex-end;
                    align-items: center;
                    gap: 8rpx;

                    .more {
                        font-size: 24rpx;
                        color: #707070;
                    }
                }
            }

            .scroll-view_H {
                width: 100%;

                .list {
                    white-space: nowrap;

                    img {
                        object-fit: cover;
                        display: inline-block;
                        /* 内部元素横向展示 */
                        margin-right: 16rpx;
                        /* 可根据需求设置间距 */
                        width: 286rpx;
                        height: 340rpx;
                        border-radius: 6rpx;
                    }
                }
            }

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

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

                    img {
                        width: 100%;
                        height: 340rpx;
                        object-fit: cover;
                        border-radius: 10rpx;
                    }

                    .showMore {
                        border-radius: 10rpx;
                        top: 0;
                        left: 0;
                        width: 100%;
                        height: 340rpx;
                        position: absolute;
                        background: rgba(255, 255, 255, 0.25);
                        backdrop-filter: blur(20rpx);
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        z-index: 10;

                        .more {
                            font-size: 32rpx;
                            color: #fff;
                        }
                    }

                    .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>