<template>
  <div class="root">
    <el-form ref="listQuery" v-model="listQuery"  label-width="100px" class="add-listQuery">
      <el-form-item label="当前期/区" prop="phase">
      <el-select v-model="listQuery.phase"  style="transform:translateY(-10%);" placeholder="期/区" @change="buildSelectChange(0)">
          <el-option
            v-for="item in phaseList"
            :key="item.id"
            :label="item.phase"
            :value="item.phase"/>
      </el-select>
       </el-form-item>
      <el-form-item label="修改期/区" prop="phase">
        <el-input v-model="listQuery.updatePhase" placeholder="请输入修改后的期/区，不输入则默认当前"/>
      </el-form-item>

      <el-form-item label="当前栋" prop="phase">  
      <el-select v-model="listQuery.building" style="transform:translateY(-10%);" placeholder="栋" @change="buildSelectChange(1)">
          <!--<el-option label="选择楼栋" value="-1" />-->
          <el-option
            v-for="item in buildingList"
            :key="item.id"
            :label="item.building"
            :value="item.building"/>
     </el-select>
     </el-form-item>
      <el-form-item label="修改栋" prop="building">
        <el-input v-model="listQuery.updateBuilding"  placeholder="请输入修改后的修改栋，不输入则默认当前"/>
      </el-form-item>

      <el-form-item label="当前单元" prop="phase">   
      <el-select v-model="listQuery.unit" style="transform:translateY(-10%);" placeholder="单元" @change="buildSelectChange(2)">
          <!--<el-option label="选择单元" value="-1" />-->
          <el-option
            v-for="item in unitList"
            :key="item.id"
            :label="item.unit"
            :value="item.unit"/>
        </el-select>
        </el-form-item>
      <el-form-item label="修改单元" prop="unit">
        <el-input v-model="listQuery.updateUnit" placeholder="请输入修改后的单元，不输入则默认当前"/>
      </el-form-item>

      <el-form-item label="当前楼层" prop="phase">   
      <el-select v-model="listQuery.level" style="transform:translateY(-10%);" placeholder="楼层" @change="buildSelectChange(3)">
          <!--<el-option label="选择楼层" value="-1" />-->
          <el-option
            v-for="item in levelList"
            :key="item.id"
            :label="item.level"
            :value="item.level"/>
      </el-select>
      </el-form-item>
      <el-form-item label="修改楼层" prop="level">
        <el-input v-model="listQuery.updateLevel" placeholder="请输入修改后的楼层，不输入则默认当前"/>
      </el-form-item>

      <el-form-item label="当前户" prop="phase">     
      <el-select v-model="listQuery.roomNo" style="transform:translateY(-10%);" placeholder="户号">
      <el-option v-for="item in roomNoList" :key="item.id" :label="item.roomNo" :value="item.roomNo"/>
      </el-select>
      </el-form-item>
      <el-form-item label="修改户" prop="roomNo">
        <el-input v-model="listQuery.updateRoomNo" placeholder="请输入修改后的户，不输入则默认当前"/>
      </el-form-item>
      
      <!-- <el-form-item label="当前户" prop="phase">     
      <el-select v-model="listQuery.roomNo" style="transform:translateY(-10%);" placeholder="户号">
      <el-option label="选择户号" value="-1" />
      <el-option v-for="item in roomNoList" :key="item.id" :label="item.roomNo" :value="item.roomNo"/>
      </el-select>
      </el-form-item>
      <el-form-item label="修改户" prop="roomNo">
        <el-input v-model="listQuery.updateRoomNo" placeholder="请输入修改后的户，不输入则默认当前"/>
      </el-form-item> -->

      <el-form-item>
        <el-button type="primary" @click="submitForm()">确定</el-button>
        <el-button @click="backIndex">返回</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      listQuery: {
        id: '',
        phase: '',// 当前期
        updatePhase:'',// 修改后的期
        building: '',// 当前楼栋 
        updateBuilding:'', // 修改后的楼栋
        unit: '', // 当前单元
        updateUnit:'', // 修改后的单元
        level: '', // 当前楼层
        updateLevel:'', // 修改后的楼层
        roomNo: '', //当前户
        updateRoomNo: '', // 修改后的户
        roomNoListpp: ''
      },
      total: 0, // 数据总数
      phaseList: [], // 期 集合
      buildingInfoLists: [], // 表格数据集合
      buildingList: [], // seletc 楼栋集合
      unitList: [], // seletc 单元集合
      levelList: [], // seletc 层 集合
      roomNoList: [], //  seletc 户号集合
      listLoading: true, // 加载圈
      deleteIds: [], // 需要删除的id集合
      tableData: [],
      roomNoListpp:[],
      

      isOwnerTel: false, // 手机号是否可以编辑 true 不可编辑  false 为可编辑
    //   rules: {
    //     phase: [
    //       { required: true, message: '请输入期/区', trigger: 'blur' }
    //     ],
    //     building: [
    //       { required: true, message: '请输入楼栋', trigger: 'blur' }
    //     ],
    //     unit: [
    //       { required: true, message: '请输入单元', trigger: 'blur' }
    //     ],
    //     level: [
    //       { required: true, message: '请输入楼层', trigger: 'blur' }
    //     ],
    //     roomNo: [
    //       { required: true, message: '请输入户号', trigger: 'blur' }
    //     ],
    //     ownerName: [
    //       { required: true, message: '请输入姓名', trigger: 'blur' }
    //     ],
    //     ownerTel: [
    //       { required: true, message: '请输入手机号', trigger: 'blur' },
    //       { min: 11, max: 11, required: true, message: '请输入11位手机号', trigger: 'blur' }
    //     ]
    //   }
    }
  },
  mounted() {
    this.getPhase()
  },
  methods: {
    submitForm() { // 提交
        this.$store.dispatch('CommunityBuildingAdd', this.listQuery).then((res) => {
      }).catch(() => {
        this.listLoading = false
        console.log('error CommunityBuildingAdd')
      })
    },
     buildSelectChange(value) { // select 的 change
      switch (value) {
        case 0: // 查询栋
          this.buildingList = []
          this.unitList = []
          this.levelList = []
          this.roomNoList = []
          this.listQuery.building = ''
          this.listQuery.unit = ''
          this.listQuery.level = ''
          this.listQuery.roomNo = ''
          this.getBuild()
          break
        case 1: // 查询 单元
          this.unitList = []
          this.levelList = []
          this.roomNoList = []
          this.listQuery.unit = ''
          this.listQuery.level = ''
          this.listQuery.roomNo = ''
          this.getUnit()
          break
        case 2: // 查询 楼层
          this.levelList = []
          this.roomNoList = []
          this.listQuery.level = ''
          this.listQuery.roomNo = ''
          this.getLevel()
          break
        case 3: // 查询 户号
          this.roomNoList = []
          this.listQuery.roomNo = ''
          this.getRoomNo()
          break
      }
    },
    getPhase() { // 获取期
      this.listQuery.phase = ''
      this.$store.dispatch('BuildingHouse', this.listQuery).then((res) => {
        this.phaseList = res.data
      }).catch(() => {
        console.log('error phase BuildingHouse')
      })
    },
    // 获取楼栋
    getBuild() { 
      this.listQuery.building = ''
      this.$store.dispatch('BuildingHouse', this.listQuery).then((res) => {
        this.buildingList = res.data
      }).catch(() => {
        console.log('error build BuildingHouse')
      })
    },
    getUnit() { // 获取单元
      this.listQuery.unit = ''
      this.$store.dispatch('BuildingHouse', this.listQuery).then((res) => {
        this.unitList = res.data
      }).catch(() => {
        console.log('error unit BuildingHouse')
      })
    },
    getLevel() { // 获取楼层
      this.listQuery.level = ''
      this.$store.dispatch('BuildingHouse', this.listQuery).then((res) => {
        this.levelList = res.data
      }).catch(() => {
        console.log('error level BuildingHouse')
      })
    },
    getRoomNo() { // 获取户号
      this.listQuery.roomNo = ''
      this.$store.dispatch('BuildingHouse', this.listQuery).then((res) => {
        this.roomNoList = res.data
      }).catch(() => {
        console.log('error roomNo BuildingHouse')
      })
    },
  }
}
</script>

<style scoped>
.add-listQuery{
  width: 800px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 50px;
}
</style>
