<template>
<div class="gis">
    <div id="mapbox" @click="mapbox">
            <div style="position:absolute;left:500px;top:10px">
                <button @click="Mutil.tianSlA()" class="map-botton">卫星地图</button>
                <button @click="Mutil.tianSlB()" class="map-botton">全景地图</button>
            </div>
            
                <div v-show="isShowVideo" v-drag style="display: none;position:absolute;left:1000px;top:10px;z-index: 30;padding: 10px; background-color: #fff;width: 400px;height: 300px;border-radius: 5px;border: 1px solid #000;">
                    <div style="width: 100%;height: 30px;">
                        <span @click="closeVideo" style="float: right;margin-right: 10px;font-size: 1.5rem;"class="el-icon-close"></span>
                    </div>
                    <div style="width: 100%;height: 35px;text-align: center;font-size: 1rem;font-weight: 900;">
                        <span>{{deviceVideo.deviceName}}</span>
                    </div>
                    <div id="div_video"></div>
                </div>
                

		
		</div>
          <div style="">
            <div style="width: 500px;height: 100%;z-index: 11;background-color: rgba(2, 40, 90, 0.8);position: absolute;top: 0;left: 10px;float: left;">
                <QyMapone></QyMapone>
            </div>
                    <div class="markBox">
                        <div class="markbox-div">
                            <el-tooltip content="企业注册" placement="left" effect="light">
                                <div class="markbox-click" ref="qyimg" @click="mapqiye" style="position: relative;">
                                    <img width="15px" style="margin-top: 10px;" src="@/assets/mark/markqy.png" />
                                    <img src="@/assets/mark/selected.png" alt="" style="position: absolute;width: 16px; top: 0;right: 0">
                                </div>
                            
                            </el-tooltip>
                        </div>
                        <div class="markbox-span">
                            <span>{{tjNumberObj.enterpriseRegNum}}</span>
                        </div>
                        <div class="markbox-div">
                            <el-tooltip content="危险源" placement="left" effect="light">
                                <div @click="mapwxy" ref="wxyimg"  style="position: relative;">
                                    <img width="20px" style="margin-top: 10px;" src="@/assets/mark/weixianyuan.png" />
                                    <img src="@/assets/mark/selected.png" alt="" style="position: absolute;width: 16px; top: 0;right: 0">
                                </div>
                                
                            </el-tooltip>
                        </div>
                        <div class="markbox-span">
                            <span>{{tjNumberObj.dangerNum}}</span>
                        </div>
                        <div class="markbox-div">
                            <el-tooltip content="监控监测点" placement="left" effect="light">
                                <div @click="mapshipin" ref="shipinimg" style="position: relative;">
                                    <img width="20px" style="margin-top: 10px;" src="@/assets/mark/jiankong.png" />
                                    <img src="@/assets/mark/selected.png" alt="" style="position: absolute;width: 16px; top: 0;right: 0">
                                </div>
                                
                            </el-tooltip>
                        </div>
                        <div class="markbox-span">
                            <span>{{tjNumberObj.cameraNum}}</span>
                        </div>
                        <div class="markbox-div">
                            <el-tooltip content="职业危害场所" placement="left" effect="light">
                                <div @click="mapweihai" ref="whimg" style="position: relative;">
                                    <img width="20px" style="margin-top: 10px;" src="@/assets/mark/weihaichangsuo.png" />
                                    <!-- <img src="@/assets/mark/selected.png" alt="" style="position: absolute;width: 16px; top: 0;right: 0"> -->
                                </div>
                                
                            </el-tooltip>
                        </div>
                        <div class="markbox-span">
                            <span>2</span>
                        </div>
                        <div class="markbox-div">
                            <el-tooltip content="隐患" placement="left" effect="light">
                                <div @click="mapyinhuan" ref="yhimg" style="position: relative;">
                                    <img width="20px" style="margin-top: 10px;" src="@/assets/mark/yinhuan.png" />
                                    <!-- <img src="@/assets/mark/selected.png" alt="" style="position: absolute;width: 16px; top: 0;right: 0"> -->
                                </div>
                                
                            </el-tooltip>
                        </div>
                        <div class="markbox-span">
                            <span>2</span>
                        </div>
                    </div>
    </div>
</div>
</template>

