<template>
    <pageTopBar></pageTopBar>
    <!-- 筛选 -->
    <div class="screen-box wid1200">
        <seach-module @handleTransfer="handleTransfer" :count="listCount"></seach-module>
    </div>

    <div class="list wid1200 flexflex" ref="gridContainer">
        <apartment-item v-if="list.length != 0" v-for="item in list" :item="item"></apartment-item>
    </div>

    <div v-if="list.length == 0" class="empty-box wid1200 flexcenter">
        <empty-duck :hintTextTwo="'建议放宽筛选条件'"></empty-duck>
    </div>

    <div class="bottom-tps" v-if="list.length != 0 && page == 0">- 到底了 -</div>
    <div class="bottom-tps" v-if="page != 0">- 下拉加载更多 -</div>

    <have-questions></have-questions>

    <!-- 页尾 -->
    <page-footer></page-footer>

    <!-- 右下角咨询 -->
    <circle-btn></circle-btn>
    <back-to-top></back-to-top>
</template>
  
<script setup>
import pageTopBar from '../../components/pageTopBar/pageTopBar.vue';
import seachModule from "@/components/apartment/seachModule.vue";
import apartmentItem from '@/components/public/apartment-item.vue';
import haveQuestions from '@/components/public/have-questions.vue'
import pageFooter from '@/components/footer/footer.vue'
import emptyDuck from '@/components/public/empty-duck.vue'
import circleBtn from '@/components/public/circle-btn.vue'
import { ref, onMounted, onUnmounted, watch, getCurrentInstance, nextTick } from 'vue';
import { ElLoading } from 'element-plus'
import Masonry from 'masonry-layout';
import { useRoute, useRouter } from 'vue-router';
import backToTop from '@/components/public/backToTop.vue'


const { proxy } = getCurrentInstance()

const route = useRoute()


const props = defineProps({
    item: Object,
});

const gridContainer = ref(null);


let list = ref([])
let listCount = ref(0) // 列表数量

let masonryInstance = null

onMounted(() => {
    masonryInstance = new Masonry(gridContainer.value, {
        itemSelector: '.item',
        gutter: 20
    });

    if (route.query['companyid']) pitchValue['companyid'] = route.query['companyid']

    getData()

    window.addEventListener('scroll', handleScroll);
});

onUnmounted(() => {
    window.removeEventListener('scroll', handleScroll);
});

let loading = null // 加载
let requestLoading = false // 接口加载中
let page = 1
const getData = () => {
    if (page == 0 || requestLoading) return
    loading = ElLoading.service({
        lock: true,
        text: 'Loading',
        background: 'rgba(0, 0, 0, 0.7)',
    })
    requestLoading = true

    proxy.$get("/tenement/pc/api/apartment", {
        limit: 10,
        page,
        ...pitchValue
    }).then(res => {
        if (res.code != 200) return
        let data = res.data
        list.value = list.value.concat(data.data || [])
        page = data.page * data.limit >= data.count ? 0 : page + 1

        listCount = data.count
        nextTick(() => {
            masonryInstance.reloadItems();
            masonryInstance.layout();
            loading.close()
            requestLoading = false
        })

    }).catch(err => {
        loading.close()
        requestLoading = false
    })

}

const handleScroll = () => {
    const scrollHeight = document.documentElement.scrollHeight;
    const clientHeight = document.documentElement.clientHeight;
    const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
    if (scrollTop + clientHeight >= scrollHeight - 350) getData()
};

let pitchValue = {}

// 筛选组件的参数的中转
const handleTransfer = (data) => {
    for (const key in data.value) {
        if (data.value[key] != pitchValue[key]) {
            pitchValue = { ...data.value }

            for (const key in pitchValue) {
                if (pitchValue[key]) {
                    page = 1
                    list.value = []
                    getData()
                    break
                }
            }

        }
    }
}

</script>
<style lang="less" scoped>
.screen-box {
    margin: 0 auto 20px;
}

.list {
    margin: 0 auto;
    flex-wrap: wrap;
    justify-content: space-between;

    &:after {
        content: "";
        height: 0;
        width: 386px;
    }
}

.empty-box {
    width: 1200px;
    height: 500px;
    background-color: rgba(255, 255, 255, 1);
    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);
    justify-content: center;
    margin: 0 auto;
}

.bottom-tps {
    font-weight: 400;
    font-size: 14px;
    color: #555555;
    text-align: center;
    padding: 30px 0;
}
</style>
