<template>
    <div class="search">
        <div class="padding-safe-top">
            <div class="search-top">
                <img src="@assets/back.png" @click="back" class="back" alt="" />
                <van-search
                    v-model="search"
                    autofocus
                    left-icon=" "
                    show-action
                    placeholder="输入房间号码"
                    @search="getSearch(search)"
                >
                    <template #action>
                        <div @click="getSearch(search)">搜索</div>
                    </template>
                </van-search>
            </div>
        </div>

        <div class="search-content">
            <van-list
                v-model:loading="loading"
                :immediate-check="false"
                :finished="finished"
                finished-text=""
                @load="getData"
            >
                <room-info v-for="(item, index) in list" :key="index" :info="item"></room-info>

                <van-empty
                    v-if="empty"
                    description="什么都没有哦，换个号码试试吧～"
                    :image="require('@assets/kong-pimg-sosuo.png')"
                />
            </van-list>
        </div>
    </div>
</template>

<script>
import list from '../mixins/list';
import search from '../mixins/search';
import RoomInfo from '../components/RoomInfo.vue';
export default {
    name: 'search',
    inject: ['bar', 'setKeeps', 'scrollWrapper', 'changeScroll'],
    data() {
        return {
            url: '/room/roomList',
            httpType: 'get',
            scrollTop: 0
        };
    },
    mixins: [list, search],
    components: { RoomInfo },
    methods: {
        beforeData() {
            return {
                id: this.search
            };
        },
        back() {
            this.$router.go(-1);
        }
    },
    mounted() {
        this.emitter.on('updateList', info => {
            let list = [...this.list];
            list.forEach((item, index) => {
                if (info.id === item.id) {
                    list[index] = info;
                }
            });
            this.list = list;
        });
    },
    activated() {
        this.$nextTick(() => {
            this.changeScroll(this.scrollTop || 0);
        });
    },
    beforeRouteLeave(to, from, next) {
        if (to.path === '/room') {
            this.scrollTop = this.scrollWrapper.scrollTop;
            this.setKeeps(['search']);
        } else {
            this.scrollTop = 0;
            this.setKeeps(['search'], false);
        }
        next();
    }
};
</script>

<style lang="less" scoped>
/deep/.search-top {
    padding: 12px 16px 12px 10px;
    .flex();
    .van-button {
        flex-shrink: 0;
        height: 32px;
        border-radius: 4px;
        padding: 0 10px;
    }
    .flex();
    .van-search__action {
        background: linear-gradient(315deg, @prim2 0%, @prim 100%);
        color: #1a1c2b;
        height: 32px;
        line-height: 32px;
        padding: 0 20px;
    }
    .van-search {
        padding: 0 0;
        height: 32px;
        border-radius: 4px;
        overflow: hidden;
        flex-grow: 1;
    }

    .van-search__content {
        background: #25283d;
        height: 32px;
    }

    .back {
        width: 24px;
        height: 24px;
        margin-right: 10px;
    }
}
.search-content {
    padding: 10px 16px 16px;
    .room + .room {
        margin-top: 16px;
    }
}
</style>