<script lang="ts">
import {
    Component,
    Vue,
    Provide
} from "vue-property-decorator";
import METHOD from "@/utils/methods";
import "@/utils/directive.js";
import {
    Icon
} from "element-ui";
import "@/utils/VamapLoad.ts";
import DrawTool from "@/components/drawTool.vue";
import Search from "@/components/search.vue";
import Mutil from "@/utils/mapUtil.js";
import METHOD from "@/utils/methods";
import QyMaptwo from './qyMaptwo.vue';
import QyMapone from './qyMapone.vue';
import Demo from '@/views/Enterprises/demo.vue';
import vueDrag from 'vue-dragging'
Vue.use(vueDrag)
@Component({
    components: {
        DrawTool,
        Search,
        QyMapone,
        QyMaptwo,
        Demo
    },
})
export default class GIS extends Vue {
   
    
    @Provide() Mutil: any;
    @Provide() mapLoadDone = false;
    @Provide() MAP: any;
	@Provide() isShowVideo:boolean=false;
	@Provide() player:any;
    @Provide() mapOption = {
        plugin: [{
                pName: "MapType",
                defaultType: 1,
            },
            {
                pName: "ToolBar",
            },
        ],
        center: [115, 28],
        zoom: 10,
        events: {},
    };
    @Provide() searchData: any = {
        type: "0",
    };
    /* 地图 */
    @Provide() markers: any = [];
    @Provide() mapData: any = [];
    @Provide() windowsArr: any = [];
    @Provide() currentWindow: any = "";
    // @Provide() searchOption: any = {
    //     city: "石家庄",
    //     citylimit: true,
    // };
	@Provide() lastVideoPlayId:any="";
    @Provide() markersB: any = [];
    @Provide() toolobj: any;
    @Provide() mouseTool: any; //测量工具
    @Provide() toolVisble: boolean = false;
    @Provide() tjNumberObj: any = {};
    @Provide() deviceVideo: any = {};
    @Provide() qiyeVisble: boolean = true;
    @Provide() wxyVisble: boolean = true;
    @Provide() shipinVisble: boolean = true;
    @Provide() weihaiVisble: boolean = true;
    @Provide() yinhuanVisble: boolean = true;
   
    getMapData() {
        let that = this;
        METHOD.axiosPost(
            that,
            `/enterpriseInfo/queryEnterpriseInfo`, {
                page: 1,
                size: 1000,
                accountStatus: "0"
            },
            function (res: any) {
                if (res.code == 0 && res.data.pageData.length > 0) {
                    that.mapData = res.data.pageData;
                    let latSum = 0;
                    let lngSum = 0;
                    that.mapData.forEach((ele: any, index: any) => {
                        that.addMark(ele, index);
                        lngSum += ele.longitude;
                        latSum += ele.latitude;
                    });
                    let center = [
                        lngSum / that.mapData.length,
                        latSum / that.mapData.length,
                    ];
                    that.Mutil.setViewF({
                        center: center
                    })
                }
            }
        );
    }
    getWindowInfo(enterpriseId: string) {
        let that = this;
        (window as any).checkDetail = function (param: string) {
            that.$router.push({
                path: "/EnDetail",
                query: {
                    enterpriseId: param
                }
            });
        };
        METHOD.axiosGet(
            that,
            `/enterpriseInfo/getMapEnterpriseInfoById/${enterpriseId}`,
            function (res: any) {
                if (res.code == 0) {
                    let obj = res.data.enterpriseInfo,
                        zdnum = res.data.bigDangerNum,
                        wxnum = res.data.dangerNum,
                        html =
                        `<div class="windowDg"><h3>企业详细信息</h3>` +
                        `<p><span>企业名称:</span>${obj.unitName}</p>` +
                        `<p><span>统一社会信用代码:</span>${obj.orgCode}</p>` +
                        `<p><span>企业法人:</span>${obj.legalPerson}</p>` +
                        `<p><span>注册地址:</span>${obj.regAddress}</p>` +
                        `<p><span>法人邮箱:</span>${obj.legalPersonEmail}</p>` +
                        `<p><span>经营地址:</span>${obj.runAddress}</p>` +
                        `<p><span>法人手机:</span>${obj.legalPersonPhone}</p>` +
                        `<p><span>管理员姓名:</span>${obj.userName}</p>` +
                        `<p><span>管理员手机:</span>${obj.mobliePhone}</p>` +
                        `<p><span>管理员邮箱:</span>${obj.email}</p>` +
                        `<div class="wxyWrap">` +
                        `<span class="itm">${wxnum[0].gradeName}<br><b>${wxnum[0].num}个</b></span>` +
                        `<span class="itm">${wxnum[1].gradeName}<br><b>${wxnum[1].num}个</b></span>` +
                        `<span class="itm">${wxnum[2].gradeName}<br><b>${wxnum[2].num}个</b></span>` +
                        `<span class="itm">${wxnum[3].gradeName}<br><b>${wxnum[3].num}个</b></span>` +
                        `<span class="itm">重大危险源<br>${zdnum}个</span>` +
                        `</div>` +
                        `<div class="cent margT10"><button class="el-button el-button--small" onclick="checkDetail('${obj.enterpriseId}')">查看企业详情</button></div>` +
                        `</div>`;
                    that.Mutil.addPopup(html, obj.enterpriseId, obj.longitude, obj.latitude)

                }
            }
        );
    }
    getWxyWindowInfo(goodsId: string) {
        let that = this;
        // (window as any).checkDetail = function (param: string) {
        //     that.$router.push({
        //         path: "/EnDetail",
        //         query: {
        //             enterpriseId: param
        //         }
        //     });
        // };
        METHOD.axiosGet(
            that,
            `/enterpriseGoods/getMapEnterpriseGoodsById/${goodsId}`,
            function (res: any) {
                if (res.code == 0) {
                    let goods = res.data,
                html =
                        `<div class="windowDg"><h3>危险源</h3>` +
                        `<p><span>名称:</span>${goods.goodsName}</p>` +
                        `<p><span>物品类型:</span>${goods.category}</p>` +
                        `<p><span>联系人:</span>${goods.contacts}</p>` +
                        `<p><span>联系电话:</span>${goods.phone}</p>` +
                        `<p><span>危险等级:</span>${goods.dangerGrade}</p>` +
                        `</div>`;
                    that.Mutil.addPopup(html, goods.id, goods.longitude, goods.latitude)

                }
            }
        );
    }
    
