<comment>
    # 组件注释
</comment>
<template>
    <div class="viewp" >
      <div class="md-example-child md-example-child-swiper md-example-child-swiper-0">
        <md-swiper
          @before-change="beforeChange"
          @after-change="afterChange"
          ref="swiper"
          :is-prevent="false"
          :useNative-driver="false"
        >
          <md-swiper-item :key="$index" v-for="(item, $index) in simple">
            <div
              class="banner-item"
              :style="{'background': `${item.color}`}">{{item.text}}</div>
          </md-swiper-item>
        </md-swiper>
      </div>
    </div>

</template>

<script>
  import {Swiper, SwiperItem} from 'mand-mobile'
  import simple from 'mand-mobile/components/swiper/demo/data/simple'
    //import logo from '../../../static/logo.png'
    export default {
        name: 'viewp',
        components: {
            //Xgplayer :  () => import('../xgplayer'),
          [Swiper.name]: Swiper,
          [SwiperItem.name]: SwiperItem,
        },
        data() {
            return {
              current: 0,
              simple,
            }
        },
        //作为子组件的时候应用父组件的时候设定的变量
        props: {},
        //用来观察 方法 对象 变量 有变化 走的回调方法
        watch: {},
        //正常方法
        methods: {
          setValue(id, value) {
            document.querySelector(id) && (document.querySelector(id).innerHTML = value)
          },
          beforeChange(from, to) {
            this.setValue('#valueSwiper0', from)
            this.setValue('#valueSwiper1', to)
          },
          afterChange(from, to) {
            this.setValue('#valueSwiper2', from)
            this.setValue('#valueSwiper3', to)
          },
          fn(index) {
            this.setValue('#valueSwiper4', index)
          },
          goto() {
            this.$refs.swiper.goto(2)
          },
          play() {
            this.$refs.swiper.play()
          },
          stop() {
            this.$refs.swiper.stop()
          },
        },
        //计算方法
        computed: {},
        //生命周期 渲染html之前 可以初始化数据
        created() {

        },
        //生命周期 渲染html完毕 可以dom操作
        mounted() {
          setTimeout(() => {
            this.simple = simple.concat(simple)
          }, 10000)
          // Simulation of asynchronous
          setTimeout(() => {
            this.simple = simple
          }, 24500)
          window.triggerSwiper0 = () => {
            this.goto()
          }
          window.triggerSwiper1 = () => {
            this.play()
          }
          window.triggerSwiper2 = () => {
            this.stop()
          }
        },
        //生命周期 离开这个页面
        destroyed() {

        }
    }
</script>

<style scoped>
  .md-example-child-swiper-0{
    height: 250px;

  }
  .banner-item{
    float :left;
    width: 100%;
    height :100%;
    line-height :250px;
    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>
