<template>
  <div class="box">
    <div class="tab-container">
        <div class="tab-button">常用工具</div>
        <!-- <div class="tab-button" :style="{'border-bottom':active == 1 ? '3px solid #01D6D5': '0px'}" @click="active = 1;">图上量算</div> -->
        <!-- <div class="tab-button" :style="{'border-bottom':active == 2 ? '3px solid #01D6D5': '0px'}" @click="active = 2;initDrawLayer();">图上绘标</div> -->
    </div>
    <div class="box-container">
        <div class="measure" v-show="active == 1">
            <div class="measure-container">
                <div class="item" v-for="(item,index) in items" :key="index" @click="startMeasure(item.name)">
                <div class="item-icon">
                    <img :src="'/img/icon/'+item.icon+'.png'" alt="">
                </div>
                <div class="item-name">{{item.name}}</div>
            </div>
            </div>
            <!-- <div style="background: #0077ff; color: #fff;  border-radius: 15px;  height:30px;line-height:30px;width:140px;margin:0px auto;cursor:pointer;" @click="measureClear">
                清空测量数据
            </div> -->

            <div class="draw-tools">
                <div class="draw-item" v-for="(item,index) in draws" :key="index" @click="selectPosition(item.type,item.img)">
                    <img :src="'/img/icon/'+item.icon+'.png'" width="80px" style="margin-top: calc( 50% - 30px);" alt="">
                </div>
            </div>
        </div>

        <div class="draw" v-show="active == 2">
            <div class="draw-container">
                <div class="item" >
                    <div class="item-icon">
                        
                    </div>
                </div>
            </div>
            <div style="background: #0077ff; color: #fff;  border-radius: 15px;  height:30px;line-height:30px;width:140px;margin:0px auto;cursor:pointer;" @click="drawClear">
                清空绘标数据
            </div>
        </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'toolbox',
    data(){
        return {
            active:1,
            options: [
                {
                    value: 'auto',
                    label: '自动'
                },{
                    value: 'm',
                    label: '米'
                },{
                    value: 'km',
                    label: '千米'
                },{
                    value: 'mile',
                    label: '海里'
                },{
                    value: 'zhang',
                    label: '丈'
                },
            ],
            items:[
                {
                    icon:"kjjl",
                    name:"空间距离"
                },{
                    icon:"tdjl",
                    name:"贴地距离",
                },{
                    icon:"paomian",
                    name:"剖面测量",
                },{
                    icon:"spmj",
                    name:"水平面积",
                },{
                    icon:"jiaodu",
                    name:"角度测量",
                },{
                    icon:"tiedi",
                    name:"贴地面积",
                },{
                    icon:"gdc",
                    name:"高差测量",
                },{
                    icon:"sanjiao",
                    name:"三角测量",
                }
            ],
            draws:[
                {
                    icon:"hzd",
                    img:"/img/homeimg/1.png",
                    type:1
                }, {
                    icon:"shuiyuandian",
                    img:"/img/homeimg/2.png",
                    type:2
                }, {
                    icon:"xiaofangche",
                    img:"/img/homeimg/3.png",
                    type:3
                },
            ],
            measure:null,
            unit:"auto",
            graphicLayerbiaohui:null,
        }
    },
    mounted(){
        this.initDrawLayer();
        // console.log("globalmap",window.globalmap);
        

    },
    methods:{

        initMeasure(){ // 图上测量

            this.measure = new mars3d.thing.Measure({
                hasEdit: true,
                isAutoEditing: true,
                label: {
                    color: "#ffffff",
                    font_family: "楷体",
                    font_size: 20,
                    background: false
                }
            })

            window.globalmap.addThing(this.measure)

            this.measure.on(mars3d.EventType.start, function (e) {
                console.log("开始异步分析", e)
            })
            this.measure.on(mars3d.EventType.end, function (e) {
                console.log("完成异步分析", e)
            })
        },
        startMeasure(name){
            if(this.measure == null){
                this.initMeasure();
            }
            switch(name){
                case '空间距离': this.measureLength();
                    break;
                case '贴地距离': this.measureSurfaceLength();
                    break;
                case '剖面测量': this.measureSection();
                    break;
                case '水平面积': this.measureArea();
                    break;
                case '贴地面积': this.measureSurfaceeArea();
                    break;
                case '高差测量': this.measureHeight();
                    break;
                case '角度测量': this.measureAngle();
                    break;
                case '三角测量': this.measureTriangleHeight();
                    break;
            }
        },
        measureLength() { //空间距离
            this.measure.distance({
                showAddText: true,
                unit: "auto",
                label: {
                    // 自定义显示label的graphic类型
                    type: "div",
                    updateText: function (text, graphic) {
                        // updateText是必须，用于动态更新 text
                        graphic.html = `<div class="marsGreenGradientPnl" >${text}</div>`
                    },
                    // 下面是graphic对应类型本身的参数
                    html: `<div class="marsGreenGradientPnl" ></div>`,
                    horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
                    verticalOrigin: Cesium.VerticalOrigin.BOTTOM
                }
            })
        },
        measureSurfaceLength() { //贴地距离
            this.measure.distanceSurface({
                showAddText: true,
                unit: this.unit,
                exact: false // 是否进行精确计算， 传false时是否快速概略计算方式，该方式计算精度较低，但计算速度快，仅能计算在当前视域内坐标的高度
                // unit: 'm', //支持传入指定计量单位
                // style: {
                //   color: '#ffff00',
                //   width: 3,
                //   clampToGround: true //是否贴地
                // }
            })
        },
        measureSection() { // 剖面测量
            this.measure.section({
                unit: this.unit,
                // maxPointNum:2,
                splitNum: 300, // 插值次数
                exact: false // 是否进行精确计算， 传false时是否快速概略计算方式，该方式计算精度较低，但计算速度快，仅能计算在当前视域内坐标的高度
            })
        },
        measureArea() { //水平面积
            this.measure.area({
                unit: this.unit,
                // style: {
                //   color: '#00fff2',
                //   opacity: 0.4,
                //   outline: true,
                //   outlineColor: '#fafa5a',
                //   outlineWidth: 1,
                //   clampToGround: false //贴地
                // }
            })
        }, 
        measureSurfaceeArea() { //贴地面积
            this.measure.areaSurface({
                unit: this.unit,
                style: {
                color: "#ffff00"
                },
                splitNum: 10, // step插值分割的个数
                exact: false // 是否进行精确计算， 传false时是否快速概略计算方式，该方式计算精度较低，但计算速度快，仅能计算在当前视域内坐标的高度
            })
        },
        measureHeight() { // 高度差
            this.measure.height()
        },
        measureAngle() { // 方位角
            this.measure.angle()
        },
        measureTriangleHeight() { // 三角测量
            this.measure.heightTriangle()
        },
        measureClear(){ //清空测量
            this.measure.clear();
        },
        drawClear(){
            this.graphicLayerbiaohui.clear()
            mars3d.widget.disable("widgets/plotAttr/widget.js")
        },

        initDrawLayer(){ // 图上标绘
            this.graphicLayerbiaohui = new mars3d.layer.GraphicLayer({
                name:"标绘图层",
                id:10101,
                isRestorePositions: true,
                hasEdit: true,
                isAutoEditing: true // 绘制完成后是否自动激活编辑
            })
            window.globalmap.addLayer(this.graphicLayerbiaohui)
            // 在layer上绑定监听事件
            let _this = this;
            this.graphicLayerbiaohui.on(mars3d.EventType.click, function (e) {
                _this.showEditor(e)
            })

            this.graphicLayerbiaohui.on(mars3d.EventType.drawCreated, function (e) {
               
            })

            this.graphicLayerbiaohui.on(mars3d.EventType.editStop, function (e) {
                mars3d.widget.disable("widgets/plotAttr/widget.js")
            })

            this.bindLayerContextMenu() // 在图层绑定右键菜单,对所有加到这个图层的矢量数据都生效

        },

        showEditor(e) {
            var graphic = e.graphic
            if (!graphic._conventStyleJson) {
                graphic.options.style = graphic.toJSON().style //因为示例中的样式可能有复杂对象，需要转为单个json简单对象
                graphic._conventStyleJson = true //只处理一次
            }
            var plotAttr = mars3d.widget.getClass("widgets/plotAttr/widget.js")
            if (plotAttr && plotAttr.isActivate) {
                plotAttr.startEditing(graphic, graphic.coordinates)
            } else {
                mars3d.widget.activate({
                map: window.globalmap,
                uri: "widgets/plotAttr/widget.js",
                name: "属性编辑",
                graphic: graphic,
                lonlats: graphic.coordinates
                })
            }
        },
        bindLayerContextMenu() {
            this.graphicLayerbiaohui.bindContextMenu([
                {
                text: "开始编辑对象",
                icon: "fa fa-edit",
                show: function (e) {
                    var graphic = e.graphic
                    if (!graphic || !graphic.hasEdit) {
                    return false
                    }
                    return !graphic.isEditing
                },
                callback: (e) => {
                    var graphic = e.graphic
                    if (!graphic) {
                    return false
                    }
                    if (graphic) {
                        this.graphicLayerbiaohui.startEditing(graphic)
                    }
                }
                },
                {
                text: "停止编辑对象",
                icon: "fa fa-edit",
                show: function (e) {
                    var graphic = e.graphic
                    if (!graphic || !graphic.hasEdit) {
                    return false
                    }
                    return graphic.isEditing
                },
                callback: (e) => {
                    var graphic = e.graphic
                    if (!graphic) {
                    return false
                    }
                    if (graphic) {
                    graphic.stopEditing()
                    }
                }
                },
                {
                text: "删除对象",
                icon: "fa fa-trash-o",
                show: (event) => {
                    var graphic = event.graphic
                    if (!graphic || graphic.isDestroy) {
                    return false
                    } else {
                    return true
                    }
                },
                callback: (e) => {
                    var graphic = e.graphic
                    if (!graphic) {
                    return
                    }
                    var parent = graphic.parent // 右击是编辑点时
                    this.graphicLayerbiaohui.removeGraphic(graphic)
                    if (parent) {
                    this.graphicLayerbiaohui.removeGraphic(parent)
                    }
                }
                },
                {
                text: "计算长度",
                icon: "fa fa-medium",
                show: function (e) {
                    var graphic = e.graphic
                    if (!graphic) {
                    return false
                    }
                    return (
                    graphic.type === "polyline" ||
                    graphic.type === "polylineP" ||
                    graphic.type === "curve" ||
                    graphic.type === "curveP" ||
                    graphic.type === "polylineVolume" ||
                    graphic.type === "polylineVolumeP" ||
                    graphic.type === "corridor" ||
                    graphic.type === "corridorP" ||
                    graphic.type === "wall" ||
                    graphic.type === "wallP"
                    )
                },
                callback: (e) => {
                    var graphic = e.graphic
                    var strDis = mars3d.MeasureUtil.formatDistance(graphic.distance)
                    alert("该对象的长度为:" + strDis)
                }
                },
                {
                text: "计算周长",
                icon: "fa fa-medium",
                show: function (e) {
                    var graphic = e.graphic
                    if (!graphic) {
                    return false
                    }
                    return (
                    graphic.type === "circle" ||
                    graphic.type === "circleP" ||
                    graphic.type === "rectangle" ||
                    graphic.type === "rectangleP" ||
                    graphic.type === "polygon" ||
                    graphic.type === "polygonP"
                    )
                },
                callback: (e) => {
                    var graphic = e.graphic
                    var strDis = mars3d.MeasureUtil.formatDistance(graphic.distance)
                    alert("该对象的周长为:" + strDis)
                }
                },
                {
                text: "计算面积",
                icon: "fa fa-reorder",
                show: function (e) {
                    var graphic = e.graphic
                    if (!graphic) {
                    return false
                    }
                    return (
                    graphic.type === "circle" ||
                    graphic.type === "circleP" ||
                    graphic.type === "rectangle" ||
                    graphic.type === "rectangleP" ||
                    graphic.type === "polygon" ||
                    graphic.type === "polygonP" ||
                    graphic.type === "scrollWall" ||
                    graphic.type === "water"
                    )
                },
                callback: (e) => {
                    var graphic = e.graphic
                    var strArea = mars3d.MeasureUtil.formatArea(graphic.area)
                    alert("该对象的面积为:" + strArea)
                }
                }
            ])
        },
        drawEntity(type,val){
            if(type == "label"){
                // 图标
                this.drawMarker(val);
            }else if(type == 'polygon'){
                // 面
                switch(val){
                    case 'polygon': this.drawPolygon("polygon");
                        break;
                    case 'curve': this.drawCurve();
                        break;
                    case 'circle': this.drawPolygon("circle");
                        break;
                    case 'attackArrow': this.drawPolygon("attackArrow");
                        break;
                    case 'doubleArrow': this.drawPolygon("doubleArrow");
                        break;
                    case 'closeVurve': this.drawPolygon("closeVurve");
                        break;
                }
            }
        },
            //   
        drawMarker(img) { //图上标绘
            this.graphicLayerbiaohui.startDraw({
                type: "billboard",
                style: {
                scale: 0.6,
                clampToGround: true,
                image: img,
                horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
                verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
                label: {
                    // 不需要文字时，去掉label配置即可
                    text: "文字标签",
                    font_size: 26,
                    color: "#ffffff",
                    outline: true,
                    outlineColor: "#000000",
                    pixelOffsetY: -110
                }
                }
            })
        },
        drawPolygon(type) {
            this.graphicLayerbiaohui.startDraw({
                type: type,
                style: {
                color: "#ffff00",
                opacity: 0.5,
                outline: true,
                outlineColor: "#ffffff",
                outlineWidth: 2.0,
                clampToGround: true
                }
            })
        },
        drawCurve() {
            this.graphicLayerbiaohui.startDraw({
                type: "curve",
                style: {
                color: "#ffff00",
                width: 3,
                clampToGround: true
                }
            })
        },
        selectPosition(type,img){
              let _this = this;
              window.globalmap.setCursor("crosshair")
              window.globalmap.once(mars3d.EventType.click, function (event) {
                  
                  const cartesian = event.cartesian
                  const point = mars3d.LngLatPoint.fromCartesian(cartesian)
                  point.format() 
                  window.globalmap.setCursor("auto")
                  _this.$emit("drawLable",{type:type,lng:point.lng,lat:point.lat})
              })
          },
    }
  }
