<template>
  <div class="app-container" style="padding-top: 20px;height: 120vh; "  >
    <div class="ntgs">
     <div>
       <div class="topug">
         <p>地图设置</p>
         <p>保存</p>
       </div>
       <div style="border-bottom: 1px solid #E6E6E6;margin-bottom: 30px;cursor: pointer;" class="qieht">
         <p @click="isqie(0)" :class="isgse == 0 ? 'isesf' : ''">地图范围</p>
         <p @click="isqie(1)" :class="isgse == 1 ? 'isesf' : ''">园区地图</p>
       </div>
        <el-form ref="form" :model="form" :rules="rules" label-width="70px">
       <el-row>
         <el-col :span="20" class="shish">
           <el-form-item label="省市区" prop="staffName">
                      <area-select
                      @change="chesef"
                          style="display: flex"
                          type="all"
                          v-model="areaList"
                          :level="2"
                          :disableLinkage="linkage"
                          :data="pcaa"
                      ></area-select>
          </el-form-item>
         </el-col>
         <el-col :span="16">
           <el-form-item label="详细地址" prop="staffName">
                     <el-input @focus="huoaq" id="tipinput" v-model="form.staffName" placeholder="请输入详细地址" />
          </el-form-item>
         </el-col>
         <el-col :span="16">
           <el-col :span="24" >
             <el-form-item label="经纬度" prop="staffName" >
                  <div style="display: flex; " class="jisnge">
                    <el-input style="width: 160px; margin-right: 10px;" v-model="form.kqLongitude" placeholder="请输入经度" />
                    <el-input style="width: 160px;" v-model="form.kqLatitude" placeholder="请输入纬度" />
                    <div style="display: flex; align-items: center;" class="giet">
                      <span style="font-size: 14px;color: #606266; width: 100px; margin-left: 10px;font-weight: 700;">半径范围</span>
                      <el-input @blur="fanhseg" v-model="form.fanwei" placeholder="请输入范围" />
                      <span style=" margin-left: 10px; font-weight: 800;font-size: 13px;color: #3D455B;">米</span>
                    </div>
                  </div>
             </el-form-item>
           </el-col>
         </el-col>
         <el-col :span="16" class="ditweyuq" v-if="isgse">
           <el-form-item label="园区鸟瞰" prop="staffName">
                  <image-uploadrss :limit="1" v-model="form.staffImage"/>
           </el-form-item>
         </el-col>
         <el-col :span="16" v-show="!isgse">
           <el-form-item label="地图标点" prop="staffName">
                <div style="width: 100%;height: 360px;">
                 <div  id="gaode_Map" style="width:100%;height: 100%;">
                  </div>
                </div>
           </el-form-item>

         </el-col>
       </el-row>


        </el-form>
     </div>
	</div>


  </div>
</template>
<script>

  //引入缺德地图
  import AMapLoader from '@amap/amap-jsapi-loader'
  window._AMapSecurityConfig = {
      securityJsCode: 'b06df55c66884ce2c9a3f3281c2c5ca9'  //填写你的安全密钥
  }
  import { listWarnManage, getWarnManage, delWarnManage, addWarnManage, updateWarnManage } from "@/api/manage/warnManage"
