<template>
  <section class="staffBoxFlexRow areaInfoBox">
    <div class="staffTitle">
      <strong>鍦扮悊浣嶇疆</strong>
      <span class="staffTitletips">閫夊畾浣嶇疆鍚�,绯荤粺灏嗚嚜鍔ㄦ妸"鍚嶇О"銆�"鐪佸競鍖�"銆�"璇︾粏鍦板潃"銆�""缁忕含搴�"淇℃伅鍒嗗埆甯﹀叆鑷�"椹诲嫟鐐瑰悕绉�"銆�"椹诲嫟鐐圭渷甯傚尯"銆�"椹诲嫟鐐硅缁嗗湴鍧€"銆�"椹诲嫟鐐圭粡绾害"
</span>
      <el-button type="primary" @click="onSave">纭畾</el-button>
    </div>
    <div class="staffContext">
      <el-form ref="form" label-width="100px">
        <!-- <el-row :gutter="50">
          <el-col :span="12">
            <el-form-item label="瀹氫綅鍧愭爣锛�" prop="xy">
              <el-input v-model="formList.xy" />
            </el-form-item>
          </el-col>
        </el-row> -->
        <!-- <el-row :gutter="50">
          <el-col :span="6">
            <el-form-item label="缁忓害鍧愭爣锛�" prop="">
              <span class="labelvalue">{{longitude }}</span>
              <el-button type="primary" class="copyTextlong"  @click="onCopylong" style="width: 100px;">澶嶅埗</el-button>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="绾害鍧愭爣锛�" prop="">
              <span class="labelvalue">{{latitude }}</span>
              <el-button type="primary" class="copyTextlat"  @click="onCopylat" style="width: 100px;">澶嶅埗</el-button>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="浣嶇疆锛�" prop="">
              <span class="labelvalue">{{address }}</span>
              <el-button type="primary" class="copyTextaddress"  @click="onCopyaddress" style="width: 100px;">澶嶅埗</el-button>
            </el-form-item>
          </el-col>
        </el-row> -->
        <div class="infoBox"><strong>缁忕含鍧愭爣:</strong><span v-if="longitude"> [{{ longitude }}, {{ latitude }}] </span><strong>浣嶇疆:</strong> {{ address }} <strong>鍚嶇О锛�</strong>{{ attendanceSiteName }} <strong>鐪佸競鍖猴細</strong>{{ district }}</div>
        <el-row>
          <el-col :span="12">
            <el-amap-search-box
              class="search-box"
              :search-option="searchOption"
              :on-search-result="onSearchResult"
              placeholder="璇疯緭鍏ユ悳绱㈠湴鍧€"
            ></el-amap-search-box>
          </el-col>
        </el-row>
        <el-row style="width:100%;height: 650px">
          <el-amap
            vid="amapDemo"
            :center="center"
            :zoom="zoom"
            class="amap-demo"
            :events="events"
            ref="map"
          >
             <el-amap-marker
              v-for="(marker,index) in markers"
              :key ="'marker'+index"
              :position ="marker" 
            > </el-amap-marker>

          </el-amap>
        </el-row>
      </el-form>
    </div>
  </section>