</script>

<style scoped>
  .box{
      width:100%;
      height:100%;
      background-image: url(/img/biaohui.png);
      background-size:100% 100%;
  }
  .tab-container{
      width:210px;
      height:50px;  
      text-align: left; 
  }
  .tab-button{
      height:50px;
      line-height:50px;
      padding-left: 35px;
      font-size: 18px;
      color: #fff;
      padding-top: 4px;
  }

  .box-container{
      margin:15px;
      height: calc( 100% - 90px);
  }
  .measure{
      width:100%;
      height:100%;
  }

  .measure-container{
      height:50%;
  }
  .measure-container::after{
      content:"";
      height:0;
      clear:both;
      display:block;
      visibility: hidden;
  }

    .box-container .item{
        width:25%;
        height:50%;
        float:left;
        text-align:center;
        color:#fff;
        cursor:pointer;
    }
.box-container .item .item-icon{
    width:60px;
    margin:0px auto;
}
.box-container .item .item-icon img{
    width:40px;
}

.draw-container::after{
    content:"";
      height:0;
      clear:both;
      display:block;
      visibility: hidden;
}

  .draw-container .item{
    width:33.3%;
    height:50%;
    margin:6px 0px;
  } 

  .draw-tools{
      width:100%;
      height:50%;
  }

  .draw-tools .draw-item{
      width: calc(33.3% - 24px);
      float: left;
      height: calc(100% - 24px);
      max-height:120px;
      margin:12px;
      background-image:url(/img/draw-tool-bg.png);
      background-size: 100% 100%;
  }
</style>