<template>
    <div id="menuList-skin" class="wrapper">
        <div class="swiper-container" ref="swiper">
            <div class="swiper-wrapper">
                <div class="swiper-slide" v-for="(item,index) in menuListPc" :key="index">
                    <template v-if="item.menuType == 'imagetext'">
                        <image-text :menuInfo="item.menuInfo"></image-text>
                    </template>
                    <template v-if="item.menuType == 'playlists'">
                        <play-lists :listId="item.menuInfo"></play-lists>
                    </template>
                    <template v-if="item.menuType == 'share'">
                        <vote-box :isRed="item.menuInfo"></vote-box>
                    </template>
                    <template v-if="item.menuType == 'report'">
                        <report-box :id="item.menuInfo"></report-box>
                    </template>
                    <template v-if="item.menuType == 'imgTextLive'">
                        <img-text-live></img-text-live>
                    </template>
                    <template v-if="item.menuType == 'soldierLive'">
                        <soldier-live :id="item.menuInfo && item.menuInfo.channelId"></soldier-live>
                    </template>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    import {mapGetters} from 'vuex'
    const imageText = resolve => require(['./menuClass/imageText'],resolve)
    const playLists = resolve => require(['./menuClass/playListsPc'],resolve)
    const shareBox = resolve => require(['./menuClass/share'],resolve)
    const reportBox = resolve => require(['./menuClass/report'],resolve)
    const imgTextLive = resolve => require(['@/components/old/imgTextLive'],resolve)
    const soldierLive = resolve => require(['@/components/old/soldierLive'],resolve)

    export default {
        components: {
            imageText,
            playLists,
            shareBox,
            reportBox,
            imgTextLive,
            soldierLive
        },
        props: {
            value: {},
        },
        data() {
            return {
                swiper: null,
                active: this.value,
            }
        },
        computed: {
            ...mapGetters({
                'menuListPc': 'menuListPc',
            }),
        },
        mounted(){
            this.$nextTick(() => {
                this._initSwiper();
            })
        },
        methods: {
            _initSwiper(){
                let _this = this;
                let option = {
                    touchRatio: 0.5,
                    on: {
                        slideChange(){
                            _this.active = this.activeIndex;
                        },
                    },
                }
                this.swiper = new this.$swiper(this.$refs.swiper, option)
            },
            _tabSwitch(){
                this.swiper && this.swiper.slideTo(this.active);
            },
        },
        watch: {
            value(nVal){
                this.active = nVal;
                this._tabSwitch();
            },
            active(nVal){
                this.$emit('input',nVal)
            }
        },
    }
</script>

<style lang="less" scoped>
    .wrapper{
        width: 100%;
        height: 800px;
        background: #F0F1F3;
        overflow: hidden;

        .swiper-container{
            height: 100%;
            overflow: visible;
            position: static;

            .swiper-wrapper{
                position: static;

                .swiper-slide{
                    position: static;
                    height: 100%;
                }
            }
        }
    }
</style>
