<template>
    <div class="container">


        <div class="search-list" ref='list' v-if="searchList.length>0">
            <!-- <div class="nothing" v-if='isNothing' @scroll="menu">
                未搜到对应房源
            </div> -->
            <largeGoodsItem :goodsInfo='item' :hasLine='index!=searchList.length-1' v-for="(item,index) in searchList"></largeGoodsItem>
        </div>
          <div class="nothing" v-else @scroll="menu">
                未搜到对应房源信息
            </div>
    </div>
</template>
<script>
import GmButton from '@/components/Button'
import largeGoodsItem from '@/components/LargeGoodsItem'
import screen from '@/components/Screen'
import { mapState } from "vuex";
export default {
    data() {
        return {
            searchList: [],
            page: 0,
            flag: true,
            isNothing: false,
            searchData: {}
        }
    },
    created() {
        console.log(this.$route.query.rentingType)
        this.getRecommendList()
    },
    computed: {
        ...mapState(["locationInfo", "userInfo"])
    },
    methods: {
        search(val) {
            this.addHistory(val)
            this.searchVal = val
            this.isSearch = true
            this.page = 0
            this.flag = true
            this.searchData = {}
            this.isNothing = false

            if (this.$refs.screenContent) {
                this.$refs.screenContent.refreash()
            }
            if (this.$refs.searchBefore) {
                this.$refs.searchBefore.addEventListener('transitionend', this.getSearchList)
            }
            else {
                this.getSearchList()
            }

        },
        getSearchList() {

            if (!this.flag) {
                return
            }

            this.flag = false
            if (this.page == 0) {
                this.searchList = []
            }
            this.page++
            this.$store.commit('updateLoading', true)
            var data = this.searchData
            data.currentPage = this.page
            data.pageNumber = 20
            data.statusFlag=1
            this.$http.get({
                url: '/houseInfo/page',
                data: data
            }).then(res => {
                this.$store.commit('updateLoading', false)
                if (res.success) {
                    if (res.data.page.currentPage < res.data.page.totalPage) {
                        this.flag = true
                    }
                    res.data.pp.forEach(item => {
                        this.searchList.push(item)
                    })
                    if (this.searchList.length == 0) {
                        this.isNothing = true
                        this.page = 0
                        this.flag = true
                        this.getRecommendList()
                    }
                }
            });
        },
        getRecommendList() {
            if (!this.flag) {
                return
            }

            this.flag = false
            if (this.page == 0) {
                this.searchList = []
            }
            this.page++

            this.$http.get({
                url: '/houseInfo/page',
                data: {
                    currentPage: this.page,
                    selectedFlag: 'Y',
                    pageNumber: 20,
                      statusFlag:1,
 cityCode: this.locationInfo.code
                }
            }).then(res => {
                this.$store.commit('updateLoading', false)
                if (res.success) {
                    if (res.data.page.currentPage < res.data.page.totalPage) {
                        this.flag = true
                    }
                    res.data.pp.forEach(item => {
                        this.searchList.push(item)
                    })
                }
            });
        },

        screenStart() {
            this.$refs.screenContent.changeShowSreen(true)
        },
        getData(data) {
            console.log(data)
            this.page = 0
            this.flag = true
            this.searchVal = ''
            this.isNothing = false
            this.searchData = data
            this.searchList = []
            this.$store.commit('updateLoading', true)
            setTimeout(() => {
                this.$store.commit('updateLoading', false)
                this.getSearchList()
            }, 100)
        },
        menu() {
            var scrollTop = this.$refs.list.scrollTop
            var height = this.$refs.list.offsetHeight
            var AllHeight = this.$refs.list.scrollHeight

            if (scrollTop + height >= AllHeight && this.recommendFlag) {
                if (this.isNothing) {
                    this.getRecommendList()
                }
                else {
                    this.getSearchList()
                }

            }

        }

    },
    components: { GmButton, largeGoodsItem, screen }
}
</script>
<style lang="less" scoped>
.top {
    display: flex;
    padding: 0.2rem;

    .search {
        display: flex;
        flex-grow: 1;
        height: 0.76rem;
        background: rgba(242, 244, 245, 1);
        border-radius: 0.44rem;
        align-items: center;
        padding: 0 0.2rem 0 0.3rem;
        .icon {
            width: 0.32rem;
            height: 0.32rem;
        }
        .clear {
            width: 0.6rem;
            height: 0.6rem;
        }
        input {
            font-size: 0.3rem;
            font-weight: bold;
            color: rgba(0, 0, 0, 1);
            margin-left: 0.1rem;
            border: 0;
            outline: none;
            background-color: transparent;
            align-self: stretch;
            flex-grow: 1;
            min-width: 0;

            &::-webkit-input-placeholder {
                font-size: 0.28rem;
                font-weight: normal;
                color: rgba(170, 172, 173, 1);
            }
        }
    }

    .next {
        font-size: 0.28rem;
        color: rgba(102, 102, 102, 1);
        line-height: 0.76rem;
        min-width: 1.1rem;
        text-align: center;
    }
}

.searchTitle {
    height: 0.8rem;
    display: flex;
    align-items: center;
    margin: 0 0.3rem;
    border-bottom: 0.02rem solid #f2f4f5;
    .icon {
        width: 0.28rem;
        height: 0.28rem;
    }
    span {
        font-size: 0.24rem;
        font-weight: bold;
        color: rgba(21, 168, 170, 1);
        line-height: 0.34rem;
        flex-grow: 1;
        margin-left: 0.04rem;
    }
    .clear {
        width: 0.4rem;
        height: 0.4rem;
        margin-right: 0.1rem;
    }
}

.hotList {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    padding: 0.2rem 0.3rem;

    .hotItem {
        font-size: 0.26rem;
        color: rgba(102, 102, 102, 1);
        line-height: 0.56rem;
        height: 0.56rem;
        background: rgba(242, 244, 245, 1);
        border-radius: 0.08rem;
        padding: 0 0.1rem;
        margin: 0 0.2rem 0.2rem 0;
    }
}

.historyList {
    padding: 0.42rem 0.3rem;
    .historyItem {
        font-size: 0.28rem;
        color: rgba(0, 0, 0, 1);
        line-height: 0.4rem;
        margin-bottom: 0.3rem;
    }
}

.nothing {
    height: 0.8rem;
    background: rgba(242, 244, 245, 1);
    line-height: 0.8rem;
    font-size: 0.26rem;
    color: rgba(153, 153, 153, 1);
    text-align: center;
}

.search-list {
    flex-grow: 1;
    overflow-y: auto;
}

.slide-down-enter,
.slide-down-leave-active {
    transform: translateY(100%);
    opacity: 0;
}

.slide-down-enter-active,
.slide-down-leave-active {
    transition: all 0.5s;
}
</style>


