<template>
    <div class="mui-card card_img" v-if="topList.length!=0">
        <div id="slider" class="mui-slider">
            <div class="mui-slider-group mui-slider-loop">
                <!--支持循环，需要重复图片节点-->
                <div class="mui-slider-item mui-slider-item-duplicate" v-if="topList.length">
                    <a @click="goto(topList[topList.length-1])" >
                        <img  style="height: 68px" :src="topList[topList.length-1].picUrl">
                    </a>
                </div>

                <div class="mui-slider-item" v-for="mod,index in topList">
                    <a @click="goto(mod)">
                        <img style="height: 68px" :src="mod.picUrl">
                    </a>
                </div>

                <!--支持循环，需要重复图片节点-->
                <div class="mui-slider-item mui-slider-item-duplicate" v-if="topList.length">
                    <a  @click="goto(topList[0])" >
                        <img  style="height: 68px" :src="topList[0].picUrl">
                    </a>
                </div>


            </div>
            <div class="mui-slider-indicator ">
                <div class="mui-indicator " v-for="mod,index in topList" :class="index==0?'mui-active':''"></div>
            </div>
        </div>
    </div>
</template>

<script>

    export default {
        name: 'banner',
        props: {
            bannerRoute: {
                require: false,
                default: '',
            },
        },
        data(){
          return {
              topList:[]
          }
        },
        methods: {
            goto(mod){
                if(mod.linkUrl.indexOf('http')==0){
                    window.location=mod.linkUrl;
                }
                else if(mod.linkUrl.indexOf('#/')==0){
					if(mod.linkUrl.indexOf("?")==-1){
						mod.linkUrl+='?';
					}
                    window.location=mod.linkUrl+'&pageTitle='+mod.name+'&routeName='+this.bannerRoute;
                }
                else if(mod.linkUrl=='#'||mod.linkUrl==''){

                }
                else{
                    this.$router.push({
                        name: mod.linkUrl,
                        query:{pageTitle:mod.name,routeName:this.bannerRoute}
                    })
                }

            },
            setList(sz){
                 this.topList=sz;
                this.$nextTick(() => {
                    var gallery = mui('.mui-slider');
                    var slider = gallery.slider({
                        interval: 5000, //自动轮播周期，若为0则不自动播放，默认为0；
                     });
                })
            }
        },
        mounted() {


        },
        computed: {

        }
    }
</script>

