<template>
    <van-pull-refresh
        class="home"
        success-text="加载成功"
        success-duration="500"
        v-model="isLoading"
        :head-height="80"
        @refresh="onRefresh"
        pageType="light"
    >
        <swiper :space-between="16" class="mySwiper" :autoplay="{ delay: 3500 }">
            <!-- <swiper-slide v-for="item in banners" :key="item.id">
                <product-small :info="item"></product-small>
            </swiper-slide> -->
            <swiper-slide>
                <van-image :src="require('@assets/banner.png')" fit="cover" />
            </swiper-slide>
        </swiper>

        <div class="search">
            <van-button type="primary" :icon="require('@assets/png-chuangjianfangjian.png')" @click="goCreate">
                创建房间
            </van-button>

            <van-search
                v-model="search"
                left-icon=" "
                show-action
                placeholder="输入房间号码"
                action-text="搜索"
                @click="$router.push('/search')"
            >
                <template #action>
                    <div>搜索</div>
                </template>
            </van-search>
        </div>

        <div class="room-list">
            <div class="room-title">房间列表</div>
            <van-sticky>
                <div class="tab-content">
                    <van-tabs
                        swipeable
                        v-model:active="active"
                        @change="changeTab"
                        shrink
                        line-width="34px"
                        line-height="2px"
                    >
                        <van-tab title="对局大厅"> </van-tab>
                        <van-tab title="我的房间"> </van-tab>
                        <template #nav-right>
                            <van-tabs class="tabs" v-model:active="zone" @change="changeZone" type="card">
                                <van-tab title="QQ区" name="QQ"></van-tab>
                                <van-tab title="微信区" name="微信"></van-tab>
                            </van-tabs>
                        </template>
                    </van-tabs>
                </div>
            </van-sticky>

            <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>
    </van-pull-refresh>
</template>

<script>
import { Swiper, SwiperSlide } from 'swiper/vue';

import 'swiper/swiper.min.css';
import 'swiper/swiper-bundle.min.css';

import SwiperCore, { Pagination, Autoplay } from 'swiper';

// install Swiper modules
SwiperCore.use([Pagination, Autoplay]);

import banner from '../mixins/banner';
import ProductSmall from '../components/product/productSmall.vue';
import { mapState } from 'vuex';
import RoomInfo from '../components/RoomInfo.vue';
import list from '../mixins/list.js';

