<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='EisReturn' 
                @enlarge='Eenlarge'
                @narrow='narrow'
                @coordinate='Ecoordinate'
                @distance='Edistance'
                @area='Earea'
                @marker='Emarker'
                @rollerShutter='ErollerShutter'
                @splitScreen='EsplitScreen'
                @toNorth='EtoNorth'
                @topSee='EtopSee'
                @roundSee='EroundSee'
                @horizon='Ehorizon'
                @allSee='EallSee'
                
                @ymAnslysis='EymAnslysis'
                @tjxAnslysis='EtjxAnslysis'
                @visualField='EvisualField'
                @yyAnslysis='EyyAnslysis'
                @kgAnalusis='EkgAnalusis'
                :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'
                :ymAnslysis='ymAnslysis'
                :tjxAnslysis='tjxAnslysis'
                :yyAnslysis='yyAnslysis'
                :kgAnalusis='kgAnalusis'></rightFunc>
        </div>
        <div class="bottomNav">
            <bottomNav></bottomNav>
        </div>
        <!-- <div class="leftAssert">
            <leftAssert @EFadb='EFadb' @EKgfz='EKgfz' @EGzfx='EGzfx'></leftAssert>
        </div> -->
        <div class="mapPop">
            <mapPop></mapPop>
        </div>
        <div class="allSee" v-if='allSee'>
            <allSee @closePop='closePop'></allSee>
        </div>

        <div class="allSee " v-if='ymAnslysis' style="top: 315px">
            <ymAnslysis @closePop='closePop'></ymAnslysis>
        </div>

         <div class="allSee" v-if='horizon'>
            <horizon @closePop='closePop'></horizon>
        </div>

         <div class="allSee tjx-anslysis" v-if='tjxAnslysis'>
            <tjxAnslysis @closePop='closePop'></tjxAnslysis>
        </div>


        <div class="allSee tjx-anslysis" v-if='visualField'>
            <visualField @closePop='closePop'></visualField>
        </div>

        <div class="allSee" v-if='yyAnslysis'>
            <yyAnslysis @closePop='closePop'></yyAnslysis>
        </div>
 
        <div class="allSee tjx-anslysis" v-if='kgAnalusis'>
            <kgAnalusis @closePop='closePop'></kgAnalusis>
        </div>

        <div id="cesiumContainer">
            <div id="vertical-slider" style="display: none;"></div>
            <div id="horizontal-slider" style="display: none;"></div>
        </div>



        <!-- <div id="split_up" style="display: none;"></div>
		<div id="split_bottom" style="display: none;"></div>
		<div id="split_left" style="display: none;"></div>
		<div id="split_right" style="display: none;"></div> -->
		<!-- <div id="loadingbar" class="spinner">
			<div class="spinner-container container1">
				<div class="circle1"></div>
				<div class="circle2"></div>
				<div class="circle3"></div>
				<div class="circle4"></div>
			</div>
			<div class="spinner-container container2">
				<div class="circle1"></div>
				<div class="circle2"></div>
				<div class="circle3"></div>
				<div class="circle4"></div>
			</div>
			<div class="spinner-container container3">
				<div class="circle1"></div>
				<div class="circle2"></div>
				<div class="circle3"></div>
				<div class="circle4"></div>
			</div>
		</div> -->

    </div>
