<template>
  <div class="advert-top">
    <div class="container">
        <div class="img-list-wrapper">
            <span style="color:#ff880e;">
              {{sendVal}}&nbsp;&nbsp;&nbsp;
              <a class="vtRenew" @click="innerVisible=true">
                立即续费>>
              </a> 
            </span>
        </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'my-marquee-left',
  props: {
    sendVal:{
        type:String,
        default:''
    }
  },
  data () {
    return {
      nowTime:null,
    }
  },
  mounted () {
        // 1. 动画 ;
        //   1. 搞定布局 : 赋值一张图片放入到容器之中;
        var notice = document.querySelector(".img-list-wrapper");
        var imgs_ele = notice.children;
        // 克隆一份;放到wrapper之中;
        // appendChild 有个特性 : 如果你插入的元素在页面之中存在，那么会先删除再插入;
        // 如果想要新增一个图片，不是复制一个图片一定要加上cloneNode;
        notice.appendChild(imgs_ele[0].cloneNode(true));
        // 数量 * 一个元素的宽度;
        // notice.style.width = notice.length * imgs_ele[0].offsetWidth + "px";
        // 排除bug , 查看赋值的运算是否正确，如果运算结果正确说明语法写错了，如果运算错了排查运算条件;
        // console.log(notice.children.length , imgs_ele[0].offsetWidth );
        notice.style.width = notice.children.length * imgs_ele[0].offsetWidth + "px";
        // 动画 :
        var wrapper_left = 0;
        this.nowTime = setInterval(function(){
            wrapper_left -= 1;
            //判定是不是应该让对应的元素回到原点;
            // wrapper_left = 0;
            // 如果当前的偏移量 >= 最后一张图片出现的left值;
            if( Math.abs(wrapper_left) >= (notice.children.length - 1) * imgs_ele[0].offsetWidth){
                wrapper_left = 0;
            }
            notice.style.left = wrapper_left + "px";
        },20);
  },
  beforeDestroy () {
    // 页面关闭清除定时器
    clearInterval(this.nowTime)
    // 清除定时器标识
    this.nowTime = null
  },
  methods: {
  }
}
</script>
<style scoped>
  .img-list-wrapper{
      width: 100%;
      position: relative;
      right: 0;
  }
  .img-list-wrapper span{
      width: 1200px;
      height: 20px;
      display: block;
      float: left;
  }
  .container{
      width: 100%;
      overflow: hidden;
  }
  .vtRenew{
    color:#53b3f7
  }
</style>

