<template>
  <!-- 绘制地图区域组件（圆、矩形、多边形） -->
  <el-dialog
    v-model="state.showDialog"
    :title="props.title"
    @close="handleClose"
    destroy-on-close
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    align-center
    draggable
    :style="{ padding: 0, width: dialogWidth, height: dialogHeight }">
    <div class="position" v-if="state.showDialog">
      <div class="hover-txt" :style="{left: state.pointX+'px', top: state.pointY+'px'}">{{ hoverTxt }}</div>
      <div ref="mapRef" id="container"></div>
      <div class="search_box">
        <div class="change-btn">
          <el-input-number
            v-model="state.compassVal"
            :min="-360"
            :max="360"
            :precision="0"
            placeholder="请输入"
            style="width: 150px;margin-right: 12px;"
            @keydown.enter="handleCompass"
            @blur="handleCompass"
            @change="handleCompass"
          />
          <el-button :type="state.stateLayer === 0 ? '' : 'primary'" @click="changeMap"> 卫星地图 </el-button>
          <el-button :type="state.stateLayer === 1 ? '' : 'primary'" @click="changeMap"> 标准地图 </el-button>
        </div>
        <div class="btn">
          <el-button
            type="primary"
            @click="handleEditor(1)"
            :disabled="state.drawState === 1 || state.drawType === 2 || state.drawType === 3 || props.isView">
            {{ state.areaLayer && state.drawType === 1 ? '编辑圆' : '添加圆' }}
          </el-button>
          <el-button
            type="primary"
            @click="handleEditor(2)"
            :disabled="state.drawState === 1 || state.drawType === 1 || state.drawType === 3 || props.isView">
            {{ state.areaLayer && state.drawType === 2 ? '编辑矩形' : '添加矩形' }}
          </el-button>
          <el-button
            type="primary"
            @click="handleEditor(3)"
            :disabled="state.drawState === 1 || state.drawType === 1 || state.drawType === 2 || props.isView">
            {{ state.areaLayer && state.drawType === 3 ? '编辑多边形' : '添加多边形' }}
          </el-button>
          <el-button type="danger" @click="handleClear" :disabled="props.isView">清除</el-button>
          <el-button type="primary" @click="handleEmit" :disabled="props.isView">完成</el-button>
        </div>
      </div>
      <!-- 绘制图形坐标信息 -->
      <div class="icon-right">
        <el-icon
          v-if="state.hidden"
          size="30"
          style="cursor: pointer;"
          @click="state.hidden = !state.hidden">
          <CaretLeft />
        </el-icon>
      </div>
      <div
        class="area-point-info"
        v-if="state.areaLayer && state.drawType !== 0"
        :style="{right: state.hidden ? '-1000px' : '20px'}">
        <div>
          <el-icon
            v-if="!state.hidden"
            size="30"
            style="cursor: pointer;"
            @click="state.hidden = !state.hidden">
            <CaretRight />
          </el-icon>

        </div>
        <div class="main-con">
          <!-- 圆 -->
          <div class="box" v-if="state.drawType === 1">
            <div class="item">
              <div class="title">圆心</div>
              <div>
                <span>经度：</span>
                <el-input-number
                  v-model="state.areaLayerInfo.path[0]"
                  placeholder="经度"
                  style="width: 150px"
                  :min="-180"
                  :max="180"
                  :precision="6"
                  :controls="false"
                  @keydown.enter="handleChangeLayer"
                  @blur="handleChangeLayer"
                  @change="handleChangeLayer"
                />
                <span>纬度：</span>
                <el-input-number
                  v-model="state.areaLayerInfo.path[1]"
                  placeholder="经度"
                  style="width: 150px"
                  :min="-90"
                  :max="90"
                  :precision="6"
                  :controls="false"
                  @keydown.enter="handleChangeLayer"
                  @blur="handleChangeLayer"
                  @change="handleChangeLayer"
                />
              </div>
            </div>
            <div class="item">
              <div class="title">半径</div>
              <div>
                <span>单位：</span>
                <el-input-number
                  v-model="state.areaLayerInfo.radius"
                  placeholder="半径："
                  style="width: 150px"
                  :min="1"
                  :precision="6"
                  :controls="false"
                  @keydown.enter="handleChangeLayer"
                  @blur="handleChangeLayer"
                  @change="handleChangeLayer"
                />
                <span style="text-align: left;padding-left: 10px;">米</span>
              </div>
            </div>
          </div>
          <!-- 矩形或多边形 -->
          <div class="box" v-if="state.drawType === 2 || state.drawType === 3">
            <div class="item" v-for="(item,index) in state.areaLayerInfo.path">
              <div class="title">坐标{{ index + 1 }}</div>
              <div>
                <span>经度：</span>
                <el-input-number
                  v-model="item[0]"
                  placeholder="经度"
                  style="width: 150px"
                  :min="-180"
                  :max="180"
                  :precision="6"
                  :controls="false"
                  @keydown.enter="handleChangeLayer"
                  @blur="handleChangeLayer"
                  @change="handleChangeLayer"
                />
                <span>纬度：</span>
                <el-input-number
                  v-model="item[1]"
                  placeholder="经度"
                  style="width: 150px"
                  :min="-90"
                  :max="90"
                  :precision="6"
                  :controls="false"
                  @keydown.enter="handleChangeLayer"
                  @blur="handleChangeLayer"
                  @change="handleChangeLayer"
                />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </el-dialog>
