<template>
    <div class="box-min-1200-src">
        <!-- <pageTopBar :bannerList="bannerList.data.personHousing"></pageTopBar> -->
        <pageTopBar></pageTopBar>
        <seachModule :getDataList="setSeachSelectData"></seachModule>
        <div class="dis-f jus-x al-item">
            <div class="body-maxWidth mg-t-35">
                <div v-show="dataList.data && dataList.data.length > 0" style="width: 1200px;" ref="list">
                    <biserialItem v-for="(item, i) in pageList" :key="i" :item="item" :school="school"></biserialItem>
                </div>
                <div class="dis-f jus-x no-list-box al-item" v-show="dataList.data && dataList.data.length === 0">
                    <noList hint-text-two="建议放宽筛选条件"></noList>
                </div>

                <!-- 其他附近房源 -->
                <div v-if="moreList.length != 0" class="other-nearby-listings-box flexcenter">没有找到更多房源，为您推荐其他附近房源</div>
                <div style="width: 1200px;" ref="moreShowList">
                    <biserialItem v-for="(item, i) in moreList" :key="i" :item="item" :school="school"></biserialItem>
                </div>
            </div>
        </div>
        <loadMoreText :loadText="loadingText" v-show="dataList.data && dataList.data.length > 0"></loadMoreText>
        <listBtmPrompt></listBtmPrompt>
        <footerTool></footerTool>
    </div>

    <back-to-top></back-to-top>
</template>

<script setup>
import { reactive, onMounted, ref, provide, onBeforeUnmount, nextTick, getCurrentInstance } from "vue"
import pageTopBar from "../../components/pageTopBar/pageTopBar.vue"
import seachModule from "../../components/seachModule/seachModule1.vue"
import biserialItem from "../../components/biserialListItem/biserialListItem.vue"
import listBtmPrompt from "../../components/public/have-questions.vue"
import noList from "../../components/public/empty-duck.vue"
import circleBtn from "@/components/public/circle-btn.vue"
import api from "../../utils/api"
import tool from "../../toolJs/downLoadMore"
import { useRouter } from "vue-router"
import { ElMessage } from "element-plus"
import footerTool from "@/components/footer/footer.vue"
import loadMoreText from "../../components/loadMore/loadMoreText.vue"
import backToTop from "@/components/public/backToTop.vue"
import Masonry from "masonry-layout"
import store from "../../store/index"
import { set } from "nprogress"

//路由
const router = useRouter()

//瀑布实例
let listMasonryInstance = null
let listMasonryInstanceMore = null

//获取数据
let pages = ref(1)
let dataList = reactive({ data: [], count: null })
let dataCount = ref(0)
let pageList = ref([])
let seachSelectData = reactive({ data: {} })
let loading = ref(true)
let loadingText = ref(" 下拉加载更多 ")

let school = ref("") // 单独提前 选中的学校id 需要 在跳转页面中使用
provide("count", dataCount)

const { proxy } = getCurrentInstance()

//保存搜索设置
let setSeachSelectData = (data, noMask = false) => {
    store.state.personPitchValue = data
    pages.value = 1
    seachSelectData.data = {
        ...data,
        noMask,
    }
    loading.value = true
    getDataList(seachSelectData.data)
}

//获取搜索数据
let getDataList = data => {
    loadingText.value = " 加载中..... "
    if (!loading.value) return
    loading.value = false
    let postData = {
        page: pages.value,
        intermediary: 0,
        ...data,
    }
    school.value = postData["school"] || ""

    if (!postData["orderby"]) postData["orderby"] = "default"

    moreList.value = []
    window.removeEventListener("scroll", getMoreScroll, true)

    api.getLists(postData).then(res => {
        if (res.code === 200) {
            dataList.data = res.data.data
            if (res.data.data.length < 20) {
                loadingText.value = " 到底了 "
            } else {
                loadingText.value = " 下拉加载更多 "
            }
            if (pages.value === 1) {
                pageList.value = []
            }
            pageList.value = pageList.value.concat(res.data.data)
            pageList.tab = 1
            dataList.count = res.data.count
            dataCount.value = res.data.count
            nextTick(() => {
                listMasonryInstance.reloadItems()
                listMasonryInstance.layout()
                if (dataList.data.length >= 20) loading.value = true
            })

            // 小于20 代表筛选 数据不够了，需要加载更多的 随便在这里初始化 更多的 瀑布流 HTML
            if (res.data.data.length < 20 && (data["school"] || data["location"].length != 0)) {
                morePage.value = 1
                getMoreList(data)
            }
        } else {
            ElMessage({
                message: res.message,
                center: true,
            })
        }
    })
}

