<template>
  <!-- 围栏数据以表格的形式展示 -->
  <el-table :data="fencingData" border style="width: 100%">
    <el-table-column prop="name" label="围栏名称" width="150">
      <template slot-scope="scope">
        <el-input v-model="fencingData[scope.$index].name"></el-input>

      </template>
    </el-table-column>
    <el-table-column prop="path" label="坐标数据">
      <template slot-scope="scope">
        <el-button type="primary" size="small"
                   @click.native.prevent="PathCopy(scope.$index, fencingData)">
          复制</el-button>
        <div class="input-card">
          <h4>电子围栏绘制</h4>
          <div class="input-item">
            <input type="button" class="btn" value="开始绘制" id="start" @click="startDrawPolygon()" />
            <input type="button" class="btn" value="清空" id="pause" @click="clearPolygon()" />
          </div>
          <div class="input-item">
            <input type="button" class="btn" value="结束并保存" id="resume" @click="stopAndSave()" />
            <input type="button" class="btn" value="重新绘制" id="stop" @click="redrawPolygon()" />
          </div>
        </div>
        <div id="container"></div>
      </template>
    </el-table-column>
    <el-table-column fixed="right" label="操作" width="100">
      <template slot-scope="scope">
        <el-button type="text" size="small" @click.native.prevent="hold(scope.$index, fencingData)">
          编辑</el-button>
        <el-button type="text" size="small"
                   @click.native.prevent="hold1(scope.$index, fencingData)">
          保存</el-button>
        <el-button @click.native.prevent="deleteRow(scope.$index, fencingData)" type="text"
                   size="small">
          移除
        </el-button>

      </template>
    </el-table-column>
  </el-table>

  <!--地图容器-->

</template>

<script>

import AMapLoader from '@amap/amap-jsapi-loader';
export default {

  name: "gaode",
  data(){

    return {

    //   map: null,
    //   mouseTool: null,
    //   polyType: {
    //     strokeColor: "#FF33FF",
    //     strokeOpacity: 1,
    //     strokeWeight: 4,
    //     strokeOpacitys: 0.2,
    //     fillColor: "#1791fc",
    //     fillOpacity: 0.4,
    //     // 线样式还支持 'dashed'
    //     strokeStyle: "solid"
    //     // strokeStyle是dashed时有效
    //     // strokeDasharray: [30,10],
    //   },
    //   polygonList: [],
    //   savedPolygon: []
    // },

      fencingData: [{
        name: '北京电子围栏',
        path: [
          [116.388565, 39.907388],
          [116.383565, 39.902388],
          [116.383565, 39.912388]
        ]
      }],

    }
  },


  methods: {
    initMap() {

      AMapLoader.load({
        key: "49aadf24c5cbc3a8ed85257398cbbc1d", //此处填入我们注册账号后获取的Key
        version: '1.4.15', //指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        resizeEnable: true,
        plugins: ['AMap.MypType','PolyEditor'], //需要使用的的插件列表，如比例尺'AMap.Scale'等
      }).then((AMap) => {
        this.map = new AMap.Map("container", { //设置地图容器id
          viewMode: "3D", //是否为3D地图模式
          zooms: [4,18],
          vizoom: 6, //初始化地图级别
          center: [112.602725, 37.876636], //初始化地图中心点位置
        });
        this.map.plugin(['AMap.MypType','AMap.Scale','AMap.HawkEye','AMap.PolyEditor'], () => {
          this.map.addControl(new AMap.MypType());//图层切换
          this.map.addControl(new AMap.Scale());//比例尺
          this.map.addControl(new AMap.HawkEye());//鹰眼
          this.map.addControl(new AMap.PolyEditor());//多边形编辑器
},)

        // 添加卫星图
        // var weixing=new AMap.TileLayer.Satellite({
        //   zIndex: 10
        // });
        // this.map.add(weixing);
      }).catch(e => {
        console.log(e);
      })
    },


  },
  mounted() {
    //挂载阶段调用，DOM初始化完成进行地图初始化
    this.$nextTick(() => {
      this.initMap();
    });
  },
  created() {
    //创建阶段调用，将围栏数据转换为围栏对象
    //  初始绘制围栏
// 根据上一个项目 在initMap事件中执行 或者  放在created事件
    if(this.fencingData.length>0){
      for (let i = 0; i < this.fencingData.length; i++) {
        //poly  封装的绘制围栏事件
        this.poly(this.fencingData[i])
      }
    }


  }

}

</script>

<style scoped>
#container {
  width: 60%;
  height: 400px;
  margin: 50px auto;
  border: 2px solid red;
}
</style>
