<template>
    <div class="container">
        <div class="list" v-if="list.length>0" ref="list" @scroll="menu">
            <largeGoodsItem :goodsInfo='item.houseInfo' :hasLine='index!=list.length-1' v-for="(item,index) in list"></largeGoodsItem>
        </div>
        <div class="nothing" v-else>
            <img src="../assets/info_icon_shouchang_kong.png" alt="">
            <div class="title">还没收藏任何房源哦～</div>
            <div class="btn">
                <gm-button type='primary' @click="goHome">去逛逛</gm-button>
            </div>
        </div>
    </div>
</template>
<script>
import GmButton from '@/components/Button'
import largeGoodsItem from '@/components/LargeGoodsItem'
import { mapState } from "vuex";
export default {
    data() {
        return {
            list: [],
            flag: true,
            currentPage: 0,
        }
    },
    created() {
        this.$store.commit('updateLoading', true)
        this.getData()

    },
    computed: {
        ...mapState(["locationInfo", "userInfo"])
    },
    methods: {
        getData() {
            if (!this.flag) {
                return
            }
            this.flag = false
            if (this.currentPage == 0) {
                this.list = []
            }
            this.currentPage++
            this.$http.get({
                url: '/userCollection/page',
                data: {
                    userId: this.userInfo.id,
                    currentPage: this.currentPage,
                    pageNumber: 20,
                    showFlag: 'Y'
                }
            }).then(res => {
                this.$store.commit('updateLoading', false)
                if (res.success) {
                    res.data.pp.forEach(item => {
                        this.list.push(item)
                    })
                    if (res.data.page.currentPage < res.data.page.totalPage) {
                        this.flag = true
                    }
                }
            })
        },
        menu() {
            var scrollTop = this.$refs.list.scrollTop
            var height = this.$refs.list.offsetHeight
            var AllHeight = this.$refs.list.scrollHeight
            if (scrollTop + height >= AllHeight) {
                this.getData()
            }
        },
        goHome() {
            this.$router.push({
                name: 'home'
            })
        }
    },
    components: { GmButton, largeGoodsItem }
}
</script>
<style lang="less" scoped>
.container {
    background-color: #f2f4f5;
}
.list {
    background-color: #fff;
    flex-grow: 1;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}
.nothing {
    display: flex;
    flex-direction: column;

    img {
        width: 3rem;
        height: 3rem;
        margin: 0.6rem auto;
    }

    .title {
        font-size: 0.24rem;
        color: rgba(170, 172, 173, 1);
        line-height: 0.34rem;
        text-align: center;
    }

    .btn {
        margin: 1.6rem;
    }
}
</style>


