<template>
    <div class="formula realTime">
        <div class="page-content new-data" :class="deviceName == 10 ? 'control-page' : ''">

            <div class="control-view" v-if="deviceName == 10">
                <div class="title">气象站:</div>
                <vue-seamless class="control-list" :data="controlList" :class-option="defaultOption1">
                    <div class="list-view" v-for="item, index in controlList " :key="index">
                        <img class="icon" :src="item.img" alt="">
                        {{ item.environmentDataId
                        }}:{{ getControlData(item) }}
                    </div>
                </vue-seamless>
            </div>
            <!-- <div class="control-list" >
                <div v-for="(item, index) in controlList" :key="index">
                    <img :src="item.img" alt="">
                    {{ item.environmentDataId
                    }}:{{ getControlData(item) }}
                </div>
            </div> -->
            <div class="table-title">
                <img src="../../assets/image/real-time.png" alt="" />
                实时数据
                <!-- <div class="tips">种植作物1</div> -->

            </div>
            <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="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>
                            <div class="text">{{ item.name }}</div>
                            <div class="number">{{ item.num }}</div>
                        </div>
                    </div>
                </vue-seamless>

            </div>
            <div class="flex-list realTime-bottom">
                <div class="left-view">
                    <div ref="monitor" class="monitor" id="monitor">
                        <!-- <video ref="videoPlayer" class="video-js" id="video-js"></video> -->
                        <div ref="videoPlayer" class="video-js" id="video-js"></div>
                    </div>
                </div>
                <div class="right" id="realTime-line"></div>
            </div>
        </div>
        <div class="page-content" v-if="deviceName == 10">
            <div class="table-title">
                <img src="../../assets/image/status.png" alt="" />
                设备运行状态
            </div>
            <div class="flex-view border-none">
                <div class="status-view">
                    <div class="status-view-top">
                        <div class="status-view-top-left">{{ fanStatus.name }}</div>
                        <!-- <el-popover placement="top" width="140">
                            <div class="set-status-blue">进入修改设定值</div>
                            <el-popover placement="top" width="160">
                                <p class="del-text"><i style="color:red" class="el-popconfirm__icon el-icon-info"></i>确认删除?
                                </p>
                                <div style="text-align: right; margin: 0">
                                    <el-button class="el-button el-button--text el-button--mini color-blue">取消</el-button>
                                    <el-button class="el-button el-button--text el-button--mini color-blue">确定</el-button>
                                </div>
                                <div class="set-status-red" slot="reference">删除</div>
                            </el-popover>
                            <el-popover placement="right" width="100">
                                <input v-model="item.index" type="text" class="status-save">
                                <el-button class="el-button el-button--text el-button--mini color-blue">保存</el-button>
                                <div class="set-status-blue" slot="reference">排序</div>
                            </el-popover>
                            <img class="status-view-top-right" slot="reference" src="../../assets/img/more.png" alt="">
                        </el-popover> -->
                        <img class="status-view-top-right" slot="reference" src="../../assets/img/more.png" alt="">
                    </div>
                    <div class="status-view-content">
                        <div v-if="fanStatus.open != 0" class="status-true">
                            <div class="status-true-sel">
                                <div class="sel">
                                    <img v-if="fanStatus.open == 1" src="../../assets/img/status-true-sel.png" alt="">
                                    <img v-else src="../../assets/img/status-true-nosel.png" alt="">
                                    自动控制
                                </div>
                                <div class="sel-phone">
                                    <img v-if="fanStatus.open != 1" src="../../assets/img/status-true-sel.png" alt="">
                                    <img v-else src="../../assets/img/status-true-nosel.png" alt="">
                                    手机控制
                                </div>
                            </div>
                            <div class="status-fan">
                                <div class="btn" :class="fanStatus.status[0] == 1 ? 'blue' : 'off'">
                                    <img class="fan-img" v-if="fanStatus.status[0] == 1" src="../../assets/img/fan-on.png"
                                        alt="">
                                    <img v-else src="../../assets/img/fan-off.png" alt="">
                                    <span>1#风机</span>
                                </div>
                                <div class="btn" :class="fanStatus.status[1] == 1 ? 'blue' : 'off'">
                                    <img class="fan-img" v-if="fanStatus.status[1] == 1" src="../../assets/img/fan-on.png"
                                        alt="">
                                    <img v-else src="../../assets/img/fan-off.png" alt=""> <span>2#风机</span>
                                </div>
                                <div class="btn" :class="fanStatus.status[2] == 1 ? 'blue' : 'off'">
                                    <img class="fan-img" v-if="fanStatus.status[2] == 1" src="../../assets/img/fan-on.png"
                                        alt="">
                                    <img v-else src="../../assets/img/fan-off.png" alt=""> <span>3#风机</span>
                                </div>
                                <div class="btn" :class="fanStatus.status[3] == 1 ? 'blue' : 'off'">
                                    <img class="fan-img" v-if="fanStatus.status[3] == 1" src="../../assets/img/fan-on.png"
                                        alt="">
                                    <img v-else src="../../assets/img/fan-off.png" alt=""> <span>4#风机</span>
                                </div>
                                <div class="btn" :class="fanStatus.status[4] == 1 ? 'blue' : 'off'">
                                    <img class="fan-img" v-if="fanStatus.status[4] == 1" src="../../assets/img/fan-on.png"
                                        alt="">
                                    <img v-else src="../../assets/img/fan-off.png" alt=""> <span>5#风机</span>
                                </div>
                            </div>
                        </div>
                        <div v-else class="status-noTrue">
                            <img src="../../assets/img/status-no.png" alt="">
                            <div>当前设备无效</div>
                        </div>
                    </div>
                </div>
                <div class="status-view" v-for="item, index in statusList" :key="index">
                    <div class="status-view-top">
                        <div class="status-view-top-left">{{ item.name }}</div>
                        <!-- <el-popover placement="top" width="140">
                            <div class="set-status-blue">进入修改设定值</div>
                            <el-popover placement="top" width="160">
                                <p class="del-text"><i style="color:red" class="el-popconfirm__icon el-icon-info"></i>确认删除?
                                </p>
                                <div style="text-align: right; margin: 0">
                                    <el-button class="el-button el-button--text el-button--mini color-blue">取消</el-button>
                                    <el-button class="el-button el-button--text el-button--mini color-blue">确定</el-button>
                                </div>
                                <div class="set-status-red" slot="reference">删除</div>
                            </el-popover>
                            <el-popover placement="right" width="100">
                                <input v-model="item.index" type="text" class="status-save">
                                <el-button class="el-button el-button--text el-button--mini color-blue">保存</el-button>
                                <div class="set-status-blue" slot="reference">排序</div>
                            </el-popover>
                            <img class="status-view-top-right" slot="reference" src="../../assets/img/more.png" alt="">
                        </el-popover> -->
                        <img class="status-view-top-right" slot="reference" src="../../assets/img/more.png" alt="">
                    </div>
                    <div class="status-view-content">
                        <div v-if="item.open != 0" class="status-true">
                            <div class="status-true-sel">
                                <div class="sel">
                                    <img v-if="item.open == 1" src="../../assets/img/status-true-sel.png" alt="">
                                    <img v-else src="../../assets/img/status-true-nosel.png" alt="">
                                    自动控制
                                </div>
                                <div class="sel-phone">
                                    <img v-if="item.open != 1" src="../../assets/img/status-true-sel.png" alt="">
                                    <img v-else src="../../assets/img/status-true-nosel.png" alt="">
                                    手机控制
                                </div>
                            </div>
                            <div class="status-true-charts">
                                <img src="../../assets/img/status-true-charts-icon.png" alt="">
                                <div :id="'statusCharts' + index"></div>
                            </div>
                            <div class="status-true-text">
                                <div class="status-true-text-left">{{ getNumberStatus(item.index) }}</div>
                                <div class="status-true-text-right">{{ item.progress }}%</div>
                            </div>
                        </div>
                        <div v-else class="status-noTrue">
                            <img src="../../assets/img/status-no.png" alt="">
                            <div>当前设备无效</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import EZUIKit from 'ezuikit-js';