    getshipinWindowInfo(deviceId: string) {
        let that = this;
		this.closeVideo();
        METHOD.axiosGet(
            that,
            `/safetyDeviceInfo/getSafetyDeviceInfoById/${deviceId}`,
            function (res: any) {
                if (res.code == 0) {
                    that.deviceVideo = res.data;
                    let device = res.data;
                that.isShowVideo=true;
                that.player.play('http://27.128.189.137:18000/flv/hls/stream_88_0.flv' , 1);
				that.lastVideoPlayId="stream_88_0";//记录上次播放的视频ID
                console.log(device,"de-----")
                }
            }
        );
    }
	//关闭视频方法
	closeVideo(){
		if(this.lastVideoPlayId!=""){
			this.player.stop('http://27.128.189.137:18000/flv/hls/'+this.lastVideoPlayId+'.flv' , 1);
		}
		this.isShowVideo=false;
	}
    addMark(obj: any, index: any) {
        let icon,
            that = this;
        icon = require("@/assets/mark/markqy.png");
        let option = {
            position: [Number(obj.longitude), Number(obj.latitude)],
            content: ` <img src="${icon}" width="25">`,
            label: {
                content: obj.unitName,
                offset: [28, -7]
            },
            offset: [-13, -2],
            events: {
                click: (e: any) => {
                    that.windowsArr.forEach((ele: any) => {
                        ele.visible = false;
                    });
                    that.$nextTick(() => {
                        that.currentWindow = that.windowsArr[index];
                        that.currentWindow.visible = true;
                    });
                },
            },
            visible: true,
        };
        that.Mutil.addMarkerToMap(
            'qiye',
            obj.unitName,
            icon,
            [obj.longitude, obj.latitude],
            0.4,
            obj.enterpriseId
        );
    }
    wxyaddMark(obj: any, index: any) {
        let icon,
            that = this;
        icon = require("@/assets/mark/weixianyuan.png");
        let option = {
            position: [Number(obj.longitude), Number(obj.latitude)],
            content: ` <img src="${icon}" width="50">`,
            label: {
                content: obj.unitName,
                offset: [28, -7]
            },
            offset: [-13, -2],
            events: {
                click: (e: any) => {
                    that.windowsArr.forEach((ele: any) => {
                        ele.visible = false;
                    });
                    that.$nextTick(() => {
                        that.currentWindow = that.windowsArr[index];
                        that.currentWindow.visible = true;
                    });
                },
            },
            visible: true,
        };
        that.Mutil.addMarkerToMap(
            'wxy',
            obj.goodsName,
            icon,
            [obj.longitude, obj.latitude],
            0.6,
            obj.id
        );
    }
    shipinaddMark(obj: any, index: any) {
        let icon,
            that = this;
        icon = require("@/assets/mark/jiankong.png");
        let option = {
            position: [Number(obj.longitude), Number(obj.latitude)],
            content: ` <img src="${icon}" width="50">`,
            label: {
                content: obj.unitName,
                offset: [28, -7]
            },
            offset: [-13, -2],
            events: {
                click: (e: any) => {
                    that.windowsArr.forEach((ele: any) => {
                        ele.visible = false;
                    });
                    that.$nextTick(() => {
                        that.currentWindow = that.windowsArr[index];
                        that.currentWindow.visible = true;
                    });
                },
            },
            visible: true,
        };
        that.Mutil.addMarkerToMap(
            'shipin',
            obj.deviceName,
            icon,
            [obj.longitude, obj.latitude],
            0.6,
            obj.id
        );
    }
    change(v: any) {
        let that = this;
        that.mapData.forEach((ele: any, index: any) => {
            if (ele.dataType == v || v == 0) {
                that.markers[index].visible = true;
            } else {
                that.markers[index].visible = false;
            }
        });
    }
   
