<template>
  <div class="root">
    <el-form ref="ruleForm" :model="listQuery" :rules="rules" label-width="100px" class="add-ruleForm">
      <el-form-item label="手机号" prop="ownerTel" placeholder="手机号">
        <span>{{ ownerTel }}</span>
      </el-form-item>
      <el-form-item>
        <span style="color: #99a9bf;">
          若想修改户主登录手机号，需要户主自己登录APP在个人中心修改。或者联系荟房网络运营人员核实后修改，因为此手机号可能在其他社区在用。
          若想修改成员为其他成员的手机号，请删除此成员后添加新成员。
        </span>
      </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 label="审核">
        <el-radio v-model="listQuery.verifyStatus" label="true">通过</el-radio>
        <el-radio v-model="listQuery.verifyStatus" label="false">不通过</el-radio>
      </el-form-item>
      <el-form-item v-if="listQuery.verifyStatus === 'false'" label="不通过的原因">
        <el-radio v-model="listQuery.remark" label="不认识的人的手机号">不认识的人的手机号</el-radio>
        <el-radio v-model="listQuery.remark" label="其他原因需要沟通">其他原因需要沟通</el-radio>
      </el-form-item>
      <div>
        <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 v-if="button_bol">
        <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: {
        userVerifyId: '',
        verifyStatus: '',
        roleId: '',
        remark: ''
      },
      button_bol: true, // 是否显示 确定和重置 按钮
      isRegistered: true, // true 未注册 false 注册
      roleDisabled: false, // 是否禁用户主下拉选项
      phaseList: [], // 期 集合
      buildingList: [], // seletc 楼栋集合
      unitList: [], // seletc 单元集合
      levelList: [], // seletc 层 集合
      roomNoList: [], //  seletc 户号集合
      userName: '', // 用户姓名
      ownerTel: '', // 手机号
      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.listQuery.userVerifyId = this.$route.query.id
    this.getByBuildId()
  },
  methods: {
    submitForm(formName) { // 提交
      this.updateBuilding()
    },
    resetForm(formName) { // 重置
      // 重置为非户主
      this.roleDisabled = false

      console.log(this.isRegistered)
      this.$refs[formName].resetFields()
    },
    getByBuildId() {
      this.$store.dispatch('GetByIdBuildingId', this.listQuery.userVerifyId).then((res) => {
        const resCode = res.code
        if (resCode === '1') {
          this.$message.error(res.message)
          return
        }

        const resData = res.data
        // 显示数据
        const resInfo = resData.info
        this.userName = resInfo.userName
        this.idCard = resInfo.idCard
        this.gender = resInfo.gender === '1' ? '男' : '女'
        this.ownerTel = resInfo.loginName

        if (resData.boolRole === true) {
          // 表示已经是户主
          this.roleDisabled = true
        }

        // 审核状态
        const resVerify = resData.verify
        const verifyStatus = resVerify.verifyStatus
        this.listQuery.verifyStatus = verifyStatus === '1' ? 'true' : verifyStatus === '0' ? '' : 'false'
        this.listQuery.roleId = resVerify.roleId + ''
        this.button_bol = verifyStatus === '0' ? true : false
      }).catch(() => {
        console.log('GetByIdBuildingId error')
      })
    },
    updateBuilding() { // 审核用户
      if (this.listQuery.roleId === '') {
        this.$message.error('请选择审身份!')
        return
      }
      if (this.listQuery.verifyStatus === '') {
        this.$message.error('请选择审核项!')
        return
      }
      this.$store.dispatch('UpdateBuilding', this.listQuery).then((res) => {
        const resCode = res.code
        if (resCode === '1') {
          this.$message.error(res.message)
          return
        }
        this.$message.success(res.message)
        this.$router.go(-1)
      }).catch(() => {
        console.log('UpdateBuilding error')
      })
    },
    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>
