<template>
    <el-aside class="right">
        <div class="right_top">
            <div class="title">
                <div class="text">物联设备统计</div>
            </div>
            <div class="content">
                <div class="logo">
                    <span>{{ equipmentTotal.total }}</span>
                    <img class="animate" :src="d1img" alt="">
                    <img :src="d12img" alt="">
                    <span><b>总数</b>(个)</span>
                </div>
                <div class="list">
                    <div class="item_r">
                        <img :src="d2img" alt="">
                        <div class="percent" style="display: flex;justify-content: space-between;">
                            <a>在线</a> <a>{{ equipmentTotal.online }} <span>(个)</span> </a>

                        </div>
                    </div>
                    <div class="item_r">
                        <img :src="d3img" alt="">
                        <div class="percent" style="display: flex;justify-content: space-between;">
                            <a>离线</a> <a>{{ equipmentTotal.underline }} <span>(个)</span> </a>


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

        <div class="right_center">
            <div class="title">
                <div class="text">物联设备类型统计</div>
            </div>
            <div class="contentwrap">
                <div class="count" v-for="(item, index) in interDevice" :key="index">
                    <CircleProgress :target-value="item.number" :color="item.color" text-position="top">
                        <img :src="deviceImg + item.icon + '.png'" alt="">
                        <!-- <img :src="'src/assets/img/' + item.icon + '.png'" alt=""> -->
                    </CircleProgress>

                    <div class="text">{{ item.text }}</div>

                    <!-- <el-tooltip placement="bottom">
                        <template    #content> multiple lines<br />second line </template>
                        <el-text style="width: 100px;" class="w-100px mb-2" truncated>
                            测试测试测试
                        </el-text>
                    </el-tooltip> -->

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

        <div class="right_bottom">
            <div class="title">
                <div class="text">智慧教室实时监控</div>
            </div>

            <div class="monitorContent" v-if="asd">



                <el-carousel class="monitor" :interval="10000" @change="monitorchange">
                    <el-carousel-item v-for="(item, index2) in carouselData" :key="index2">
                        <p style="margin-left: 12px; margin-bottom: 3px; font-size: 14px;">{{ item.activeMonitor.title }}
                        </p>
                        <div class="interactclass">
                            <div class="room" v-for="(item, index) in item.activeMonitor.array" :key="index">
                                <span style="z-index: 99;">{{ item.title }}</span>

                                <div v-if="item.src && videoindex == index2" style="width: 100%;height: 100%;"
                                    @click="lookVideo(item)">
                                    <div class="vue3VideoPlay " style='width: 100%;height: 8.8vh;'>

                                        <VideoJs :videoSrc="item.src" autoPlay />


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

                        <p style="margin-top: 18px;margin-left: 12px;  margin-bottom: 3px; font-size: 14px; ">{{
                            item.activeMonitor.title1 }}</p>
                        <div class="interactclass">
                            <div class="room" v-for="(item, index) in item.activeMonitor.array1" :key="index">
                                <span style="z-index: 99;">{{ item.title }}</span>

                                <div v-if="item.src && videoindex == index2" style="width: 100%;height: 100%;"
                                    @click="lookVideo(item)">
                                    <div class="vue3VideoPlay " style='width: 100%;height: 8.8vh;'>

                                        <VideoJs :videoSrc="item.src" autoPlay />
                                    </div>

                                </div>
                            </div>
                        </div>
                    </el-carousel-item>
                </el-carousel>
            </div>

        </div>
    </el-aside>

    <!-- 视频播放弹框 -->
    <el-dialog class="videoDialog" v-model="videoDialog" :title="dialogTitle" width="62%" align="center" top="8%"
        style="z-index: 2015;">
        <videoPlay v-bind="videoData" />

        <!-- {{ videoData.src }} -->
    </el-dialog>
</template>

<script >
import { reactive, onBeforeMount, ref, nextTick } from 'vue';
import { ElCarousel, ElCarouselItem } from "element-plus";
import "vue3-video-play/dist/style.css";
import { videoPlay } from "vue3-video-play";
// import CircleProgress from './CircleProgress.vue';
import { getDevice, getVideoUrl, getvideo } from '../request/api';
//找到你的组件地址引入进来
import VideoJs from "./VideoJs.vue";