export default {
    name: 'home',
    inject: ['bar', 'setKeeps', 'scrollWrapper', 'changeScroll'],
    mixins: [banner, list],
    components: {
        Swiper,
        SwiperSlide,
        RoomInfo
    },
    computed: {
        ...mapState(['userInfo']),
        url() {
            if (this.active === 0) {
                return '/room/roomList';
            } else {
                return '/room/my';
            }
        }
    },
    data() {
        return {
            banners: [],
            scrollTop: 0,
            search: '',
            active: 0,
            type: 0,
            list: [],
            httpType: 'get',
            zone: 'QQ'
        };
    },
    mounted() {
        this.getInit();
        this.emitter.on('updateList', info => {
            let list = [...this.list];
            list.forEach((item, index) => {
                if (info.id === item.id) {
                    list[index] = info;
                }
            });
            this.list = list;
        });

        // this.$http.get('sysConfig/get/home_bg').then(res => {
        //     this.bgImg = res.value || '';
        // });
    },
    methods: {
        getInit() {
            this.$toast.loading({
                message: '加载中...',
                forbidClick: true
            });
            return this.getData().then(() => {
                this.$toast.clear();
            });
            // return Promise.all([this.getBanner()]).then(() => {
            //     this.$toast.clear();
            //     return Promise.resolve();
            // });
            // this.getNews();
        },
        beforeData() {
            if (this.active === 0) {
                return {
                    zone: this.zone,
                    status: 'WAITING,GAMING',
                    id: this.search
                };
            } else {
                return {
                    query: {
                        zone: this.zone
                    }
                };
            }
        },
        getProduct() {
            return Promise.resolve();
        },
        getBanner() {
            return this.$http
                .post(
                    '/banner/all',
                    {
                        query: {
                            type: 'HOME',
                            del: false
                        },
                        sort: 'sort,asc;createdAt,desc'
                    },
                    { body: 'json' }
                )
                .then(res => {
                    this.banners = res.content;
                    if (this.swiperRef) {
                        this.swiperRef.update();
                    }
                    return Promise.resolve();
                });
        },
        onRefresh() {
            this.getInit().then(() => {
                this.isLoading = false;
            });
            // setTimeout(() => {

            // }, 1000);
        },
        goCreate() {
            this.$router.push('/roomCreate');
        },
        changeTab(tab) {
            console.log(tab);
            this.$nextTick(() => {
                if (this.active === 1 && !this.isLogin) {
                    this.active = 0;
                    this.checkLogin();
                    return;
                }
                this.$toast.loading({
                    message: '加载中...',
                    forbidClick: true
                });
                this.getData(true).then(() => {
                    this.$toast.clear();
                });
            });
        },
        changeZone(zone) {
            if (zone === '微信') {
                this.wait();
                this.$nextTick(() => {
                    this.zone = 'QQ';
                });
            }
        },
        searchList() {
            this.active = 0;
            this.$nextTick(() => {
                this.$toast.loading({
                    message: '加载中...',
                    forbidClick: true
                });
                this.getData(true).then(() => {
                    this.$toast.clear();
                });
            });
        }
    },
    activated() {
        this.$nextTick(() => {
            this.changeScroll(this.scrollTop || 0);
        });
    },
    beforeRouteLeave(to, from, next) {
        if (to.path === '/room') {
            this.scrollTop = this.scrollWrapper.scrollTop;
            this.setKeeps(['index', 'home']);
        } else {
            this.scrollTop = 0;
            this.setKeeps(['index', 'home'], false);
        }
        next();
    }
};
</script>

<style lang="less" scoped>
.darkBg {
    background-color: #181818;
}

.home {
    // background-color: @bg3;
    position: relative;
    z-index: 1;
    background-color: @bg;
    padding-top: var(--safe-top);
    padding-bottom: calc(var(--safe-bottom) + 100px);
}

::v-deep(.mySwiper) {
    // height: 255px;
    padding: 16px 0;
    margin: 0 16px;
    box-sizing: border-box;
    // padding-bottom: 35px;

    .swiper-pagination {
        bottom: 30px;
    }

    .swiper-pagination-bullet {
        width: 5px;
        height: 5px;
        border-radius: 5px;
        background: @text3;
        margin: 0 4px;
        opacity: 1;
    }

    .swiper-pagination-bullet-active {
        background: @prim;
    }
}
// .swiper-slide {
//     width: 255px;
// }
/deep/.search {
    padding: 8px 16px;
    .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;
    }
    .van-search {
        padding: 0 0 0 12px;
        height: 32px;
        border-radius: 4px;
        overflow: hidden;
        flex-grow: 1;
    }

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

.room-list {
    padding: 16px 0;
    .room-title {
        font-size: 16px;
        font-weight: bold;
        color: #ffffff;
        line-height: 22px;
        padding: 0 16px;
    }
}
.tab-content {
    position: relative;
    padding-top: 2px;
    /deep/.van-sticky--fixed {
        padding-top: var(--safe-top);
    }
}
/deep/.tabs {
    width: 107px;
    right: 16px;
    top: 12px;
    position: absolute;
    .van-tabs__nav--card {
        margin: 0;
        height: 18px;
        .van-tab {
            font-size: 12px;
        }
        border-width: 0;
        .van-tab--card {
            border-width: 0;
            color: #6a6d83;
            border-radius: 2px;
        }
    }
    .van-tab--card.van-tab--active {
        background: linear-gradient(225deg, @prim2 0%, @prim 100%);
        color: #1a1c2b;
    }
}

.van-list {
    padding: 10px 16px 16px;
    min-height: var(--app-height);

    .room + .room {
        margin-top: 16px;
    }
}

/deep/.van-sticky--fixed {
    padding-top: var(--safe-top);
}
</style>
