<template>
    <el-aside class="left">

        <div class="left_top">
            <div class="title">
                <div class="text">教室分类统计</div>
            </div>
            <div class="content">
                <div id="myChart" style="width:140px; height: 140px;margin:48px 0 30px 18px">
                </div>
                <div class="list">
                    <div class="item" v-for="(item, index) in classRoomCount">
                        <i :style="{ backgroundColor: item.color }"></i>
                        <div class="descr">
                            <span>{{ item.name }}</span>
                            <span>{{ item.value }}</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="left-center">
            <div class="title">
                <div class="text">本周课程统计</div>
            </div>
            <div class="content">
                <div class="count" v-for="(item, index) in classCount" :key="index">
                    <CircleProgress :target-value="item.number" :color="item.color" :text="item.text" text-position="bottom">
                        <img :src="leftimg + item.imgnumber + '.png'" alt="">
                    </CircleProgress>
                    <div class="text">{{ item.text }}</div>

                </div>
            </div>
        </div>

        <div class="left-bottom">
            <div class="title">
                <div class="text">智慧教室使用明细</div>
            </div>

            <div class="content" style="height: 100%;overflow: hidden;">
                <div class="table">
                    <ul class="th">
                        <li>教室</li>
                        <li>使用状态</li>
                        <li class="long">实到/应到人数</li>
                        <li>到课率</li>
                        <li>操作</li>
                    </ul>
                    <div ref="testMain" style="height: 342px;overflow: scroll;" class="scroll">
                        <ul v-for="item in classRoom" @mouseenter="testMove" @mouseleave="testMend">
                            <li class="jiaos"> {{ item.class }} </li>
                            <li>{{ item.status }}</li>
                            <li >{{ item.people || '—'}}</li>
                            <li >{{ item.percentage ?item.percentage: '—' }}</li>
                      
                            <li>
                                <el-button size="small" v-if="item.leaf" class="look" @click.prevent="handleRoom(item)">查看</el-button>
                            </li>

                        </ul>

                    </div>

                </div>
            </div>
        </div>


         
     
    </el-aside>



        <div  ref="popoverRef" v-if="roomVisible" style="background-color: rgba(245, 246, 248, 0.9); border-radius: 10px;position: absolute; top: 10vh; left: 50%; width: 366px;z-index: 999; transform: translateX(-50%);">

         
    <div class="model-detail">
        <span><span class="title">教室状态: </span>
            <span :class="classInfo.online ? 'green' : 'red'">{{ classInfo &&
                classInfo.status }}</span>
        </span>



        <span><span class="title">班级: </span>  <span style="width: 105px; display: inline-flex;">{{ classInfo && classInfo.className }}</span> </span>
        <span><span class="title">课程名称: </span>   <span style="width: 94px; display: inline-flex;">{{ classInfo && classInfo.courseName }}</span>    </span>
        <span><span class="title">应到人数: </span>{{ classInfo && classInfo.expected }}</span>
        <span><span class="title">教室: </span>  <span style=";width: 120px; display: inline-flex;"> {{ classInfo && classInfo.class }} </span>     </span>
        <span><span class="title">实到人数: </span>{{ classInfo && classInfo.actual }}</span>
        <span><span class="title">老师: </span>{{ classInfo && classInfo.teacher }}</span>
    </div>

    </div>



</template>

<script >



import * as echarts from "echarts";
import { reactive, onMounted, ref, onBeforeUnmount, onUnmounted, nextTick, getCurrentInstance } from 'vue';
import { ElScrollbar, ElPagination, ElDialog, ElCarousel, ElCarouselItem } from "element-plus";
import { getClass } from '../request/api'
import CircleProgress from './CircleProgress.vue';
import { callUIInteraction }
    from "../webrtcVideo";

