<template>
    <div class="container">
        <div class="top">
            <div class="search">
                <img class="icon" src="@/assets/home_icon_search.png" alt="">
                <input autofocus @focus="onInput=true" @blur="onInput=false" @keydown="keyPrinter" type="text" v-model="searchVal" placeholder="请输入搜索内容">
                <img v-if="onInput&&searchVal" @click="searchVal=''" src="@/assets/list_icon_del.png" alt="" class="clear">
            </div>
            <div class="next" v-if="isSearch" @click="searchVal='',isSearch=false,searchList=[],isNothing=false,isShowScreen=false">取消</div>
            <div class="next" v-else @click="$router.go(-1)">返回</div>
        </div>
        <transition name="slide-down">
            <div v-if="!isSearch" ref="searchBefore">
                <div class="searchTitle">
                    <img class="icon" src="@/assets/search_iocn_remen.png" alt="">
                    <span>周边热搜</span>
                </div>
                <div class="hotList">
                    <div class="hotItem" @click="search(item.keyWord)" v-for="item in hotList">
                        {{item.keyWord}}
                    </div>
                </div>
                <template v-if="history.length>0">
                    <div class="searchTitle">
                        <img class="icon" src="@/assets/search_iocn_remen.png" alt="">
                        <span>历史记录</span>
                        <img class="clear" @click="clearHistory" src="@/assets/search_iocn_sanchu.png" alt="">
                    </div>
                    <div class="historyList">
                        <div class="historyItem" @click="search(item)" v-for="item in history">{{item}}</div>
                    </div>
                </template>
            </div>
        </transition>
        <template v-if="isSearch">
            <div @click="screenStart" v-if="isShowScreen" ref="screenBox">
                <screen ref='screenContent' @getData='getData'></screen>
            </div>

            <div class="search-list" ref='list'>
                <div class="nothing" v-if='isNothing' @scroll="menu">
                    未搜到对应房源,以下是推荐房源
                </div>
                <largeGoodsItem :goodsInfo='item' v-for="item in searchList"></largeGoodsItem>
            </div>

        </template>

    </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 {
            searchVal: '',
            isSearch: false,
            onInput: false,
            hotList: [],
            history: [],
            searchList: [],
            page: 0,
            flag: true,
            isNothing: false,
            isShowScreen: false,
            searchData: {}
        }
    },
    name: 'search',
    created() {
        this.getAllHot()
        this.getHistory()
    },
    computed: {
        ...mapState(["locationInfo", "userInfo", 'direction'])
    },
    methods: {
        getAllHot() {
            this.$http.get({
                url: '/hotSearch/all',
                data: {}
            }).then(res => {

                if (res.success) {
                    this.hotList = res.data
                }
            });
        },
        search(val) {
            this.$store.commit('updateLoading', true)
            this.addHistory(val)
            this.searchVal = val
            this.isSearch = true
            this.page = 0
            this.searchData = {}
            this.isNothing = false
            this.flag = true
            if (this.$refs.screenContent) {
                this.$refs.screenContent.refreash()
            }
            // if (this.$refs.searchBefore) {
            //     this.$refs.searchBefore.addEventListener('transitionend', this.getSearchList)

            // }
            // else {

            // }
            setTimeout(() => {
                this.getSearchList()
            }, 600)

        },
        getSearchList() {
            this.isShowScreen = true
            if (!this.flag) {
                return
            }

            this.flag = false
            if (this.page == 0) {
                this.searchList = []
            }
            this.page++
            this.$store.commit('updateLoading', true)
            var data = this.searchData
            console.log(data)
            if (this.searchVal && !this.isNothing) {
                data.searchKey = this.searchVal
            }
            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,
                    recommendFlag: 'Y',
                    pageNumber: 20,
                    statusFlag: 1
                }
            }).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)
                    })
                }
            });
        },
        getHistory() {

            var history = localStorage['houseSearch_' + this.userInfo.id] == null ? [] : JSON.parse(localStorage['houseSearch_' + this.userInfo.id])

            this.history = history
        },
        addHistory(str) {
            var history = localStorage['houseSearch_' + this.userInfo.id] == null ? [] : JSON.parse(localStorage['houseSearch_' + this.userInfo.id])
            if (history.indexOf(str) == -1) {
                history.splice(0, 0, str);
                console.log(history)
                localStorage['houseSearch_' + this.userInfo.id] = JSON.stringify(history)
            }
            this.getHistory()

        },
        clearout() {
            localStorage.removeItem('houseSearch_' + this.userInfo.id)
            this.getHistory()
        },
        clearHistory() {
            this.$alert({ title: '', content: '确定删除历史记录吗?', showCancel: true, }, () => {
                this.clearout()
                this.$modal.success({ msg: '删除成功', duration: 1500 })
            })
        },
        keyPrinter(e) {
            console.log(e.keyCode)
            if (e.keyCode == '13') {
                if (!this.searchVal) {
                    this.$modal.info({ msg: '搜索内容不能为空!', duration: 1500 })
                    return
                }

                this.search(this.searchVal)
            }
        },
        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()
                }

            }

        }

    },
    activated() {
        console.log(this.direction)
        if (this.direction == 'forward') {
            this.searchVal = ''
            this.isSearch = false
            this.onInput = false
            this.hotList = []
            this.history = []
            this.searchList = []
            this.page = 0
            this.flag = true
            this.isNothing = false
            this.isShowScreen = false
            this.searchData = {}
            this.getAllHot()
            this.getHistory()

        }
    },
    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>


