<template>
  <div class="list-of-area">
    <triangle>
      <slot>
        <div class="list-of-area-title common-title">
          <img
            class="icon-title"
            src="@/assets/images/screen/boardsDemand.png"
            alt=""
          />
          <span class="title">{{ title }}</span>
          <img class="bg" src="@/assets/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.areaName }}</li>
                <li class="f3">{{ item.playNumber }}</li>
                <li class="f2">{{ item.boardCnt }}</li>
              </ul>
            </div>
            <div id="area2"></div>
            <div id="area3"></div>
            <div id="area4"></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: [],
    };
  },
  components: { triangle },
  props: {
    data: {
      type: Array,
      default: () => {
        return [];
      },
    },
  },
  mounted() {
  },
  methods: {
    clearDom(){
      [2,3,4].forEach(v=>{
        document.getElementById(`area${v}`).innerHTML = ""
      })
    },
    initScroll() {
      let _this = this;
      this.box = document.getElementById("areaContent");
      this.con1 = document.getElementById("area1");
      let con2 = document.getElementById("area2");
      let con3 = document.getElementById("area3");
      let con4 = document.getElementById("area4");
      con2.innerHTML = this.con1.innerHTML;
      con3.innerHTML = this.con1.innerHTML;
      con4.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++;
      }
    }
  },
  watch: {
    data() {
      this.clearDom()
      this.list = this.data;
      if (this.list.length > 4) {
        this.$nextTick(() => {
          this.initScroll();
        });
      }
    },
  },
};
</script>

<style lang=scss>
</style>