<template>
  <div class="add-container">
     <div class="data-operate">
        基础数据管理
        <!-- <span @click="$router.push({path:'/data/layer'})"><i class="el-icon-arrow-left"></i> 返回</span> -->
      </div>

      <div class="form-contaner">
        <el-form ref="form" size="mini" :model="form" label-width="180px">
          <el-form-item label="预警能力：">
            <el-input type="number" v-model="form.yjnl" placeholder="请输入"></el-input>
          </el-form-item>

          <el-row :gutter="24">
            <el-col :span="12">
               <el-form-item label="森林面积（平方公里）：">
                  <el-input type="number" v-model="form.sl" placeholder="请输入"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="河流数量（条）：">
                <el-input type="number" v-model="form.hl" placeholder="请输入"></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="24">
            <el-col :span="12">
              <el-form-item label="水库数量（座）：">
                <el-input type="number" v-model="form.sk" placeholder="请输入"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="承灾体项目（项）：">
                <el-input type="number" v-model="form.czt" placeholder="请输入"></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="24">
            <el-col :span="12">
              <el-form-item label="减灾能力（项）：">
                <el-input type="number" v-model="form.jznl" placeholder="请输入"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="历史灾害数量（次）：">
                <el-input type="number" v-model="form.lszh" placeholder="请输入"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">保存修改</el-button>
            <el-button  @click="getDataInfo">取消</el-button>
          </el-form-item>
        </el-form> 
      </div>
  </div>
</template>
<script>
import { getMethodCommon, postMethodCommon } from '../../api/common';
export default {
  name:"AddLayer",
  data(){
    return {
      form:{}
    }
  },
  created(){
    this.getDataInfo();
  },
  watch:{
    
  },
  methods:{
    getDataInfo(){
      getMethodCommon("/ScreenService/Getinfo").then(res=>{
        if(res.code == 200){
          this.form = res.result;
        }
      })
    },
    onSubmit(){
      postMethodCommon("/ScreenService/AddOrUpdate",this.form).then(res=>{
        if(res.code == 200){
          this.$message({
            type:"success",
            message:"修改数据成功！",
          })
        }else{
          this.$message({
            type:"error",
            message:"修改数据失败！",
          })
        }
      })
    }

  }
}
</script>
<style scoped>
.add-container{
  width:calc( 100% - 0px);
  height: calc( 100% - 40px);
  padding:20px;
  background:#1d253d;
}
.add-container .form-contaner{
  width: calc( 100% - 40px);
  height: calc( 100% - 60px);
  background:#1d253d;
  overflow-y:auto;
}

.add-container .form-contaner::-webkit-scrollbar{
  width:10px;
}
.data-operate{
  text-indent:5px;
  width:100%;
  height:30px;
  color:#8a91aa;
  background:#2b324f;
  line-height:30px;
  margin-bottom:30px;
  cursor: pointer;
}
.item{
  width:100%;
  height:40px;
}
.item-name{
  width:120px;
  height:40px;
  line-height:40px;
  color:#8a91aa;
  float:left;
  text-align: right;
}
.item-value{
  width: calc( 100% - 140px);
  margin-left:20px;
  float:left;
  line-height: 40px;
}
::v-deep .el-input__inner{
  background:none;
  color:#8a91aa;
  box-shadow: none;
  border:1px solid #8a91aa;
  border-radius:0px;
}
::v-deep .el-textarea__inner{
  background:none;
  color:#8a91aa;
  box-shadow: none;
  border:1px solid #8a91aa;
  border-radius:0px;
}
::v-deep .el-radio__label{
  color:#8a91aa;
}

::v-deep .el-form-item__label{
  color:#8a91aa;
}

::v-deep .el-upload-dragger{
  background:rgba(0,0,0,0);
  border-radius:0px;
  border-color:#8a91aa;
  color:#8a91aa;
}
::v-deep .el-upload__text{
  color:#8a91aa;
}

::v-deep .el-color-picker__trigger{
  border-radius:0px;
  border:1px solid #8a91aa;
}
.icon-box{
  width:64px;
  height:64px;
  float:left;
  border:2px solid rgba(0,0,0,0);
  line-height: 64px;
  text-align: center;
  margin-right:6px;
  margin-bottom:6px;
  cursor:pointer;
  border-radius:3px;
}
.icon-box img{
  width:48px;
  margin-top:8px;

}
</style>