<template>
  <div class="typer-content">
    <!-- 动态变化的内容-->
    <template v-for="(letter,index) in words">
      <span class="word cut" :key="index" v-if='letter!=" "'>{{letter}}</span>
      <br v-if='letter==" "' :key="index"/>
    </template>
    <span class="typer-cursor"></span>
    <div class="print-company" v-if='showCompany'>
      <span class="word cut" :key="index" v-if='letter!=" "'>麦</span>
      <span class="word cut" :key="index" v-if='letter!=" "'>子</span>
    </div>    
  </div>
</template>


<script>
export default {
  data () {
    return {
      words:[],               //字母数组push，pop的载体
      str:"数据犹如天上繁星， 统计犹如浩瀚星河， 数据统计更像是无垠宇宙， 藉由统计让数据能两点连成线， 由三点变成面， 希望接下来的统计数据， 能助您在事业上完成 点、线、面",          //str初始化
      letters:[],             //str分解后的字母数组
      order:1,                //表示当前是第几句话
      showCompany:false
    }
  },
  watch:{                     //监听order值的变化，改变str的内容
    order(old,newV){
    }
  },
  mounted(){            //页面初次加载后调用begin()开始动画
    this.begin()
  },
  methods:{
  //开始输入的效果动画
    begin(){            
      this.letters=this.str.split("")
      for(var i=0;i<this.letters.length;i++){
        setTimeout(this.write(i),i*200);
      }
    },
  //开始删除的效果动画
    back(){
      let L=this.letters.length;
      for(var i=0;i<L;i++){
        setTimeout(this.wipe(i),i*50);
      }
    },
  //输入字母
    write(i){
      return ()=>{
          let L=this.letters.length;
          this.words.push(this.letters[i]);
          let that=this;
           /*如果输入完毕，在2s后开始删除*/
          if(i==L-1){ 
            // setTimeout(function(){
            //   that.back();
            // },2000);
            this.showCompany=true
          }
      }
    },
  //擦掉(删除)字母
    wipe(i){
      return ()=>{
          this.words.pop(this.letters[i]);
          /*如果删除完毕，在300ms后开始输入*/
          if(this.words.length==0){
             this.order++;
             let that=this;
             setTimeout(function(){
               that.begin();
             },300);

          }
      }
    },

  },
}
</script>


<style scoped>
.word{
    width: 30px;
    height: 30px;
    display: inline-block;
    margin: 12px 0 0px 50px;
}
.print-company{
  position: absolute;
  bottom: 43px;
  left: 0px;
  animation: diaoluo .8s linear;
}
.typer-content{
  font-size: 30px;
  display: block;
  flex-direction: row;
  letter-spacing: 2px;
  position:absolute;
  width: 702px;
  height: 600px;
  writing-mode:vertical-rl;
  top: calc((100% - 538px) / 2);
  right: calc((100% - 315px) / 2);
  position: absolute;
  text-align: left;
  font-family: 'pingfang';
  z-index: 9;
  
}
.cut{
  color: #5f5d6a;
  text-shadow: 0 0 37px #199bc4;
}
.typer-cursor{
  height: 3px;
  width: 30px;
  background: #11586f;
  animation: flash .8s infinite;
  display: inline-block;
  margin-top:10px;
}
@keyframes flash
{
    from {background: #11586f;}
    to {background: #010013;}
}
@keyframes diaoluo
{
    from {opacity:.1;}
    to {opacity: 1;}
}
</style>