<template>
  <div class="md-example-child md-example-child-swiper md-example-child-swiper-3">
    <md-swiper
      :autoplay="autoplay"
      :transition="transition"
      :transition-duration="transitionDuration"
      :default-index="defaultIndex"
      :has-dots="hasDots"
      :is-prevent="isPrevent"
      :is-loop="isLoop"
      :dragable="dragable"
      ref="swiper" :style="{'height':swiperHeight+'px'}">
      <md-swiper-item :key="$index" v-for="(item, $index) in pages" :style="{'background-color':backgroundColor}">
        <ul>
          <li :key="$index1" v-for="(sub, $index1) in item" style="height:auto;">
            <a href="javascript:void(0)" class="banner-item">
              <img :src="sub.defaultImage" alt="" :style="{'display':'block','height':'auto','width':imageWidth+'px','margin':'10px auto'}">
              <span :style="{'display':'block','width':'100%','height':'20px','line-height':'20px','color':titleColor,'font-size':titleSize+'px'}">{{sub.title}}</span>
            </a>
          </li>
        </ul>
      </md-swiper-item>
    </md-swiper>
  </div>
</template>

<script type="text/javascript">
  export default {
    name: 'md-scroll-menu',
    data: function () {
      return {

      }
    },
    props:{
      iconList:{
        type:Array
      },
      autoplay: {
        type:Number,
        default:3000
      },
      transition: {
        type:String,
        default:'slide'
      },
      transitionDuration: {
        type:Number,
        default:250
      },
      defaultIndex: {
        type:Number,
        default:0
      },
      hasDots:{
        type:Boolean,
        default:true
      },
      isPrevent:{
        type:Boolean,
        default:true
      },
      isLoop:{
        type:Boolean,
        default:false
      },
      dragable:{
        type:Boolean,
        default:false
      },
      backgroundColor:{
        type:String,
        default:'#ffffff'
      },
      titleColor:{
        type:String,
        default:'#000000'
      },
      titleSize:{
        type:Number,
        default:16
      },
      imageWidth:{
        type:Number,
        default:50
      },
      swiperHeight:{
        type:Number,
        default:200
      }
    },
    computed: {
      pages() {
        let pages = [];
        this.iconList.forEach((item, index) => {
          let page = Math.floor(index / 8);
          if (!pages[page]) {
            pages[page] = [];
          }
          pages[page].push(item);
        });
        return pages;
      }
    },
    mounted: function () {

    },
    methods: {}
  }
</script>
<style lang="stylus" scoped>
  .md-example-child-swiper-3
    height 250px
    li
      list-style none
      float left
      width 25%
      height 125px
    .banner-item
      float left
      width 100%
      height 100%
      line-height 125px
      text-align center
      font-size 28px
      color #FFF
      box-align center
      align-items center
      box-pack center
      justify-content center
      text-decoration-line none
</style>