</template>
<script>
// import cityOptions from '@/assets/js/cityData.js'
// import {employessBaseInfoApi,staffDetailInfoApi} from "@/api/staffApi.js"
import VueAMap from "vue-amap";
let amapManager = new VueAMap.AMapManager();
import Clipboard from 'clipboard';
let Geocoder;
export default {
  name: "fence-manage",
  data() {
    let self = this;
    return {
      district:'',//鐪佸競鍖�
      attendanceSiteName:'',
      searchValue:'',
      userInfo: {},
      formList: {
        xy:'',  
        address:''   
      },
      longitude:'0',
      latitude:'0',
      // cityOptions:cityOptions,
      amapManager,
      zoom: 15,
      center: [116.400128, 39.947276],
      address: "", // 鍦板潃
      lng: 0, // 缁忓害
      lat: 0, // 缁村害
      xy: "", //缁忕含鍚堝苟
      searchOption: {
        city: "",
        citylimit: false,
      },
      markers: [], 
      events: {
        init:(o)=> {
          // debugger
          console.log(o)          
          // o 鏄珮寰峰湴鍥惧畾浣嶆彃浠跺疄渚�
          // o.getCurrentPosition((status, result) => {
          //   console.log('55',result)
          //   if (result && result.position) {
          //     self.lng = result.position.lng;
          //     self.lat = result.position.lat;
          //     self.center = [self.lng, self.lat];
          //     self.loaded = true;
          //     self.$nextTick();
          //   }
          // });
        },
        click(e) {
          let { lng, lat } = e.lnglat;
          self.lng = lng;
          self.lat = lat;
          self.formList.xy = self.lng + "," + self.lat;
          self.longitude=self.lng;
          self.latitude=self.lat;
          // 杩欓噷閫氳繃楂樺痉 SDK 瀹屾垚銆�
          var geocoder = new AMap.Geocoder({
            radius: 1000,
            extensions: "all",
          });
          geocoder.getAddress([lng, lat], function(status, result) {
            // debugger
            if (status === "complete" && result.info === "OK") {
              if (result && result.regeocode) {
                console.log(result)
                self.address = result.regeocode.formattedAddress;
                self.attendanceSiteName = result.regeocode.pois[0].name;
                let city=''
                if(result.regeocode.addressComponent.city==''){
                  city='甯傝緰鍖�'
                  if(result.regeocode.addressComponent.province.indexOf('閲嶅簡甯�')>-1&&result.regeocode.addressComponent.district.indexOf('鍘�')>-1){
                    city='鍘�'
                  }
                }else{
                  city=result.regeocode.addressComponent.city
                }
                self.district = result.regeocode.addressComponent.province + city + result.regeocode.addressComponent.district;
                self.$nextTick();
                self.markers = [];    //鏍囪鐐瑰厛娓呯┖
                self.markers.push([lng,lat])
              }
            }
          });
        },
      },
      // 褰撳墠鍦板浘闇€瑕佺殑鎷撳睍鎻掍欢闇€鍦ㄨ鍐呭涓嬫斁缃�  Geocoder涓洪€氳繃鍧愭爣鑾峰彇鍦板潃淇℃伅
      plugin: [{
              pName: 'Geocoder',
              events: {
                  init(o) {
                      Geocoder = o
                  }
              },
          }
      ]
    };
  },
  mounted() {
     console.log(this.$route.query)
     if(this.$route.query){
      this.longitude=this.$route.query.longitude&&this.$route.query.longitude
      this.latitude=this.$route.query.latitude&&this.$route.query.latitude
      this.address=this.$route.query.address&&this.$route.query.address
      this.attendanceSiteName=this.$route.query.attendanceSiteName&&this.$route.query.attendanceSiteName
      this.district=this.$route.query.district&&this.$route.query.district
      if(this.$route.query.longitude){
        this.markers=[]
        this.center=[this.longitude,this.latitude]//灞呬腑鍦板浘浣嶇疆
        this.markers.push([this.longitude,this.latitude])       
      }
      // if(this.$route.query.attendanceSiteName){
      //   document.querySelector(".search-box-wrapper input").value=this.attendanceSiteName
      // }      
     }
  },
  methods: {
    onSave(){ 
      if(!this.longitude){
        this.$message({type: "warning",message: "璇锋悳绱紝鍐嶇偣鍑荤‘瀹�"});
        return
      }
      window.parent.postMessage({longitude:this.longitude,latitude:this.latitude,address:this.address,attendanceSiteName:this.attendanceSiteName,district:this.district},'*')     
    },
    onCopylong(){
      console.log(this.longitude)
      if(!this.longitude){
        this.$message({type: "warning",message: "璇锋悳绱紝鍐嶇偣鍑诲鍒�"});
        return
      }
      let link=JSON.stringify(this.longitude)
      this.$nextTick(()=>{
          let clipboard=new Clipboard('.copyTextlong', {
              text: function () {
                return link
              }
            });
            clipboard.on("success", e => {
                this.$message({
                  type: "success",
                  message: "澶嶅埗鎴愬姛"
                });
                clipboard.destroy(); // 閲婃斁鍐呭瓨
          });
          clipboard.on("error", e => {
              this.$message({
                type: "warning",
                message: "璇ユ祻瑙堝櫒涓嶆敮鎸佽嚜鍔ㄥ鍒�!"
              }); // 涓嶆敮鎸佸鍒�
              clipboard.destroy(); // 閲婃斁鍐呭瓨
          });
      });  
    },
    onCopylat(){
      console.log(this.latitude)
      if(!this.latitude){
        this.$message({type: "warning",message: "璇锋悳绱紝鍐嶇偣鍑诲鍒�"});
        return
      }
      let link=JSON.stringify(this.latitude)
      this.$nextTick(()=>{
          let clipboard=new Clipboard('.copyTextlat', {
              text: function () {
                return link
              }
            });
            clipboard.on("success", e => {
                this.$message({
                  type: "success",
                  message: "澶嶅埗鎴愬姛"
                });
                clipboard.destroy(); // 閲婃斁鍐呭瓨
          });
          clipboard.on("error", e => {
              this.$message({
                type: "warning",
                message: "璇ユ祻瑙堝櫒涓嶆敮鎸佽嚜鍔ㄥ鍒�!"
              }); // 涓嶆敮鎸佸鍒�
              clipboard.destroy(); // 閲婃斁鍐呭瓨
          });
      });
    },
    onCopyaddress(){
      console.log(this.address)
      if(!this.address){
        this.$message({type: "warning",message: "璇锋悳绱紝鍐嶇偣鍑诲鍒�"});
        return
      }
      let link=JSON.stringify(this.address)
      this.$nextTick(()=>{
          let clipboard=new Clipboard('.copyTextaddress', {
              text: function () {
                return link
              }
            });
            clipboard.on("success", e => {
                this.$message({
                  type: "success",
                  message: "澶嶅埗鎴愬姛"
                });
                clipboard.destroy(); // 閲婃斁鍐呭瓨
          });
          clipboard.on("error", e => {
              this.$message({
                type: "warning",
                message: "璇ユ祻瑙堝櫒涓嶆敮鎸佽嚜鍔ㄥ鍒�!"
              }); // 涓嶆敮鎸佸鍒�
              clipboard.destroy(); // 閲婃斁鍐呭瓨
          });
      });
    },
    getRefVal(val) {
      console.log('22',val);
      this.formList = val;
      if(this.formList.longitude){
        let lgat=this.formList.longitude+","+this.formList.latitude
        this.$set(this.formList,'xy',lgat)     
        let centerArr=[this.formList.longitude,this.formList.latitude]
        this.center=[centerArr[0],centerArr[1]]
      }
    },
    // 鎼滅储
    onSearchResult(pois) {
      this.attendanceSiteName=document.querySelector(".search-box-wrapper input").value
      console.log(pois);
      let latSum = 0;
      let lngSum = 0;
      if (pois.length > 0) {
        pois.forEach((poi) => {
          let { lng, lat } = poi;
          lngSum += lng;
          latSum += lat;
          this.address=pois[0].address
        });
        let center = {
          lng: lngSum / pois.length,
          lat: latSum / pois.length,
        };
        this.center = [center.lng, center.lat];       
        this.markers = [];    //鏍囪鐐瑰厛娓呯┖  
        this.markers.push([pois[0].lng,pois[0].lat]) 
        this.formList.xy = pois[0].lng + "," + pois[0].lat;
        this.longitude=pois[0].lng;
        this.latitude=pois[0].lat;      
        this.$nextTick(()=>{
          this.$refs.map.$$getInstance().setFitView()//灞呬腑鍦板浘浣嶇疆          
        })
        let self=this;
        // 杩欓噷閫氳繃楂樺痉 SDK 瀹屾垚銆�
        var geocoder = new AMap.Geocoder({
            radius: 1000,
            extensions: "all",
          });
          geocoder.getAddress([this.longitude, this.latitude], function(status, result) {
            // debugger
            if (status === "complete" && result.info === "OK") {
              if (result && result.regeocode) {
                console.log(result)             
                let city=''
                if(result.regeocode.addressComponent.city==''){
                  city='甯傝緰鍖�'
                  if(result.regeocode.addressComponent.province.indexOf('閲嶅簡甯�')>-1&&result.regeocode.addressComponent.district.indexOf('鍘�')>-1){
                    city='鍘�'
                  }
                }else{
                  city=result.regeocode.addressComponent.city
                }  
                self.district = result.regeocode.addressComponent.province + city + result.regeocode.addressComponent.district;               
              }
            }
          });
      }
    },
  },
};
</script>
<style lang="scss">
.staffBoxFlexRow {
  display: flex;
  flex-direction: column;
  padding: 20px;
  .staffTitle {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #ebebeb;
    padding: 5px 0;
    margin-bottom: 10px;
    clear: both;
    align-items: center;
    strong {
      color: #000;
      font-weight: normal;
    }
    .staffTitletips{
     color: red;flex:1;margin-left:30px;font-weight: bold;
    }
    em {
      margin-right: 20px;
      i {
        color: #2e8ad7;
        margin-right: 20px;
        cursor: pointer;
      }
    }
  }
  .el-form {
    .el-input {
      width: 300px;
    }
    .el-textarea {
      width: 300px;
    }
  }
  .el-form-item {
    display: flex;
    flex-direction: row;
    .el-form-item__label {
      text-align: left;
    }
    .el-form-item__content {
      margin: 0 !important;
      display: flex;
      flex-direction: row;
      .el-cascader {
        margin-bottom: 10px;
      }
    }
  }

  .labelvalue{width: 100px;}
  .infoBox{
    padding: 10px 10px 20px;
    font-size: 16px;
    strong{font-weight: bold;margin-left: 20px;}
  }
}
</style>
<style lang="scss">
.areaInfoBox {
  .search-box {
    border: 1px solid #eee;
    position: absolute;
    top: 5px;
    left: 5px;
  }
}

</style>