<template>
    <div class="home">
        <div class="top">
            <TopTitle></TopTitle>
        </div>
        <div class="rightTopFunc">
            <rightTopFunc @is2D='is2D' 
                @isCamera='isCamera' 
                @isLayer='isLayer' 
                @isClear='isClear' 
                @searchRoat='searchRoat'></rightTopFunc>
        </div>  
         <div class="rightFunc">
            <rightFunc @isReturn='isReturn' 
                @enlarge='enlarge'
                @narrow='narrow'
                @coordinate='coordinate'
                @distance='distance'
                @area='area'
                @marker='marker'
                @rollerShutter='rollerShutter'
                @splitScreen='splitScreen'
                @toNorth='toNorth'
                @topSee='topSee'
                @roundSee='roundSee'
                @horizon='horizon'
                @allSee='allSee'></rightFunc>
        </div>
        <div class="bottomNav">
            <bottomNav></bottomNav>
        </div>
        <div id="cesiumContainer">
            <div class="" ref="slider"></div>
        </div>
    </div>
</template>
<script>

    import measureTools from "../assets/js/map/MeasureTools";
    import drawTool from "../assets/js/map/drawTool";
    import roller from "../assets/js/map/roller";
    import addCompany from '../assets/js/map/addCompany';
    
    import TopTitle from '../components/topTitle';
    import rightTopFunc from '../components/rightTopFunc';
    import rightFunc from '../components/rightFunc';
    import bottomNav from '../components/bottomNav';

    export default {
        components: {
            TopTitle,
            rightTopFunc,
            rightFunc,
            bottomNav
        },
        data() {
            return {
                viewer: undefined,
                entity: undefined,
                devTypes: ['point', 'polyline', 'polygon'], 
                roll: {r: undefined, b: false}
            }
        },
        mounted() {
            // ***********************************初始化地图********************************************
            Cesium.Ion.defaultAccessToken = this.config.mapToken;
            this.viewer = new Cesium.Viewer('cesiumContainer', {
                geocoder: false,
                homeButton: false,
                sceneModePicker: false,
                fullscreenButton: false,
                vrButton: false,
                baseLayerPicker: true,
                infoBox: false,
                selectionIndicator: false,
                animation: false,
                timeline: false,
                shouldAnimate: true,
                navigationHelpButton: false,
                navigationInstructionsInitiallyVisible: false,
                imageryProvider: new Cesium.UrlTemplateImageryProvider({
                    url: 'https://mt1.google.cn/vt/lyrs=s&hl=zh-CN&x={x}&y={y}&z={z}&s=Gali'
                })
            });

            // ***********************************倾斜摄影加载********************************************
            let tileset = new Cesium.Cesium3DTileset({
                url : 'http://localhost:9000/model/e44fe150d09b11eaabec1d24e8548b3a/tileset.json',
                skipLevelOfDetail : true,
                baseScreenSpaceError : 1024,
                skipScreenSpaceErrorFactor : 16,
                skipLevels : 1,
                immediatelyLoadDesiredLevelOfDetail : false,
                loadSiblings : false,
                cullWithChildrenBounds : true
            }), height = -2440;

            this.viewer.scene.primitives.add(tileset);
            tileset.readyPromise.then(argument => {
                var cartographic = Cesium.Cartographic.fromCartesian(tileset.boundingSphere.center);
                var surface = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, cartographic.height);
                var offset = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, cartographic.height + height);
                var translation = Cesium.Cartesian3.subtract(offset, surface, new Cesium.Cartesian3());
                tileset.modelMatrix = Cesium.Matrix4.fromTranslation(translation);
                setTimeout(() => { this.viewer.flyTo(tileset) }, 2000);
            });
            
            // ********************************Draw********************************************
            this.draw = new drawTool.drawTool({
                viewer: this.viewer, 
                hasEdit: true,
            })
        },
        methods: {
            searchRoat(val) {
                /**
                 * @param {*} val  '为地名地址道路的输入值'
                 */
                this.commons.log(val)
            },
            is2D(flag) {
                /**
                 * @param {*} flag  'true 选中2D， falss 反之为3D'
                 */
                this.commons.log(flag) 
            },
            isCamera(flag) {
                /**
                 * @param {*} flag  'true 选中影像， falss 反之'
                 */
                this.commons.log(flag)
            },
            isLayer(flag) {
                /**
                 * @param {*} flag  'true 选中图层， falss 反之'
                 */
                this.commons.log(flag)
            },
            isClear(flag) {
                /**
                 * @param {*} flag  'true 选中清除， falss 反之'
                 */ 
                this.commons.log(flag)
            }

            // rightFunc
            // 复位
            ,isReturn(val) {} 
            // 放大
            ,enlarge() {
                this.viewer.camera.zoomIn(300);
            }
            // 缩小
            ,narrow() {
                this.viewer.camera.zoomOut(300);
            }
            // 坐标
            ,coordinate() {
                
            }
            // 距离
            ,distance(val) {
                new measureTools.measureTools(this.viewer).measurePolyLine();
            }
            // 面积
            ,area(val) {
                new measureTools.measureTools(this.viewer).measurePolygon();
            }
            // 标记
            ,marker(val) {
                // this.draw.type.point || (this.draw.type.point = new tool.attributes.point({viewer: this.viewer}));
                // this.draw.create('point');
                this.draw.startDraw({
                    type: "polyline",
                    style: {
                        material: Cesium.Color.YELLOW,
                        clampToGround: true
                    }
                });
            }
            // 卷帘
            ,rollerShutter() {
                this.roll.r || (this.roll.r = new roller({
                    imageryLayers: this.viewer.imageryLayers, 
                    url: 'http://t0.tianditu.com/img_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=img&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=ebf64362215c081f8317203220f133eb'
                })).screen({
                    slider: this.$refs.slider,
                    viewer: this.viewer
                })
                this.$refs.slider.className = (this.roll.b = !this.roll.b) ? 'slider' : '';
                this.viewer.scene.imagerySplitPosition = this.roll.b && this.$refs.slider.offsetLeft / this.$refs.slider.parentElement.offsetWidth
            }
            // 分屏
            ,splitScreen() {}
            // 指北
            ,toNorth() {}
            // 顶视
            ,topSee() {}
            // 环视
            ,roundSee() {
                var parentEntity = this.viewer.entities.add(new Cesium.Entity()), positions = [], cartesian, polyline;
                this.handler = new Cesium.ScreenSpaceEventHandler(this.viewer.scene.canvas)
                this.handler.setInputAction(evt => {

                    cartesian = this.viewer.scene.pickPosition(evt.position);
                    // cartesian = this.draw.getCatesian3FromPX(evt.position, this.viewer, []);
                    positions.push(cartesian.clone());
                    // addCompany.createPoint.call(this, {position: cartesian})

                    if(positions.length === 1) {
                        this.handler.setInputAction(moveEvent => {
                            positions[1] = this.viewer.scene.pickPosition(moveEvent.endPosition);
                            // positions[1] = this.draw.getCatesian3FromPX(moveEvent.endPosition, this.viewer, []);
                            !polyline && (polyline = addCompany.createPolyline.call(this, positions));
                        }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
                        return;
                    } 
                    

                    this.handler.destroy();
                    // console.log(Cesium.Cartesian3.distance(positions[0], positions[1]));
                    // var cartesian = this.draw.getCatesian3FromPX(evt.position, this.viewer, []);
                    var viewPointEntity = this.viewer.entities.add({
                        parent: parentEntity,
                        position: positions[0],
                        ellipsoid: {
                            radii: new Cesium.Cartesian3(5, 5, 5),
                            material: Cesium.Color.GREEN
                        }
                    });
                    // // 世界坐标转换为投影坐标
                    var webMercatorProjection = new Cesium.WebMercatorProjection(this.viewer.scene.globe.ellipsoid);
                    var viewPointWebMercator = webMercatorProjection.project(Cesium.Cartographic.fromCartesian(positions[0]));
                    // // 排除碰撞监测的对象
                    var objectsToExclude = [viewPointEntity];

                    // 目标点集合
                    var destPoints = [];
                    // 视域点和目标点的距离
                    var radius = Cesium.Cartesian3.distance(positions[0], positions[1]); // 视距1000米
                    // 计算一圈
                    for (var i = 0; i <= 30; i++) {
                        // 度数转弧度
                        var radians = Cesium.Math.toRadians(i);
                        // 计算目标点
                        var toPoint = new Cesium.Cartesian3(viewPointWebMercator.x + radius * Math.cos(radians), viewPointWebMercator.y + radius * Math.sin(radians), 10);
                        // 投影坐标转世界坐标
                        toPoint = webMercatorProjection.unproject(toPoint);
                        destPoints.push(Cesium.Cartographic.toCartesian(toPoint.clone()));
                    }
                    let viewer = this.viewer;
                    // 绘制线
                    function drawLine(leftPoint, secPoint, color) {
                        viewer.entities.add({
                            polyline: {
                                positions: [leftPoint, secPoint],
                                arcType: Cesium.ArcType.NONE,
                                width: 5,
                                material: color,
                                depthFailMaterial: color
                            }
                        })
                    }
                    pickFromRay.call(this);
                    function pickFromRay() {
                        for (var i = 0; i < destPoints.length; i++) {
                            // 计算射线的方向，目标点left 视域点right
                            var direction = Cesium.Cartesian3.normalize(Cesium.Cartesian3.subtract(destPoints[i], positions[0], new Cesium.Cartesian3()), new Cesium.Cartesian3());
                            console.log(direction);
                            // 建立射线
                            var ray = new Cesium.Ray(positions[0], direction);
                            var result = viewer.scene.pickFromRay(ray, objectsToExclude); // 计算交互点，返回第一个
                            showIntersection(result, destPoints[i], positions[0]);
                        }
                    }
                    // 处理交互点
                    function showIntersection(result, destPoint, cartesian) {
                        // 如果是场景模型的交互点，排除交互点是地球表面
                        if (Cesium.defined(result) && Cesium.defined(result.object)) {
                            drawLine(result.position, cartesian, Cesium.Color.GREEN); // 可视区域
                            drawLine(result.position, destPoint, Cesium.Color.RED); // 不可视区域
                        } else {
                            drawLine(cartesian, destPoint, Cesium.Color.GREEN);
                        }
                    }
                    this.handler.destroy();
                }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
            }
            // 视域
            ,horizon() {
                
            }
            // 通视
            ,allSee() {}

        }
    }
</script>

<style>
    html, body, #cesiumContainer {
        height: 100%;
        padding: 0;
        margin: 0;
    }

    .slider {
        position: absolute;
        left: 50%;
        top: 0px;
        background-color: #d3d3d3;
        width: 5px;
        height: 100%;
        z-index: 9999;
    }

    .slider:hover {
        cursor: ew-resize;
    }

    .home {
        position: relative;
        width: 100%;
        height: 100%;
    }
    .top {
        position: absolute;
        z-index: 1000;
        color: red;
        width: 100%;
        height: 86.5px;
    }
    .rightTopFunc {
        position: absolute;
        z-index: 1000;
        right: 32px;
        top: 119px;
    }
    .rightFunc {
        position: absolute;
        z-index: 1000;
        right: 32px;
        top: 203px;
    }
    .bottomNav {
        position: absolute;
        width: 100%;
        z-index: 1000;
        bottom: 40px;
    }


    /*leaflet风格气泡窗口样式模板*/
    .cesium-popup {
        position: absolute;
        text-align: center;
    }

    .cesium-popup-close-button {
        position: absolute;
        top: 0;
        right: 0;
        padding: 4px 4px 0 0;
        text-align: center;
        width: 18px;
        height: 14px;
        font: 16px/14px Tahoma, Verdana, sans-serif;
        color: #c3c3c3;
        text-decoration: none;
        font-weight: bold;
        background: transparent;
    }

    .cesium-popup-content-wrapper {
        text-align: center;
        max-height: 200px;
        overflow-y: auto;
        background: rgba(63, 72, 84, 0.7);
        box-shadow: 0 3px 14px rgba(0, 0, 0, 0.4);
        padding: 1px;
        text-align: left;
        border-radius: 4px;
        padding: 8px;
    }

    .cesium-prompt-content-wrapper {
        text-align: center;
        max-height: 200px;
        overflow-y: auto;
        box-shadow: 0 3px 14px rgba(0, 0, 0, 0.4);
        padding: 1px;
        text-align: left;
    }

    .cesium-popup-content {
        line-height: 1.4;
    }

    .cesium-popup-tip-container {
        margin: 0 auto;
        width: 40px;
        height: 20px;
        position: relative;
        overflow: hidden;
    }

    .cesium-popup-tip {
        background:  rgba(63, 72, 84, 0.7);
        box-shadow: 0 3px 14px rgba(0, 0, 0, 0.4);
        width: 17px;
        height: 17px;
        padding: 1px;
        margin: -10px auto 0;
        -webkit-transform: rotate(45deg);
        -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        -o-transform: rotate(45deg);
        transform: rotate(45deg);
    }

    .popupContent{
        color: white;
    }
    .promptDiv{
        background: rgba(0, 0, 0, 0.4);
        font-size: 10px;
    }

    .promptContent{
        color:white;
    }
</style>