<template>
  <div class="componentSty">
    <el-row style="width: 100%; height: 100%;">
      <el-col :span="24">
        <el-form :model="queryForm" ref="queryForm" :inline="true" style="display: flex; justify-content: space-between">
          <div>
            <el-form-item label="区域名称:">
              <el-input v-model="queryForm.regionalName"  placeholder="请输入姓名" clearable></el-input>
            </el-form-item>
            <el-form-item label="区域类型:">
              <el-select v-model="queryForm.regionalType"  placeholder="请选择状态" clearable>
                <el-option v-for="item in regionalTypeOptions" :key="item.KEY_" :label="item.NAME_" :value="item.KEY_">
                </el-option>
              </el-select>
            </el-form-item>
          </div>
          <el-form-item>
            <el-button type="primary" icon="el-icon-refresh"
                       style="border: 1px solid #5875eb; background: #ffffff; color: #5875eb; border-radius: 5px;"
                       @click="handleReset" plain>重置
            </el-button>
            <el-button type="primary" style="background: #5875eb; border: 1px solid #5875eb; border-radius: 5px;"
                       icon="el-icon-search" @click="handleSearch"> 查询
            </el-button>
          </el-form-item>
        </el-form>
      </el-col>
      <el-col :span="24" style="margin-bottom: 10px;">
          <el-button type="primary" style="background: #5875eb; border: 1px solid #5875eb; border-radius: 5px;"
                     icon="el-icon-plus" @click=" hanleOpt('add')"> 新增
          </el-button>
      </el-col>
      <el-col :span="24" style="height: calc(100% - 95px);overflow: auto;">
        <el-table
          style="width: 100%"
          v-loading="loading"
          :data="tableData">
          <el-table-column
            type="index"
            label="序号">
          </el-table-column>
          <el-table-column
            prop="f_ssqymc"
            label="企业名称">
          </el-table-column>
          <el-table-column
            prop="f_name"
            label="区域名称">
          </el-table-column>
          <el-table-column
            prop="f_regional_type"
            label="类型">
          </el-table-column>
          <el-table-column
            prop="f_shape"
            label="区域形状">
          </el-table-column>
          <el-table-column
            prop="f_remark"
            label="备注">
          </el-table-column>
          <el-table-column
            prop="opt"
            width="100"
            label="操作">
            <template slot-scope="scope">
              <el-button type="text"  @click="hanleOpt('edit',scope.row)">编辑</el-button>
              <el-button type="text" style="color: red;" @click="hanleOpt('delete',scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
      <el-col :span="24">
        <el-pagination
          style="float: right; margin-top: 10px;"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageParam.page"
          :page-sizes="[10, 20, 30, 50]"
          :page-size="pageParam.size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pageParam.total">
        </el-pagination>
      </el-col>
    </el-row>
    <el-dialog
      :title="dialogParams.title"
      :visible.sync="dialogParams.dialogVisible"
      width="80%"
      @close="handleDialogClose">
      <el-form :model="dialogParams" :inline="true" :rules="dialogRules" ref="dialogParams">
        <el-form-item label="区域名称:" prop="regionalName">
          <el-input v-model="dialogParams.regionalName" placeholder="请输入区域名称" clearable></el-input>
        </el-form-item>
        <el-form-item label="区域类型:" prop="regionalType">
          <el-select v-model="dialogParams.regionalType" clearable placeholder="请选择">
            <el-option
              v-for="item in regionalTypeOptions"
              :key="item.KEY_"
              :label="item.NAME_"
              :value="item.KEY_">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="备注:">
          <el-input
            clearable
            style="width: 100%;"
            type="textarea"
            placeholder="请输入内容"
            v-model="dialogParams.fRemark">
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button :class="[dialogParams.fShape == '多边形'?'clickBtn':'','btn']" @click="draw('polygon','多边形')" style="margin-bottom: 5px">绘制多边形</el-button>
          <el-button :class="[dialogParams.fShape == '矩形'?'clickBtn':'','btn']" @click="draw('rectangle','矩形')" style="margin-bottom: 5px">绘制矩形</el-button>
          <el-button :class="[dialogParams.fShape == '圆形'?'clickBtn':'','btn']" @click="draw('circle','圆形')" style="margin-bottom: 5px">绘制圆形</el-button>
          <el-button  @click="closeDraw" v-if="dialogParams.dialogType == 'edit'" style="margin-bottom: 5px">结束编辑</el-button>
        </el-form-item>
      </el-form>
      <el-row>
        <el-col :span="24">
          <div id="mapContainer" style="width: 100%; height: 500px;"></div>
        </el-col>
      </el-row>
      <span slot="footer" class="dialog-footer">
          <el-button @click="dialogParams.dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="handleSubmit('dialogParams')">确 定</el-button>
        </span>
    </el-dialog>
  </div>