</template>
<script>

    import objectManage from '../assets/js/map/maputils';
    import createDraw from '../assets/js/map/createDraw';
    import roller from "../assets/js/map/roller";
    import flood from "../assets/js/map/flood";
    import viewpoint from "../assets/js/map/viewpoint";
    import visual from "../assets/js/map/visual";


    import TopTitle from '../components/topTitle';
    import rightTopFunc from '../components/rightTopFunc';
    import rightFunc from '../components/rightFunc';
    import bottomNav from '../components/bottomNav';
    // import leftAssert from '../components/leftAssert';
    // import mapPop from '../components/mapPop';

    import allSee from '../components/allSee'; //通视
    import ymAnslysis from '../components/ymAnslysis'; //淹没分析
    import horizon from '../components/horizon'; // 视域分析
    import tjxAnslysis from '../components/tjxAnslysis'; // 天际线分析
    import yyAnslysis from '../components/yyAnslysis'; // 阴影分析
    import kgAnalusis from '../components/kgAnalusis'; // 控高分析
    import URL_CONFIG from "./../config/urlConfig.vue";
    const Cesium = window.Cesium;
    import visualField from '../components/visualField' //可视域分析

    export default {
        components: {
            TopTitle,
            rightTopFunc,
            rightFunc,
            bottomNav,
            // leftAssert,
            // mapPop,

            allSee,
            ymAnslysis,
            horizon,
            tjxAnslysis,
            visualField,
            yyAnslysis,
            kgAnalusis,
        },
        data() {
            return {
                viewer: undefined,
                isRoller: false,
                isReturn: false, // 复位
                enlarge: false, // 放大
                narrow: false, // 缩小
                coordinate: false, // 坐标
                distance: false, // 距离
                area: false, // 面积
                marker: false, // 标记
                rollerShutter: false, // 卷帘
                splitScreen: false, // 分屏
                toNorth: false, // 指北
                topSee: false, // 顶视
                roundSee: false, // 环视
                horizon: false, // 视域
                allSee: false, // 通视
                ymAnslysis: false, // 淹没分析
                tjxAnslysis: false, // 天际线分析
                visualField: false, // 可视域分析
                yyAnslysis: false, // 阴影分析
                kgAnalusis: false, // 控高分析
                keepArr: ['isReturn', 'enlarge', 'narrow', 'coordinate', 'distance',
                    'area', 'marker', 'rollerShutter', 'splitScreen', 'toNorth', 
                    'topSee', 'roundSee', 'horizon', 'allSee', 'ymAnslysis', 
                    'tjxAnslysis', 'yyAnslysis', 'kgAnalusis', 'visualField']
            }
        },
        mounted() {
            this.viewer = new Cesium.Viewer('cesiumContainer');
            // this.viewer.imageryLayers.addImageryProvider(new Cesium.TiandituImageryProvider({
            //     credit : new Cesium.Credit('天地图全球影像服务'),
            //     token: URL_CONFIG.TOKEN_TIANDITU
            // }));
            let scene = this.viewer.scene
            scene.shadowMap.darkness = 1.275; //设置第二重烘焙纹理的效果（明暗程度）
            scene.skyAtmosphere.brightnessShift=0.4;
            scene.debugShowFramesPerSecond = true;
            scene.hdrEnabled = false;
            scene.sun.show = false;
            this.draw = new createDraw(this.viewer);
            Cesium.when.all([
                scene.addS3MTilesLayerByScp(URL_CONFIG.SCP_CBD_GROUND1, {
                    name: 'ground'
                }),
                scene.addS3MTilesLayerByScp(URL_CONFIG.SCP_CBD_BUILD, {
                    name: 'build'
                })
            ], layer => {
                // this.layers = layer;
                objectManage.viewer = this.viewer;
                scene.camera.setView({
                    destination : Cesium.Cartesian3.fromDegrees(116.44621857300415, 39.899281526734555, 216.7793905027196),
                    orientation : {
                        heading : 0.41348036210986194,
                        pitch : -0.13636490404291735,
                        roll : 6.283185307179563
                    }
                });
            }, function(e){
                if (widget._showRenderLoopErrors) {
                    var title = '加载SCP失败，请检查网络连接状态或者url地址是否正确？';
                    widget.showErrorPanel(title, undefined, e);
                }
			});
        },
        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
            // 复位
            ,EisReturn(val) {} 
            // 放大
            ,Eenlarge() {
                this.viewer.camera.zoomIn(300);
            }
            // 缩小
            ,EEnarrow() {
                this.viewer.camera.zoomOut(300);
            }
            // 坐标
            ,Ecoordinate() {

            }
            // 距离
            ,Edistance(val) {
                this.draw.handlerDis.activate();
            }
            // 面积
            ,Earea(val) {
                this.draw.handlerArea.activate();
            }
            // 标记
            ,Emarker(val) {
                this.draw.handlerHeight.activate();
            }
            // 卷帘
            ,ErollerShutter() {
                let slider = document.getElementById('vertical-slider');
                slider.style.display = (this.isRoller = !this.isRoller) ? 'block' : 'none';
                this.roller instanceof roller || (this.roller = new roller(this.viewer));
            }
            ,EsplitScreen() {
                // VERTICAL HORIZONTAL
                this.viewer.scene.multiViewportMode = Cesium.MultiViewportMode.HORIZONTAL;
            }
            // 指北
            ,EtoNorth() {}
            // 顶视
            ,EtopSee() {}
            // 环视
            ,EroundSee() {
                // 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);
            }
            // 视域
            ,Ehorizon(val) {
                this[val] = !this[val];
                this.onlySelect(val);
            }
            // 通视
            ,EallSee(val) {
                this[val] = !this[val];
                this.onlySelect(val);
                this.viewpoint instanceof viewpoint || (this.viewpoint = new viewpoint(this.viewer));
            },
            // 淹没分析
            EymAnslysis(val) {
                this[val] = !this[val];
                this.onlySelect(val);
                this.flood instanceof flood || (this.flood = new flood(this.viewer));
            },
            // 天际线分析
            EtjxAnslysis(val) {
                this[val] = !this[val];
                this.onlySelect(val);
            },
            // 可视化分析
            EvisualField(val) {
                this[val] = !this[val];
                this.onlySelect(val);
            },
            // 阴影分析
            EyyAnslysis(val) {
                this[val] = !this[val];
                this.onlySelect(val);
            },
            // 控高分析
            EkgAnalusis(val) {
                this[val] = !this[val];
                this.onlySelect(val);
            },
            // 关闭pop方法
            closePop(val) {
                this[val] = false;
            },
            onlySelect(val) {
                this.keepArr.forEach(ele => {
                    if(val == ele) {
                        this[ele] = this[ele];
                    }else {
                        this[ele] = false;
                    };
                })
            },

             // 方案对比
            EFadb() {
            },
            // 控高分析
            EKgfz() {
                this.kgAnalusis = true;
            },
            // 光照分析
            EGzfx() {
            },
        }
    }
</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; */
        height: 124.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;
    }

    .leftAssert {
        position: absolute;
        z-index: 1000;
        left: 32px;
        top: 149px;
    }

    .mapPop {
        position: absolute;
        z-index: 1000;
        right: 371px;
        top: 566px;
    }


    /*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;
    }


    .allSee {
        position: absolute;
        z-index: 1000;
        right: 122px;
        top: 416px;
    }

    .tjx-anslysis {
        top: 265px;
    }
</style>