<template>
    <div class="project-aivideo">        
        <div class="screen-content">
            <el-row>
                <el-col :span="6">
                    <module-one-1-1 label="预警概况" :amplify="true" name="amplify-spjk">
                        <div class="equipment-list-max">
                            <el-row>
                                <el-col :span="12">
                                    <div class="equipment-list-min">
                                        <div class="equipment-list-gif">
                                            <img src="images/video_1.png">
                                        </div>
                                        <div class="equipment-list-data">
                                            <p>项目监控</p>
                                            <div><span v-cloak>{{ cqNum }}</span>个</div>
                                        </div>
                                    </div>
                                </el-col>
                                <el-col :span="12">
                                    <div class="equipment-list-min">
                                        <div class="equipment-list-gif">
                                            <img src="images/video_2.png">
                                        </div>
                                        <div class="equipment-list-data">
                                            <p>吊钩监控</p>
                                            <div><span v-cloak>{{ dgNum }}</span>个</div>
                                        </div>
                                    </div>
                                </el-col>
                                <el-col :span="12">
                                    <div class="equipment-list-min">
                                        <div class="equipment-list-gif">
                                            <img src="images/video_3.png">
                                        </div>
                                        <div class="equipment-list-data">
                                            <p>AI识别监控</p>
                                            <div><span v-cloak>{{ aiNum }}</span>个</div>
                                        </div>
                                    </div>
                                </el-col>
                                <el-col :span="12">
                                    <div class="equipment-list-min">
                                        <div class="equipment-list-gif">
                                            <img src="images/video_4.png">
                                        </div>
                                        <div class="equipment-list-data">
                                            <p>离线视频</p>
                                            <div><span v-cloak>{{ offLineNum }}</span>个</div>
                                        </div>
                                    </div>
                                </el-col>
                            </el-row>
                        </div>
                    </module-one-1-1>
                    <module-one-2-1 label="预警分布">
                        <div class="video-field-layout" :style="videoMapStyle">                               
                            <div class="video-bgd-img-position" :style="{ 'top': video.x + 'px', 'left': video.y + 'px' }"
                                v-for="video in VideoDistribution" @click="videoPlay(video)">
                                <div :class="video.type == true ? 'video-bgd-div active' : 'video-bgd-div'"></div>
                                <img src="/images/camera.png" class="video-bgd-img">
                            </div>
                        </div>
                    </module-one-2-1>
                </el-col>
                <el-col :span="12">
                    <div class="ai-video-info">
                        <div class="ai-video-info-flex">
                            <div class="ai-content-nav-max" style="width: 100% ">
                                <div class="ai-content-nav-min" v-for="(alertorType,index) in alertorTypeList">
                                    <div class="ai-content-nav-con">
                                        <div :class="nav == index?'ai-content-nav active':'ai-content-nav'" @click="aiNav(index,alertorType.dictValue)" v-html="alertorType.dictLabel">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="ai-content-info-max">
                            <el-row>
                                <el-col  style="position: relative;" :span="8" v-for="(video,index) in videoList">
                                    <div class="ai-content-info-min">
                                        <div class="ai-content-videos">
                                            <hkplay v-if="video.video_token" :token="video.video_token" :playtype="1" :full-state="1" :playstate="video.video_state" :playimg-state="1" :height="220"></hkplay>
                                            <div class="ai-video-name" style="height:45px;line-height: 45px;padding: 0 15px;">
                                                <span>{{video.video_name}}</span>
                                            </div>
                                            <div v-if="video.state == 1" class="style-con style-red"></div>
                                            <div v-if="video.state == 0" class="style-con style-green"></div>
                                        </div>
                                    </div>
                                </el-col>
                            </el-row>
                        </div>
                    </div>
                    <div class="ai-content-padding">
                        <div class="ai-key-videos">
                            <div class="ai-video-title">
                                <div>重点视频</div>
                                <div class="ai-video-number">重点关注 视频（<span v-html="majorVideoList.length">0</span>）</div>
                            </div>
                            <div class="ai-key-videos-info" style="height: 80%;">
                                <div class="ai-slip">
                                    <img src="/images/ai/left_slip.png" id="leftSlip">
                                </div>
                                <div class="ai-key-videos-content" id="videosContent">
                                    <div class="ai-key-videos-max" style="position: relative;"  v-for="(video,index) in majorVideoList">
                                        <div class="ai-key-videos-min">
                                            <hkplay v-if="video.video_token" :token="video.video_token" :playtype="1" :full-state="1" :playstate="video.video_state" :playimg-state="1" :height="200"></hkplay>
                                            <div class="ai-video-name" style="height:40px;line-height: 40px;padding: 0 15px;">
                                                <span>{{video.video_name}}</span>
                                            </div>
                                            <div v-if="video.state == 1" class="style-con style-red"></div>
                                            <div v-if="video.state == 0" class="style-con style-green"></div>
                                        </div>
                                    </div>

                                </div>
                                <div class="ai-slip">
                                    <img src="/images/ai/right_slip.png" id="rightSlip">
                                </div>
                            </div>
                        </div>
                    </div>
                </el-col>
                <el-col :span="6">
                    <module-one-3-1 label="预警列表">
                        <div class="nav-info" style="padding:20px 20px 10px">
                            <div class="company-project-introduction" @click="projectIntroduction">
                                <span>预警总数:（0）</span>
                            </div>
                         </div>
                         <div class="acceptance-item" v-for="(it,idx) in acceptanceData" :key="idx" style="cursor: pointer;">
                            <div class="row-1">
                                <div class="div-img">
                                    <el-image src="getProfileImage(it.mainImage)" :preview-src-list="getBigProfileImage(it)"/></div>
                                <div class="div-text" style="width: 65%;"  @click="doShowChecking(it)">
                                    <div class="row-3">
                                        <div v-if="it.checkResult=='1'" class="sp-lbl">验收合格</div>
                                        <div v-if="it.checkResult=='2'" class="sp-err">验收不合格</div>
                                        <div class="sp-date">{{it.checkingDate}}</div>
                                    </div>
                                    <div class="row-3">
                                        <span class="sp-label">项目:</span>
                                        <span class="sp-text">{{it.projectName}}</span>
                                    </div>
                                    <div class="row-3">
                                        <span class="sp-label">区域:</span>
                                        <span class="sp-text">{{it.checkWorkingPosition}}</span>
                                    </div>
                                </div>
                            </div>
                            <div class="row-5"  @click="doShowChecking(it)">
                                验收描述:{{it.intro}}
                            </div>
                         </div>
                    </module-one-3-1> 
                </el-col>
            </el-row>
        </div>       
        </div>