    /* 搜索 */
    onSearchResult(pois: any) {
        let latSum = 0;
        let lngSum = 0;
        if (pois.length > 0) {
            pois.forEach((poi: any) => {
                let {
                    lng,
                    lat
                } = poi;
                lngSum += lng;
                latSum += lat;
                this.markersB.push([poi.lng, poi.lat]);
            });
            let center = {
                lng: lngSum / pois.length,
                lat: latSum / pois.length,
            };
            this.mapOption.center = [center.lng, center.lat];
        }
    }
    getPopcon(qyid: any) {
        let that = this;
        that.getWindowInfo(qyid);
    }
    getWxyPopcon(wxyid: any) {
        let that = this;
        that.getWxyWindowInfo(wxyid);
    }
    getshipinPopcon(shipinid: any) {
        let that = this;
        that.getshipinWindowInfo(shipinid);
    }
    created() {
        this.getMapData();
    }
    mounted() {
        
        let that = this;
		
		that.player = new WasmPlayer(null, "div_video", null);
        that.mapLoadDone = true;
        that.Mutil = new Mutil("mapbox");
        that.MAP = that.Mutil.MAP;
        that.Mutil.mapSelectBind((evt: any) => {
            //这是地图marker点击回调监听
            if(evt.selected[0].get('type')==='qiye'){
                that.Mutil.closeAllOverlays();
                let id = evt.selected[0].get('did');
                if (id) that.getPopcon(id);
            }else if(evt.selected[0].get('type')==='wxy'){//其他类的气泡
                that.Mutil.closeAllOverlays();
                let id = evt.selected[0].get('did');
                if (id) that.getWxyPopcon(id);
            }else if(evt.selected[0].get('type')==='shipin'){//其他类的气泡
                that.Mutil.closeAllOverlays();
                let id = evt.selected[0].get('did');
                if (id) that.getshipinPopcon(id);
            }
            
            
        })
        this.getStatiData();
        this.Mutil.getBoundaries("石家庄");
    }
    