</template>

<script>
import AMapLoader from '@amap/amap-jsapi-loader';
import {
  regionalTablePort,
  regionalAddEditPort,
  regionTypePort,
  regionalDetailInfo,
  regionDeletePort,
  delVideoPort
} from '@/api/regionalManage'
export default {
  name: "regionManage",
  props:{
    rowData:{
      type:Object,
      default:()=>{}
    }
  },
  async mounted() {
    await this.getDataList();
    await this.getRegionTypeList();
  },
  data(){
    return {
      loading:false,
      tableData:[],
      regionalTypeOptions:[
        {
          label:'经营区域',
          value:'经营区域'
        },
        {
          label:'流动区域',
          value:'流动区域'
        }
      ],
      dialogRules:{
        regionalName:[
          {required:true,message:'请输入区域名称',trigger:'blur'}
        ],
        regionalType:[
          {required:true,message:'请选择区域类型',trigger:'change'}
        ]
      },
      queryForm:{
        regionalType:'',
        regionalName:'',
        orgId:'',
        tabType:'region'
      },
      dialogParams:{
        title:'新增区域',
        radius:'',//圆形半径
        dialogVisible:false,
        fSsczid:'',
        fShape:'',
        fRemark:'',
        id:'',
        dialogType:'',
        regionalType:'',
        regionalName:'',
        rectangleNothPoint:[],
        rectangleSouthPoint:[],
        polygonPoint:[],//多边形坐标点
        centerOfCircle:[],//圆形中心点坐标
      },
      polygon: null,
      map:null,
      mapEditor:null,
      mouseTool:null,
      overlays:[],
      circleOverlays:[],//圆形中心点的坐标
      centerPoint:[116.403322, 39.920255],
      pageParam:{
        page:1,
        size:10,
        total:0
      },
      handler:null,

    }
  },
  methods:{
    //初始化区域类型的接口数据
    async getRegionTypeList(){
      let params =[
        {
          "key": "PARENT_ID_",
          "value": "1828635308418162688"
        }
      ]
      await regionTypePort(params).then((res)=>{
        const { rows } = res;
        this.regionalTypeOptions = rows;
      })
    },
    async getRegionDetailInfoData(id){
      await regionalDetailInfo({id:id}).then((res)=>{
        console.log('打印详情res======>',res);
        const { value } = res;
        const { fShape,fName,fRemark,radius,fBoundary,centerOfCircle,fRegionalType} = value;
        this.dialogParams.fRemark = fRemark;
        this.dialogParams.regionalName = fName;
        this.dialogParams.regionalType = fRegionalType;
        this.dialogParams.radius = radius;
        this.dialogParams.fShape = fShape;
        console.log('打印fBoundary',JSON.parse(fBoundary));
        this.dialogParams.centerOfCircle = centerOfCircle?centerOfCircle.split(','):[];
        let pointfBoundary = JSON.parse(fBoundary).coordinates;
        if(this.dialogParams.fShape == '矩形'){
          this.dialogParams.rectangleNothPoint =pointfBoundary[0][0];
          this.dialogParams.rectangleSouthPoint = pointfBoundary[0][2];
          // console.log('打印this.dialogParams.rectangleNothPoint ',this.dialogParams.rectangleNothPoint ,this.dialogParams.rectangleSouthPoint )
        }else if(this.dialogParams.fShape == '多边形'){
          console.log('pointfBoundary',pointfBoundary[0])
          let array = pointfBoundary.pop();
          console.log('打印array',array);
          this.dialogParams.polygonPoint = array;
          console.log('打印this.this.dialogParams.polygonPoint ',this.dialogParams.polygonPoint );
        }

      })
    },
    //初始化数据接口
    async getDataList(){
      let params= {
        pageBean: {
          page: this.pageParam.page,
          pageSize: this.pageParam.size,
          showTotal: true
        },
        querys: []
      }
      if(this.queryForm.regionalName){
        params.querys.push({
          property: "f_name",
          value: this.queryForm.regionalName,
          group: "advance",
          relation: "AND",
          operation: "LIKE"
        })
      }
      if(this.queryForm.regionalType){
        params.querys.push({
          property: "f_regional_type",
          value: this.queryForm.regionalType,
          group: "advance",
          relation: "AND",
          operation: "LIKE"
        })
      }
      if(this.rowData.orgId){
        params.querys.push({
          property: "orgId",
          value: this.rowData.orgId,
          group: "advance",
          relation: "AND",
          operation: "LIKE"
        })
      }
      this.loading = true;
      await regionalTablePort(params).then((res)=>{
        console.log('打印区域管理中res====>',res);
        const { rows,total } = res;
        this.tableData = rows;
        this.pageParam.total = total;
        setTimeout(()=>{
          this.loading  = false;
        },500)
      })
    },
    //强调说明：自定义的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('')
      });
    },
    //初始化地图
    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.RectangleEditor',
          '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);
        let that = this;
        this.map = new T.Map('mapContainer',{
          projection: 'EPSG:900913' 
        });
        this.map.centerAndZoom(new T.LngLat(this.centerPoint[0], this.centerPoint[1]), 16);
        //允许鼠标双击放大地图
        this.map.enableScrollWheelZoom();
        // 允许拖拽
        setTimeout(function () {
          that.map.enableDrag();
        }, 500);

        var config = {
            showLabel: true,
            color: "blue", weight: 3, opacity: 0.5, fillColor: "#FFFFFF", fillOpacity: 0.5
        };
        //创建标注工具对象
        this.polygonTool = new T.PolygonTool(this.map, config);


        // this.map = new AMap.Map('mapContainer', {//设置地图容器id
        //   viewMode: '2D', //是否为3D地图模式
        //   zoom: 16, //初始化地图层级
        //   center: this.centerPoint,//初始化地图中心点
        // });


        // this.map.on('rightclick', (e)=> {
        //   this.rightclickObj(); //定义右键内容
        //   this.contextMenu.open(this.map, e.lnglat);
        //   this.contextMenuPositon = e.lnglat; //右键菜单位置
        // });
      
        // let that = this;
        // this.mouseTool = new AMap.MouseTool(this.map);
        // this.mouseTool.on('draw',function (e){
        //   console.log("e======",e);
        //   if(that.overlays.length>0){
        //     console.log('打印this.overlays=====>',that.overlays);
        //     that.map.remove(that.overlays);
        //     //关闭绘画
        //     // that.mouseTool.close(true);
        //     that.overlays = [];
        //   }
        //   if(that.dialogParams.fShape == '圆形'){
        //     let circleCenterPoint = e.obj.getCenter(); //获取圆形坐标点
        //     let circleRadius = e.obj.getRadius();//获取半径
        //     that.dialogParams.radius = circleRadius;
        //     let circlePointList = [
        //       {
        //         jd:circleCenterPoint.lng,
        //         wd:circleCenterPoint.lat
        //       }
        //     ];
        //     that.circleOverlays = circlePointList;
        //     console.log('打印position',circleCenterPoint,circleRadius);
        //   }
        //   that.overlays.push(e.obj);
        //   console.log('打印that.overlays',that.overlays);
        // })
        if(this.dialogParams.dialogType == 'edit'){
          // var editShap = null;
          if(this.dialogParams.fShape == '圆形'){
            this.handler = new T.Circle(new T.LngLat(
              this.dialogParams.centerOfCircle[0], 
              this.dialogParams.centerOfCircle[1]),
              parseInt(this.dialogParams.radius),{
              color:"blue",
              weight:5,
              opacity:0.5,
              fillColor:"#FFFFFF",
              fillOpacity:0.5,
              lineStyle:"solid"});
              this.handler.enableEdit();
              this.handler.on("edit",this.editPointsDrawCircle);
              this.map.addOverLay(this.handler);
            //  editShap = new AMap.Circle({
            //   center: this.dialogParams.centerOfCircle,
            //   radius: this.dialogParams.radius, //半径
            //   borderWeight: 3,
            //   strokeColor: "#FF33FF",
            //   // strokeOpacity: 1,
            //   strokeWeight: 6,
            //   strokeOpacity: 0.2,
            //   fillOpacity: 0.4,
            //   strokeStyle: 'dashed',
            //   strokeDasharray: [10, 10],
            //   // 线样式还支持 'dashed'
            //   fillColor: '#1791fc',
            //   zIndex: 50,
            // });
            // this.mapEditor = new AMap.CircleEditor(this.map, editShap);
          }else if(this.dialogParams.fShape == '矩形'){
            // var southWest = new AMap.LngLat(this.dialogParams.rectangleSouthPoint[0], this.dialogParams.rectangleSouthPoint[1])
            // var northEast = new AMap.LngLat(this.dialogParams.rectangleNothPoint[0], this.dialogParams.rectangleNothPoint[1])
            // var bounds = new AMap.Bounds(southWest, northEast)
            // editShap = new AMap.Rectangle({
            //   bounds: bounds,
            //   strokeColor:'#FF33FF',
            //   strokeWeight: 6,
            //   strokeOpacity:0.2,
            //   strokeDasharray: [30,10],
            //   // strokeStyle还支持 solid
            //   // 线样式还支持 'dashed'
            //   fillColor: '#1791fc',
            //   strokeStyle: 'dashed',
            //   fillOpacity:0.5,
            //   cursor:'pointer',
            //   zIndex:50,
            // });
            // this.mapEditor = new AMap.RectangleEditor(this.map, editShap);
            var bounds = new T.LngLatBounds(new T.LngLat(
            this.dialogParams.rectangleSouthPoint[0],
            this.dialogParams.rectangleSouthPoint[1]),
            new T.LngLat( 
              this.dialogParams.rectangleNothPoint[0],
              this.dialogParams.rectangleNothPoint[1]
            ));
            this.handler = new T.Rectangle(bounds);
            this.handler.enableEdit();
            this.handler.on("edit",this.editPointsDrawRectangle);
            this.map.addOverLay(this.handler);
          } else {
            // editShap = new AMap.Polygon({
            //   path: this.dialogParams.polygonPoint,
            //   strokeColor: "#FF33FF",
            //   strokeWeight: 6,
            //   strokeOpacity: 0.2,
            //   fillOpacity: 0.4,
            //   fillColor: '#1791fc',
            //   zIndex: 50,
            // });
            // this.mapEditor = new AMap.PolyEditor(this.map, editShap);
            var points = [];
            this.dialogParams.polygonPoint.map(item =>{
              points.push(new T.LngLat(item[0], item[1]));
            })
            this.handler = new T.Polygon(points,{
                color: "blue", weight: 3, opacity: 0.5, fillColor: "#FFFFFF", fillOpacity: 0.5
            });
            //向地图上添加面
           this.handler.enableEdit();
           this.handler.on("edit",this.editPointsDrawPolygon);
           this.map.addOverLay(this.handler);
          }
          return
          editShap.setMap(this.map);
          // 缩放地图到合适的视野级别
          this.map.setFitView([ editShap ]);
          this.mapEditor.open();
          this.mapEditor.on('end', function(event) {
            if(that.dialogParams.fShape == '圆形'){
              let editCircleCenterPoint = event.target.getCenter(); //获取圆形坐标点
              let editCircleRadius = event.target.getRadius();//获取半径
              that.dialogParams.radius = editCircleRadius;
              let editCirclePointList = [
                {
                  jd:editCircleCenterPoint.lng,
                  wd:editCircleCenterPoint.lat
                }
              ];
              that.circleOverlays = editCirclePointList;
            }else if(that.dialogParams.fShape == '矩形'){
              console.log('触发事件： end=====>',event);
            }
            that.overlays.push(event.target);
            // event.target 即为编辑后的圆形对象
          })
        }
      })
    },
    //结束编辑
    closeDraw(){
      // this.mapEditor.close();
      this.handler.disableEdit();
    },
    getPointsDrawPolygon(e){
      let that = this;
      let arry = e.currentLnglats;
      arry.forEach(item => {
         that.overlays.push({ 
          jd:item.lng,
          wd:item.lat 
        });
      });
      that.overlays.push(that.overlays[0])
      console.log('多边形overlays===',JSON.parse(JSON.stringify(this.overlays)));
    },
    // 编辑多边形
    editPointsDrawPolygon(e){
      let that = this;
      let lines = this.handler.getLngLats();
      let arry = lines[0];
      arry.forEach(item => {
         that.overlays.push({ 
          jd:item.lng,
          wd:item.lat 
        });
      });
      that.overlays.push(that.overlays[0])
      console.log('编辑多边形overlays===',JSON.parse(JSON.stringify(this.overlays)));
    },
    getPointsDrawRectangle(e){
      let that = this;
      let arry = e.currentBounds;
      let southwest = { jd: arry.Lq.lng, wd: arry.Lq.lat }; // 西南角
      let northeast = { jd: arry.kq.lng, wd: arry.kq.lat }; // 东北角
      let northwest = { jd: arry.Lq.lng, wd: arry.kq.lat }; // 西北角
      let southeast = { jd: arry.Lq.lng, wd: arry.Lq.lat }; // 东南角
      // 将四个角点推入 overlays 数组
      that.overlays = [southwest, northwest, northeast, southeast];
      console.log("矩形===",this.overlays);
    },
    //编辑矩形
    editPointsDrawRectangle(e){
      console.log("编辑矩形",e);
      // console.log("矩形范围",this.handler.getBounds());
      let that = this;
      let arry = e.target.Qr;
      let southwest = { jd: arry.Lq.lng, wd: arry.Lq.lat }; // 西南角
      let northeast = { jd: arry.kq.lng, wd: arry.kq.lat }; // 东北角
      let northwest = { jd: arry.Lq.lng, wd: arry.kq.lat }; // 西北角
      let southeast = { jd: arry.Lq.lng, wd: arry.Lq.lat }; // 东南角
      // 将四个角点推入 overlays 数组
      that.overlays = [southwest, northwest, northeast, southeast];
      console.log("矩形===",this.overlays);
    },
    getPointsDrawCircle(e){
      console.log("圆形",e);
      let arry = e.currentCenter;
      let circleRadius = e.currentRadius
      this.overlays = [{jd:arry.lng, wd:arry.lat}]
      this.circleOverlays = [{jd:arry.lng, wd:arry.lat}]
      this.dialogParams.radius = circleRadius
    },
    // 编辑圆形
    editPointsDrawCircle(e){
      console.log("编辑圆形e",e);
      let center,radius;
      center = this.handler.getCenter();
      radius = this.handler.getRadius();
      this.overlays = [{jd:center.lng, wd:center.lat}];
      this.circleOverlays = [{jd:center.lng, wd:center.lat}];
      this.dialogParams.radius = radius;
    },
    //draw 绘制圆形，矩形，多边形
    draw(type,shapType){
      if(this.dialogParams.dialogType == 'edit'){
        this.handler.close();
        // this.handler.clear();
        // this.mapEditor.close();
      }
      this.overlays = [];
      this.dialogParams.fShape = shapType;
      switch (type){
        case 'polygon':{
          if (this.handler) {
            this.handler.close();
            this.handler.clear();
          }
          this.handler = new T.PolygonTool(this.map);
          this.handler.open();
          this.handler.addEventListener("draw",this.getPointsDrawPolygon);
          
          // this.mouseTool.polygon({
          //   fillColor:'#00b0ff',
          //   strokeColor:'#80d8ff'
          // });
          break;
        }
        case 'rectangle':{
          if (this.handler) {
            this.handler.close();
            this.handler.clear();
          }
          this.handler = new T.RectangleTool(this.map, {follow: true});
          this.handler.open();
          this.handler.addEventListener("draw",this.getPointsDrawRectangle);
          
          // this.mouseTool.rectangle({
          //   fillColor:'#00b0ff',
          //   strokeColor:'#80d8ff'
          // });
          break;
        }
        case 'circle':{
          if (this.handler) {
            this.handler.close();
            this.handler.clear();
          }
          this.handler = new T.CircleTool(this.map, {follow: true});
          this.handler.open();
          this.handler.addEventListener("draw",this.getPointsDrawCircle);
          
          // this.mouseTool.circle({
          //   fillColor:'#00b0ff',
          //   strokeColor:'#80d8ff'
          // });
          break;
        }
      }
    },
    //提交事件
   async handleSubmit(formName){
     this.$refs[formName].validate(async (valid) => {
       if (valid) {
         console.log('打印this.overlays',this.overlays)
         if(this.overlays.length<=0){
           this.$message.warning('请规划区域!');
           return;
         }
        //  let jwdDTOListArray = this.overlays[0].getPath().map((item)=>{
        //   console.log("item222",item);
        //    return {
        //      jd:item.lng,
        //      wd:item.lat
        //    }
        //  });
          // jwdDTOListArray.push(jwdDTOListArray);
        let jwdDTOListArray = this.overlays
        console.log("jwdDTOListArray",jwdDTOListArray);
         let params= {
           id:this.dialogParams.id,
           fName: this.dialogParams.regionalName,
           fSsczid: this.dialogParams.fSsczid,
           fRegionalType: this.dialogParams.regionalType,
           fShape: this.dialogParams.fShape,
           fRemark:this.dialogParams.fRemark,
           jwdDTOList:this.dialogParams.fShape == '圆形'?this.circleOverlays:jwdDTOListArray
         }
         if(this.dialogParams.fShape == '圆形'){
           params ={
             ...params,
             radius:this.dialogParams.radius
           }
         }
         console.log("params",params);
        //  return;
         await regionalAddEditPort(params).then((res)=>{
           this.dialogParams.dialogVisible = false;
          //  this.mouseTool.close(true);
           this.overlays = [];
           this.handleSearch();
           this.pageParam.page = 1;
         })
       } else {
         return false;
       }
     });
    },
    //弹窗关闭
    handleDialogClose(){
      this.$refs.dialogParams.resetFields();
      this.dialogParams.dialogVisible = false;
      // this.mouseTool.close(true);
      this.overlays =  [];

    },
    //分页功能的size改变事件
    handleSizeChange(val){
      this.pageParam.size = val;
      this.handleSearch();
    },
    //分页功能page改变事件
    handleCurrentChange(val){
      this.pageParam.page = val;
      this.handleSearch();
    },
    //操作栏按钮
    hanleOpt(type,row){
      console.log('打印row=====>',row);
      this.dialogParams.dialogType= type;
      switch (type){
        case 'add':
          this.handler = null;
          this.dialogParams.fSsczid = this.rowData.fSsczid;
          this.dialogParams.id ='';
          this.dialogParams.radius = '';
          this.dialogParams.fShape = '';
          this.dialogParams.fRemark = '';
          this.dialogParams.regionalType ='';
          this.dialogParams.regionalName ='';
          this.dialogParams.rectangleNothPoint =[];
          this.dialogParams.rectangleSouthPoint=[];
          this.dialogParams.polygonPoint = [];//多边形坐标点
          this.dialogParams.centerOfCircle = [];//圆形中心点坐标
          this.dialogParams.title='新增区域';
          break;
        case 'edit':
          this.dialogParams.fSsczid = row.f_ssczid;
          this.dialogParams.id = row.id_;
          this.dialogParams.title='编辑区域';
          this.getRegionDetailInfoData(row.id_);
          break;
        case 'delete':
          this.$confirm('确定是否删除该区域？', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
          }).then(async() => {
            await regionDeletePort(row.id_).then((res)=>{
              if(res.code == 200){
                this.$message.success('删除区域成功!');
              }
              this.handleSearch();
            })
          })
          break
      }
      if(!this.rowData.fSsczid && type == 'add'){
        this.$message.warning('请选择气站!')
        return
      }
      if(type !=='delete'){
        this.dialogParams.dialogVisible = true;
        this.$nextTick(()=>{
          this.initializeMap();
        })
      }
      console.log('打印是否触发新增功能');
    },
    //重置按钮事件
    handleReset(){
      this.queryForm.regionalType ='';
      this.queryForm.regionalName ='';
      this.pageParam.page = 1;
      this.handleSearch();
    },
    //查询按钮事件
    handleSearch(){
      this.getDataList();
    },
    //新增用户事件
    handleAdd(){
      this.showDialog = true;
      this.$nextTick(()=>{
        this.$refs.showDialog.open('add');
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.clickBtn{
  background-color:#5875eb;
  color: #ffffff;
}
.componentSty{
  height: 100%;
  width: calc(100% - 2px);
}

</style>