<template>
         <el-row>
      <el-col :span="24">
        <el-form :model="form" ref="dataRef" label-width="120px" :rules="rules">
          <el-form-item label="总户数:" prop="households">
            <el-input v-model="form.households" type="number" placeholder="请输入" class="inputCss"/>
          </el-form-item>
          <el-form-item label="总人数:" prop="peopleNum">
            <el-input v-model="form.peopleNum" type="number" placeholder="请输入" class="inputCss"/>
          </el-form-item>
          <el-form-item label="给水量:" prop="inWater">
            <el-input v-model="form.inWater" type="number" placeholder="请输入" class="inputCss" />
            <span class="info">L人/天</span>
          </el-form-item>
          <el-form-item label="出水量:" prop="outWater">
            <el-input v-model="form.outWater" type="number" placeholder="请输入" class="inputCss"/>
          <span class="info">L人/天</span>
          </el-form-item>
        </el-form>
      </el-col>


    </el-row>

    <div class="footBottm">

      <el-button
       v-hasPermi="['ldmap:role:edit']"
        type="primary"
        @click="add()"
        style="margin-right: 50px"
        :loading="loading"
        >确定</el-button
      >
      <el-button
        type="warning"
         @click="
         ()=>{emit('closeDialog')}
        "
        >取消</el-button
      >
    </div>
</template>
<script setup lang="ts">
import {verificationAdd} from "@map/api/exit.js"
const loading = ref(false)
const props = defineProps({
  layerId:String,
  detailInfo:{
    type:Object,
    default:{
        households:'String',
        peopleNum:'String',
        inWater:'Number',
        outWater:'Number',
        geometryId:'String'
    }

  }
});

const emit = defineEmits(['closeDialog'])
const { proxy } = getCurrentInstance();
const  rules=ref( {
    inWater: [{ required: true, message: "数据不能为空", trigger: "blur" }],
    outWater: [{ required: true, message: "数据不能为空", trigger: "blur" }],
    households: [{ required: true, message: "数据不能为空", trigger: "blur" }],
    peopleNum: [{ required: true, message: "数据不能为空", trigger: "blur" }]
  })
const form =ref( props.detailInfo||{
   households:'',
        peopleNum:'',
        inWater:'',
        outWater:'',
})
function add(){
   proxy.$refs["dataRef"].validate(valid => {
       if (valid) {
        let data ={
              layersId:props.layerId,
              ...form.value
            }
            console.log(data)
            verificationAdd(data).then(res=>{
              emit('closeDialog')
            })
       }

   })


}
</script>
<style scoped lang="scss">
:deep(.el-form-item__label) {
  color: #fff;
}
:deep(.el-textarea__inner) {
  background: transparent;
  color: #fff;
}
:deep {
  .el-input__wrapper {
    background: rgb(0, 0, 0, 0.1);
  }
  .el-input__inner {
    color: #fff;
  }
}
.footBottm {
  display: flex;
  justify-content: end;
}
.inputCss{
  width:80%;
}
.info{
  color:#fff;
  padding-left:8px;
}
</style>
