<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 class="leftAssert">
            <leftAssert></leftAssert>
        </div>
        <div class="mapPop">
            <mapPop></mapPop>
        </div>
         <div id="cesiumContainer" style="width:100%;height:100%;"></div>
    </div>
</template>
<script>

    import tool from "../assets/js/map/tool";

    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';


    export default {
        components: {
            TopTitle,
            rightTopFunc,
            rightFunc,
            bottomNav,
            leftAssert,
            mapPop
        },
        data() {
            return {
                viewer: undefined,
                entity: undefined,
                devTypes: ['point', 'polyline', 'polygon']
            }
        },
        mounted() {
            // ***********************************初始化地图********************************************
            Cesium.Ion.defaultAccessToken = this.config.mapToken;
            this.viewer = new Cesium.Viewer('cesiumContainer', {
                geocoder:true,
                timeline: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);
                this.viewer.zoomTo(tileset);
            });


            // ***********************************水位********************************************
            setTimeout(() => {
                var positions = [
                    101.67468055555556, 36.54803611111111, 101.66768055555556, 36.55503611111111,
                    101.65068055555556, 36.56403611111111, 101.67468055555556, 36.54803611111111
                ], waterHeight = 0, 
                entity = this.viewer.entities.add({
                    polygon: {
                        // hierarchy: Cesium.Cartesian3.fromDegreesArray(positions),
                        hierarchy: [
                            new Cesium.Cartesian3(-1036931.6607544887,5024383.265188632,3776882.2179509313),
                            new Cesium.Cartesian3(-1037689.1138430117,5023931.060901769,3777273.070930741),
                            new Cesium.Cartesian3(-1038031.7922958151,5024211.372681549,3776809.176021656),
                            new Cesium.Cartesian3(-1037502.0690553376,5024558.056853799,3776495.627250331)
                        ], 
                        material: Cesium.Color.RED.withAlpha(0.5),
                        extrudedHeight: new Cesium.CallbackProperty(function () {
                            return waterHeight;
                        })
                    }
                });
                // this.viewer.zoomTo(entity);
                this.viewer.clock.onTick.addEventListener(function () {
                    if (waterHeight > 250){
                        waterHeight = 0;
                    }
                    waterHeight += 0.1;
                })

            }, 30000);
                

            // ********************************Draw********************************************
            this.draw = new tool.attributes.drawPolt({
                viewer: this.viewer
            })
        },
        methods: {
            selectChanged(e) {
                this.draw.type[e] || (this.draw.type[e] = new tool.attributes[e]({viewer: this.viewer}));
                this.draw.type[e].startCreate();
                console.log(this.draw.type[e]);
            },
            drawShape() {
                
            },















            // ly 
            // rightTopFunc
            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(val) {}
            // 缩小
            ,narrow(val) {}
            // 坐标
            ,coordinate(val) {}
            // 距离
            ,distance(val) {}

            // 面积
            ,area(val) {}
            // 标记
            ,marker(val) {}
            // 卷帘
            ,rollerShutter(val) {}
            // 分屏
            ,splitScreen(val) {}
            // 指北
            ,toNorth(val) {}

            // 顶视
            ,topSee(val) {}
            // 环视
            ,roundSee(val) {}
            // 视域
            ,horizon(val) {}
            // 通视
            ,allSee(val) {}

        }
    }
</script>

<style scoped>

    .testbtn {
        position: absolute;
        top: 100px;
        left: 100px;
        width: 100px;
        height: 30px;
    }
    
</style>



<style scoped>
    .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;
    }
</style>