</template>

<script>
import '../components/module/module-one-2-1'
import '../components/module/module-one-3-1'
import '../components/module/module-one-0-5'
import '../components/module/module-one-video'
import '../components/background_video'
import '../components/staff-survey-chart'
import '../components/classify-bar'
import '../components/amplify/shipinguanli/amplify-spjk'
import debounce from 'lodash.debounce'
export default {
    data() {
        return {
            active:3,
                scrollLeft:'',
                nav:0,
                alertorId:0,
                videoList:[],
                scaleData:[],
                majorVideoList:[],
                alertorTypeList:[],
                warningList:[],
                distributeData:{},
                ptz: false,
                autoPlay:true,
                popupUrl:'',
                popupShow:false

        }
    },
    mounted() {
        this.$bus.$on("projectChange", debounce(res => {
            this.projectInfo=res;
            this.initVideoMenu();
        }));
        this.$bus.$on("loadProjects", debounce(prjs => {
            this.projectInfos = prjs;
            //this.initVideoMenu();
        }))
        this.$bus.$on("deptChange", debounce(dept => {
            this.dept = dept;
            //this.initVideoMenu();
        })); 
        if(this.$root.hasInitHeader){
            this.initMe();
        }
    },
    created() {
        this.init()
    },
    computed: {
        playDivCss() {
            return {
                width: (this.width + "").replace("px", "") + "px",
                height: (this.height + "").replace("px", "") + "px",
                position: "relative"
            }
        },
        exStyle() {
            return {
                textAlign: "center",
                width: (this.width + "").replace("px", "") + "px",
                height: (this.height + "").replace("px", "") + "px"
            }
        },
        PTZDiv() {
            let W = parseInt((this.width + "").replace("px", ""))
            let H = parseInt((this.height + "").replace("px", ""))
            if (W < 400) {
                W = "100px"
                H = "100px"
            } else {
                W = "150px"
                H = "150px"
            }
            return {
                backgroundImage: "url('https://video.makalu.cc/img/jt.png')",
                width: W,
                height: H,
                backgroundSize: "100%",
                position: "relative"
            }
        },
        PTZTop() {
            return {
                width: "33%",
                height: "25%",
                position: "absolute",
                top: "0px",
                left: "33%",
                cursor: "pointer"
            }
        },
        PTZBottom() {
            return {
                width: "33%",
                height: "25%",
                position: "absolute",
                bottom: "0px",
                left: "33%",
                cursor: "pointer"
            }
        },
        PTZLeft() {
            return {
                width: "25%",
                height: "33%",
                position: "absolute",
                top: "33%",
                left: "0px",
                cursor: "pointer"
            }
        },
        PTZRight() {
            return {
                width: "25%",
                height: "33%",
                position: "absolute",
                top: "33%",
                right: "0px",
                cursor: "pointer"
            }
        },
        VIBtnCss() {
            return {
                width: "30px",
                height: "30px",
                background: "#38314b",
                border: "1px solid #38314b",
                fontSize: "20px",
                outline: "0",
                color: "#FFFFFF"
            }
        },
        zoomViewCss() {
            return {
                width: "75px",
                height: "30px",
                color: "#dddddd",
                background: "rgba(65, 63, 70, 0.5)",
                textAlign: "center",
                border: "0px solid rgba(65, 63, 70, 0.5)",
                outline: "0",
                fontSize: "14px"
            }
        }
    },
    methods: {
        initMe(){
            this.projectInfo=this.$root.project||{};
            this.dept=this.$root.dept||{};
            this.projectInfos=this.$root.projects||[];
            this.initVideoMenu();
        },
        init(){
                this.getAlertorTypeList();
                this.getAiVideoInfoList();
                this.getAnalysisDetailList();
                this.getMajorAiVideoInfoList();
                this.getAiVideoAlertorTypeCount();
                this.getAiVideoAlertorTypeWarningCount();


            },
            //head选择项目返回值
            onItemData(e){
                if(e.type == 1){
                    location.href = '/weixin/screen/toVideo'
                }else{
                    location.href = '/weixin/screen/toVideoProject'
                }
            },
            amplify(url){
                this.popupUrl = url
                this.popupShow = true
            },
            getAlertorTypeList(){
                // axios.post(Host + "/api/video/getAiVideoAlertorTypes", {
                //     projectId: JSON.parse(localStorage.getItem("data")).aqzg
                // }).then(res => {
                //     var list = [{'alertor_id': 0,'alertor_type': "", 'alertor_type_name': "全部"}];
                //     var data = res.data;

                //     data.forEach(item =>{
                //         list.push(item)
                //     })
                //     if(JSON.parse(localStorage.getItem("data")).id == "98") {
                //         var newArr = [];
                //         newArr.push(list[0]);
                //         newArr.push(data[1])
                //         newArr.push(data[3])
                //         newArr.push(data[2])
                //         newArr.push(data[0])
                //         this.alertorTypeList = newArr;
                //     } else {
                //         this.alertorTypeList = list;
                //     }
                // }).catch(err => {
                // })
                this.$api.dict('aibox_alarm_type').then(d => {
                    this.alertorTypeList = d || [];
                })
            },
            getAiVideoInfoList(){
                axios.post(Host + "/api/video/getAiVideoInfoList", {
                    projectId:JSON.parse(localStorage.getItem("data")).aqzg,
                    alertorId: this.alertorId
                }).then(res => {
                    var data = res.data;
                    if(data.length < 6){
                        var len = 6 - data.length
                        for (let i = 0; i < len ; i++) {
                            data.push({})
                        }
                    }
                    this.videoList = data;
                }).catch(err => {
                })
            },
            getMajorAiVideoInfoList(){
                axios.post(Host + "/api/video/getAiVideoInfoList", {
                    projectId: JSON.parse(localStorage.getItem("data")).aqzg,
                    majorState: "1",
                    alertorId: this.alertorId
                }).then(res => {
                    var data = res.data;
                    /*if(data.length < 4){
                        var len = 4 - data.length
                        for (let i = 0; i < len ; i++) {
                            data.push({})
                        }
                    }*/
                    this.majorVideoList = data;
                }).catch(err => {
                })
            },
            getAnalysisDetailList(){
                axios.post(Host + "/api/video/getAnalysisDetailList", {
                    projectId: JSON.parse(localStorage.getItem("data")).aqzg,
                    dataNum:50
                }).then(res => {
                    var warningList = res.data;
                    // for (let i = 0; i < 5; i++) {
                    //     warningList.push(warningList[i])
                    // }
                    this.warningList = warningList
                    rolling("warningListMax","warningListMin")
                }).catch(err => {
                })
            },
            getAiVideoAlertorTypeCount(){
                axios.post(Host + "/api/video/getAiVideoAlertorTypeCount", {
                    projectId: JSON.parse(localStorage.getItem("data")).aqzg
                }).then(res => {
                    var data = res.data;
                    var num = 0;
                    data.forEach(item =>{
                        num += item.value;
                    })
                    data.forEach(item =>{
                        item.percent = (item.value/num*100).toFixed(2)
                    })
                    this.scaleData = data;
                }).catch(err => {
                })
            },
            getAiVideoAlertorTypeWarningCount(){
                axios.post(Host + "/api/video/getAiVideoAlertorTypeWarningCount", {
                    projectId: JSON.parse(localStorage.getItem("data")).aqzg
                }).then(res => {
                    //预警分布
                    var distributeData={
                        legend:["接入视频", "预警路数"],
                        color:[],
                        yAxis:[],
                        data:[]
                    }
                    var data = res.data;
                    var data1 = [];
                    var data2 = [];
                    data.forEach(item =>{
                        distributeData.yAxis.push(item.alertor_type_name)
                        data1.push(item.total)
                        data2.push(item.yjTotal)
                    })
                    var color1  = ["#183e65","#4bbcff"];
                    var color2  = ["#225254","#5cd6ad"];
                    distributeData.data.push(data1)
                    distributeData.data.push(data2)
                    distributeData.color.push(color1)
                    distributeData.color.push(color2)
                    this.distributeData = distributeData
                }).catch(err => {
                })
            },
            aiNav(n,id){
                this.nav = n
                this.alertorId = id;
                this.getAiVideoInfoList();
            },
            //预警概况  Echart
            warningChart(data,id){
                let newPromise = new Promise((resolve) => {
                    resolve()
                })
                //然后异步执行echarts的初始化函数
                newPromise.then(() => {
                    var myChart = echarts.init(document.getElementById(id));
                    option = {
                        color: [
                            "#00fff1",
                            "#04c8fa",
                            "#aa01fe",
                            "#4e84fe",
                            "#ff7b79",
                            "#edae5e",
                            "#fe4101",
                            "#14d18f",
                        ],
                        series: [
                            // 主要展示层的
                            {
                                radius: ["45%", "60%"],
                                center: ["50%", "50%"],
                                type: "pie",
                                label: {
                                    normal: {
                                        show: true,
                                        formatter: function (params) {
                                            return params.value +"  "+ params.percent + "%\n{white|" +params.name +"}" ;
                                        },
                                        rich:{
                                            white: {
                                                color: "#c5d9fe",
                                                align: "center",
                                                padding: [0,0,5],
                                            },
                                        },
                                        textStyle: {
                                            fontSize: 14,
                                        },
                                        position: "outside",
                                    },
                                    emphasis: {
                                        show: true,
                                    },
                                },
                                labelLine: {
                                    normal: {
                                        show: true,
                                        length: 20,
                                        length2: 25,
                                    },
                                    emphasis: {
                                        show: true,
                                    },
                                },
                                data: data,
                            },
                            {
                                name: "外边框",
                                type: "pie",
                                clockWise: false, //顺时加载
                                hoverAnimation: false, //鼠标移入变大
                                center: ["50%", "50%"],
                                radius: ["70%", "70%"],
                                label: {
                                    normal: {
                                        show: false,
                                    },
                                },
                                data: [
                                    {
                                        value: 1,
                                        name: "",
                                        itemStyle: {
                                            normal: {
                                                borderWidth: 3,
                                                borderColor: "#57639d",
                                            },
                                        },
                                    },
                                ],
                            },
                        ],
                    };
                    myChart.setOption(option);
                    window.onresize = myChart.resize;
                })
            },
            goVideoPage() {
                location.href="/weixin/screen/toVideoProject"
            }
        }
   
};
</script>

<style lang="less" >
.project-video {}

.videoView {
    color: aliceblue;
    float: left;
    width: 50%;
    height: 452.5px;
}
.videoViewError {
    background-color: #575e65;
    text-align: center;
    line-height: 420px;
}
</style>