<template>
    <div class="monitor-container">
        <div class="monitor-list-title">
            <span @click="active = 1;" :style="{color:active==1? '#e48f19':'#fff'}">市应急指挥视频监控</span>
            <span @click="active = 2;"  :style="{color:active==2? '#e48f19':'#fff',margin:'0px 20px'}">费县森林防火视频监控</span>

            <el-input v-model="searchKeyWord" type="text" placeholder="请输入监控名称……" size="mini" style="width:300px;margin-right:50px;margin-left:200px;"></el-input>

            <el-button icon="el-icon-search" size="mini" @click="search()" >搜索</el-button>
        </div>
        
        <div class="yj-monitors" v-if="active == 1">
            <div class="monitor-list-container">
                <div class="monitor-list-scroll-container">
                    <div class="monitor-class-name" @click="monitor2Show = !monitor2Show">
                        <i class="el-icon el-icon-s-grid"></i>
                        市应急指挥视频监控({{ monitorList2.length }})
                        <i class="el-icon  el-icon-arrow-down" style="float:right;margin-top:16px;"></i>
                    </div>
                    <div  v-show="monitor2Show" :key="playRandom">
                        <div class="monitor-item" v-for="(item,index) in monitorList2" :key="index" @click="playVideo(item,index)" v-show="item.show" :style="{color:playArrays[0].match(item.jkdgbidzlkjg)?'rgb(228, 143, 25)':'#cfcfcf'}">
                            <i class="el-icon el-icon-video-camera"></i>
                            {{ item.jkdmckjg }}
                        </div>
                    </div>
                </div>
            </div>
            <div class="video-container">
                <div >
                    <EasyPlayer 
                    v-for="(item,index) in playArrays" :key="index"
                    style="width:900px;height:500px;"
                    :videoUrl="item"
                    :aspect="aspect"
                    live
                    @message="$message"
                    :fluent="fluent"
                    :autoplay="true"
                    stretch
                    ></EasyPlayer>
                </div>
            </div>
        </div>

        <div class="hk-monitors" v-if="active == 2">
        
            <div class="hk-monitor-list-container">
                <div v-for="(item,index) in monitorList" :key="index" class="hk-monitor-item" v-show="item.show">
                    <p style="font-size:14px;color:#cfcfcf">
                        <i class="el-icon el-icon-video-camera" style="font-size:20px;"></i>&nbsp;&nbsp;{{ item.cameraname }}
                    </p>
                    <p style="font-size:14px;text-align:right;">
                        
                        <i class="el-icon-plus" @click="addPlayeList(item)">添加</i>
                        <!-- &nbsp;&nbsp;
                        <i class="el-icon-location-outline">定位</i> -->
                    </p>
                </div>
            </div>
            <div class="hk-monitor-mang">
                <el-tag
                    v-for="(tag,index) in hkPlayList"
                    :key="index"
                    closable
                    size="mini"
                    :disable-transitions="false"
                    style="margin-right:6px;"
                    @close="handleClose(index)">
                    {{tag.cameraname}}
                </el-tag>
                <el-button type="primary" size="mini" style="float:right;margin-left:12px;" icon="el-icon-video-camera" @click="previewHkMonitor">预览</el-button>
                &nbsp;
                <el-button type="warning" size="mini" style="float:right;" @click="HKMonitorClear" icon="el-icon-delete">清除</el-button>
            </div>
        </div>
    </div>
</template>

<script>
import EasyPlayer from '@easydarwin/easyplayer'
import axios  from 'axios';
import { getMethodCommon } from '../../../api/common';

import 'video.js/dist/video-js.css'
import videojs from "video.js";
import "videojs-contrib-hls";

