<!--实验室传感器滚动组件-->
<template>
  <div class="subUserComponent"
       @mouseleave="tableActionStart"
       @mouseenter="tableTimerOff"
       ref="scrollDiv">
    <div class="sub-user-for-box" v-for="(item,index) in dataList" :key="index">
      <p class="sub-user-for-name">{{item.subName}}</p>
      <p class="sub-user-for-num">{{item.userNum}}</p>
    </div>
    <p v-if="!dataList[0]" class="null-p">- 暂无数据 -</p>
  </div>
</template>
<script>
    import {
        laboratoryBigViewSubUserCount
    } from "../api/index";
    export default {
        name: 'subUserComponent',
        data() {
            return {
                queryParams: {
                    page: 1,
                    pageSize: 10,
                },
                dataList:[],
                total:0,
                /*****************数据滚动相关*****************/
                tableTimer: null,
                dataListA:[],
                dataListB:[],
            }
        },
        created() {

        },
        mounted() {
            this.getList();
        },
        methods: {
            //获取数据
            getList(){
                window.clearInterval(this.tableTimer);
                laboratoryBigViewSubUserCount(this.queryParams).then(response => {
                    if(response.data.records.length == this.queryParams.pageSize || this.queryParams.page == 1){
                        let list = JSON.parse(JSON.stringify(this.dataListA));
                        let newList = JSON.parse(JSON.stringify(list.concat(response.data.records)));
                        if(response.data.records.length == 4){
                            this.$set(this,'dataListA',response.data.records);
                        }else{
                            this.$set(this,'dataListA',response.data.records.slice(-4));
                        }
                        this.$set(this,'dataList',newList);
                        this.$set(this, 'total', response.data.total);
                        this.tableActionFun();
                    }else{
                        let obj = JSON.parse(JSON.stringify(this.queryParams));
                        obj.page = 1;
                        laboratoryBigViewSubUserCount(obj).then(responseOne => {
                            let list = JSON.parse(JSON.stringify(this.dataListA));
                            let ListA = response.data.records;
                            let ListB = responseOne.data.records;
                            let newList = JSON.parse(JSON.stringify(ListA.concat(ListB)));
                            if(ListB.length == 4){
                                this.$set(this,'dataListA',ListB);
                            }else{
                                this.$set(this,'dataListA',ListB.slice(-4));
                            }
                            this.$set(this,'dataList',list.concat(newList));
                            this.$set(this, 'total', response.data.total);
                            this.$set(this.queryParams,'page',1);
                            this.tableActionFun();
                        });
                    }
                });
            },
            //滚动方法
            tableActionFun() {
                let self = this;
                this.$refs.scrollDiv.scrollTop = 0;
                if(this.dataList[4]){
                    this.tableTimerFun();
                }else if(!this.dataList[4] && this.queryParams.page != 1){
                    setTimeout(function(){
                        self.tableTimerFun();
                    },2000);
                }
            },
            //暂停后开始
            tableActionStart(){
                let self = this;
                if(this.dataList[4]){
                    this.tableTimerFun();
                }else if(!this.dataList[4] && this.queryParams.page != 1){
                    setTimeout(function(){
                        self.tableTimerFun();
                    },2000);
                }
            },
            //开始滚动
            tableTimerFun() {
                this.tableTimer = window.setInterval(() => {
                    let csrollTop = this.$refs.scrollDiv.scrollTop
                    let maxHeight = this.$refs.scrollDiv.scrollHeight - this.$refs.scrollDiv.offsetHeight
                    if (csrollTop >= maxHeight) {
                        if (this.accMul(this.queryParams.pageSize,this.queryParams.page) < this.total) {
                            this.$set(this.queryParams,'page',this.queryParams.page+1);
                            this.$nextTick(()=>{
                                this.getList();
                            })
                        }else{
                            this.$set(this.queryParams,'page',1);
                            this.$nextTick(()=>{
                                this.getList();
                            })
                        }
                    } else {
                        this.$refs.scrollDiv.scrollTop += 1;
                    }
                }, 80);
            },
            //停止滚动
            tableTimerOff(){
                window.clearInterval(this.tableTimer)
            },
            //乘法
            accMul(arg1,arg2){
                var m=0,s1=arg1.toString(),s2=arg2.toString();
                try{m+=s1.split(".")[1].length}catch(e){}
                try{m+=s2.split(".")[1].length}catch(e){}
                return Number(s1.replace(".",""))*Number(s2.replace(".",""))/Math.pow(10,m)
            },
        },
        beforeDestroy() {
            //清除定时器
            window.clearInterval(this.tableTimer);
            this.$set(this,'tableTimer',null);
            this.$set(this,'dataList',[]);
        },
        destroyed() {
            //清除定时器
            window.clearInterval(this.tableTimer);
            this.$set(this,'tableTimer',null);
            this.$set(this,'dataList',[]);
        }
    }
</script>
<style scoped lang="scss">
  /* 自定义整个滚动条的样式--去处公公样式黑边 */
  ::-webkit-scrollbar {
    display: none;
  }
  .subUserComponent {
    height:165px;
    width:323px;
    overflow-x: hidden;
    overflow-y: scroll;
    *{
      padding:0;
      margin:0;
    }
    .sub-user-for-box{
      display: flex;
      border-bottom:1px solid #0090EE ;
      p{
        line-height:40px;
        font-size:14px;
        color:#fff;
      }
      .sub-user-for-name{
        padding:0 10px 0 6px;
        flex:1;
        display : block;
        overflow : hidden;
        text-overflow : ellipsis;
        white-space : nowrap;
      }
      .sub-user-for-num{
        text-align: center;
        width: 50px;
        margin-right:30px;
      }
    }
    .null-p{
      text-align: center;
      color:#999;
      font-size:14px;
      line-height:80px;
    }
  }
</style>