import 'vue-area-linkage/dist/index.css'
import { pca, pcaa } from 'area-data'
import Bscroll from "better-scroll";
export default {
  name: "Post",
  dicts: ['sys_normal_disable','sys_yes_no','youke','tjzh','youkes','lafafen','fange','jluly'],
  components: {

    },
  data() {
    return {
      // 遮罩层
      loading: true,
	  opent:false,
	  bg:null,
    titles:'',
      // 表单参数
      form: {
        staffName:null,
        kqLongitude:null,
        kqLatitude:null,
        fanwei:null
      },
      rules:{},
      areaList:[],
      pca: pca,
      		pcaa: pcaa,
          searchData:[],
    isgse:0,
    linkage:true,
    visible: false,
          isDetail: false,
          dataForm: {
            kqName: undefined,
            kqLocation: undefined,
            kqLongitude: undefined,
            kqLatitude: undefined,
            kqWorkUnit: undefined,
            cronkqAccredit: [],
            kqValidCardRange: undefined,
          },
          input: "",
          map: null,
          auto: null,
          placeSearch: null,
          lnglat: [],
          markers: [],
          position: {},
          polyEditor :null,
          polygonPaths :[],
          polygonList :[],
          inspectionRouteList :[],
          initFormData :{},
          cndhe:[]

     }
  },
  created() {

  },
  mounted() {
    let sngse = [117.211954, 31.839676]
   this.initMap(sngse)
  },
   beforeDestroy() {

    },
  methods: {
    // 地图切换
    isqie(row){
      this.isgse = row
    },
    huoaq(){
     console.log(4,this.areaList)
     if(this.areaList.length !=0){
       // this.areaList
       //   for(let key in people ){
       //       console.log(key+':'+people[key]);
       //   }
     }else{
       this.$message.error('请先选择省市区');
       return
     }
    },
    chesef(){
     console.log(4,this.areaList)
     if(this.areaList.length !=0){
       let sngse = ''
       this.areaList.filter(rou=>{
         for(let key in rou ){
             if(key != ''){
                sngse = sngse + rou[key]
               console.log(key+':'+rou[key]);
               this.form.staffName = sngse
             }
         }
       })
     }else{

     }
    },

    /** 提交按钮 */
    submitForm: function() {
      this.$refs["form"].validate(valid => {
              if (valid) {
                // if (this.form.reservatId != null) {
                  updateReservat(this.form).then(response => {
                    this.$modal.msgSuccess("操作成功");

                    this.open = false;
                    this.getList();
                  });
                // } else {
                //   addReservat(this.form).then(response => {
                //     this.$modal.msgSuccess("新增成功");
                //     this.open = false;
                //     this.getList();
                //   });
                // }
              }
            });
    },
    initMap(row) {
    		AMapLoader.reset()
          AMapLoader.load({
            key: "fba818d626f91cf5a13cd61943a7667e",             // 申请好的Web端开发者Key，首次调用 load 时必填
            version: "2.0",      // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
            plugins: ['AMap.AutoComplete', 'AMap.Marker', 'AMap.PlaceSearch', 'AMap.Geolocation',"AMap.Driving","AMap.Walking","AMap.Geocoder","AMap.Scale"],       // 需要使用的的插件列表，如比例尺'AMap.Scale'等
          }).then((AMap) => {
            console.log(AMap)
            this.map = new AMap.Map("gaode_Map", {  //设置地图容器id
              // mapStyle: 'amap://styles/darkblue', //设置地图的显示样式
              viewMode: "3D",    //是否为3D地图模式
              zoom: 18,           //初始化地图级别
              center: row, //初始化地图中心点位置
              // center: [116.310791, 40.003419], //初始化地图中心点位置
              pitch: 40, // 地图俯仰角度，有效范围 0 度- 83 度
              terrain: true, // 开启地形图
              buildingAnimation: true,//楼块出现是否带动画
              zoomToAccuracy: true,

            });
    		// this.getCenter()
           // this.setMarker(centerLen)
                     // 关键字查询
                     this.searchMap();
                     // 监听鼠标点击事件
                     this.map.on("click", this.clickMapHandler);
          }).catch(e => {
            console.log(e);
          })
    },
    // 关键字查询
        searchMap () {
          // 搜索框自动完成类
          this.auto = new AMap.AutoComplete({
            input: "tipinput", // 使用联想输入的input的id
          });
          //构造地点查询类
          this.placeSearch = new AMap.PlaceSearch({
            map: this.map,
          });
          // 当选中某条搜索记录时触发
          this.auto.on("select", this.selectSite);
        },
        //选中查询出的记录
        selectSite (e) {
          console.log(e)
          this.circles = []
          if (e.poi.location) {
            this.lnglat = [e.poi.location.lng, e.poi.location.lat];
            this.placeSearch.setCity(e.poi.adcode);
            this.placeSearch.search(e.poi.name); //关键字查询
            let geocoder = new AMap.Geocoder({});
            let that = this;
            geocoder.getAddress(this.lnglat, function (status, result) {
              if (status === "complete" && result.regeocode) {
                that.province = result.regeocode.addressComponent.province;
                that.city = result.regeocode.addressComponent.city;
                //自己想要赋的值，根据自己的做修改
                that.$set(that.form, "province", that.province);
                that.$set(that.form, "city", that.city);
                that.$set(that.form, "address", e.poi.name);
                that.$set(
                  that.form,
                  "coordinate",
                  e.poi.location.lng + "," + e.poi.location.lat
                );
                that.form.kqLongitude = e.poi.location.lng
                that.form.kqLatitude = e.poi.location.lat
                 console.log(that.form,5)//纬度，经度
                 let sge=[e.poi.location.lng,e.poi.location.lat]
                 let sngse={'center':sge}
                 that.circles.push(sngse)
                 that.cndhe = sge
                 that.initMap(sge)
              } else {
              }
            });
          } else {
            this.$message.error("查询地址失败，请重新输入地址");
          }
        },
        // 点击地图事件获取经纬度，并添加标记
        clickMapHandler (e) {
          this.dataForm.kqLongitude = e.lnglat.getLng();
          this.dataForm.kqLatitude = e.lnglat.getLat();
          this.lnglat = [e.lnglat.getLng(), e.lnglat.getLat()];
          this.setMarker(this.lnglat);
          // 点击地图上的位置，根据经纬度转换成详细地址
          let geocoder = new AMap.Geocoder({});
          let that = this;
          geocoder.getAddress(this.lnglat, function (status, result) {
            if (status === "complete" && result.regeocode) {
              that.dataForm.kqLocation = result.regeocode.formattedAddress;
            } else {
            }
          });
          this.position = {
            longitude: e.lnglat.getLng(),
            latitude: e.lnglat.getLat(),
            address: that.address,
          };

          this.input = that.address; //把查询到的地址赋值到输入框
        },

   //  添加标记
       setMarker (lnglat) {
         this.removeMarker();
         let marker = new AMap.Marker({
           position: lnglat,
         });
         console.log(lnglat,8)
         marker.setMap(this.map);
         this.markers.push(marker);
         this.cndhe = lnglat
         // this.addCircle()
       },
       // 删除之前后的标记点
       removeMarker () {
         if (this.markers) {
           this.map.remove(this.markers);
         }
       },
       fanhseg(){
          this.addCircle()
       },
       addCircle() {
             this.circleList = [];
             console.log(this.circles)
             // for (let i = 0; i < this.circles.length; i += 1) {
               // let center = this.circles[i].center;
               let circle = new AMap.Circle({
                 center: this.cndhe,
                 radius: this.form.fanwei, // 半径
                 strokeColor: "#F33", // 线颜色
                 // strokeColor: this.rgb(),  // 线颜色
                 zIndex: 101,
                 strokeOpacity: 1, //线透明度
                 strokeWeight: 3, //线粗细度
                 bubble: true, // 是否将覆盖物的鼠标或touch等事件冒泡到地图上
                 fillColor: "#7c7cfb", //填充颜色
                 fillOpacity: 0.35 //填充透明度
               });
               circle.setMap(this.map);
               this.circleList.push(circle);
               this.map.setFitView([circle]);
                     // var circleEditor = new AMap.CircleEditor(this.map, circle);
             // }
           },


  }
};
</script>

