<template >
    <div>
        <div class="home " >
            <van-sticky>
                <div :style="style">
                    <van-search v-model="value" placeholder="请输入搜索关键词" shape="round"  /> 
                </div>
            </van-sticky>
        </div>

        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
            <van-swipe-item v-for="(item, i) in swipe_list" :key="i">
                <van-image :src="item.pic" class="imged" fit="cover" />
            </van-swipe-item>
        </van-swipe>

        <van-grid square :border="false" class="fl_wp" :column-num="5" >
            <van-grid-item v-for="(item, i) in link_list" :key="i" @click="tabClick(item)">
                <template #icon>
                    <van-image :src="item.pic" class="imged" />
                </template>
                <template #text>
                    <span class="mc">{{ item.name }}</span>
                </template>
            </van-grid-item>
        </van-grid>
        <div class="lines"></div>


        <div class="warp_body">
            <refreshList :freshMap="freshMap" @refresh="onRefresh" @onLoad="onLoad">
                <div class="recommend_box">
                    <van-cell :border="false" title="推荐" />
                    <div class="recommend_body">
                        <List :goodsList="bookList"></List>
                    </div>
                </div>
            </refreshList>
        </div>
    </div>
</template>

<script setup lang="ts">
import { homePage } from '@/libs/mock'
import router from '@/router';

const value = ref('')
const style = ref(null)

const freshMap = reactive({
    refreshLoad: false,
    listLoading: false,
    listFinished: false,
});
var bookList = homePage.bookList
const swipe_list = homePage.swipe_list
const link_list = homePage.link_list

const  tabClick = (item:any) =>{
    console.log(item);
    switch (item.id) {
        case 1 :
        case 4 :    
            router.push('/cate')
            break;
        case 2 :
        case 3 :
            router.push('/book')
            break;
        default:
            break;
    }
}


//下拉刷新
const onRefresh = () => {
    freshMap.refreshLoad = true;
    setTimeout(() => {
        bookList = homePage.bookList
        freshMap.refreshLoad = false;
    }, 1000)
};
// 触底加载
const onLoad = () => {
    bookList = bookList.concat(homePage.bookList)
    freshMap.listLoading = false;
    freshMap.listFinished = false;
    if (bookList.length > 50) {
        freshMap.listFinished = true;
    }

};

onMounted(() => {
    window.addEventListener("scroll", windowScroll);
})
const windowScroll = () => {
    const scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
    const opacity = Math.abs(Math.round(scrollTop)) / 250;
    style.value = {background: `linear-gradient(90deg, rgba(205, 218, 252,${opacity}), rgba(255, 240, 230,${opacity} ))`}
}
onBeforeUnmount(()=>{
    window.removeEventListener("scroll", windowScroll); 
})

</script>

<style  lang="scss"  scoped>
.home {
    position: relative;
    background: linear-gradient(90deg, rgba(205, 218, 252), rgba(255, 240, 230, ));
    height: 80px;
    line-height: 50px;

    .van-search {
        background-color: transparent;
    }
}

.home::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 40px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff);
}

.lines {
    width: 100%;
    height: 14px;
    background-color: #f7f8fa;
    margin: 10px 0;
}

.my-swipe {
    height: 150px;
    margin: 5px 12px 15px;
    border-radius: 12px;
}

.fl_wp {
    .imged {
        width: 40px;
    }

    .mc {
        font-size: 14px;
    }
}
</style>