export default ({
    name: 'Histogram',
    components: { videoPlay, ElCarousel, ElCarouselItem, },
    setup() {

        const data = reactive({
            videoSrc: "http://kbs-dokdo.gscdn.com/dokdo_300/_definst_/dokdo_300.stream/playlist.m3u8",
        });
        // 视频数据
        const videoData = reactive({
            width: "100%", //播放器高度
            height: "66.5vh", //播放器高度
            color: "red", //主题色
            // title: "互动教室", //视频名称
            // src: "https://cdn.jsdelivr.net/gh/xdlumia/files/video-play/IronMan.mp4", //视频源
            src: "",
            type: "m3u8",
            muted: true, //静音
            webFullScreen: false,
            // speedRate: ["0.75", "1.0", "1.25", "1.5", "2.0"], //播放倍速
            autoPlay: true, //自动播放
            loop: false, //循环播放
            mirror: false, //镜像画面
            ligthOff: false, //关灯模式
            volume: 0.3, //默认音量大小
            control: true, //是否显示控制
            currentTime: 0,//跳转到固定播放时间
            controlBtns: [
                "audioTrack",
                "quality",
                "speedRate",
                "volume",
                "setting",
                "pip",
                "pageFullScreen",
                "fullScreen",
            ], //显示所有按钮,
        });
        //视频播放弹框
        const videoDialog = ref(false)
        const asd = ref(false)

        //播放视频索引
        let videoindex = ref(0)
        let monitorchange = function (val) {

            // let videos = document.querySelectorAll('.interactclass video');

            // setTimeout(() => {
            //     for (let video of videos) {
            //     console.log("sbdadbdbdb",video);
            // video.pause();


            // video.removeAttribute('src'); // empty source
            // video.load();
            // // video.remove();
            // video.destroy();
            // video.load();
            // video.scr='';

            // video.style.display = 'none';


            // video=null;
            // // video.dispose();
            // }
            // }, 500);

            setTimeout(() => {
                videoindex.value = val
            }, 500);
        }

        // const  videoshow = ref(true)
        const dialogTitle = ref("")
        // 播放视频
        const lookVideo = function (item) {
            videoDialog.value = true;
            dialogTitle.value = item.title
            let copysrc = JSON.parse(JSON.stringify(item))
            console.log('sadi2', copysrc);
            // videoData.src = item.scr
            videoData.src = copysrc.src
            console.log('kankna222', videoData.src);



            // getVideoUrl({ "rtsp": item.src }).then((res) => {
            //     console.log("视频处理", res);
            //     console.log("视频处理2", res.data.httpFlv);

            //     videoData.src = res.data.httpFlv
            // })
            // videoData.src = src

        }
        // 播放视频
        const onPlay = function () {
            console.log("播放视频")
        }
        // 物联设备
        let equipmentTotal = ref({})
        // 物联设备类型统计
        let interDevice = ref([])


        // 智慧教室
        let carouselData = ref([

        ])


        //获取页面数据
        const getDeviceData = async () => {


            //视频转码
            // getvideo({
            //  "rtsp": "rtsp://admin:admin@10.116.255.67:554",
            // }).then((res)=>{
            //     console.log('sadnuq21',res);
            // })

            let res = await getDevice()
            if (res.code !== 200) {
                ElMessage.error("数据请求出错");
            }
            let { category, monitor, status } = res.data
            //物联设备统计
            equipmentTotal.value = status
            // 物联设备类型数据
            console.log('sadui12u31', category);
            //截取数组前6项
            interDevice.value = category;



            monitor.map((res) => {
                console.log('sadhi2', res.activeMonitor);
                if(res.activeMonitor.array){
                    res.activeMonitor.array.map(array => {
                    //视频转码
                    getvideo({
                        "rtsp": array.src,
                    }).then((res) => {
                        // array.src = 'http://kbs-dokdo.gscdn.com/dokdo_300/_definst_/dokdo_300.stream/playlist.m3u8'
                        array.src=res.data.httpFlv
                    })
                    })
                }
                if ( res.activeMonitor.array1) {
                    res.activeMonitor.array1.map(array1 => {
                    //视频转码
                    getvideo({
                        "rtsp": array1.src,
                    }).then((res) => {
                        // array1.src = 'http://kbs-dokdo.gscdn.com/dokdo_300/_definst_/dokdo_300.stream/playlist.m3u8'
                           array1.src=res.data.httpFlv
                    })
                })
                }


            })
            // 互动教室
            carouselData.value = monitor;
            
            console.log('hshshhs',carouselData.value);



        }

        onBeforeMount(() => {

            getDeviceData()

            setTimeout(() => {
                asd.value=true
            }, 1000);

        })
        const d1img = ref('./img/d1_1.png');
        const d12img = ref('./img/d1_2.png');
        const d2img = ref('./img/d2.png');
        const d3img = ref('./img/d3.png')
        const deviceImg = ref('./img/')

        return {
            interDevice,
            videoData,
            onPlay,
            videoDialog,
            lookVideo,
            carouselData,
            equipmentTotal,
            d1img,
            d12img,
            d2img,
            d3img,
            deviceImg,
            dialogTitle,
            monitorchange,
            videoindex,
            data,
            asd
        }
    },
})

</script>

<style scoped lang="scss">
@import '../assets/css/right.scss';
</style>
<style lang="scss">
.videoDialog {
    .el-dialog__header {
        height: 49px;
        line-height: 49px;
        padding: 0;
        background-color: #1B67D9;
        margin-right: 0;

        .el-dialog__title {
            color: #FFF;
            font-family: Inter;
        }

        .el-dialog__headerbtn {
            top: 0px;

            i {
                color: #fff;
                font-size: 20px;
                font-weight: bold;
            }

        }

    }

    .el-dialog__body {
        padding: 0 !important;
    }


}</style>