<!-- 新建项目/新建楼宇-->

<template>

  <div class="project-component">

    <LHeader text="新增楼层" :customBack="toCancel"></LHeader>

    <van-form
      @submit="onSubmit"
      :scroll-to-error="true"
      :show-error="false"
      validate-trigger="onSubmit"
    >

        <van-field
          label="楼层"
          required
           :rules="[{ required: true, message: '请填写楼层名称' }]"
        >
         <template #input>
            <van-radio-group v-model="form.type" direction="horizontal">
                <van-radio name="地上">地上</van-radio>
                <van-radio name="地下">地下</van-radio>
            </van-radio-group>
            </template>
        </van-field>
        <van-field
          label="楼层名称"
          v-model="form.name"
          required
          :rules="[{ required: true, message: '请填写楼层名称' }]"
        ><template #right-icon><span>层</span></template></van-field>

      <div class="action-btns">

        <van-button
          class="confirm-btn"
          :loading="loadingStatus"
          :loading-text="loadingText"
          round
          block
          type="info"
          native-type="submit"
        >
          保存
        </van-button>

        <van-button @click="toCancel" class="cancel-btn" round block type="warning">
          取消
        </van-button>

      </div>

    </van-form>
  </div>

</template>

<script>
import LHeader from "@/components/header.vue";
import { postFun } from "@/service/table";
export default {
  components: {
    LHeader,
  },
  props: {
    buildingId:{
        type:Number,
    }
  },
  destroyed(){
    this.toCancel()
  },
  data() {
    return {
      loadingStatus: false,
      loadingText: "保存中...",
      form: {}
    };
  },
  methods: {
    toCancel(data=null){
       this.$emit('close',data)
    },
    onSubmit(values){
        if(!this.buildingId){
            return;
        }
        this.form.buildingId = this.buildingId
        this.form.name = this.form.name+'层'
         postFun('/risk/plan/floor', this.form)
        .then(res => {
          this.$toast.clear();
          this.$toast.success({
            message: "提交成功",
            duration: 2000
          });
         this.toCancel(res.data)
        })
        .catch(() => {
         this.$emit('close')
        });
    }
  }
};
</script>

<style lang="less" scoped>

.project-component {
  position: fixed;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  z-index: 100;
  background: #fff;
  .van-form{
    height: calc(100vh - 1.6rem);
    overflow: auto;
}
.action-btns {
  margin-top: 1rem;
  padding: 0 0.5rem;
  .cancel-btn {
    margin-top: 0.3rem;
  }
}
}
</style>
