<template>
  <div class="root">
    <el-form ref="ruleForm" :model="listQuery" :rules="rules" label-width="100px" class="add-ruleForm">
      <el-form-item label="期/区" prop="phaseId">
        <el-select v-model="listQuery.phaseId" placeholder="期/区" @change="buildSelectChange(0)">
          <!--<el-option label="选择楼栋" value="-1" />-->
          <el-option
            v-for="item in phaseList"
            :key="item.id"
            :label="item.name"
            :value="item.id"/>
        </el-select>
      </el-form-item>
      <el-form-item label="栋" prop="buildingId">
        <el-select v-model="listQuery.buildingId" placeholder="栋" @change="buildSelectChange(1)">
          <!--<el-option label="选择楼栋" value="-1" />-->
          <el-option
            v-for="item in buildingList"
            :key="item.id"
            :label="item.name"
            :value="item.id"/>
        </el-select>
      </el-form-item>
      <el-form-item label="单元" prop="unitId">
        <el-select v-model="listQuery.unitId" placeholder="单元" @change="buildSelectChange(2)">
          <!--<el-option label="选择单元" value="-1" />-->
          <el-option
            v-for="item in unitList"
            :key="item.id"
            :label="item.name"
            :value="item.id"/>
        </el-select>
      </el-form-item>
      <el-form-item label="楼层" prop="levelId">
        <el-select v-model="listQuery.levelId" placeholder="楼层" @change="buildSelectChange(3)">
          <!--<el-option label="选择楼层" value="-1" />-->
          <el-option
            v-for="item in levelList"
            :key="item.id"
            :label="item.name"
            :value="item.id"/>
        </el-select>
      </el-form-item>
      <el-form-item label="户号" prop="roomNoId">
        <el-select v-model="listQuery.roomNoId" placeholder="户号" @change="taUserHasOwner">
          <!--<el-option label="选择户号" value="-1" />-->
          <el-option
            v-for="item in roomNoList"
            :key="item.id"
            :label="item.name"
            :value="item.id"/>
        </el-select>
      </el-form-item>
      <el-form-item label="手机号" prop="ownerTel" placeholder="手机号">
        <el-input v-model="listQuery.ownerTel" @blur="taUserHas('ruleForm')" style="width: 200px;"/>
      </el-form-item>
      <el-form-item label="身份" prop="roleId">
        <el-select v-model="listQuery.roleId" placeholder="身份">
          <el-option :disabled="roleDisabled" label="户主" value="1" />
          <el-option label="租客" value="2" />
          <el-option label="家属" value="3" />
        </el-select>
      </el-form-item>
      <el-form-item v-if="isRegistered" label="姓名" placeholder="姓名">
        <el-input v-model="listQuery.ownerName" style="width: 200px;"/>
      </el-form-item>
      <el-form-item v-if="isRegistered" label="性别">
        <el-radio v-model="listQuery.gender" label="1">男</el-radio>
        <el-radio v-model="listQuery.gender" label="2">女</el-radio>
      </el-form-item>
      <div v-if="isRegistered == false">
        <el-form-item label="注册状态：" >
          <span style="margin-left: 100px;">已注册</span>
        </el-form-item>
        <el-form-item label="姓名：" >
          <span style="margin-left: 100px;">{{ userName }}</span>
        </el-form-item>
        <el-form-item label="性别：" >
          <span style="margin-left: 100px;">{{ gender }}</span>
        </el-form-item>
        <el-form-item label="身份证号：" >
          <span style="margin-left: 100px;">{{ idCard }}</span>
        </el-form-item>
      </div>
      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      listQuery: {
        phaseId: '',
        buildingId: '',
        unitId: '',
        levelId: '',
        roomNoId: '',
        ownerName: '',
        ownerTel: '',
        roleId: '',
        gender: ''
      },
      isRegistered: true, // true 未注册 false 注册
      roleDisabled: false, // 是否禁用户主下拉选项
      phaseList: [], // 期 集合
      buildingList: [], // seletc 楼栋集合
      unitList: [], // seletc 单元集合
      levelList: [], // seletc 层 集合
      roomNoList: [], //  seletc 户号集合
      userName: '', // 用户姓名
      gender: '', // 性别
      idCard: '', // 身份证
      rules: {
        phaseId: [
          { required: true, message: '请输入期/区', trigger: 'blur' }
        ],
        buildingId: [
          { required: true, message: '请输入楼栋', trigger: 'blur' }
        ],
        unitId: [
          { required: true, message: '请输入单元', trigger: 'blur' }
        ],
        levelId: [
          { required: true, message: '请输入楼层', trigger: 'blur' }
        ],
        roomNoId: [
          { 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(formName) { // 提交
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.addBuilding()
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    resetForm(formName) { // 重置
      // 重置为未注册
      this.isRegistered = true
      // 重置为非户主
      this.roleDisabled = false

      console.log(this.isRegistered)
      this.$refs[formName].resetFields()
    },
    addBuilding() {
      // 加载框
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      this.$store.dispatch('AddBuilding', this.listQuery).then((res) => {
        if (res.code === '0') {
          this.$message({
            message: res.message,
            type: 'success'
          })
          this.$router.push({ name: 'building-index' })
          loading.close()
          return
        }
        this.$message.error(res.message)
        loading.close()
      }).catch(() => {
        loading.close()
        console.log('error AddBuilding')
      })
    },
    getPhase() { // 获取期
      this.listQuery.phaseId = ''
      this.$store.dispatch('GetPhaseList', this.listQuery).then((res) => {
        this.phaseList = res.data
      }).catch(() => {
        console.log('error phase BuildingAddress')
      })
    },
    getBuild() { // 获取楼栋
      this.listQuery.buildingId = ''
      this.$store.dispatch('GetBuildingList', this.listQuery).then((res) => {
        this.buildingList = res.data
      }).catch(() => {
        console.log('error building BuildingAddress')
      })
    },
    getUnit() { // 获取单元
      this.listQuery.unitId = ''
      this.$store.dispatch('GetUnitList', this.listQuery).then((res) => {
        this.unitList = res.data
      }).catch(() => {
        console.log('error unit BuildingAddress')
      })
    },
    getLevel() { // 获取楼层
      this.listQuery.levelId = ''
      this.$store.dispatch('GetLevelList', this.listQuery).then((res) => {
        this.levelList = res.data
      }).catch(() => {
        console.log('error level BuildingAddress')
      })
    },
    getRoomNo() { // 获取户号
      this.listQuery.roomNoId = ''
      this.$store.dispatch('GetRoomNoList', this.listQuery).then((res) => {
        this.roomNoList = res.data
      }).catch(() => {
        console.log('error roomNo BuildingAddress')
      })
    },
    buildSelectChange(value) { // select 的 change
      switch (value) {
        case 0: // 查询栋
          this.buildingList = []
          this.unitList = []
          this.levelList = []
          this.roomNoList = []
          this.listQuery.buildingId = ''
          this.listQuery.unitId = ''
          this.listQuery.levelId = ''
          this.listQuery.roomNoId = ''
          this.getBuild()
          break
        case 1: // 查询 单元
          this.unitList = []
          this.levelList = []
          this.roomNoList = []
          this.listQuery.unitId = ''
          this.listQuery.levelId = ''
          this.listQuery.roomNoId = ''
          this.getUnit()
          break
        case 2: // 查询 楼层
          this.levelList = []
          this.roomNoList = []
          this.listQuery.levelId = ''
          this.listQuery.roomNoId = ''
          this.getLevel()
          break
        case 3: // 查询 户号
          this.roomNoList = []
          this.listQuery.roomNoId = ''
          this.getRoomNo()
          break
      }
    },
    taUserHas(formName) { // 校验移动端手机号是否注册以及户主
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$store.dispatch('TaUserHas', this.listQuery).then((res) => {
            const resCode = res.code
            if (resCode === '1') {
              // 未注册
              this.isRegistered = true
              return
            }
            // 已经注册
            this.isRegistered = false

            const resData = res.data
            // 展示注册信息
            const resInfo = resData.info
            this.userName = resInfo.userName
            this.idCard = resInfo.idCard
            this.gender = resInfo.gender === '1' ? '男' : '女'
          }).catch(() => {
            console.log('TaUserHas error')
          })
        } else {
          console.log('error 校验号码')
          return false
        }
      })
    },
    taUserHasOwner() { // 根据 期/栋/单元/楼层/户号 校验是否有户主
      this.$store.dispatch('TaUserHasOwner', this.listQuery).then((res) => {
        this.roleDisabled = false
        const resData = res.data
        if (resData.boolRole === true) {
          // 表示已经是户主
          this.roleDisabled = true
        }
      }).catch(() => {
        console.log('TaUserHasOwner error')
      })
    }
  }
}
</script>

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