export default{
    components:{
        EasyPlayer,
    },
    data(){
        return {
            active:1,
            diviceIds:"550810a41e024bc884fcbd750529b3ce,d0442e062c6c4c5982ee6fe0b5935126,9039ca8768b7412aae7a6a46b6dec3a5",
            ids:["550810a41e024bc884fcbd750529b3ce","d0442e062c6c4c5982ee6fe0b5935126","9039ca8768b7412aae7a6a46b6dec3a5"],
            videoUrl:"http://221.2.83.254:7012/live/37130100181328000390.m3u8",
            aspect:"16:9",
            fluent:true,
            playArrays:[],
            monitorShow:false,
            monitor2Show:true,
            monitorList:[],
            monitorList2:[],
            player:null,
            hkPlayList:[],
            searchKeyWord:null,
            playRandom:1,
        }
    },
    created(){
        this.getHKmonitorlist();
        this.getYJmonitorlist();
    }, 
    mounted() {
        let _this = this;
        setTimeout(()=>{
            
        },5000)
    },
 
    methods:{
        search(){
            this.playRandom = Math.random();

            // 如果关键字为空
            if(!this.searchKeyWord){
                this.monitorList.forEach((item,index)=>{
                    this.monitorList[index].show = true;
                })

                this.monitorList2.forEach((item,index)=>{
                    this.monitorList2[index].show = true;
                })
                return;
            }

            if(this.active == 1 && this.searchKeyWord){
                this.monitorList2.forEach((item,index)=>{
                    this.monitorList2[index].show = false;
                    if(item.jkdmckjg.match(this.searchKeyWord)){
                        this.monitorList2[index].show = true;
                    }
                })
                
            }
            
            if(this.active == 2 && this.searchKeyWord){
                this.monitorList.forEach((item,index)=>{
                    this.monitorList[index].show = false;
                    if(item.cameraname.match(this.searchKeyWord)){
                        this.monitorList[index].show = true;
                    }
                })
            }


            
        },
        HKMonitorClear(){
            this.hkPlayList = [];
        },
        previewHkMonitor(){
            let ids = "";
            this.hkPlayList.forEach((item,index)=>{
                if(index<this.hkPlayList.length - 1){
                    ids=ids+item.cameraindexcode+","
                }else{
                    ids=ids+item.cameraindexcode
                }
            })
            this.$emit("previewHkMonitor",ids)
        },
        handleClose(index){
            this.hkPlayList.splice(index,1);
        },
        addPlayeList(obj){
            if(this.hkPlayList.length>=25){
                this.$message({
                    type:"error",
                    message:"当前最多支持25路视频同时播放"
                })
                return;
            }
            let it = this.hkPlayList.find((item,index)=>{
                return item.cameraindexcode == obj.cameraindexcode;
            })

            if(it){
                this.$message({
                    type:"warning",
                    message:"列表中已存在",
                });
            }else{
                this.hkPlayList.push(obj);
            }
        },
        getVideo() {
            videojs("myvideo",{
                bigPlayButton: false,
                textTrackDisplay: false,
                posterImage: true,
                errorDisplay: false,controlBar: true
            },
            function() {
                this.play();
            });
        },
        playVideo(item,index){
            this.playRandom = Math.random();
            if(this.playArrays.find((it,idx)=>{
                return it == "http://221.2.83.254:7012/live/"+item.jkdgbidzlkjg+".m3u8"
            })){
                this.$message({
                    type:"error",
                    message:"已经添加至播放列表"
                })
                return;
            }
           
            this.playArrays[0] = "http://221.2.83.254:7012/live/"+item.jkdgbidzlkjg+".m3u8"
        },

        // 获取海康监控列表
        getHKmonitorlist(){
            axios({
                method:"get",
                url:"http://221.2.83.254:9007/geoserver/ksp/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=ksp%3Amonitornest&maxFeatures=10000&outputFormat=application%2Fjson",
            }).then(res=>{
                res.data.features.forEach((item,index)=>{
                    let obj = item.properties;
                    obj.show = true;
                    this.monitorList.push(obj);
                    
                })
                
            })
        },
        // 市应急局监控设备
        getYJmonitorlist(){
            getMethodCommon("/YingJiJu/LoadCameraInfo?county=费县&pageIndex=1&pageSize=999").then(res=>{
                if(res.code ==  200){
                    this.monitorList2 = [...res.data];
                    this.monitorList2.forEach((item,index)=>{
                        this.monitorList2[index].show = true;
                        if(index==0){
                            this.playArrays.push("http://221.2.83.254:7012/live/"+item.jkdgbidzlkjg+".m3u8")
                        }
                    })
                }
            })
        },

    }
}
</script>

<style scoped>

.monitor-container{
    width:100%;
    height:100%;
    background:#30645eaa;
    padding:15px;
    background-image: url(/img/biaohui.png);
    background-size:100% 100%;
}

.hk-monitors{
    width:100%;
    height: calc( 100% - 140px);
}

.yj-monitors{
    width:100%;
    height: calc( 100% - 60px);
}
.hk-monitor-list-container{
    width:100%;
    height:100%;
    overflow-y: auto;
}

.hk-monitor-mang{
    width:100%;
    padding:15px 10px;
}
.monitor-list-container{
    width:240px;
    height:100%;
    float:left;
}

.monitor-list-title{
    width:100%;
    height:60px;
    font-size:20px;
    text-indent:40px;
    color:#fff;
    cursor:pointer;
}

.monitor-list-scroll-container{
    width: calc( 100% - 12px);
    height: calc(100% - 10px);
    overflow-y: auto;
    padding-right:12px;
}

.monitor-class-name{
    width:100%;
    height:42px;
    line-height:42px;
    color:#fff;
}
.monitor-item{
    width:100%;
    height:24px;
    line-height:24px;
    color:#cfcfcf;
    font-size:12px;
    text-indent: 4px;
    overflow: hidden;
    cursor: pointer;
}
.monitor-item:hover{
    background:#30645e;
}

.video-container{
    width: calc( 100% - 240px);
    float:right;
    height:100%;
}

.layout-container{
    width:100%;
    height:50px;
}

.hk-monitor-item{
    width:270px;
    height:90px;
    background:#30645eaa;
    float:left;
    margin:8px;
    padding:12px;
    color:#cfcfcf;
}
::-webkit-scrollbar-track,
::-webkit-scrollbar-thumb {
  border: 0;
}

::-webkit-scrollbar {
  height: 10px;
  width: 10px;
  background: transparent;
  border-radius: 5px;
}

::-webkit-scrollbar-thumb {
  padding-top: 100px;
  -webkit-box-shadow: inset 1px 1px 1px rgba(0, 0, 0, 0.25);
  background-color: rgba(0, 0, 0, 0.4);
  min-height: 28px;
  border-radius: 4px;
  background-clip: padding-box;
}

::-webkit-scrollbar-track,
::-webkit-scrollbar-thumb {
  border: 0;
}

::-webkit-scrollbar-thumb:hover {
    -webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0.1),
    inset -1px -1px 0 rgba(0, 0, 0, 0.07);
  background-color: #797979;
}

::-webkit-scrollbar-thumb:active {
  -webkit-box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.35);
  background-color: rgba(0, 0, 0, 0.5);
}

::v-deep .el-tag{
    background-color:#30645eaa !important;
    border-color:#30645eaa !important;
}
</style>