</template>


<script setup>
import AMapLoader from '@amap/amap-jsapi-loader';
export default {
  name:'regionMAp',
  props:{
    // 区域范围
    areaRangeInfo: {
      type: String,
      default: '',
    },
    // 弹窗大小
    size: {
      type: Number,
      default: 2,
    },
    // 查看定位
    isView: {
      type: Boolean,
      default: false,
    },
    // 弹窗标题
    title: {
      type: String,
      default: '选取区域',
    },
  },
  data(){
    return{
      mapObj: null,   //定义全局地图
      mouseTool:null,//鼠标绘图工具
      radio:'', //图案类型
      circle:null,//圆形
      circlecenter:[],//圆心坐标
      circleEditor:null, //圆形编辑器
      radius:0,//半径
      circleArea:'',//圆形面积
      polygon:null,//多边形
      polygonPath:[],//获取多边形点坐标
      polygonEditor:null,//多边形编辑工具
      polygonArea:'',//多边形面积
    }
  },
  mounted(){
    this.initMap()
  },
  methods:{
    initMap(){
      let map = new AMap.Map('amap-box', {
        resizeEnable: true, //是否监控地图容器尺寸变化
        zoom:11, //初始化地图层级
        center: [116.397428, 39.90923] //初始化地图中心点
      });

      //左侧鱼骨图显示
      let toolbar = new AMap.ToolBar();
      map.addControl(toolbar);

      //右上角地图切换效果显示
      let maptype = new AMap.MapType({
        defaultType: 0, //使用2D地图
        showRoad:true  //叠加路网图层
      });
      map.addControl(maptype);

      self.mapObj = map;
      //生成鼠标绘图工具
      self.mouseTool = new AMap.MouseTool(self.mapObj);
      //绘制 方法
      self.mouseTool.on('draw',function(e){
        self.mapObj.setDefaultCursor("crosshair");
        if(self.radio=='circle'){
          //计算圆心坐标
          let x = e.obj.getPath()[8].lng ; //圆心的x轴坐标
          let y = e.obj.getPath()[0].lat; //圆心的y轴坐标
          self.circlecenter=[x,y]; //圆心坐标
          //计算圆的半径
          let m1 = new AMap.Marker({
            position: new AMap.LngLat(e.obj.getPath()[0].lng,e.obj.getPath()[0].lat)
          });
          let m2 = new AMap.Marker({
            position:new AMap.LngLat(e.obj.getPath()[17].lng,e.obj.getPath()[17].lat)
          });
          let p1 = m1.getPosition();
          let p2 = m2.getPosition();
          let distance = Math.round(p1.distance(p2));
          self.radius=distance;
          //圆的面积
          self.circleArea = 3.14*(self.radius*self.radius)
          self.drawcircle(); //添加圆形到地图
          self.mouseTool.close(true) //去掉蓝色底层

        }else if(self.radio=='polygon'){
          self.polygonPath=e.obj.getPath();
          self.drawpolygon();
          self.mouseTool.close(true) //去掉蓝色底层
        }
      });
    },
    addPhoto(){
      let self = this;
      self.draw(self.radio);
    },
    //判断需要画的图形类型
    draw(type) {
      let self = this;
      self.mapObj.setDefaultCursor("crosshair");
      switch (type) {
        case 'polygon':{
          self.mapObj.clearMap(); //清除地图
          self.radius='';
          self.circleArea="";
          self.mouseTool.polygon({});
          break;
        }
        case 'circle':{
          self.mapObj.clearMap();
          self.polygonArea='';
          self.mouseTool.circle({});
          break;
        }
      }
    },
    //添加圆并且编辑
    drawcircle(){
      let self = this;
      self.circle = new AMap.Circle({   //圆形编辑器的样式
        map: self.mapObj,
        center:self.circlecenter,
        radius:self.radius,
        strokeColor: "#F33",
        strokeOpacity: 1,
        strokeWeight: 1,
        fillColor: "#fff",
        fillOpacity: 0.5
      });
      self.circle.setMap(self.mapObj)
      // 缩放地图到合适的视野级别
      self.mapObj.setFitView([ self.circle ]);
      self.circleEditor = new AMap.CircleEditor(self.mapObj,self.circle);   //创建多边形编辑器对象
      self.circleEditor.open();    //打开多边形编辑器
      self.mapObj.setDefaultCursor("crosshair");
      self.circleEditor.on('adjust', function(event) {
        self.radius=event.radius; //获取圆形的半径
        self.circleArea = 3.14*(self.radius*self.radius) //面积
      });
      self.circleEditor.on('move', function(event) {
        console.log(event)//获取圆心坐标
      });

    },
    //添加多边形到地图
    drawpolygon(){
      let self = this;
      self.polygon = new AMap.Polygon({
        path: self.polygonPath,
        fillColor: '#fff', // 多边形填充颜色
        borderWeight: 1, // 线条宽度，默认为 1
        strokeWeight: 1,
        fillOpacity: 0.5,
        strokeColor: 'red', // 线条颜色
      });
      self.mapObj.add(self.polygon); //多边形添加到地图层里
      self.mapObj.setFitView(); //显示多边形图案

      self.polygonEditor = new AMap.PolyEditor(self.mapObj,self.polygon);   //创建多边形编辑器对象
      self.polygonEditor.open();    //打开多边形编辑器
      self.polygonArea = AMap.GeometryUtil.ringArea(self.polygonPath);//初始化计算面积
      self.polygonEditor.on('adjust', function(event) {  //编辑多边形时候，随时监听坐标点并计算面积
        self.polygonArea = AMap.GeometryUtil.ringArea(self.polygonPath);
        //console.log(self.polygonPath) 获取多边形的点
      });

    },
    //清除所有图形
    clearAll(){
      let self = this;
      self.radio='';
      self.radius='';
      self.circleArea="";
      self.polygonArea='';
      self.mapObj.clearMap();
      self.mapObj.setDefaultCursor();
    },
  }

}
</script>
<style lang="scss" scoped>
.position {
  box-sizing: border-box;
  padding: 0 20px;
  width: 100%;
  height: 100%;
  position: relative;
  #container {
    width: calc(100% - 40px);
    height: calc(100% - 50px);
    position: absolute;
    top: 50px;
    left: 20px;
  }
  .hover-txt {
    position: absolute;
    z-index: 50;
    border: 1px solid #303133;
    background: #fff;
    color: #303133;
    padding: 2px 4px;
  }
  .search_box {
    width: 100%;
    height: 50px;
    background-color: #fff;
    position: absolute;
    top: 0;
    left: 20px;
    z-index: 50;
    .change-btn {
      position: absolute;
      right: 40px;
    }
    .btn {
      margin-right: 20px;
      display: flex;
      align-items: center;
      .search_input {
        width: 100px;
        margin-right: 10px;
      }
    }
  }
  .icon-right {
    position: absolute;
    top: 60px;
    right: 10px;
    background: #fff;
    padding-right: 10px;
  }
  .area-point-info {
    position: absolute;
    top: 60px;
    font-size: var(--size2);
    overflow: hidden;
    background: #fff;
    box-shadow: 4px 4px 40px rgba(0, 0, 0, 0.05);
    border-color: rgba(0, 0, 0, 0.05);
    // width: 490px;
    z-index: 50;
    padding: 10px;
    .main-con {
      max-height: 450px;
      overflow-y: auto;
    }
    .box {
      margin-top: 10px;
      .item {
        display: flex;
        align-items: center;
        margin-bottom: 15px;
        .title {
          font-size: var(--size1);
          width: 60px;
          padding-left: 10px;
          line-height: 24px;
        }
        span {
          font-size: var(--size);
          color: #909399;
          display: inline-block;
          width: 60px;
          text-align: right;
        }
      }
    }
  }
}
</style>