<template>
  <div class="slider">
    <div class="content">
      <mt-swipe :auto="swipeConf.auto"
                :speed="swipeConf.speed"
                :defaultIndex="swipeConf.defaultIndex"
                :continuous="swipeConf.continuous"
                :showIndicators="swipeConf.showIndicators"
                :prevent="swipeConf.prevent"
                :stopPropagation="swipeConf.stopPropagation"
                class="swipe"
      >
        <mt-swipe-item>
          <div class="countdown">
            {{time}}
          </div>
          <div class="main-page" :style="{backgroundImage:`url(${img})`}">>
            <!--<h3>LOGO </h3>-->
            <!--<h4>智能闸井</h4>-->
          </div>
        </mt-swipe-item>
        <!--<mt-swipe-item @click="begin">-->
          <!--<div class="box">-->
            <!--<mt-button type="danger">即将开始体验<span v-show="this.timer">{{time}}</span></mt-button>-->
          <!--</div>-->
        <!--</mt-swipe-item>-->
      </mt-swipe>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  import { Swipe, SwipeItem, Button } from 'mint-ui'
  import { plusReady } from 'assets/js/plusReady'

  export default {
    data () {
      return {
        img: require('@/assets/image/start-back.png'),
        swipeConf: {
          flag: false,  // 显隐标识
          auto: 0, // 自动播放时间
          speed: 300, // 切换动画时长
          defaultIndex: 0,  // 初始化默认显示的索引
          continuous: false, // 是否循环播放
          showIndicators: true, // 是否显示索引
          prevent: true, // 是否在 touchstart 事件触发时阻止事件的默认行为。设为 true 可提高运行在低版本安卓浏览器时的性能
          stopPropagation: true, // 是否在 touchstart 事件触发时阻止冒泡
        },
        timer: null,
        time: 5
      }
    },
    created () {
//      plusReady(this.plusReady)
      this.handleChange()
    },
    destroyed () {
      clearInterval(this.timer)
    },
    methods: {
      plusReady () {
//        plus.navigator.setFullscreen(true)
      },
      handleChange () {
        this.timer = setInterval(() => {
          this.time--
          if (this.time === 0) {
            localStorage.setItem('_slider_flag_', false)//更新页面状态
            clearInterval(this.timer)
            console.log('进来了')
            this.$router.push({
              name: 'index'
            })
          }
        }, 1000)
      }
    }
  }
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  @import "~assets/css/variable.styl"
  @import "~assets/css/transition.styl"
  .slider {
    position absolute
    z-index 100
    top 0
    left 0
    right 0
    bottom 0
    height 100%
    background-color $color-background
    .content {
      height 100%
      .swipe {
        width 100%
        height 100%
        background-color $color-background-w
        .mint-swipe-item {
          text-align center
          .countdown{
            position:absolute
            right:5%
            top:5%
            color: #dfdfdf
          }
          .main-page{
            width: 100%;
            height:100%;
            background-repeat: no-repeat;
            background-size: cover;
            -webkit-background-size: cover;
            -o-background-size: cover;
          }
          .box {
            z-index 999
            position absolute
            left 50%
            top 45%
            width 100%
            transform translate3d(-50%, -50%, 0)
            h3, h4 {
              padding 10px 0
            }
            h3 {
              font-size $font-size-large
            }
            h4 {
              font-size $font-size-large-x
              font-weight bold
            }
          }
          .box-bottom{
            z-index 1000
            position absolute
            top 80%
            width 100%
          }
        }
      }
    }
  }
</style>
<style lang="stylus" rel="stylesheet/stylus">
  @import "~assets/css/variable.styl"
  .slider {
    .content {
      .mint-swipe-indicator.is-active {
        background-color $color-background-d
      }
    }
  }
</style>