<template>
<div class="gis">
    <div id="mapbox">
        <!-- <Search :MAP="MAP" :Mutil="Mutil" v-if="mapLoadDone"></Search> -->
        <!-- <DrawTool :MAP="MAP" v-if="mapLoadDone"></DrawTool> -->
		<!-- <div style="width:200px;height:250px;"  class="show-box" > -->
            <div style="position:absolute;left:500px;top:10px">
                <button @click="Mutil.tianSlA()" class="map-botton">切换1</button>
                <button @click="Mutil.tianSlB()" class="map-botton">切换2</button>
                <button @click="Mutil.tianSlC()" class="map-botton">切换3</button>
            </div>
        
        

		
		</div>
        <!-- <div class="markBox">
            <ul>
                <li><img width="10px" src="@/assets/mark/markqy.png" /> 企业图例</li>
            </ul>
        </div> -->
		<!-- <div class="BoxWrap">
		     <div class="horn">
		        <div class="lt"></div>
		        <div class="rt"></div>
		        <div class="rb"></div>
		        <div class="lb"></div>
		     </div>
          </div> -->
          
          <div style="">
            <div style="width: 500px;height: 100%;z-index: 11;background-color: rgba(2, 40, 90, 0.7);position: absolute;top: 0;left: 10px;float: left;">
                <QyMaptwo></QyMaptwo>
                <!-- <div id="pieReport" style="width: 480px;height: 200px;background-color: rgba(2, 20, 44, 0.5);margin-top: 30px;margin-left: 10px;">
                    
                </div>
                <div id="pieReport" style="width: 480px;height: 250px;background-color: rgba(2, 20, 44, 0.5);margin-top: 30px;margin-left: 10px;">
                    <div id="main1" style="width:480px;height:250px;"></div>
                </div>
                <div id="pieReport" style="width: 480px;height: 250px;background-color: rgba(2, 20, 44, 0.5);margin-top: 30px;margin-left: 10px;"></div> -->
                <!-- <div id="pieReport" style="width: 400px;height: 300px;background-color: rgba(2, 20, 44, 0.4)"></div> -->
            </div>
              <div style="width: 500px;height: 100%;z-index: 12;background-color: rgba(2, 40, 90, 0.3);position: absolute;top: 0;right: 10px;float: right">
                <!-- <dv-border-box-10 class="show-box" :color="['#4980b5','#4980b5']" backgroundColor="rgba(255, 255, 255, 0.5)" style="width:220px;height:280px;" >
                    <div class="markBox">
                        <ul>
                            <div class="ul-div"><li><img width="15px" src="@/assets/mark/markqy.png" /> 注册企业 <span>{{tjNumberObj.enterpriseRegNum}}</span></li></div>
                        </ul>
                        <ul>
                            <div class="ul-div"><li><img width="20px" src="@/assets/mark/weixianyuan.png" /> 危险源 <span>{{tjNumberObj.dangerNum}}</span></li></div>
                        </ul>
                        <ul>
                            <div class="ul-div"><li><img width="20px" src="@/assets/mark/jiankong.png" /> 监控监测点<span>{{tjNumberObj.cameraNum}}</span></li></div>
                        </ul>
                        <ul>
                            <div class="ul-div"><li><img width="20px" src="@/assets/mark/weihaichangsuo.png" /> 职业危害场所<span>2</span></li></div>
                        </ul>
                        <ul>
                            <div class="ul-div"><li><img width="20px" src="@/assets/mark/yinhuan.png" /> 隐患<span>0</span></li></div>
                        </ul>
                    </div>
                </dv-border-box-10></div> -->
                <div id="pieReport" style="width: 480px;height: 200px;background-color: rgba(2, 20, 44, 0.5);margin-top: 30px;margin-left: 10px;"></div>
                <div id="pieReport" style="width: 480px;height: 250px;background-color: rgba(2, 20, 44, 0.5);margin-top: 30px;margin-left: 10px;"></div>
                <div id="pieReport" style="width: 480px;height: 250px;background-color: rgba(2, 20, 44, 0.5);margin-top: 30px;margin-left: 10px;"></div>
          </div>
    </div>
