<template>
  <div class="regionalSty">
    <div class="searchSty">
      <el-form :model="queryParams" :inline="true">
        <el-form-item label="区域名称:">
          <el-input v-model="queryParams.regionalName" placeholder="请输入区域名称" clearable></el-input>
        </el-form-item>
        <el-form-item label="区域类型:">
          <el-select v-model="queryParams.regionalType" clearable placeholder="请选择">
            <el-option
              v-for="item in regionalTypeOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleQuery" icon="el-icon-search" size="small">搜索</el-button>
          <el-button  @click="handleReset" icon="el-icon-refresh-left" size="small">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="tableSty">
      <el-row>
        <el-col :span="24" style="margin-bottom: 10px;">
          <el-button type="primary" @click="hanleOpt('add')" icon="el-icon-plus" size="small">新增</el-button>
        </el-col>
        <el-col :span="24">
          <el-table
            :data="tableData"
            style="width: 100%">
            <el-table-column
              type="index"
              label="序号"
              width="80">
            </el-table-column>
            <el-table-column
              prop="regionalName"
              label="区域名称"
              width="150">
            </el-table-column>
            <el-table-column
              prop="regionalType"
              label="类型">
            </el-table-column>
            <el-table-column
              prop="bz"
              label="备注">
            </el-table-column>
            <el-table-column
              prop="opt"
              label="操作"
              width="150">
              <template slot-scope="scope">
                <span @click="hanleOpt('edit',scope.row)">编辑</span>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
    </div>
    <el-dialog
      :title="dialogParams.title"
      :visible.sync="dialogParams.dialogVisible"
      width="80%"
      @close="handleDialogClose">
      <el-form :model="dialogParams" :inline="true">
        <el-form-item label="区域名称:">
          <el-input v-model="dialogParams.regionalName" placeholder="请输入区域名称" clearable></el-input>
        </el-form-item>
        <el-form-item label="区域类型:">
          <el-select v-model="dialogParams.regionalType" clearable placeholder="请选择">
            <el-option
              v-for="item in regionalTypeOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="地理位置:">
          <el-input v-model="dialogParams.region" disabled  suffix-icon="el-icon-map-location" placeholder="请输入内容"></el-input>
        </el-form-item>
      </el-form>
      <el-row>
        <el-col :span="24">
          <div id="mapContainer" style="width: 100%; height: 500px;"></div>
          <div class="input-card" style="width: 200px">
            <h4 style="margin-bottom: 10px; font-weight: 600">利用mouseTool绘制覆盖物</h4>
            <el-button class="btn" @click="drawPolyline()" style="margin-bottom: 5px">绘制线段</el-button>
            <el-button class="btn" @click="drawPolygon()" style="margin-bottom: 5px">绘制多边形</el-button>
            <el-button class="btn" @click="drawRectangle()" style="margin-bottom: 5px">绘制矩形</el-button>
            <el-button class="btn" @click="drawCircle()" style="margin-bottom: 5px">绘制圆形</el-button>
          </div>
        </el-col>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogParams.dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogParams.dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>

  </div>
</template>
<script src="https://webapi.amap.com/maps?v=1.4.15&key=65f6591039d0e723f91a2bfab50712f7&plugin=AMap.MouseTool"></script>
<script>
import AMapLoader from '@amap/amap-jsapi-loader';

