<template>
  <div class="rollcon" :ref="'r_'+myref">
    <span :class="{shenglv:(parentW < childW && !active)}" :ref="myref" :style="`transform: translateX(${translate}px);
    ${`width: ${(parentW < childW && !active)?`calc(100% - ${mgin||10}px)`:'auto'}`}`">{{name}}</span>
  </div>
</template>
<script>
export default {
  props:['name','myref','active','offset','mgin'],

  data(){
    return {
      translate: 0,
      parentW:0,
      childW:0,
    }
  },
  watch:{
    active:{
      immediate:true,
      handler:function (newVal) {
        if (newVal) {
          this.start()
        }
      }
    }
  },
  methods:{
    start(){
      let fn = ()=>{
        this.translate -= 0.4
        if ((this.parentW - this.translate - this.offset - (this.mgin || 0))>this.childW) {
          this.translate = this.offset 
        }
        if (!this.active) {
          this.translate = 0
          return
        }
        requestAnimationFrame(fn)
      }
      if (this.parentW < this.childW) {
        fn()
      }
    }
  },
  mounted(){
    this.$nextTick(() => {
      this.parentW = this.$refs['r_'+this.myref].offsetWidth
      this.childW =this.$refs[this.myref].offsetWidth
      this.start()
    })
  },
  beforeDestroy(){
  }
}
</script>

<style lang="less" scoped>
.rollcon{
  width: 100%;
  display: inline-block;
  >span{
    width: auto;
    display: inline-block;
    transition: 0.3s transform ease;
    vertical-align:unset;
  }
  .shenglv{
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    line-height: 100%;
    vertical-align: baseline;
  }
}
</style>