<template>
    <div class="list-of-area">
         <div class="list-of-area-title common-title">
           <div class="icon-and-title">
              <img class="icon-title" src="@/assets/overview/s-play.png" alt="">
             <span class="title">{{title}}</span>
           </div>
            <img class="bg" src="@/assets/overview/bg_title.png" alt="">
          </div>
          <div class="list-of-body">
              <ul class="body-title">
                  <li class="f5">地区名称</li>
                  <li class="f3">播放量(次)</li>
                  <li class="f2">展板数量</li>
              </ul>
              <div class="body-content" id="areaContent">
                  <div id="area1">
                      <ul class="body-item" v-for="(item,index) in list" :key="index">
                          <li  class="f5">{{item.city}}</li>
                          <li  class="f3">{{item.play}}</li>
                          <li  class="f2">{{item.num}}</li>
                      </ul>
                  </div>
                  <div id="area2"></div>
                  <div id="area3">></div>
              </div>

          </div>
    </div>
</template>
<script>
  export default {
    name: 'areas',
    data() {
      return {
        title:'地区展板播放统计',
        timer:null,
        speed:50,
        box:null,
        area1:null,
        list:[
          { city:'山西省',play:'10000', num:'24'},
          { city:'湖南省',play:'8878', num:'22'},
          { city:'海南省',play:'5934', num:'21'},
          { city:'贵州省',play:'5899', num:'18'},
          { city:'云南省',play:'5523', num:'16'},
          { city:'甘肃省',play:'4678', num:'12'},
          { city:'四川省',play:'4224', num:'6'},
          { city:'湖南省',play:'3023', num:'4'},
          { city:'江西省',play:'2412', num:'2'},
          { city:'黑龙江省',play:'2258', num:'2'},
          { city:'湖北省',play:'2198', num:'2'},
          { city:'安徽省',play:'2158', num:'2'},
          { city:'新疆维吾尔自治区',play:'2258', num:'2'},
          { city:'广西壮族自治区',play:'1588', num:'2'},
          { city:'西藏自治区',play:'1258', num:'2'},
        ]
      }
    },
    mounted() {
      setTimeout(()=>{
        this.initScroll()
      },1000)
    },
    methods: {
      initScroll() {
        let _this = this
        this.box = document.getElementById("areaContent");
        this.con1 = document.getElementById("area1");
        let con2 = document.getElementById("area2");
        let con3 = document.getElementById("area3");
        con2.innerHTML = this.con1.innerHTML;
        con3.innerHTML = this.con1.innerHTML;
        this.timer = setInterval(_this.scrollUp, _this.speed);
      },
      scrollUp() {
        if (this.box.scrollTop >= this.con1.scrollHeight) {
          this.box.scrollTop = 0;
        } else{
          this.box.scrollTop++;
        }
      },
    }
  }
</script>

<style lang="less">

</style>