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

<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: String,
    }
  },
  destroyed() {
    this.toCancel()
  },
  data() {
    return {
      loadingStatus: false,
      loadingText: "保存中...",
      form: {}
    };
  },
  methods: {
    toCancel(data = null) {
      this.$emit('close', data)
    },
    onSubmit(values) {
      console.log(this.buildingId)
      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>