//加载更多
let downLoadMore = () => {
    tool.loadMore(() => {
        if (!loading.value || dataList.data.length == 0) return
        pages.value++
        getDataList(seachSelectData.data)
    })
}

let list = ref(null)
let moreShowList = ref(null)
let moreState = ref(false) // 更多列表 显示状态
let morePage = ref(1)
let moreList = ref([])
let moreLoading = ref(false)

// 加载更多数据列表
const getMoreList = data => {
    if (morePage.value == 0 || moreLoading.value) return
    moreLoading.value = true
    let postData = {
        page: morePage.value,
        intermediary: 0,
        ...seachSelectData.data,
    }

    if (!postData["orderby"]) postData["orderby"] = "default"

    api.getMoreLists(postData).then(res => {
        if (res.code != 200) return
        const data = res.data
        moreList.value = moreList.value.concat(data.data)
        moreState.value = true
        if (data.data && data.data.length < data.limit) morePage.value = 0
        else {
            morePage.value++
            window.addEventListener("scroll", getMoreScroll, true)
        }
        nextTick(() => {
            listMasonryInstanceMore.reloadItems()
            listMasonryInstanceMore.layout()
            moreLoading.value = false
        })
    })
}

const getMoreScroll = () => {
    let body = document.documentElement ? document.documentElement : document.body ? document.body : document.querySelector(".element")
    let scrollTop = body.scrollTop
    let clientHeight = body.clientHeight
    let offsetHeight = body.offsetHeight
    if (scrollTop + clientHeight >= offsetHeight - 200 && !moreLoading.value) getMoreList()
}

//listImg
onMounted(() => {
    listMasonryInstance = new Masonry(list.value, {
        itemSelector: ".item",
        gutter: 20,
    })

    listMasonryInstanceMore = new Masonry(moreShowList.value, {
        itemSelector: ".item",
        gutter: 20,
    })

    // let { type, data } = router.currentRoute.value.query
    // let typeData = null
    // if (data) typeData = JSON.parse(data)
    // if (data && Object.keys(data).length > 0) {
    //     if (type !== 'location') {
    //         seachSelectData.data = { [type]: typeData.id }
    //     } else {
    //         seachSelectData.data = { [type]: typeData }
    //     }
    // }
    // banner()
    // getDataList(seachSelectData.data)

    window.addEventListener("scroll", downLoadMore, true)
})

onBeforeUnmount(() => {
    window.removeEventListener("scroll", downLoadMore, true)
})
</script>
<style scoped lang="less">
img {
    object-fit: contain;
}

.dis-f {
    display: flex;
}

.jus-x {
    justify-content: center;
}

.al-item {
    align-items: center;
}

.pos-r {
    position: relative;
}

.body-maxWidth {
    width: 1200px;
    min-width: 1200px;
}

.s-w-100 {
    width: 100%;
}

.jus-bet {
    justify-content: space-between;
}

.mg-t-35 {
    margin-top: 35px;
}

.no-list-box {
    height: 500px;
    background: inherit;
    background-color: rgba(255, 255, 255, 1);
    border: none;
    border-radius: 16px;
    -moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.0784313725490196);
    -webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.0784313725490196);
    box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.0784313725490196);
}

.other-nearby-listings-box {
    width: 100%;
    height: 32px;
    color: #525151;
    background: rgba(245, 251, 255, 1);
    font-size: 14px;
    margin-top: 40px;
    margin-bottom: 43px;
}
</style>