export default ({

    name: 'Histogram',
    components: { ElScrollbar, ElPagination, ElDialog, ElCarousel, ElCarouselItem, CircleProgress },
    setup(_, { emit }) {
        // 教室分类统计
        const classRoomCount = ref([])

        const classPie = reactive({
            option: {
                color: ['#4ED2E4', '#5E91F6', '#67F0A8'],
                tooltip: {
                    trigger: 'item',
                    position: 'right'
                },

                series: [{
                    type: 'pie',
                    radius: ['60%', '90%'],
                    avoidLabelOverlap: false,
                    label: {
                        show: true,
                        position: 'center',
                        color: '#fff',
                        formatter: () => { // 格式化要展示的文本
                            return `总计\n\n${roomtotle.value}间`
                        },

                        // formatter: '{total|' + 200 + '}' + '\n\r' + '{active|共发布活动}',
                        // 等着获取了数据在给样式
                        // rich: {
                        //     total: {
                        //         fontSize: 35,
                        //         fontFamily: "微软雅黑",
                        //         color: '#454c5c'
                        //     },
                        //     active: {
                        //         fontFamily: "微软雅黑",
                        //         fontSize: 16,
                        //         color: '#6c7a89',
                        //         lineHeight: 30,
                        //     },
                        // }

                    },
                    labelLine: {
                        show: false
                    },
                    data: classRoomCount

                }]
            },
        })
        const initeCharts = () => {
            let myChart = echarts.init(document.getElementById('myChart'))
            // 绘制图表
            console.log("绘制图表", classPie.option)
            myChart.setOption(classPie.option)
        }


        // 物联设备类型统计
        const interDevice = ref([])

        const roomVisible = ref(false)

        //消失面板
        const clearPanel=()=>{
            roomVisible.value = false;
        }

        const popoverRef = ref(null)
        const triggerRef = ref({
            getBoundingClientRect() {
                // console.log("positon----方法返回元素的大小及其相对于视口的位置", position.value)
                return position.value
            },
        })
        // 点击某个模型跟随移动
        const mousemoveHandler = (x, y) => {
            position.value = DOMRect.fromRect({
                width: 0,
                height: 0,
                x: x,
                y: y,
            })
        }
        const position = ref({
            top: 0,
            left: 0,
            bottom: 0,
            right: 0,
        })
        let classInfo = ref({})
        const handleRoom = function (item) {


            //查看前隐藏
            let a1=document.getElementById('popoverRef')
            a1.style.display = "none"

            emit('childMethod');

        console.log('kankanitem',item);
       setTimeout(() => {
        roomVisible.value = true;
            classInfo.value = item;
         
            classInfo.value.online = classInfo.value.status == "在用" ? true : false
       }, 2400);
    
            mousemoveHandler(1000, 60)

            let meg =item


            // let a2 =`roomName=${item.class}`
           
            console.log("meg是多少",meg);


            callUIInteraction(meg)
   
        }




        // 本周课程统计数据
        const classCount = ref([])
        // 智慧教室使用数据
        const classRoom = ref([])
        const roomtotle = ref([])




        const getClassData = async () => {
            let res = await getClass()
            console.log("res----教室分类统计", res)
            let { course, classroomDetail, category } = res.data;
            classRoomCount.value = category;

            //获取教室总数
            roomtotle.value= category.reduce((accumulator, currentValue) => accumulator + currentValue.value, 0);
            console.log('categorycategory',roomtotle);

            if (classRoomCount.value) {
                initeCharts()
            }
            classCount.value = course;
            console.log("看一下颜色", classCount.value)
            classRoom.value = classroomDetail

        }

        let timer = ref(null)
        let testMain = ref(null)
        onMounted(() => {

            getClassData()
            start()
        })


        onBeforeUnmount(() => {
            clearTimeout(timer.value)
        })
        onUnmounted(() => {
            clearTimeout(timer.value)
        })


        function testMove() {
            clearTimeout(timer.value)
        }

        function testMend() {
            start()
        }
        //开启定时器方法
        function start() {
            //清除定时器
            clearTimeout(timer.value)
            //定时器触发周期
            let speed = ref(75)
            timer.value = setInterval(MarqueeTest, speed.value)
        }
        function MarqueeTest() {
            let test1 = testMain.value

            //判断组件是否渲染完成
            if (test1.offsetHeight == 0) {
                test1 = testMain.value
            } else {
                //如果列表数量过少不进行滚动
                // console.log("test1", test1.scrollTop)
                if (test1.childNodes.length < 6) {
                    clearTimeout(timer.value)
                    return;
                }
                //组件进行滚动
                test1.scrollTop += 1

                //判断滚动条是否滚动到底部
                if (test1.scrollTop == (test1.scrollHeight - test1.clientHeight)) {
                    //获取组件第一个节点
                    let a = test1.childNodes[0]
                    //删除节点
                    test1.removeChild(a)
                    //将该节点拼接到组件最后
                    test1.append(a)
                }
            }
        }
        const leftimg = ref("./img/")
        return {
            roomVisible,
            classCount,
            classRoom,
            interDevice,
            handleRoom,
            testMend,
            testMove,
            testMain,
            popoverRef,
            classRoomCount,
            triggerRef,
            classInfo,
            leftimg,
            clearPanel
        }
    },
})

</script>

<style scoped lang="scss">
@import '../assets/css/left.scss';
</style>
<style>
.classpopover {
    .el-popper__arrow {
        top: 196px !important;
    }

    .el-popper[data-popper-placement^=bottom],
    .el-popper__arrow::before {
        border-left-color: transparent !important;
        border-top-color: transparent !important;
    }
}

.el-popper.is-light {
    border-radius: 10px;
}
</style>