<template>
  <div class="draw-panl-container">
    <div class="close-btn" @click="$emit('close')">
      <i class="el-icon-close"></i>
    </div>
     <div class="layer-name">{{this.editLayerInfo.name}}</div>
    <div class="operate-btn-container">
      <div class="operate-btn" @click="addPoint">
        <img src="/images/system/draw-add.png" alt="">
        <div class="text">添加</div>
      </div>
      <div class="operate-btn" @click="deletePoint">
        <img src="/images/system/draw-del.png" alt="">
        <div class="text" >删除</div>
      </div>
      <div class="operate-btn"  @click="saveData()">
        <img src="/images/system/draw-save.png" alt="">
        <div class="text">保存</div>
      </div>
      <div class="operate-btn" @click="$emit('close')">
        <img src="/images/system/draw-close.png" alt="">
        <div class="text">关闭</div>
      </div>
    </div>

    <div class="title">属性信息</div>

    <div class="form-container">
      <el-form ref="form" :model="form" label-position="top" label-width="80px" size="mini">
        <el-form-item  v-for="(item,index) in columns" :key="index" v-show="item.dbColumnName != 'gid' && item.dbColumnName != 'geom'" :label="item['cn_name']">
          <el-input v-model="form[item.dbColumnName]"></el-input>
        </el-form-item>
        <!-- <el-form-item label="地块面积（亩）：">
          <el-input v-model="form.area"></el-input>
        </el-form-item>
        <el-form-item label="调查类型：">
          <el-input v-model="form.type"></el-input>
        </el-form-item> -->
        
      </el-form>
    </div>
  </div>
</template>
<script>
import { getMethodCommon, postMethodCommon } from '../api/common';
export default {
  name:"DrawPanl",
  props:["editLayerInfo","currentLngLat","editRandom"],
  data(){
    return {
      dictionaries:[],
      columns:[],
      form:{
        
      }
    }
  },
  watch:{
    editRandom:function(e){
      let arr = e.split(",");
      let listQuery = {
        gid:arr[0],
        tablename:arr[1]
      }
      this.getDetail(listQuery);
    },
    editLayerInfo:{
      deep:true,//true为进行深度监听,false为不进行深度监听
      handler(newVal){
        console.log("editLayerInfo",newVal);
      }
    },
    'currentLngLat':function(e){
      console.log(e);
    }
  },
  created(){
    console.log("editLayerInfo",this.editLayerInfo);
    this.getDictionaries();
  },
  methods:{
    // 添加图标
    addPoint(){
      this.form = {};
      this.$emit('addpoint');
    },
    // 获取属性字段
     getDetail(listQuery){
      getMethodCommon("/LayerManager/GetNodeinfo",listQuery).then(res=>{
        if(res.code == 200){
          this.form = res.result;
        }
      })
    },
    // 获取字典
    getDictionaries(){
      postMethodCommon("/CimEncndesc/Load",{page:1,limit:999}).then(res=>{
        if(res.code == 200){
          this.dictionaries = res.data;
          this.getColumns();
        }
      })
    },
    // 获取数据属性字段信息
    getColumns(){
      getMethodCommon("/LayerManager/LoadColumnInfos",{tablename:this.editLayerInfo.tablename}).then(res=>{
        if(res.code == 200){
          for(let i=0;i<res.result.length;i++){
            
            let obj = this.dictionaries.find((item)=>{
              return item['en_name'] == res.result[i].dbColumnName;
            })
            if(obj){
              res.result[i]['cn_name'] = obj['cn_name']
            }else{
              res.result[i]['cn_name'] = '暂无属性'
            }
          }
          this.columns = res.result;
        }
      })
    },
    // 保存绘制的数据信息
    saveData(){
      // let geom = "POINT("+this.currentLngLat+")";
      let saveInfo = [];
      for(let key in this.form){
        let obj = {
          plname:key,
          plexp:this.form[key]
        }
        saveInfo.push(obj);
      }
      let geom = "POINT("+this.currentLngLat+")";
      saveInfo.push({plname:"geom",plexp:geom});
      saveInfo = JSON.stringify(saveInfo);
      postMethodCommon("/LayerManager/InsertData?request="+saveInfo+"&tablename="+this.editLayerInfo.tablename).then(res=>{
        if(res.code == 200){
          this.$message({type:"success",message:"保存成功"});
          this.$emit("addPointSuccess");
          this.$emit('delpoint')
          this.form = {};
        }
      })
    },
    deletePoint(){

      let arr = this.editRandom.split(",");

      postMethodCommon("/LayerManager/DeleteNodeInfo?gid="+parseInt(arr[0])+"&tablename="+arr[1]).then(res=>{
        if(res.code == 200){
          this.$message({type:"success",message:"删除成功"});
          this.form = {};
        }
      })

      this.$emit('delpoint')
    }
  }
}
</script>
<style scoped>
.draw-panl-container{
  width:300px;
  height:500px;
  padding:20px;
  border-radius:4px;
  background:rgba(7, 130, 245, 0.3);
  box-shadow: 0px 0px 32px inset rgba(0,157,255,0.7);
  background: rgba(6,16,64,0.6);
  border-radius: 8px;
  box-shadow: 0px 0px 32px inset rgba(0,157,255,0.7);
}
.operate-btn-container{
  width:100%;
  height:100px;
}
.close-btn{
  width:30px;
  height:30px;
  position:absolute;
  right:-15px;
  top:-15px;
  background:rgba(7, 130, 245, 0.5);
  border-radius: 50%;
  text-align: center;
  color:#fff;
  font-size:14px;
  line-height:30px;
  cursor:pointer;
}
.operate-btn{
  width:50px;
  height:50px;
  text-align: center;
  background:rgba(0,157,255,0.4);
  border-radius: 50%;
  float:left;
  margin:4px 12.5px;
  position: relative;
}
.operate-btn:hover{
  cursor:pointer;
  color:rgba(0,157,255,1);
}
.operate-btn .text{
  width:50px;
  position: absolute;
  bottom:-20px;
  color:#ccc;
  text-align: center;
  left:0px;
}
.operate-btn img{
  width:30px;
  margin-top:10px;
}
.layer-name{
  width:100%;
  height:40px;
  color:#ccc;
  position: relative;
  text-indent:30px;
}
.layer-name::before{
  content:"";
  width:20px;
  height:1px;
  background:#ccc;
  position:absolute;
  top:10px;
  left:0px;
}

.title{
  width:100%;
  color:#ccc;
  position: relative;
  text-indent:30px;
}
.title::after{
  content:"";
  width:200px;
  height:1px;
  background:#ccc;
  position:absolute;
  top:10px;
  left:100px;
}

.title::before{
  content:"";
  width:20px;
  height:1px;
  background:#ccc;
  position:absolute;
  top:10px;
  left:0px;
}

::v-deep .el-form-item{
  margin-bottom: 0px;
}
::v-deep .el-form-item__label{
  color:#ccc;
  padding:0px 0px;
  margin-top:10px;
}

::v-deep .el-input__inner{
  background:none;
  border:1px solid #ccc;
  border-radius: 4px;
  color:#ccc;
  box-shadow: none;
}
.form-container{
  width:100%;
  height:340px;
  overflow-y:auto;
  padding-right:6px;
}
.form-container::-webkit-scrollbar{
  width:8px;
}
.form-container::-webkit-scrollbar-thumb{
  width:8px;
  background:rgba(0,0,0,0.7);
  border-radius:4px;
}
</style>