<template>
  <div id='measurement2d' class='measure' v-drag="'.measure .ant-card-head'">
    <a-card v-show='value' title='测量' class='measurePanel unselectable'>
      <a-icon slot='extra' type='close' class='panelClose' @click="closeTool" />
      <a-radio-group v-model='mesaureType' @change='onChange'>
        <a-radio value='distance' @click='doMeasure'>
          <img src='@/assets/MeasureTool32.png' width='20'>
          测量距离
        </a-radio>
        <a-radio value='area' @click='doMeasure'>
          <img src='@/assets/MeasureAreaTool32.png' width='20'>
          测量面积
        </a-radio>
      </a-radio-group>
    </a-card>

  </div>
</template>

<script>
import AreaMeasurement2D from '@arcgis/core/widgets/AreaMeasurement2D';
import DistanceMeasurement2D from '@arcgis/core/widgets/DistanceMeasurement2D';

export default {
  name: 'Measurement2D',
  inject: ['basicMap'],
  props: {
    value: {
      type: Boolean,
      default: false
    },
  },
  data() {
    return {
      mesaureType:"",
      areaMeasurement2D: {},
      distanceMeasurement2D: {}
    };
  },
  watch:{
    mesaureType:function(val) {
      if (val == 'area') {
        if(this.distanceMeasurement2D.visible){
          this.distanceMeasurement2D.visible = false;
        }
        this.areaMeasurement2D = new AreaMeasurement2D({
          view: this.basicMap.mapView,
          unitOptions: ['square-meters', 'square-kilometers', 'hectares']
        });
        this.areaMeasurement2D.viewModel.start();
        this.basicMap.mapView.ui.add(this.areaMeasurement2D, 'bottom-left');
      } else if(val=='distance'){
        if(this.areaMeasurement2D.visible){
          this.areaMeasurement2D.visible = false;
        }
        this.distanceMeasurement2D = new DistanceMeasurement2D({
          view: this.basicMap.mapView,
          unitOptions: ['meters', 'kilometers']
        });
        this.distanceMeasurement2D.viewModel.start();
        // this.distanceMeasurement2D.viewModel.palette.handleWidth = 8;
        // this.distanceMeasurement2D.viewModel.palette.handleColor = [255, 128, 0, .5];
        // this.distanceMeasurement2D.viewModel.palette.pathWidth = 5;
        // this.distanceMeasurement2D.viewModel.palette.pathPrimaryColor = [255, 128, 0, 255];
        this.distanceMeasurement2D.viewModel.palette.pathSecondaryColor = [255, 128, 0, 255];
        this.basicMap.mapView.ui.add(this.distanceMeasurement2D, 'bottom-left');
      }else{
        if(this.areaMeasurement2D.visible){
          this.areaMeasurement2D.visible = false;
        }
        if(this.distanceMeasurement2D.visible){
          this.distanceMeasurement2D.visible = false;
        }
      }
    }
  },
  mounted() {
  },
  methods: {
    onChange(e) {
      this.mesaureType = e.target.value;
    },
    doMeasure(e){
      let cur_type = e.target.value;
      if(cur_type == this.mesaureType){
        if(this.areaMeasurement2D.visible){
          this.areaMeasurement2D.viewModel.start();
        }
        if(this.distanceMeasurement2D.visible){
          this.distanceMeasurement2D.viewModel.start();
        }
      }
    },
    initTool(){
      this.mesaureType = "distance";
    },
    closeTool(){
      this.mesaureType = "";
      this.$emit('input',false);
    }
  }

};
</script>

<style >
.measure {
  position: fixed;
  /*top: 75px;*/
  /*left: 70px;*/
}
.measure .measurePanel{
  width: 300px;
  box-shadow: 0 0 5px #357ee5;
}
</style>
