<template>
    <div class="container">
        <div class="header">
            <img src="../assets/img/head.png" alt="" />
        </div>
        <el-container>
            <!-- <left></left>
            <right></right> -->
            <div ref="linedomRef" style="width: 50px;height: 50px;background-color: #f00;position: absolute;z-index: 228;">
            </div>

        </el-container>


        <el-popover placement="right" v-model:visible="visible" :width="260" :virtual-ref="triggerRef" trigger="click"
            virtual-triggering>
            <div class="model-detail" ref="popoverRef" id="popoverRef">
                <span><span class="title">设备名称: </span>{{ clickData.value && clickData.value.status }}</span>
                <span><span class="title">设备状态: </span>{{ clickData.value && clickData.value.classes }}</span>
                <span><span class="title">位置: </span>{{ clickData.value && clickData.value.course }}</span>
                <span><span class="title">型号: </span>{{ clickData.value && clickData.value.theory }}</span>
                <span><span class="title">质保期: </span>{{ clickData.value && clickData.value.name }}</span>
                <!-- <span><span class="title">实到人数: </span>{{ clickData.value && clickData.value.actual }}</span>
                <span><span class="title">老师: </span>{{ clickData.value && clickData.value.teacher }}</span> -->
            </div>
        </el-popover>

        <!-- 视频播放弹框 -->
        <el-dialog class="videoDialog" v-model="videoDialog" title="互动教师1" width="60%" align="center" top="4%">
            <videoPlay v-bind="videoData" @play="onPlay" />
        </el-dialog>
    </div>
</template>

<script>
import { reactive, onMounted, ref, toRefs, onBeforeUnmount, getCurrentInstance, nextTick } from 'vue';
import { ElScrollbar, ElPagination, ElDialog, ElCarousel, ElCarouselItem, ElMessage } from "element-plus";
import "vue3-video-play/dist/style.css";
import { addResponseEventListener } from "../webrtcVideo.js";
import { videoPlay } from "vue3-video-play";
import CircleProgress from './CircleProgress.vue';
import Left from './left.vue'
import Right from './right.vue'
import LeaderLine from "../assets/js/leaderline.js"

