<template>
  <a-spin :spinning="confirmLoading">
    <j-form-container :disabled="formDisabled">
      <a-form-model ref="form" :model="model" :rules="validatorRules" slot="detail">
        <a-row>
          <a-col :span="24">
            <a-form-model-item label="楼栋" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="buildId">
<!--              <a-input v-model="model.buildId" placeholder="请输入楼栋ID"  ></a-input>-->
              <a-select
                      show-search
                      placeholder="请选择楼栋"
                      v-model="model.buildId"
                      option-filter-prop="children"
                      @change="onBuildChange"
              >
                <a-select-option v-for="item in buildingTreeData" :key="item.id" >
                  {{ item.name }}
                </a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="楼层" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="floorId">
<!--              <a-input v-model="model.floorId" placeholder="请输入楼层ID"  ></a-input>-->
              <a-select
                      show-search
                      placeholder="请选择楼层"
                      v-model="model.floorId"
                      option-filter-prop="children"
                      @change="onFloorChange"
              >
                <a-select-option v-for="item in floorData" :key="item.id" >
                  {{ item.name }}
                </a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="房间号" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="roomId">
<!--              <a-input v-model="model.roomNumber" placeholder="请输入房间号"  ></a-input>-->
              <a-select
                      show-search
                      placeholder="请选择楼栋"
                      v-model="model.roomId"
                      option-filter-prop="children"
              >
                <a-select-option v-for="item in roomData" :key="item.id" >
                  {{ item.prefix+item.name }}
                </a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="关联号" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="associationNumber">
              <a-input v-model="model.associationNumber" placeholder="请输入关联号"  ></a-input>
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
    </j-form-container>
  </a-spin>
</template>

<script>

  import { httpAction, getAction } from '@/api/manage'
  import { validateDuplicateValue } from '@/utils/util'
  import { buildingTree, queryFloorByParentId,queryRoomByFloorId } from "@/api/roomBuildingApi";

  export default {
      name: 'doorLockForm',
      components: {},
      props: {
          //表单禁用
          disabled: {
              type: Boolean,
              default: false,
              required: false
          }
      },
      data() {
          return {
              model: {},
              labelCol: {
                  xs: {span: 24},
                  sm: {span: 5},
              },
              wrapperCol: {
                  xs: {span: 24},
                  sm: {span: 16},
              },
              confirmLoading: false,
              validatorRules: {
                  buildId: [
                      {required: true, message: '请选择楼栋!'},
                  ],
                  floorId: [
                      {required: true, message: '请选择楼层!'},
                  ],
                  roomId: [
                      {required: true, message: '请选择房间号!'},
                  ],
                  associationNumber: [
                      {required: true, message: '请输入关联号!'},
                  ],
              },
              url: {
                  add: "/business/busDoorLock/add",
                  edit: "/business/busDoorLock/edit",
                  queryById: "/business/busDoorLock/queryById"
              },
              buildingTreeData: [],
              floorData: [],
              roomData: [],
          }
      },
      computed: {
          formDisabled() {
              return this.disabled
          },
      },
      created() {
          //备份model原始值
          this.modelDefault = JSON.parse(JSON.stringify(this.model));

          buildingTree().then((res) => {
              if (res.code == 200) {
                  console.log(res.result)
                  this.buildingTreeData = res.result;
              }
          });
      },
      methods: {
          add() {
              this.edit(this.modelDefault);
          },
          edit(record) {
              this.model = Object.assign({}, record);
              this.visible = true;
              if (this.model.id){
                  queryFloorByParentId(
                      {
                          parentId: this.model.buildId
                      }
                  ).then((res) => {
                      if (res.code == 200) {
                          this.floorData = res.result;
                      }
                  });
                  queryRoomByFloorId(
                      {
                          floorId: this.model.floorId
                      }
                  ).then((res) => {
                      if (res.code == 200) {
                          this.roomData = res.result;
                      }
                  });
              }
          },
          submitForm() {
              const that = this;
              // 触发表单验证
              this.$refs.form.validate(valid => {
                  if (valid) {
                      that.confirmLoading = true;
                      let httpurl = '';
                      let method = '';
                      if (!this.model.id) {
                          httpurl += this.url.add;
                          var info = JSON.parse(localStorage.getItem("storeInfo"));
                          this.model.hotelId = info.id;
                          method = 'post';
                      } else {
                          httpurl += this.url.edit;
                          method = 'put';
                      }
                      httpAction(httpurl, this.model, method).then((res) => {
                          if (res.success) {
                              that.$message.success(res.message);
                              that.$emit('ok');
                          } else {
                              that.$message.warning(res.message);
                          }
                      }).finally(() => {
                          that.confirmLoading = false;
                      })
                  }

              })
          },
          onBuildChange() {
              console.log(this.buildingTreeData)
              let bIndex = this.buildingTreeData.findIndex(s => s.id == this.model.buildId)
              let currentFloorNames = (this.buildingTreeData[bIndex].children || []).map(s => s.name)
              console.log(currentFloorNames)
              // this.floorNames = currentFloorNames
              // this.roomTree = JSON.parse(JSON.stringify(this.roomTree))
              var param = {
                  parentId: this.model.buildId
              }
              queryFloorByParentId(param).then((res) => {
                  if (res.code == 200) {
                      this.floorData = res.result;
                  }
              });
          },
          onFloorChange() {
              var param = {
                  floorId: this.model.floorId
              }
              queryRoomByFloorId(param).then((res) => {
                  if (res.code == 200) {
                      this.roomData = res.result;
                  }
              });
          },
      }
  }
</script>