export default {
  name: "index",
  data(){
    return{
      map: null,
      userLocation: { latitude: null, longitude: null },
      dialogParams:{
        title:'新增测试',
        dialogVisible:false,
        regionalType:'',
        regionalName:''
      },
      queryParams:{
        regionalName:'',
        regionalType:''
      },
      regionalTypeOptions:[
        {
          label:'经营区域',
          value:'经营区域'
        },
        {
          label:'流动区域',
          value:'流动区域'
        }
      ],
      mouseTool:null,
      tableData:[
        {
          regionalName:'测试名称',
          regionalType:'经营区域',
          bz:'sdsaddssds'
        }
      ],
      path:[
        [116.403322, 39.920255],
        [116.410703, 39.897555],
        [116.402292, 39.892353],
        [116.389846, 39.891365]
      ]
    }
  },
  beforeDestroy() {
    //清理资源
    // this.map&& this.map.destroy();
  },
  mounted() {
    // this.getUserLocation();
  },
  methods:{
    initializeMap() {
      AMapLoader.reset();
      AMapLoader.load({
        "key": "65f6591039d0e723f91a2bfab50712f7",// 申请好的Web端开发者Key，首次调用 load 时必填
        "version": "2.0",   // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        "plugins": ['AMap.ToolBar', 'AMap.Driving','AMap.InfoWindow',
          'AMap.ContextMenu',
          'AMap.Heatmap',
          'AMap.MouseTool',
          'AMap.RangingTool',
          'AMap.CircleEditor',
          'AMap.PolyEditor',
          'AMap.VectorMap',
          'AMap.ToolBar',
          'AMap.Scale',
          'AMap.OverView',
          'AMap.MapType',
          'AMap.Geolocation'], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
        "AMapUI": {
          "version": "1.1",
          "plugins": []
        },
        Loca: {
          version: '2.0' //数据可视化
        }
      }).then((AMap)=>{
        console.log('打印AMap====>',AMap);
        this.map = new AMap.Map('mapContainer', {//设置地图容器id
          viewMode: '2D', //是否为3D地图模式
          zoom: 16, //初始化地图层级
          center: this.centerPoint,//初始化地图中心点
        });
        var toolBar = new AMap.ToolBar({
          position:{
            top:'110px',
            right:'30px'
          }

        })
        // this.map.on('rightclick', (e)=> {
        //   this.rightclickObj(); //定义右键内容
        //   this.contextMenu.open(this.map, e.lnglat);
        //   this.contextMenuPositon = e.lnglat; //右键菜单位置
        // });
        var mouseTool = new AMap.MouseTool(this.map);
        this.mouseTool = mouseTool;
      })
    },
    //强调说明：自定义的dom是基于地图对象生成的，并不能像vue一样绑定事件，这里采用jQuery的方式出发的事件。如下
    //定义右键内容
    rightclickObj() {
      let that = this;
      //���义内容
      let content = [];
      content.push("<div class='context_menu'>");
      content.push(
        "<p class='menu-list menu-list-edit-start' >启用编辑</p>"
      );
      content.push(
        "<p class='menu-list menu-list-edit-end' >结束编辑</p>"
      );
      content.push(
        "<p class='menu-list menu-list-get-area' >计算面积</p>"
      );
      content.push(
        "<p class='menu-list menu-list-remove' >移除图形</p>"
      );
      if (that.circleEditor) {
        content.push(
          "<p class='menu-list menu-list-radius'>半径</p>"
        );
      }
      content.push('</div>');
      //创建右键实例并添加自定义的内容

      that.contextMenu = new AMap.ContextMenu({
        isCustom: true,
        content: content.join('')
      });
    },
    drawPolyline () {
      this.mouseTool.polyline({
        strokeColor: "#3366FF",
        strokeOpacity: 1,
        strokeWeight: 6,
        // 线样式还支持 'dashed'
        strokeStyle: "solid",
        // strokeStyle是dashed时有效
        // strokeDasharray: [10, 5],
      });
      console.log('打印this.mouseTool',this.mouseTool)
      this.mouseTool.on('draw', function(event) {
        // event.obj 为绘制出来的覆盖物对象
        console.log('覆盖物对象绘制完成',event)
      })
    },
    drawPolygon () {
      this.mouseTool.polygon({
        strokeColor: "#FF33FF",
        // strokeOpacity: 1,
        strokeWeight: 6,
        strokeOpacity: 0.2,
        fillColor: '#1791fc',
        fillOpacity: 0.4,
        // 线样式还支持 'dashed'
        strokeStyle: "solid",
        // strokeStyle是dashed时有效
        // strokeDasharray: [30,10],
      })
      this.mouseTool.on('draw', function(event) {
        let geoJSON = event.obj.getPath(); // 获取矢量图形的坐标数组
        // 为矢量图形设置唯一标识和zIndex
        event.obj.setExtData({ uniqueId: 'id_' + new Date().getTime() });
        event.obj.setOptions({ zIndex: 100 });

        // 其他矢量图形处理逻辑...
        // event.obj 为绘制出来的覆盖物对象
        console.log('覆盖物对象绘制完成',event)
      })
    },
    drawCircle () {
      this.mouseTool.circle({
        strokeColor: "#FF33FF",
        // strokeOpacity: 1,
        strokeWeight: 6,
        strokeOpacity: 0.2,
        fillColor: '#1791fc',
        fillOpacity: 0.4,
        strokeStyle: 'solid',
        // 线样式还支持 'dashed'
        // strokeDasharray: [30,10],
      })
      this.mouseTool.on('draw', function(event) {
        let geoJSON = event.obj.getPath(); // 获取矢量图形的坐标数组
        // 为矢量图形设置唯一标识和zIndex
        event.obj.setExtData({ uniqueId: 'id_' + new Date().getTime() });
        event.obj.setOptions({ zIndex: 100 });

        // 其他矢量图形处理逻辑...
        // event.obj 为绘制出来的覆盖物对象
        console.log('覆盖物对象绘制完成',event)
      })
    },
    drawRectangle () {
      this.mouseTool.rectangle({
        strokeColor:'red',
        strokeOpacity:0.5,
        strokeWeight: 6,
        fillColor:'blue',
        fillOpacity:0.5,
        // strokeStyle还支持 solid
        strokeStyle: 'solid',
        // strokeDasharray: [30,10],
      })
      this.mouseTool.on('draw', function(event) {
        let geoJSON = event.obj.getPath(); // 获取矢量图形的坐标数组
        // 为矢量图形设置唯一标识和zIndex
        event.obj.setExtData({ uniqueId: 'id_' + new Date().getTime() });
        event.obj.setOptions({ zIndex: 100 });

        // 其他矢量图形处理逻辑...
        // event.obj 为绘制出来的覆盖物对象
        console.log('覆盖物对象绘制完成',event)
      })
    },
    getUserLocation() {
    },
    queryStores() {
    },
    handleQuery(){
      console.log('打印是否出发查询功能');
    },
    handleReset(){
      console.log('打印是否触发重置功能');
      this.queryParams= {
        regionalName: '',
        regionalType: ''
      }
    },
    hanleOpt(type,row){
      switch (type){
        case 'add':
          this.dialogParams.dialogVisible = true;
          this.$nextTick(()=>{
            this.initializeMap();
          })
          break;
        case 'edit':
          break;
      }
      console.log('打印是否触发新增功能');
    },
    handleDialogClose(){
      this.dialogParams.dialogVisible = false;

    },
  }
}
</script>

<style lang="scss" scoped>
.regionalSty{
  height: 100%;
  //width: 100%;
  background: #ffffff;
  border-radius: 5px;
  padding: 20px;
  .searchSty{

  }
}

</style>