<template>
    <div class="list-of-area">
       <triangle>
            <slot>
                <div class="list-of-area-title common-title">
                    <img class="icon-title" src="/images/screen/boardsDemand.png" alt="">
                    <span class="title">{{title}}</span>
                    <img class="bg" src="/images/screen/title00_bg.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>
            </slot>
        </triangle>

    </div>
</template>

<script>
  import triangle from '../components/slot/triangle'
  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'},
        ]
      }
    },
    components:{triangle},
    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=scss>

</style>
