<template>
  <div class="box">
    <div class="box-title">属性编辑</div>
    <div class="box-container">
        <el-form ref="form" :inline="true" label-width="100px" size="small" >
            <el-form-item v-for="(item,index) in showFields" :key="index" :label="item.name" >
                <el-input v-model="editData[item.field]"  style="min-width:240px;"></el-input>
            </el-form-item>
        </el-form>
    </div>
    <div style="text-align:right;padding-top:5px;">
        <el-button type="default" size="mini" style="margin-right:10px;" @click="$emit('close')">取消</el-button>
        <el-button type="primary" size="mini" style="margin-right:20px;" @click="saveData">保存</el-button>
    </div>
  </div>
</template>

<script>
let BASE_URL = process.env.VUE_APP_BASE_API
import axios from "axios";
import { postMethodCommon,getMethodCommon } from '@/api/common.js';
import { isJson } from "../../../utils/index";
  export default {
    props:['editData','tableName','showFields'],
    name: 'monitorbox',
    data(){
        return{
            list:[
              
            ],
            formData:{},
        }
    },
    watch:{
        editData(newVal,oldVal){
            this.handleData();
        }
    },
    created(){
        this.handleData();
        console.log("showField",this.showFields)
    },
    mounted(){
      
    },
    methods:{
        handleData(){
            this.list = [];
            for(let key in this.editData){
                let obj = {
                    name:key,
                    value:this.editData[key]
                }
                this.list.push(obj);
            }
        },
      saveData(){
          this.formData = this.editData;
          this.formData.tableName = this.tableName;
          this.formData.spaceType = "EPSG:4326";
            axios({
                method:"post",
                url:"http://123.132.248.154:9236/geoserver/updateLayerData",
                data:this.formData
            }).then(res=>{
                this.$message({type:"success",message:"修改成功"});
                this.$emit("close");
            })
      }
    }
  }
</script>

<style scoped>
  .box{
        width: 100%;
        height: 100%;
        overflow: hidden;
        background-image: url(/img/goods-pingyixian.png);
        background-size: 100% 100%;
        text-align:left;
        z-index: 99;
  }
  .box-title{
        width:100%;
        height:45px;
        overflow: hidden;
        line-height:40px;
        color:#eee;
        text-align: center;
        font-size:18px;
    }
    .box-container{
        width: calc( 100% - 0px);
        padding:0px 12px;
        height: calc( 100% - 90px);
        overflow: auto;
    }
    .table-header{
        width: calc( 100% - 10px);
        height:25px;
        color:#fff;
        text-align: center;
    }
    .table-header div{
        float:left;
        width:20%;
        border-bottom:1px dashed #008cff;
        padding-bottom:8px;
    }
    .table-body{
        width:100%;
        height: calc( 100% - 40px);
        overflow-y: auto;
    }

     .table-body .item{
         width:100%;
         height:36px;
         background: #003cff2f;
         font-size:12px;
         text-align: center;
         line-height:36px;
         cursor:pointer;
     }

     .table-body .item:nth-child(2n){
         background:#0059ff50;
     }
    
    .table-body .item div{
        float:left;
        width:20%;
        color:#eee;
        overflow: hidden;
        height:36px;
    }

     ::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb {
  border: 0
}

::-webkit-scrollbar {
  height: 10px;
  width: 10px;
  background: transparent;
  border-radius: 5px
}

::-webkit-scrollbar-thumb {
  padding-top: 100px;
  -webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1), inset -1px -1px 0 rgba(0, 0, 0, .07);
  background-color: #797979;
  min-height: 28px;
  border-radius: 4px;
  background-clip: padding-box
}

::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb {
  border: 0
}

::-webkit-scrollbar-thumb:hover {
  -webkit-box-shadow: inset 1px 1px 1px rgba(0, 0, 0, .25);
  background-color: rgba(0, 0, 0, .4)
}

::-webkit-scrollbar-thumb:active {
  -webkit-box-shadow: inset 1px 1px 3px rgba(0, 0, 0, .35);
  background-color: rgba(0, 0, 0, .5)
}

::v-deep .el-form-item__label{
    color:#fff;
}
</style>