    mapqiye(){
        if(this.qiyeVisble){
            this.Mutil.visibleMarks(false,"qiye");
            this.qiyeVisble=false;
            this.$refs.qyimg.lastChild.style.display = "none";

        }else{
            this.Mutil.visibleMarks(true,"qiye");
            this.qiyeVisble=true;
            this.$refs.qyimg.lastChild.style.display = "block";
        }
        
    }
    mapbox(){
        let that = this;
        that.Mutil.closeAllOverlays();
    }
    mapwxy(){
        if(this.wxyVisble){
            this.Mutil.visibleMarks(false,"wxy");
            this.wxyVisble=false;
            this.$refs.wxyimg.lastChild.style.display = "none";
        }else{
            this.Mutil.visibleMarks(true,"wxy");
            this.wxyVisble=true;
            this.$refs.wxyimg.lastChild.style.display = "block";
        }
    }
    mapshipin(){
        if(this.shipinVisble){
            this.Mutil.visibleMarks(false,"shipin");
            this.shipinVisble=false;
            this.$refs.shipinimg.lastChild.style.display = "none";
        }else{
            this.Mutil.visibleMarks(true,"shipin");
            this.shipinVisble=true;
            this.$refs.shipinimg.lastChild.style.display = "block";
        }
    }
    mapweihai(){
        if(this){
            this.$refs.whimg.lastChild.style.display = "none";
        }else{
            this.$refs.whimg.lastChild.style.display = "block";
        }
    }
    mapyinhuan(){
        if(this){
            this.$refs.yhimg.lastChild.style.display = "none";
        }else{
            this.$refs.yhimg.lastChild.style.display = "block";
        }
    }
	getStatiData() {
	  let that = this;
	  METHOD.axiosPost(
	    that,
	    `/dataStatistics/managerDataStatistics`,
	    { cityId: "", countyId: "", provinceId: "" },
	    function (res: any) {
	      if (res.code == 0) {
	        that.tjNumberObj = res.data;
	        let obj = res.data,
	          arr: any = [];
	        arr.push({
	          name: "预警处理中",
	          value: Number(obj.alarmingNum),
	        });
	        arr.push({
	          name: "预警已处理",
	          value: Number(obj.handleAlarmNum),
            });
            
            
	        // that.$nextTick(() => {
	        //   that.$set(that.config, "data", arr);
            // });
            
            if (res.code == 0 && res.data.goodsList.length > 0) {
                    that.mapData = res.data.goodsList;
                    let latSum = 0;
                    let lngSum = 0;
                    that.mapData.forEach((ele: any, index: any) => {
                        that.wxyaddMark(ele, index);
                        lngSum += ele.longitude;
                        latSum += ele.latitude;
                    });
                    let center = [
                        lngSum / that.mapData.length,
                        latSum / that.mapData.length,
                    ];
                    that.Mutil.setViewF({
                        center: center
                    })
            }
            if (res.code == 0 && res.data.cameraList.length > 0) {
                    let shipinmapData = res.data.cameraList;
                    let shipinlatSum = 0;
                    let shipinlngSum = 0;
                    shipinmapData.forEach((ele: any, index: any) => {
                        that.shipinaddMark(ele, index);
                        shipinlngSum += ele.longitude;
                        shipinlatSum += ele.latitude;
                    });
                    let shipincenter = [
                        shipinlngSum / this.shipinmapData.length,
                        shipinlatSum / this.shipinmapData.length,
                    ];
                    that.Mutil.setViewF({
                        center: shipincenter
                    })
            }
	      }
	    }
	  );
    }
}
</script>

<style lang="scss">
@import "@/utils/public.scss";
.map-botton{
    width: 100px;
    height: 50px;
    outline: none;
    z-index: 10;
    position:absolute;
}
.map-botton:nth-child(1){
    left:50px;
}
.map-botton:nth-child(2){
    left:160px;
}
.map-botton:nth-child(3){
    left:270px;
}

#mapbox {
    width: 100%;
    height: 100%;
    position: relative;
}

.gis {
    position: relative;
    overflow: hidden;
}
/* .div-isShowVideo{
    width: 200px;
    height: 350px;
} */
/* .div-isShowVideo .divspan{
    width: 100%;
    height: 20px;
} */
.markBox {
    z-index: 30;
    width:120px;
    height:250px;
    background-color: rgba(2, 40, 90, 0.5);
    position: fixed;
    bottom: 10px;
    right: 20px;
}
.markBox .markbox-div{
    float: left;
    width: 50%;
    height: 50px;
    text-align: center;
    /* background: url(selected.png) right top no-repeat !important;
    background-size: 16px !important; */
}
.markBox .markbox-span{
    float: right;
    width: 50%;
    height: 50px;
    text-align: center;
    line-height: 50px;
    font-size: 2rem;
    font-family: 'UnidreamLED';
    color: #fff;
}
.markBox div img{
    width: 25px;
    /* margin-top: 10px; */
}
.show-box {
    position: absolute !important;
	z-index: 9;
	/* background: rgba(204, 204, 204, 0.7); */
    top: 4px;
    right: 10px;
}
.search-box {
    position: absolute !important;
    top: 14px;
    left: 80px;
}
.ol-zoom {
    top: .5em;
    left: 500px !important;
}

</style>
