<template>
    <div class="formula realTime">
        <div class="page-content">
            <div class="timeNow" v-if="list.length">
                <!-- {{ time.year.year }}-{{ time.year.month }}-{{ time.year.date }}<span> {{ time.time }}:{{ time.timeS
                }}</span> -->
                {{ list[0].updateTime?list[0].updateTime:'' }}
            </div>
            <div class="table-title">
                <img src="../../assets/image/real-time.png" alt="" />
                实时数据
                <!-- <div class="tips">种植作物1</div> -->
            </div>
            <div class="flex-view border-none">
                <!-- <div class="input-btn">
                    <div class="btn blue">
                        <img src="../../assets/image/real-time-icon1.png" alt="" />3D动态水肥监控
                    </div>
                    <div class="btn green">
                        <img src="../../assets/image/real-time-icon2.png" alt="" />短信报警
                    </div>
                </div> -->
            </div>
            <div class="realTime-list" v-if="list.length">
                <vue-seamless class="seamless-warp" :data="list" :class-option="defaultOption">
                    <div class="list-view" v-for="item, index in list " :key="index">
                    <img :src="item.img" alt="">
                    <div class="text">{{ item.name }}</div>
                    <div class="number">{{ item.num }}</div>
                </div>
                </vue-seamless>
           
            </div>
            <div class="flex-list realTime-bottom">
                <div class="left">
                    <div class="monitor" id="monitor">
                        <video ref="videoPlayer" class="video-js"></video>
                    </div>
                </div>
                <div class="right" id="realTime-line"></div>
            </div>
        </div>
    </div>
</template>
<script>
import { getnowtime } from '../../assets/js/nowTime'
import { realTimeLine } from '@/assets/js/charts'
import videojs from 'video.js';
import video_zhCN from 'video.js/dist/lang/zh-CN.json'
import vueSeamless from 'vue-seamless-scroll'
export default {
    components: { vueSeamless },
    computed: {
        defaultOption() {
            return {
                step: 0.3, // 数值越大速度滚动越快
                limitMoveNum: 9, // 开始无缝滚动的数据量 this.dataList.length
                hoverStop: true, // 是否开启鼠标悬停stop
                direction: 2, // 0向下 1向上 2向左 3向右
                openWatch: true, // 开启数据实时监控刷新dom
                singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
                singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
                waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
            }
        }
    },
    data() {
        return {
            time: null,//右上角时间
            list: [],
            inputData: [],
            indexs: 1,
            player: null,
            url: '',
            timer:null
        }
    },
    watch: {
        $route(newVal, oldVal) {
            const that = this;
            this.indexs = this.$route.query.index ? this.$route.query.index : 1;
            setTimeout(() => {
                that.dataInit();
            }, 0);
        },
    },
    mounted() {
        const that = this;
        this.indexs = this.$route.query.index ? this.$route.query.index : 1;

        // this.getTime()


        setTimeout(() => {
            that.dataInit();
            that.timer&&clearInterval(that.timer)
            that.timer= setInterval(() => {
            that.dataInit();
           }, 60000);
        }, 0);
   
    },
    beforeDestroy() {
        const that = this;
        // 销毁播放器
        if (this.player) {
            this.player.dispose();
        }
         that.timer&&clearInterval(that.timer)
         this.$bus.$off('refreshTime')
    },
    methods: {
        createVideo() {
            // 创建视频播放器
            videojs.addLanguage('zh-CN', video_zhCN)
            this.player = videojs(this.$refs.videoPlayer, {
                techOrder: ['html5', 'hls'], // 优先使用HTML5播放器，如果不支持，则使用HLS
                sources: [{
                    src: this.url, // 替换为您的.m3u8链接
                    type: 'application/x-mpegURL'
                }],
                autoplay: true, // 自动播放
                controls: true, // 显示控制条
                language: 'zh-CN'
            });
        },
        countData100(data) {
            var num = 0
            if (data) {
                num = data / 100
            } else {
                num = 0
            }
            return num
        },
          //countType计算类型 
        //0是原数据 
        //1是原数据-400 
        //2是原数据/10 
        //3是(原数据-400) / 10
        countType1(data) {
            var num=data - 400
            return num.toFixed(2)
        },
        countType2(data) {
            var num=data / 10
            return num.toFixed(2)
        },
        countType3(data) {

            var num=(data - 400) / 10
            return num.toFixed(2)
        },
        dataInit() {
            var store = this.$store.state
            var equipmentId=store.equipmentList[this.indexs - 1].deviceId
            // var data = {
            //     equipmentId: store.equipmentList[this.indexs - 1].deviceId,
            //     // pattern: 0, //需要根据文档填写 //6目标ph-数值
            //     // regNum: 73,
            // };
            var list = store.typeList
            this.api.postRtdata(equipmentId).then((res) => {
                if (res.data.code == 200) {
                    this.inputData = res.data.data;
                    this.list=[]
                    this.inputData.forEach((el,index)=>{
                        list.forEach((el1,index1)=>{
                            if(el.formula==el1.value){
                           var num=0
                           var name=''
                        //    if(el1.countType==1){
                        //     num=this.countType1(el.environmentData)+el1.unit
                        //    }else if(el1.countType==2){
                        //     num=this.countType2(el.environmentData)+el1.unit
                        //    }else if(el1.countType==3){
                        //     num=this.countType3(el.environmentData)+el1.unit
                        //    }else{
                            num=el.environmentData+el1.unit
                        //    }
                           if(el.equipmentNumber==0){
                            if(el.targetValue==1){
                                name='目标'+el.environmentDataId
                            }else{
                                name='1#平均'+el.environmentDataId
                            }
                           }else if(el.equipmentNumber==15){
                            if(el.targetValue==1){
                                name='目标'+el.environmentDataId
                            }else{
                                name='2#平均'+el.environmentDataId
                            }
                           }else{
                            name=el.equipmentNumber+'#'+el.environmentDataId
                           }

                            this.list.push({
                                ...el,
                                name:name,
                                 num: num,
                                  img: require(`../../assets/image/real-time-${el.formula}.png`) 
                            
                                })
                           
                        }
                        })
                    })
                } else {
                    this.$message.error(res.data.msg);
                }
            });
            var data1 = store.equipmentList[this.indexs - 1].deviceId

            this.api.postFsdata(data1).then(res => {
                if (res.data.code == 200) {
                    var chartsData=res.data.data
                    realTimeLine('realTime-line',chartsData)
                } else {
                    this.$message.error(res.data.msg);
                }
            })
            var nowDevice = store.equipmentList[this.indexs - 1]
            var data2={
                cameraid:nowDevice.cameraSerialNumber,
                channelid:nowDevice.cameraChannelNumber
            }

            //当前没有设备 默认写死 后续有数据需要改回去
            // var data2 = {
            //     cameraid: 'L18357958',
            //     channelid: '1'
            // }
            this.api.getGethls(data2).then(res => {
                console.log(res.data, 11);
                if (res.data.code == 200) {
                    this.url = res.data.msg
                    this.createVideo()
                }
            })
        },
        getTime() {
            this.time = getnowtime()
            const that = this
            setInterval(() => {
                that.time = getnowtime()
            }, 1000);
        },
    },

}
</script>
<style lang="scss"></style>