export default ({
    name: 'Histogram',
    components: { Left, Right, ElScrollbar, ElPagination, ElDialog, videoPlay, ElCarousel, ElCarouselItem, CircleProgress },
    setup() {
        // 视频数据
        const videoData = reactive({
            width: "100%", //播放器高度
            height: "100%", //播放器高度
            color: "red", //主题色
            title: "互动教室", //视频名称
            src: "https://cdn.jsdelivr.net/gh/xdlumia/files/video-play/IronMan.mp4", //视频源
            muted: false, //静音
            webFullScreen: false,
            // speedRate: ["0.75", "1.0", "1.25", "1.5", "2.0"], //播放倍速
            autoPlay: false, //自动播放
            loop: false, //循环播放
            mirror: false, //镜像画面
            ligthOff: false, //关灯模式
            volume: 0.3, //默认音量大小
            control: true, //是否显示控制
            currentTime: 0,//跳转到固定播放时间
            controlBtns: [
                "audioTrack",
                "quality",
                "speedRate",
                "volume",
                "setting",
                "pip",
                "pageFullScreen",
                "fullScreen",
            ], //显示所有按钮,
        });
        // 物联设备类型统计
        const interDevice = ref(
            [
                // {
                //     number: 98,
                //     color: "#63ABFF",
                //     icon: 'r1',
                //     text: "显示系统"
                // },
                // {
                //     number: 185,
                //     color: "#63FFC7",
                //     icon: 'r2',
                //     text: "控制设备"
                // },
                // {
                //     number: 58,
                //     color: "#918EFF",
                //     icon: 'r3',
                //     text: "音频设备"
                // },
                // {
                //     number: 68,
                //     color: "#00C8E3",
                //     icon: 'r4',
                //     text: "录播设备"
                // },
                // {
                //     number: 189,
                //     color: "#FFBB54",
                //     icon: 'r5',
                //     text: "环境设备"
                // },
                // {
                //     number: 98,
                //     color: "#00CF78",
                //     icon: 'r6',
                //     text: "安全管理"
                // },

            ])
        // 位置弹框
        let centerDialogVisible = ref(false)
        // 获取点击点数据
        let clickData = reactive({})
        const visible = ref(false)
        const triggerRef = ref({
            getBoundingClientRect() {
                // console.log("positon----方法返回元素的大小及其相对于视口的位置", position.value)
                return position.value
            },
        })
        const position = ref({
            top: 0,
            left: 0,
            bottom: 0,
            right: 0,
        })
        // 点击某个模型跟随移动
        const mousemoveHandler = (x, y) => {
            position.value = DOMRect.fromRect({
                width: 0,
                height: 0,
                x: x,
                y: y,
            })
        }


        //视频播放弹框
        const videoDialog = ref(false)
        // 播放视频
        const lookVideo = function () {

            videoDialog.value = true;
            console.log("点击了播放视频", 12312312)
        }
        // 播放视频
        const onPlay = function () {
            console.log("播放视频")
        }
        //智慧教室实时监控---数据
        const carouselData = ref([
            // {
            //     activeMonitor: {
            //         title: "多屏互动教室",
            //         array: [
            //             {
            //                 title: "互动教室22",
            //                 poster: 'rb1',
            //                 src: '',
            //             },
            //             {
            //                 title: "互动教室22",
            //                 poster: 'rb2',
            //                 src: '',
            //             }
            //         ]
            //     },
            //     wisdomMonitor:
            //     {
            //         title: "多屏智慧教室",
            //         array: [
            //             {
            //                 title: "智慧教室11",
            //                 poster: 'rb1',
            //                 src: '',
            //             },
            //             {
            //                 title: "智慧教室11",
            //                 poster: 'rb2',
            //                 src: '',
            //             }
            //         ]
            //     }
            // },
            // {
            //     activeMonitor: {
            //         title: "多屏互动教室",
            //         array: [
            //             {
            //                 title: "互动教室33",
            //                 poster: 'rb1',
            //                 src: '',
            //             },
            //             {
            //                 title: "互动教室33",
            //                 poster: 'rb2',
            //                 src: '',
            //             }
            //         ]
            //     },

            //     wisdomMonitor:
            //     {
            //         title: "多屏智慧教室",
            //         array: [
            //             {
            //                 title: "智慧教室22",
            //                 poster: 'rb1',
            //                 src: '',
            //             },
            //             {
            //                 title: "智慧教室22",
            //                 poster: 'rb2',
            //                 src: '',
            //             }
            //         ]
            //     }
            // }

        ]
        )
        const linedomRef = ref(null)
        let lineContainer = ref(null)
        const popoverRef = ref(null)
        const lineStyleOption = ref({
            // color: '#2AC367', // 指引线颜色
            // startPlug: 'disc',
            // endPlug: 'disc', // 指引线结束点的样式 hand,disc
            // size: 2, // 线条尺寸
            // startSocket: 'bottom', //在指引线开始的地方从元素左侧开始
            // endSocket: 'top', //在指引线开始的地方从元素右侧结束
            // // hide: true, // 绘制时隐藏，默认为false，在初始化时可能会出现闪烁的线条
            // // startPlugColor: '#2AC367', // 渐变色开始色
            // // endPlugColor: '#fff386', // 渐变色结束色
            // // gradient: false, // 使用渐变色
            // outLineColor: 'blue',
            // path: 'magnet', // straight,arc,fluid,magnet,grid
            // dash: {
            //     // 虚线样式
            //     animation: true // 让线条滚动起来
            // },
            // hide: true
            startPlug: 'disc',
            endPlug: 'disc',
            startPlugColor: 'rgb(248, 205, 30)',
            startPlugOutlineColor: 'rgb(30, 130, 250)',
            endPlugColor: '#ff0000', // translucent
            endPlugOutlineColor: '#2AC367',
            size: 2,
            startPlugSize: 1.5,
            startPlugOutlineSize: 1,
            endPlugSize: 3,
            endPlugOutlineSize: 3
        })
        onMounted(() => {


            // 监听一下页面点击情况
            addResponseEventListener("open", (data) => {
                if (data) {
                    let json = eval("(" + data + ")");//转对象
                    clickData.value = json;
                    // console.log("clickData---点击的数据", clickData.value)
                    // console.log("看一下", linedomRef.value.style.top, json, "json")
                    visible.value = true
                    linedomRef.value.style.top = json.x + "px";
                    linedomRef.value.style.left = json.y + "px";

                    let popoverRef2 = document.getElementById("popoverRef")
                    // setTimeout(() => {
                    //     console.log("popoverRef", popoverRef, "popoverRef.value", popoverRef.value);
                    // }, 2000);
                    // setTimeout(() => {
                    console.log("linedomRef.value", linedomRef.value, "popoverRef.value", popoverRef.value);
                    lineContainer.value = new LeaderLine(linedomRef.value, popoverRef.value)
                    lineContainer.value.show('draw', {
                        duration: 1000, //持续时长
                        timing: 'ease-in' // 动画函数
                    })
                    lineContainer.value.endPlugOutline = true;
                    lineContainer.value.position()
                    console.log("隔几秒在连接", 1312312)
                    // }, 3000);

                }
            })

            // addResponseEventListener("End", data => {
            //     console.log("移动结束", 123123, data)
            // })

        })








        return {
            centerDialogVisible,
            interDevice,
            clickData,
            visible,
            triggerRef,
            videoData,
            onPlay,
            videoDialog,
            lookVideo,
            ...toRefs(carouselData),
            carouselData,
            linedomRef,
            popoverRef,
            lineContainer
        }
    },
})

</script>

<style scoped lang="scss">
@import '../assets/css/home.scss';
</style>