<template>
    <div class="home_map">
        <div id="div3d"></div>
    </div>
</template>

<script>
import { httpImg, dept } from "@/api";
import { randNum } from "@/utils";

import dataJsonA from "@/a.js";

export default {
    name: "home-map",

    data() {
        return {
            zoomNumber: 1,
            isRouter: "", //判断路由
            lonlat: "", // 经纬度
            isZoom: 0, // 层级分为4级 1级最小, 4级最大
        };
    },

    mounted() {
        this.isRouter = this.$route.name; // 获取url name



        const THAT = this;
        var app = new THING.App();
        app.background = [0, 0, 0];
        app.camera.xAngleLimitRange = [45, 90]; // 鼠标可旋转的角度


        // 摄像机位置结束变动
        app.on(THING.EventType.CameraChangeEnd, function (ev) { })

        // THAT.onEarthFlyTo(app, THAT.lonlat, 2, 30);


        THING.Utils.dynamicLoad(
            // ["https://www.thingjs.com/uearth/history/uearth.min.v1.7.7.1.js"],
            ["https://www.thingjs.com/uearth/history/uearth.min.v1.7.6.13.js"],
            function () {
                // 新建一个地图
                var map = app.create({
                    type: "Map",
                    restrictedLevel: [1, 19],
                    style: {
                        night: false //不开启白天黑夜 默认开启
                    },
                    attribution: "Google"
                });

                // 新建一个瓦片图层
                var tileLayer = app.create({
                    type: "TileLayer",
                    name: "tileLayer1",
                    // url: "https://mt{0,1,2,3}.google.cn/vt/lyrs=y&hl=zh-CN&gl=cn&x={x}&y={y}&z={z}",
                    url: 'http://webst0{1,2,3,4}.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}',
                });

                // 将瓦片图层添加到map中
                map.addLayer(tileLayer);

                addLayer();

                function addLayer() {
                    // 创建一个图层 用来存放多边形（GeoPolygon）
                    var polygonLayer = app.create({
                        type: "ThingLayer",
                        name: "polygonLayer"
                    });
                    map.addLayer(polygonLayer); // 将创建的图层添加到 map 中
                    var geoPolygonBC = app.create({
                        type: "GeoPolygon",
                        name: "锡林郭勒盟东乌珠穆沁旗",
                        coordinates: dataJsonA.features[2].geometry.coordinates,
                        height: 0,
                        renderer: {
                            type: "vector", // 纯色填充
                            // color: "rgba(8, 116, 227, 1)", // 填充色
                            opacity: 0.3, // 不透明度
                            outlineColor: "rgba(7, 247, 247, 1)", // 边框色
                            outlineWidth: 5 // 边框宽度
                        }
                    });
                }

                setTimeout(() => {
                    THAT.onEarthFlyTo(app, [117.99451399757393, 45.968614045670165], 1, 200);
                }, 1000)

                app.camera.position = [2188341.0028113117, 4784723.336439927, 4145181.81429105]
                app.camera.target = [2082203.876048005, 4558128.204403516, 3945471.1246912233]

                tileLayer.style.template = CMAP.TileLayerStyle.CUSTOMCOLOR;
                tileLayer.style.customColor = [144, 162, 235];

                // 摄像机位置结束变动
                app.on(THING.EventType.CameraChangeEnd, function (ev) {
                    var distance = Math.ceil(app.camera.distance);

                    // 选择省
                    if (distance > 3000 * 1000) {
                        THAT.zoomNumber = 1;
                    }

                    // 选择市
                    if (distance < 3000 * 1000 && distance > 800 * 1000) {
                        THAT.zoomNumber = 2;
                    }

                    // 选择区
                    if (distance < 800 * 1000 && distance > 100 * 1000) {
                        THAT.zoomNumber = 3;
                    }

                    // 选择县/镇
                    if (distance < 100 * 1000 && distance > 0) {
                        THAT.zoomNumber = 4;
                    }
                });

                THAT.$store.commit("SET_APP_MAP", app);
                THAT.$store.commit("set_appTileLayer", tileLayer);

                // 标记点   
                THAT.joinSign(app);

                // 地图点击
                THAT.onMap(app, map);
            }
        );
    },

    methods: {
        // 标记点
        joinSign(app, e) {
            const THAT = this;
            // 企业管理
            dept().then(res => {

                let select_item = this.$store.state.select_item;
                let arr = [];
                res.map(item => {
                    for (let i of select_item) {
                        if (item.type == i.id) {
                            item.typeName = i.label;
                        }
                    }

                    if (item.typeName) {
                        var url;
                        if (item.typeName == '非煤矿山') {
                            url = "/image/fei.png"
                        }

                        if (item.typeName == '煤矿') {
                            url = "/image/mei.png"
                        }

                        if (item.typeName == '危险化学品企业') {
                            url = "/image/hua.png"
                        }

                        arr.push({
                            title: item.name,
                            position: [item.jd, item.wd],
                            address: item.address,
                            url,
                            label: {
                                tip: [item.typeName]
                            },

                            item,
                        })
                    }
                })

                var arrTest = []

                for (let i in arr) {

                    let geoPoint = app.create({
                        type: "GeoPoint",
                        coordinates: arr[i].position,
                        userData: {
                            position: arr[i].position,
                            title: arr[i].title,
                            label: arr[i].label,
                            tip: arr[i].label.tip,
                            address: arr[i].address
                        },
                        infoWindow: {
                            title: arr[i].title,
                            displayMode: CMAP.DisplayMode.MouseEnter, //点击显示
                            type: CMAP.InfoWindowType.Standard, //标准indoWindow
                            style: CMAP.InfoWindowStyle.Default, //默认样式 黑色
                            pivot: [0.5, 1.3], //界面的轴心，以百分比表示界面轴心位置。[0,0] 代表界面左上；[1,1] 代表界面右下 pivot可大于1用于像素级的偏移
                            fieldData: [
                                {
                                    field: "tip",
                                    alias: "类型"
                                }
                            ]
                        },
                        renderer: {
                            type: "image", // image代表创建图片类型的点
                            url: arr[i].url, // 图片的url
                            size: 4 // 尺寸
                        }
                    });

                    arrTest.push({
                        obj: geoPoint
                    })


                    geoPoint.on("click", function (event) {
                        let ev = event.object.userData;
                        THAT.lonlat = ev.position;
                        let title = ev.title;
                        let tip = ev.label.tip;

                        if (event.button == 2) {

                            if (title == '锡林矿业') {
                                window.open('http://dwqdp.jingkongyun.com/three/?id=5', '_blank');
                            }

                            if (title == '融冠矿业') {
                                window.open('http://dwqdp.jingkongyun.com/three/?id=4', '_blank');
                            }

                            if (title == '钨矿') {
                                window.open('http://dwqdp.jingkongyun.com/three/?id=3', '_blank');
                            }

                            if (title == '山金阿尔哈达') {
                                window.open('http://dwqdp.jingkongyun.com/three/?id=2', '_blank');
                            }

                            if (title == '山金白音呼布') {
                                window.open('http://dwqdp.jingkongyun.com/three/?id=1', '_blank');
                            }

                        } else {
                            for (let i of arr) {
                                if (i.title == ev.title) {
                                    const objItem = {
                                        itemIndex: THAT.$store.state.BaseLeftIndex,
                                        randNum: randNum(1, 10000, 1)
                                    }
                                    THAT.$store.commit("SET_IS_LEFT", objItem);
                                    THAT.$store.commit("set_compony_info", i.item);
                                }
                            }
                            THAT.isZoom = 1;
                            THAT.onEarthFlyTo(app, THAT.lonlat, 2, 30);
                        }

                    });


                }

            })
        },

        // 地图点击
        onMap(app, map) {
            map.on("click", ev => {
                const lonlat = ev.coordinates;
                let height;
                if (this.zoomNumber == 1) {
                    height = 1100;
                }

                if (this.zoomNumber == 2) {
                    height = 110;
                }

                if (this.zoomNumber == 3) {
                    height = 11;
                }

                if (this.zoomNumber == 4) {
                    height = 1.1;
                }

                this.onEarthFlyTo(app, lonlat, 1, height);
            });
        },

        // 自定义层级方法 (定位, 时间, 距离地面高度)
        onEarthFlyTo(app, lonlat, time, height) {
            app.camera.earthFlyTo({
                disablePick: false,
                lonlat,
                time: time * 1000,
                height: height * 1000,
                heading: 0,
                pitch: 88,
            });

        },

    },

    watch: {
        $route(to, from) {
            this.isRouter = to.name;
        },

        compony_info(e) {
            const app = this.$store.state.appMap;
            this.onEarthFlyTo(app, [e.jd, e.wd], 2, 30);

        }
    },

    computed: {

        compony_info() {
            return this.$store.state.compony_info;
        },

    },

};
</script>

<style lang="scss">
.home_map {
    width: 100%;
    height: 100%;

    #div3d {
        width: 100%;
        height: 100%;
    }

    .slot-radio {
        position: absolute;
        width: 20vw;
        height: 2vw;
        border: 1px solid red;
        top: 0vw;
        right: 25vw;
        z-index: 999;
    }
}
</style>