<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'
                :visualField='visualField'
                :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" v-if='visualField'>
            <visualField @closePop='closePop'></visualField>
        </div>

         <div class="allSee" v-if='tjxAnslysis'>
            <tjxAnslysis @closePop='closePop'></tjxAnslysis>
        </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 visualField from '../components/visualField' //可视域分析
    import URL_CONFIG from "./../config/urlConfig.vue";
    const Cesium = window.Cesium;
    

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

            allSee,
            ymAnslysis,
            horizon,
            visualField,
            tjxAnslysis,
            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', 'visualField', 'kgAnalusis']
            }
        },
        mounted() {
            this.viewer = new Cesium.Viewer('cesiumContainer', {shadows : true});
            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; //设置第二重烘焙纹理的效果（明暗程度）
            scene.skyAtmosphere.brightnessShift=0.4;
            scene.debugShowFramesPerSecond = true;
            scene.hdrEnabled = false;
            scene.sun.show = true;
            this.draw = new createDraw(this.viewer);

            var promise = [];
            // promise[0] = scene.addS3MTilesLayerByScp(URL_CONFIG.SCP_CBD_GROUND1, {
            //     name: 'ground'
            // });
            promise[0] = scene.addS3MTilesLayerByScp(URL_CONFIG.SCP_CBD_BUILD, {
                name: 'build1'
            });
            promise[1] = scene.addS3MTilesLayerByScp(URL_CONFIG.SCP_CBD_BUILD, {
                name: 'build2'
            });
            promise[2] = scene.addS3MTilesLayerByScp(URL_CONFIG.SCP_CBD_GROUND1, {
                name: 'ground'
            });

            Cesium.when.all(promise, layers => {
                // this.layers = layer;
                objectManage.viewer = this.viewer;
                // layers[0].selectEnabled = false;
                // layers[1].selectEnabled = false;
                // layers[0].shadowType = 2;
                // layers[1].shadowType = 2;
                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() {

            }
            // 视域
            ,Ehorizon(val) {
                this[val] = !this[val];
                this.onlySelect(val);
            }
            // 通视
            ,EallSee(val) {
                this[val] = !this[val];
                this.onlySelect(val);
            },
            // 淹没分析
            EymAnslysis(val) {
                this[val] = !this[val];
                this.onlySelect(val);
            },
            // 天际线分析
            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>