<template>
    <div class="container">
        <div class="top">
            <div class="select">
                <div @click="type='攻略'" :class="[type=='攻略'?'active':'']" class="selelct-item">
                    攻略指南
                </div>
                <div @click="type='资讯'" :class="[type=='资讯'?'active':'']" class="selelct-item">
                    新鲜资讯
                </div>
                <div class="select-box" :style="{left:type=='攻略'?'0':'50%'}"></div>
            </div>
        </div>
        <div class="list" ref="list" @scroll="menu">
            <template v-if="type=='攻略'">
                <div class="swiper-container">
                    <div class="swiper-wrapper">
                        <router-link :to="item.newsUrl" class="swiper-slide" v-for="(item,index) in banner" :style="{backgroundImage:'url('+item.image+')'}">

                        </router-link>
                    </div>
                    <div class="swiper-pagination"></div>
                </div>

                <div class="newsList">
                    <router-link :to="item.newsUrl" class="news-item" v-for="item in list">
                        <div class="images-Left" :style="{backgroundImage:'url('+item.image+')'}">

                        </div>
                        <div class="right">
                            <div class="title">
                                {{item.title}}
                            </div>
                            <div class="subtitle">
                                {{item.subtitle}}
                            </div>
                        </div>
                    </router-link>
                </div>
            </template>

            <div class="newsList" v-else>
                <router-link :to="item.newsUrl" class="news-large-item" v-for="item in list" :style="{backgroundImage:'url('+item.image+')'}">
                    <div class="bottom">
                        <div class="title">
                            {{item.title}}
                        </div>
                    </div>
                </router-link>
            </div>
        </div>
    </div>
</template>
<script>
import GmButton from '@/components/Button'
import { mapState } from "vuex";
import swiper from 'swiper'
export default {
    data() {
        return {
            type: '攻略',
            banner: [],
            flag: true,
            currentPage: 0,
            list: []
        }
    },
    watch: {
        type() {
            this.currentPage = 0;
            this.flag = true
            this.getData()
        }
    },
    created() {
        setTimeout(() => {
            var mySwiper = new Swiper('.swiper-container', {
                slidesPerView: 'auto',
                pagination: '.swiper-pagination',
                paginationClickable: true,
                autoplay : 5000,
                paginationBulletRender: function (swiper, index, className) {
                    return '<div class="' + className + '"></div>';
                }
            })
        }, 500)

        this.$http.get({
            url: '/newsInfo/all',
            data: {
                recommend: 'Y'
            }
        }).then(res => {
            if (res.success) {
                this.banner = res.data
            }
        })
        this.getData()
    },
    computed: {
        ...mapState(["locationInfo"])
    },
    methods: {
        getData() {
            if (!this.flag) {
                retrun;
            }

            if (this.currentPage == 0) {
                this.list = []
            }
            this.currentPage++

            var data = {
                newsType: this.type == '攻略' ? 0 : 1,
                currentPage: this.currentPage,
                pageNumber: 20,
                recommend: 'N'
            }


            this.$http.get({
                url: '/newsInfo/page',
                data: data
            }).then(res => {
                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()
            }
        }
    },
    components: { GmButton }
}
</script>
<style lang="less" scoped>
@import '../swiper.css';
.top {
    height: 0.72rem;
    background: rgba(255, 255, 255, 1);
    min-height: 1.12rem;
    padding: 0.2rem;
}
.select {
    width: 4.4rem;
    height: 0.72rem;
    background: rgba(255, 255, 255, 1);
    border-radius: 0.38rem;
    border: 0.02rem solid rgba(21, 168, 170, 1);
    display: flex;
    align-items: center;
    position: relative;
    margin: auto;
    .selelct-item {
        width: 50%;
        text-align: center;
        // line-height: 0.72rem;
        font-size: 0.24rem;
        color: rgba(21, 168, 170, 1);
        line-height: 0.34rem;
        position: relative;
        font-weight: bold;
        z-index: 2;
        &.active {
            color: #fff;
        }
    }

    .select-box {
        width: 50%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        background: rgba(21, 168, 170, 1);
        border-radius: 0.38rem;
        z-index: 1;
        transition: left ease-in-out 0.3s;
    }
}

.list {
    flex-grow: 1;
    overflow-y: auto;
    .swiper-container {
        height: 3.2rem;
        margin: 0 0.3rem 0.2rem;
        border-radius: 0.08rem;
        overflow: hidden;
    }
}

.news-item {
    padding: 0.3rem;
    display: flex;
    .images-Left {
        width: 1.8rem;
        height: 1.8rem;
        border-radius: 0.08rem;
        min-width: 1.8rem;
        background-size: cover;
        background-position: center center;
        background-repeat: no-repeat;
    }
    .right {
        margin-left: 0.2rem;
        .title {
            font-size: 0.3rem;
            font-weight: bold;
            color: rgba(0, 0, 0, 1);
            line-height: 0.42rem;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .subtitle {
            font-size: 0.24rem;
            color: rgba(170, 172, 173, 1);
            line-height: 0.34rem;
            margin-top: 0.2rem;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
    }
}

.news-large-item {
    display: flex;
    align-items: flex-end;
    margin: 0 0.3rem 0.3rem;
    height: 3.6rem;
    border-radius: 0.12rem;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    .bottom {
        height: 1.2rem;
        background: linear-gradient(-180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5));
        flex-grow: 1;
        display: flex;
        align-items: flex-end;
        padding: 0 0.3rem;
        overflow: hidden;
        div {
            margin-bottom: 0.2rem;
            flex-grow: 1;
            font-size: 0.3rem;
            font-weight: bold;
            color: rgba(255, 255, 255, 1);
            line-height: 0.42rem;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
    }
}

.swiper-slide {
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}
</style>


