<template>
    <div class="box-min-1200-src">
        <pageTopBar></pageTopBar>
        <inputModule :getDataList="setSeachSelectData" :count="dataCount" ref="inputModuleInfo" :isNoGetData="isNoGetData"></inputModule>
        <div class="dis-f jus-x al-item">
            <div class="body-maxWidth mg-t-35">
                <div class="body-maxWidth" v-show="dataList.data && dataList.data.length > 0 && seachSelectData.data.tabType !== 'apartment' && seachSelectData.data.intermediary !== ''" ref="list">
                    <biserialItem v-for="(item, i) in pageList" :key="i" :item="item"></biserialItem>
                </div>
                <div class="body-maxWidth" v-show="seachSelectData.data && seachSelectData.data.tabType === 'apartment' && dataList.data && dataList.data.length > 0" ref="gridContainer">
                    <apartment-item v-for="(item, index) in listApartment" :key="index" :item="item" :masonryInstance="masonryInstance" @handlecollect="handlecollect"></apartment-item>
                </div>
                <div class="dis-f jus-x no-list-box al-item" v-show="dataList.data && dataList.data.length === 0">
                    <noList hintText="暂无搜索结果" hintTextTwo="建议更换搜索关键词，或放宽筛选条件"></noList>
                </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 biserialItem from "../components/biserialListItem/biserialListItem.vue";
import listBtmPrompt from "../components/public/have-questions.vue";
import noList from "../components/public/empty-duck.vue";
import api from "../utils/api";
import tool from "../toolJs/downLoadMore";
import inputModule from "../components/seachPage/input.vue";
import apartmentItem from "@/components/public/apartment-item.vue";
import Masonry from "masonry-layout";
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";

const { proxy } = getCurrentInstance();

//路由
const route = useRouter();
let routeQuery = reactive({ data: {} });

//获取数据
let pages = ref(1); //页数
let dataList = reactive({ data: [], count: 0 }); //个人/中介数据
let dataCount = ref(0); //数据数量
let pageList = ref([]);
// let pageList = reactive({ 1: [], 2: [], height1: 0, height2: 0, tab: 1 })//双列瀑布数据
let seachSelectData = reactive({ data: {} }); //搜索数据
let loading = ref(true); //开关
let loadingText = ref(` 下拉加载更多 `);
let listApartment = ref([]); //公寓数据
let masonryInstance = null; //瀑布实例
let listMasonryInstance = null;
provide("count", dataCount);

//保存搜索设置
let setSeachSelectData = (data, type) => {
    pages.value = 1;
    seachSelectData.data = {
        ...data,
    };
    loading.value = true;
    getDataList(seachSelectData.data, type);
};

//初始化列表参数
let setInitial = () => {
    pageList[1] = [];
    pageList[2] = [];
    pageList.height1 = 0;
    pageList.height2 = 0;
};

//获取搜索数据
let getDataList = (data, type = true) => {
    if (!type) {
        //是否继续搜索
        seachSelectData.data.tabType !== "apartment" ? (pageList.value = []) : (listApartment.value = []);
        dataList.data = [];
        dataCount.value = 0;
        loading.value = false;
        return;
    }
    loadingText.value = " 加载中..... ";
    if (!loading.value) return;
    let postData = {
        page: pages.value,
        limit: 20,
        ...data,
    };
    loading.value = false;
    let seachApi = null;
    if (seachSelectData.data.tabType !== "apartment") seachApi = api.getLists(postData);
    else seachApi = proxy.$post("https://api.gter.net/v1/apartment/lists", postData);
    // else seachApi = api.apartment(postData)

    seachApi.then((res) => {
        if (res.code === 200) {
            dataList.data = res.data.data;
            if (res.data.data.length < 20) {
                loadingText.value = ` 到底了 `;
                loading.value = false;
            } else {
                loadingText.value = " 下拉加载更多 ";
                loading.value = true;
            }
            if (seachSelectData.data.tabType !== "apartment") {
                if (pages.value === 1) {
                    setInitial();
                    pageList.value = [];
                }
                pageList.tab = 1;
                dataList.count = res.data.count;
                dataCount.value = res.data.count;
                pageList.value = pageList.value.concat(dataList.data);
                nextTick(() => {
                    listMasonryInstance.reloadItems();
                    listMasonryInstance.layout();
                });
            } else {
                let data = res.data;
                dataList.count = res.data.count;
                dataCount.value = res.data.count;
                if (pages.value === 1) listApartment.value = [];
                listApartment.value = listApartment.value.concat(data.data);
                nextTick(() => {
                    masonryInstance.reloadItems();
                    masonryInstance.layout();
                    if (res.data.data.length >= 20) {
                        loading.value = true;
                    }
                });
            }
            inputModuleInfo.value.setListCount(seachSelectData.data, dataList.count);
        } else {
            ElMessage({
                message: res.message,
                center: true,
            });
        }
    });
};

let isDownGetData = ref(true); // 是否可以下拉获取数据

provide("isDownGetData", isDownGetData);
//加载更多
let downLoadMore = () => {
    tool.loadMore(() => {
        if (!loading.value || !isDownGetData.value) return;
        pages.value++;
        getDataList(seachSelectData.data);
    });
};

let inputModuleInfo = ref(null);
const gridContainer = ref(null);
const list = ref(null);
//listImg
onMounted(() => {
    listMasonryInstance = new Masonry(list.value, {
        itemSelector: ".item",
        gutter: 20,
    });
    masonryInstance = new Masonry(gridContainer.value, {
        itemSelector: ".item",
        gutter: 15,
    });
    routeQuery.data = route.currentRoute.value.query;
    if (routeQuery.data.keyword && routeQuery.data.keyword.replace(/\s/g, "") && routeQuery.data.houseingPageType != 6) {
        inputModuleInfo.value.searchInit(routeQuery.data.keyword); //调用搜索组件的搜索功能
        // route.currentRoute.value.query.keyword = ''
    } else {
        inputModuleInfo.value.checkPageType();
    }
    window.addEventListener("scroll", downLoadMore, true);
});

onBeforeUnmount(() => {
    window.removeEventListener("scroll", downLoadMore, true);
});


// 处理列表的点击收藏
const handlecollect = (uniqid) => {
    let targetIndex = 0;
    let token = "";

    listApartment.value.forEach((element, index) => {
        if (element.uniqid == uniqid) {
            targetIndex = index;
            token = element.token || "";
        }
    });

    // api.apartmentCollection({ token }).then((res) => {
    proxy.$post("https://api.gter.net/v1/apartment/collection", { token }).then((res) => {
        if (res.code != 200) return;
        const data = res.data;
        listApartment.value[targetIndex]["iscollect"] = data.status;
        ElMessage.success(res.message);
    });
};
</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);
}
</style>