<style lang="scss">
  .ditweyuq{
    .el-upload-dragger{
      // border: none;
      border-color: #E6E6E6;
      width: 100%;
      height: 220px;
    }
    .el-upload--picture-card{
      border: none;
       width: 100%;
    }
    .component-upload-image{
      width: 100%;
      margin-top: 20px;
    }
    .qundew{
      margin-right: 28px !important;
      margin-top: 40px !important;
    }
  }
  .shish{
    .el-form-item--medium .el-form-item__content{
      line-height:16px;
    }
    .area-select-wrap .area-select:nth-child(1){
      margin-left: 0;
    }
  }
  .botsne{

  }
  .jisnge{
    .el-input__inner{
      width: 158px;
    }
  }
  .giet{
    .el-input__inner{
      width: 100%;
    }
  }

	.isjses{
		.el-tabs--left .el-tabs__nav-wrap.is-left::after{
			width:6px;
		}
		.el-tabs--left .el-tabs__active-bar.is-left,{
			width:6px;
		}
	}
	.ingaqe{
		.el-input--medium{
			width:100%;
		}
	}
	.nhgrls{
		.el-dialog__body{
			padding: 0;
		}
	}
  .hyr{
    span{
      text-decoration:underline;
    }
  }
</style>
<style scoped lang="scss">
  .qieht{
    display: flex;
    p{
      margin: 0;
      font-family: PingFang SC;
      font-weight: 500;
      font-size: 15px;
      color: #3D455B;
      margin-right: 20px;
      padding: 0 10px;
      margin-bottom: -1px;
      line-height: 40px;
    }
    .isesf{
      color: #03BF8A;
       border-bottom: 2px solid #03BF8A;
    }
  }
  .topug{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    p{
      margin: 0;
    }
    p:nth-child(1){
      font-family: PingFang SC;
      font-weight: 800;
      font-size: 15px;
      color: #333333;
      border-left: 6px solid #03BF8A;
      padding-left: 10px;
      margin-left: -20px;
    }
    p:nth-child(2){
      width: 86px;
      height: 38px;
      background: #03BF8A;
      border-radius: 4px;
      text-align: center;
      line-height:38px ;
      font-family: PingFang SC;
      font-weight: bold;
      font-size: 13px;
      color: #FFFFFF;
    }
  }
	.nghwgq{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		margin-top: 90px;
		div{
			color:#aaa;
		}
	}

	.nhgwesvq{
		width:1610px !important;
	}





  .lqw{
    padding: 0 10px;
    margin: 0;
    margin-bottom: 20px;
  }
.nhgel{
  height: 170px;
  background-color: #313b61;
  width: 100%;
  position: absolute;
  top:0;
  left:0;
  z-index: 0;
}
	.app-container{
		background-color: #f3f4f6;
		padding-top: 10px;
		height: 180vh;

	}
	.ntgs{
	position: relative;
		background-color: #fff;
		padding: 5px;
    height: 100%;
		// border-radius: 5px;
		padding-top: 10px;
	     padding: 10px 20px;
		.pagination-container{
			height: 50px;
		}
	}
	.nghfs{
	position: relative;
		background-color: #fff;
		padding-top: 18px !important;
		padding: 5px;
		// border-radius: 5px;
		// margin-bottom: 20px;
	}
	.ksf{
		img{
			width:100%;
			height: 100%;
		}
	}
   .ingwfaq{
	   font-weight: bold;
	   font-size: 16px;
   }
  .search_box {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    height: 50px;

    .label {
      color: #000;
      width: 100px;
    }
  }

  .content {
    position: relative;
  }

  #panel {
    position: absolute;
    top: 50px;
    right: 20px;
  }

  #gaode_Map {
    overflow: hidden;
    width: 100%;
    height: 540px;
    margin: 0;
  }

  .amap-sug-result {
    z-index: 2999 !important;
  }


</style>