import { getnowtime } from '../../assets/js/nowTime'
import { realTimeLine, statusCharts } 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: 7, // 开始无缝滚动的数据量 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)
            }
        },
        defaultOption1() {
            return {
                step: 0.3, // 数值越大速度滚动越快
                limitMoveNum: 6, // 开始无缝滚动的数据量 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 {
            statusList: [],

            fanStatus: {
                name: '风机', open: 0, status: []
            },
            time: null,//右上角时间
            list: [],
            inputData: [],
            indexs: 1,
            player: null,
            url: '',
            timer: null,
            deviceName: 1,
            controlList: [],
            statusInterval: null,//status状态的Interval
            statusTime: 2,//status状态的秒数
        }
    },
    watch: {
        $route(newVal, oldVal) {
            const that = this;
            const store = this.$store.state
            this.indexs = this.$route.query.index ? this.$route.query.index : store.equipmentIndex;
            this.deviceName = store.equipmentList[this.indexs - 1].deviceName
            clearInterval(this.statusInterval) && this.statusInterval
            setTimeout(() => {

                if (this.player) {
                    this.player.stop()
                    that.player.destroy()
                    that.player = null
                }
                that.dataInit();


            }, 0);
        },
    },
    mounted() {
        const that = this;
        const store = this.$store.state
        this.indexs = this.$route.query.index ? this.$route.query.index : store.equipmentIndex;
        this.deviceName = store.equipmentList[this.indexs - 1].deviceName
        // 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();
            this.player.stop()
            this.player.destroy()
            this.player = null
        }
        clearInterval(this.statusInterval) && this.statusInterval
        that.timer && clearInterval(that.timer)
        this.$bus.$off('refreshTime')
    },
    methods: {
        padString(str, length) {
            return str.padStart(length, '0');
        },
        createVideoNew(accessToken) {
            // divW和divH是获取了父级宽高 使播放容器能铺满div
            let divW = this.$refs.monitor.clientWidth
            let divH = this.$refs.monitor.clientHeight
            this.player = new EZUIKit.EZUIKitPlayer({
                id: 'video-js', // 视频容器ID
                accessToken: accessToken,
                url: this.url,
                // 官方url例子：ezopen://open.ys7.com/G39444019/1.live 也可并非.live结尾 详见GitHub
                // 播放主题  simple-极简版; standard-标准版; security-安防版; voice-语音版; 自定义主题详见GitHub
                template: 'security',
                useHardDev: true,// 开启高性能模式 依赖需高于7.7.x 截止到2023.11.7 建议保持最新版本为7.7.6
                // plugin: ["talk"], // 加载插件，talk-对讲 非必填
                width: divW,  // 播放容器宽高 也可以直接设置成数字 如 1920 单位是px
                height: divH, // 播放容器宽高 也可以直接设置成数字 如 1080 单位是px
            })
            console.log(this.player);
        },
        getNumberStatus(index) {
            if (index == 0) {
                return '静止状态'
            } else if (index == 1) {
                return '正向打开中'
            } else if (index == 2) {
                return '反向关闭中'
            } else {
                return ''
            }
        },
        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
        //4是(原数据-1000) / 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)
        },
        countType4(data) {
            var num = (data - 1000) / 10
            return num.toFixed(2)
        },
        //右上角数据过滤
        getControlData(item) {
            var x = item.environmentData
            var num = item.num
            if (item.formula == '12') {
                if (x < 22 || x > 337) {
                    return '北'
                } else if (x >= 22 && x <= 67) {
                    return '东北'
                } else if (x > 67 && x < 112) {
                    return '东'
                } else if (x >= 112 && x <= 157) {
                    return '东南'
                } else if (x > 157 && x < 202) {
                    return '南'
                } else if (x >= 202 && x <= 247) {
                    return '西南'
                } else if (x > 247 && x < 292) {
                    return '西'
                } else if (x >= 292 && x <= 337) {
                    return '西北'
                }
            } else {
                return num
            }
        },
        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 formData = {
                equipmentId: store.equipmentList[this.indexs - 1].deviceId
            }
            var list = store.typeList
            if (this.deviceName == 1) {
                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'
                // }
                if (!this.player) {
                    this.api.getGethls(data2).then(res => {
                        if (res.data.code == 200) {
                            this.url = res.data.data.ezopen
                            this.createVideoNew(res.data.data.accesstoken)
                        }
                    })
                }

            } else if (this.deviceName == 10) {
                this.api.getControlRtdata(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);
                    }
                });
                this.api.getControlRtDatastation(formData).then(res => {
                    this.controlList = []
                    if (res.data.code == 200) {
                        res.data.data.forEach((el, index) => {
                            list.forEach((el1, index1) => {
                                if (el.formula == el1.value) {
                                    // console.log(el1);
                                    var num = el.environmentData + el1.unit
                                    this.controlList.push({
                                        ...el,
                                        num: num,
                                        img: require(`../../assets/image/real-time-${el.formula}.png`)
                                    })
                                }
                            })
                        })
                    }
                    // console.log(this.controlList);
                })

                this.getStatus()
                clearInterval(this.statusInterval) && this.statusInterval
                this.statusInterval = setInterval(() => {
                    if (this.deviceName == 10) {
                        this.getStatus()
                    }
                }, this.statusTime * 1000);
                var data1 = store.equipmentList[this.indexs - 1].deviceId

                this.api.getControlFsdata(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'
                // }
                if (!this.player) {
                    this.api.getGethls(data2).then(res => {
                        // console.log(res.data, 11);
                        if (res.data.code == 200) {
                            this.url = res.data.data.ezopen
                            this.createVideoNew(res.data.data.accesstoken)
                        }
                    })
                }
            }

        },
        getStatus() {
            var store = this.$store.state
            var TargetValue = {
                deviceId: store.equipmentList[this.indexs - 1].deviceId
            }
            this.api.getControlGetState(TargetValue).then(res => {
                if (res.data.code == 200) {
                    this.fanStatus.open = res.data.data['1023']
                    this.fanStatus.status = []
                    var num = res.data.data['1024']
                    var num1 = this.padString(num.toString(2), 5)
                    var openListNew = []
                    openListNew = num1.split("")
                    this.fanStatus.status = openListNew.reverse()
                    this.statusList = []
                    for (var i = 0; i < 4; i++) {
                        var statusData = { name: `顶卷膜${i + 1}`, open: res.data.data[(1025 + (i * 3))], progress: res.data.data[(1027 + (i * 3))], index: res.data.data[(1026 + (i * 3))] }
                        this.statusList.push(statusData)


                    }
                    this.$forceUpdate();
                    setTimeout(() => {
                        this.statusList.forEach((el, index) => {
                            if (el.open != 0) {
                                statusCharts(`statusCharts${index}`, el.progress)
                            }
                        })
                    }, 10);

                } else {
                    this.statusList = []
                    this.fanStatus = {
                        name: '风机', open: 0, status: []
                    }
                    this.$forceUpdate();
                    // this.$message.error(res.data.msg);
                }
            })
        },
        getTime() {
            this.time = getnowtime()
            const that = this
            setInterval(() => {
                that.time = getnowtime()
            }, 1000);
        },
    },

}
</script>
<style lang="scss">
.video-js-select-quality-item {
    color: rgba(0, 0, 0, 0.85) !important;
}

.set-status-blue {
    color: #409eff;
    font-size: 14px;
    cursor: pointer;
    padding: 5px 0;
}

.set-status-red {
    color: red;
    cursor: pointer;
    font-size: 14px;
    padding: 5px 0;
}

.del-text {
    color: #000;
    font-size: 14px;
}

.color-blue {
    span {
        color: #409eff;
        font-size: 14px;
    }
}

.status-save {
    width: 45px;
    height: 28px;
    text-align: center;
    border-radius: 4px;
    border: 1px solid #dcdfe6;
    color: #606266;
    font-size: 14px;
}
</style>