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

<template>

  <div class="project-component">

    <LHeader text="复制楼层"></LHeader>

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

        <van-field
         required
         clickable
         label-width="10em"
          label="原始楼层（需要复制的数据）"
           :value="form.sourceFloorIdName"
          :rules="[{ required: true, message: '请填写原始楼层' }]"
            @click="seletFloor('sourceFloorId')"
        ></van-field>
        <van-field
        label-width="10em"
          label="目标楼层（需要填充的数据）"
          :value="form.targetFloorIdName"
          required
          :rules="[{ required: true, message: '请填写目标楼层' }]"
            @click="seletFloor('targetFloorId')"
        ></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>
              <!-- 楼层弹出层 -->
          <van-popup
            v-model="ShowfloorList"
            position="bottom"
            :style="{ height: '100%' }"
          >
            <selectFloor
              v-if="ShowfloorList"
              :listdata="floorSource"
              @closeSlect="closeSlectfloor"
              @saveSlect="saveSlectfloor"
            ></selectFloor>
          </van-popup>
  </div>

</template>

<script>
import LHeader from "@/components/header.vue";
import selectFloor from "@/components/selectFloor.vue";
import { postFun,getFun } from "@/service/table";
export default {
  components: {
    LHeader,
    selectFloor
  },
  mounted(){
    // this.form.planId = this.$route.query;
    const {buildingId,planId} = this.$route.query;
    this.form = {...this.form,buildingId,planId}
    this.getFloor()
  },
  data() {
    return {
      loadingStatus: false,
      loadingText: "保存中...",
      ShowfloorList: false,
      floorSource:[],
      form: {},
      userPrefix:''
    };
  },
  methods: {
     seletFloor(name) {
      this.ShowfloorList = true;
      this.userPrefix = name;
    },
    closeSlectfloor() {
      this.ShowfloorList = false;
    },
    saveSlectfloor(data) {
      this.form[this.userPrefix] = data.id;
      this.form[this.userPrefix+"Name"] = data.text;
      console.log(this.form);
      this.ShowfloorList = false;
    },
    renameKeyInTree(data, oldKey, newKey) {
      let arr = data.map(item => {
        const newItem = { ...item };

        if (item.hasOwnProperty(oldKey)) {
          newItem[newKey] = newItem[oldKey];
          delete newItem[oldKey];
        }

        if (newItem.children && newItem.children.length > 0) {
          newItem.children = this.renameKeyInTree(
            newItem.children,
            oldKey,
            newKey
          );
        }
        return newItem;
      });

      return arr;
    },
     getFloor() {
        getFun(`/risk/plan/floor/list/${this.form.buildingId}`)
            .then(res => {
            let newArr = this.renameKeyInTree(res.data, "name", "text");
            this.floorSource = newArr;
            })
            .catch(() => {
            this.$toast.fail("加载失败,请稍后再试");
            });
    },
    onSubmit(){
        this.$dialog.confirm({
            title: '提示',
            message: '是否将原始楼层覆盖到目标楼层，目标楼层下的全部数据将清空？',
        })
        .then(() => {
            // on confirm
             const {targetFloorId,sourceFloorId,planId} = this.form
         postFun(`/risk/plan/copy/floor/${this.form.planId}/${sourceFloorId}/${targetFloorId}`)
        .then(res => {
            this.$toast.success({
                message: "提交成功",
                duration: 2000
            });
            this.toCancel()
        })
        .catch(() => {
            this.$emit('close')
        });
        })
        .catch(() => {
            // on cancel
        });
       
    },
    toCancel(){
        this.$router.back()
    }
  }
};
</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>
