<template>
  <div class="pic">
     <div class='conte' v-for='(ite,i) in imgData' :key='i + "img"' :style='{transform:"translate3d(" + (i * 100 -dico * 100) + "%, 0px, 0px)"}'>
       <img class='im' :src='ite.src' @mouseover="stopImg" @mouseout="mouseOut"/>
     </div>
     <img @mouseover="stopImg" @mouseout="mouseOut" v-if='isShowIcom && imgData.length > 1' class='lfimg' @click='setImg("pre")' src='~public/lwt-vue-components/default/assets/rotationPicture/left.png'/>
     <img @mouseover="stopImg" @mouseout="mouseOut" v-if='isShowIcom && imgData.length > 1' class='rtimg' @click='setImg("next")' src='~public/lwt-vue-components/default/assets/rotationPicture/right.png'/>
     <div class="radioIcon" v-if='imgData.length > 1' @mouseover="stopImg" @mouseout="mouseOut">
      <i @click='setImg(c)' :class="c == dico ? 'active' : ''" v-for="(v, c) in imgData" :key="'ico' + c"></i>
     </div>
  </div>
</template>
<script>
/**
 * module:图片轮播组件
 * author:lwt
 */
export default {
  name: 'aTemplate',
  components: {
  },
  props: {
    config: Object
  },
  data () {
    return {
      dico: 0,
      timer: null
    }
  },
  computed: {
    isRotation () {
      return this.config.isRotation || false
    },
    isShowIcom () {
      return this.config.isShowIcom || false
    },
    imgData () {
      return this.config.data || []
    }
  },
  methods: {
    setImg: function (key) { // 切换图片
      let { dico, imgData } = this
      switch (key) {
        case 'next':
          dico = dico + 1 < imgData.length ? dico + 1 : 0
          break
        case 'pre':
          dico = dico - 1 < 0 ? imgData.length - 1 : dico - 1
          break
        default:
          dico = key
          break
      }
      this.dico = dico
    },
    playImg: function () { // 启动轮播
      if (this.imgData.length > 1) {
        let { speed } = this.config
        this.timer = setInterval(() => {
          this.setImg('next')
        }, speed)
      }
    },
    stopImg: function () { // 停止轮播
      clearInterval(this.timer)
      this.timer = null
    },
    mouseOut: function () { // 鼠标离开启动轮播
      if (this.isRotation) {
        this.playImg()
      }
    }
  },
  directives: {
  },
  filters: {
  },
  watch: {
    config: {
      deep: true,
      handler (newV, oldV) {
        this.dico = newV.dico
        if (newV.isRotation) {
          this.playImg()
        }
      }
    }
  },
  beforeCreate: function () {
    // console.log('实例初始化前调用')
  },
  created: function () {
    // this.drawTab()
    // console.log('实例初始化完成调用')
  },
  beforeMount: function () {
    // console.log('挂载到页面前调用')
  },
  mounted: function () {
    // console.log('挂载到页面完成调用')
    this.dico = this.config.dico
    if (this.isRotation) {
      this.playImg()
    }
  },
  beforeUpdate: function () {
    // console.log('更新前调用')
  },
  updated: function () {
    // console.log('更新完成调用')
  },
  activated: function () {
    // console.log('keep-alive组件激活时调用')
  },
  deactivated: function () {
    // console.log('keep-alive组件停用时调用')
  },
  beforeDestroy: function () {
    // console.log('销毁之间调用')
  },
  destroyed: function () {
    // console.log('实例销毁后调用')
  },
  errorCaptured: function () {
    // console.log('异常发生处理')
  }
}
</script>
<style lang="scss">
  .pic {
    height: 100%; overflow: hidden;
    width: 100%;position: relative;
  }
 .conte {
    overflow: hidden;width: 100%;height: 100%;
    display: inline-block;
    position: absolute;
    z-index: 1;left: 0;
    bottom: 1px;box-sizing: border-box;
    transition: transform .3s cubic-bezier(.645,.045,.355,1),width .3s cubic-bezier(.645,.045,.355,1);
  }
  .im{
    width: 100%;height: 100%;
  }
  .radioIcon{
    position: absolute;z-index: 3;
    left: 0;bottom: 40px; height: 10px;
    width: 100%;text-align: center;overflow: hidden;
  }
  .radioIcon i {
      display: inline-block; height: 8px; width: 8px; background: #fff; border: 1px solid #dedede; border-radius: 50%; margin: 0 3px; cursor: pointer; vertical-align: top;
  }
  .radioIcon i.active { background: #fff000; }
  .lfimg {
    position: absolute;z-index: 3;
    left: 10px; top: 43%;cursor: pointer;
  }
  .rtimg {
    position: absolute;z-index: 3;
    right: 10px; top: 43%;cursor: pointer;
  }
</style>
