<template>
  <div>
    <yd-navbar :title="'系统围栏-'+ title">
        <router-link to="/fence" slot="left">
            <yd-navbar-back-icon></yd-navbar-back-icon>
        </router-link>
    </yd-navbar>

    <div class="container">

      <div id="fence-map" class="fence-edit-style">  </div>
  

      <div style="position:absolute;width:100%;height:1px;border-top:solid 0.7px blue;top:calc(50% + 0.8rem);"></div>
      <div style="position:absolute;width:1px;height:100%;border-left:solid 0.7px blue;top:0px;left:50%;"></div>
    </div>


    <van-dialog v-model="showNameField" @confirm="postSaveData" title="围栏命名" show-cancel-button>
      <van-field v-model="fenceName" placeholder="请给围栏取个有辨别性的名字" input-align="center" :autofocus="true" />
    </van-dialog>

  </div>



</template>

<script>
import VueSlider from 'vue-slider-component'
import 'vue-slider-component/theme/default.css'
import Vue from 'vue'; 
import 'vant/lib/index.css';
import { Notify, Dialog, Field } from 'vant';
Vue.use(Notify);
Vue.use(Dialog);
Vue.use(Field);


export default {
    components: {
      VueSlider
    },
    data: function () {
      return {
        value: 500,
        fenceRead: 'fence-read-style',
        fenceEdit: 'fence-edit-style',
        fenceOverlay: null,
        fenceInfo: '',
        fenceName: '',
        originFence: '',
        shape: '',
        showNameField: false,
        title: '',
      }
    },

    mounted(){
      let that= this;
      
      if(localStorage.getItem("clickFence")){
        this.originFence = JSON.parse(localStorage.getItem("clickFence") )
        console.log(this.originFence, 'edit')

        this.fenceName = this.originFence.name;
        this.title = this.fenceName;
        this.shape = this.originFence.shape;
        this.fenceInfo = JSON.parse(this.originFence.fenceInfo);
        localStorage.setItem("clickFence", null) 
      }
      this.initMap()

    },


    methods: {
      initMap(){
          let that = this;
          var map = new AMap.Map('fence-map', {
              zoom:15,//级别
              // viewMode:'3D',//使用3D视图
            //   mapStyle: 'amap://styles/light',
              showBuildingBlock: true
          });
          AMap.plugin([
              'AMap.ToolBar',
              'AMap.Scale',
            //   'AMap.HawkEye',
              'AMap.MapType',
              'AMap.Geocoder',
          ], function(){
              // 在图面添加工具条控件，工具条控件集成了缩放、平移、定位等功能按钮在内的组合控件
              map.addControl(new AMap.ToolBar({position: 'RT'}));

              // 在图面添加比例尺控件，展示地图在当前层级和纬度下的比例尺
              map.addControl(new AMap.Scale({position: 'LT'}));
          
              // 在图面添加类别切换控件，实现默认图层与卫星图、实施交通图层之间切换的控制
            //   map.addControl(new AMap.MapType());

              that.geocoder = new AMap.Geocoder({})
          });

          this.map = map;


          this.fenceOverlay = this.instanceOverlay(this.shape, this.fenceInfo);

          this.fenceOverlay.setMap(this.map)
          this.map.setFitView(this.fenceOverlay)
          
      },
      instanceOverlay(shape, info){
          let fenceOverlay;

          if(shape == 'polygon'){
              let path = [];
              info.forEach(item => {
                  let pt = new AMap.LngLat(item.lng, item.lat);
                  path.push(pt);
              });
              fenceOverlay = new AMap.Polygon({
                path: path,
                strokeColor: "#F33",  //线颜色
                strokeOpacity: 1,  //线透明度
                strokeWeight: 3,  //线粗细度
                fillColor: "#ee2200",  //填充颜色
                fillOpacity: 0.35 //填充透明度
              });
          }else{
            fenceOverlay = new AMap.Circle({
                center: new AMap.LngLat(info.center.lng, info.center.lat), // 圆心位置
                radius: info.radius,  //半径
                strokeColor: "#F33",  //线颜色
                strokeOpacity: 1,  //线透明度
                strokeWeight: 3,  //线粗细度
                fillColor: "#ee2200",  //填充颜色
                fillOpacity: 0.35 //填充透明度
            });
          }
          return fenceOverlay
      },
      setRadius(e){
        let that = this;
        that.fenceOverlay.setRadius(e)
      },
      afterDragHandle(){
        this.map.setFitView(this.fenceOverlay)
      },


      postSaveData(){
        let originFence = this.originFence;
        if(!this.fenceName){
          this.$dialog.toast({
              mes: '请给围栏输入一个名字'
          })
          return
        }
        let that = this;
        
        let fenceInfo = {
          radius: this.value,
          center: {lat: this.fenceOverlay.getCenter().getLat(), lng: this.fenceOverlay.getCenter().getLng()}
        }

        let data = {
          userid: localStorage.getItem("userid"),
          fenceInfo: fenceInfo,
          fenceName: this.fenceName,
          fenceId: originFence.id
        };

        that.$http({
              method:'post',
              url:"/editUserFence",
              data:JSON.stringify(data)
            }).then(({ data }) => {
              if(!data.success){
                that.$dialog.toast({
                    mes: data.message
                })
                return;
              }

            Notify({ type: 'success', message: '修改用户围栏成功,返回列表' });
            this.$router.push('/fence_list')
              console.log(data, 'add fence res')
            });


      }
      



    }
}
</script>

<style scoped>
.container{
  height:100%;
}

.save-cancel-bar{
  height: 0.6rem;
  background: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#fence-map{
  height:calc(100vh - 1rem);
  width: 100%;
}
.contrl-slider{ 
  position: absolute;
  bottom: 1rem;
  height: 40px;
  width: 100%;
  z-index: 99;
  padding: 10px 20px;
  background: white;
}


</style>