<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 },
  mounted() {
    this.getList();
  },
  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");
      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++;
      }
    },
    getList() {
      let _this = this;
      let requestparams = {};
      requestparams._index = 1;
      requestparams._size = 10;
      this.$https(
        {
          method: "post",
          url: "tBoardStatistic/getBoardDistrictPageList",
        },
        requestparams
      )
        .then((res) => {
          if (res.status == 200) {
            if (res.data.resultCode == 200) {
              this.list = res.data.data.records;
              this.$nextTick(()=>{
                _this.initScroll();
              })
            } else {
              this.list = [];
            }
          } else {
            this.list = [];
          }
        })
        .catch((err) => {
          this.$message.error(err.message);
        });
    },
  },
};
</script>

<style lang=scss>
</style>