</div>
</template>

<script lang="ts">
import {
    Component,
    Vue,
    Provide
} from "vue-property-decorator";
import METHOD from "@/utils/methods";
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";
// let echarts = require('echarts/lib/echarts')
// // 引入饼状图组件
// require('echarts/lib/chart/pie')
// // 引入提示框和title组件
// require('echarts/lib/component/tooltip')
// require('echarts/lib/component/title')
import METHOD from "@/utils/methods";
import QyMaptwo from './qyMaptwo.vue';
import Demo from '@/views/Enterprises/demo.vue';
@Component({
    components: {
        DrawTool,
        Search,
        QyMaptwo,
        Demo
    },
})
export default class GIS extends Vue {
   
    
    @Provide() Mutil: any;
    @Provide() mapLoadDone = false;
    @Provide() MAP: 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() markersB: any = [];
    @Provide() toolobj: any;
    @Provide() mouseTool: any; //测量工具
    @Provide() toolVisble: boolean = false;
    @Provide() tjNumberObj: any = {};
    
   
    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)

                }
            }
        );
    }
    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
        );
    }
    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);
    }
    created() {
        this.getMapData();
        
    }
    mounted() {
        let that = this;
        that.mapLoadDone = true;
        that.Mutil = new Mutil("mapbox");
        that.MAP = that.Mutil.MAP;
        that.Mutil.mapSelectBind((evt: any) => {
            let id = evt.selected[0].get('did');
            if (id) that.getPopcon(id);
        })
        this.getStatiData();
        this.Mutil.getBoundaries("石家庄");
    }
    
	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);
	        // });
	      }
	    }
	  );
    }
}
</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;
}
/* // .BoxWrap{
//         width: 200px;
//         height: 200px;
//         position: relative;
//       }
//       .horn{
//         position: absolute;
//         width: 100%;
//         height: 100%;
//         border:1px solid #00d3e7;
//       }
//       .horn>div{
//         width: 10px;
//         height: 10px;
//         position:absolute;
//       }
//       .horn .lt{
//         border-top: 3px solid #00d3e7;
//         border-left: 3px solid #00d3e7;
//         left: -2px;
//         top: -2px;
//       }
//       .horn .rt{
//         border-top: 3px solid #00d3e7;
//         border-right: 3px solid #00d3e7;
//         right: -2px;
//         top: -2px;
//       }
//       .horn .rb{
//         border-bottom:3px solid #00d3e7;
//         border-right: 3px solid #00d3e7;
//         right: -2px;
//         bottom: -2px;
//       }
//       .horn .lb{
//         border-bottom:3px solid #00d3e7;
//         border-left: 3px solid #00d3e7;
//         left: -2px;
//         bottom: -2px;
      // } */
#mapbox {
    width: 100%;
    height: 100%;
    position: relative;
}

.gis {
    position: relative;
    overflow: hidden;
}

.markBox {
	width: 100%;
    z-index: 12;
    ul {
		.ul-div{
			margin-left: -30px;
			li {
				padding: 5px;
				list-style-type:none;
				color:#0000FF;
				font-size: 20px;
			    img {
			        width: 25px;
			        vertical-align: middle;
			    }
			}
			span{
				float: right;
				margin-right: 5px;
				font-family: 'UnidreamLED';
				overflow: hidden;
				font-size: 30px;
			}
        }
    }
}
.show-box {
    position: absolute !important;
	z-index: 9;
	// background: rgba(204, 204, 204, 0.7);
    top: 4px;
    right: 2px;
}
.search-box {
    position: absolute !important;
    top: 14px;
    left: 80px;
}
.ol-zoom {
    top: .5em;
    left: 500px !important;
}
</style>
