<!--实验室传感器滚动组件-->
<template>
    <div class="subSensorComponent"
         @mouseleave="tableActionStart"
         @mouseenter="tableTimerOff"
         ref="scrollDiv">
        <div class="sub-sensor-for-box" v-for="(item,index) in dataList" :key="index">
            <div class="sub-sensor-for-name">
                <p>{{item.subName}}</p>
                <p>{{item.buildName}}</p>
                <p>{{item.floorName}}</p>
                <p>{{item.roomNum}}</p>
            </div>
            <div class="sub-sensor-for-list">
                <p v-for="(minItem,minIndex) in item.sensorModelList" :key="minIndex">{{minItem.deviceName}}:{{minItem.deviceValue?minItem.deviceValue:'-'}}{{minItem.unit}}</p>
            </div>
        </div>
        <p v-if="!dataList[0]" class="null-p">- 暂无数据 -</p>
    </div>
</template>
<script>
    import {
        laboratoryBigViewFindSubSensor
    } from "@/api/index";
    export default {
        name: 'subSensorComponent',
        data() {
            return {
                queryParams: {
                    page: 1,
                    pageSize: 10,
                },
                dataList: [],
                total: 0,
                /*****************数据滚动相关*****************/
                tableTimer: null,
                dataListA:[],
            }
        },
        created() {

        },
        mounted() {
            this.getList();
        },
        methods: {
            //获取数据
            getList(){
                window.clearInterval(this.tableTimer);
                laboratoryBigViewFindSubSensor(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 == 2){
                            this.$set(this,'dataListA',response.data.records);
                        }else{
                            this.$set(this,'dataListA',response.data.records.slice(-2));
                        }
                        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;
                        laboratoryBigViewFindSubSensor(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 == 2){
                                this.$set(this,'dataListA',ListB);
                            }else{
                                this.$set(this,'dataListA',ListB.slice(-2));
                            }
                            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[2]){
                    this.tableTimerFun();
                }else if(!this.dataList[2] && this.queryParams.page != 1){
                    setTimeout(function(){
                        self.tableTimerFun();
                    },2000);
                }
            },
            //暂停后开始
            tableActionStart(){
                let self = this;
                if(this.dataList[2]){
                    this.tableTimerFun();
                }else if(!this.dataList[2] && 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">
    .subSensorComponent {
        height: 114px;
        width: 1028px;
        overflow-x: hidden;
        overflow-y: scroll;
        *{
            padding:0;
            margin:0;
        }
        .sub-sensor-for-box {
            margin: 0 30px 6px;
            padding: 10px 0;
            background: rgba(30, 118, 142, 0.2);
            .sub-sensor-for-name {
                display: flex;
                padding:0 20px;
                p {
                    margin:0;
                    color: #00FAFF;
                    font-size: 14px;
                    font-family: Source Han Sans CN;
                    font-weight: bold;
                    line-height: 14px;
                }
                p:nth-child(1){
                    margin-right:20px;
                }
                p:nth-child(2){
                    margin-right:5px;
                }
                p:nth-child(3){
                    margin-right:5px;
                }
            }
            .sub-sensor-for-list {
                padding:0 20px;
                p {
                    margin:0;
                    display: inline-block;
                    font-size: 14px;
                    font-family: Source Han Sans CN;
                    font-weight: 400;
                    color: #FFFFFF;
                    line-height: 14px;
                    margin-right: 10px;
                }
            }
        }
        .null-p {
            text-align: center;
            color: #999;
            font-size: 14px;
            line-height: 80px;
        }
    }
</style>
