<template>
  <div id="root">
    <div class="form-div">
      <el-form ref="form" label-width="150px" label-position="left">
        <el-dialog
        title="提示"
        :visible.sync="dialogVisible"
        width="30%">
        <span><el-radio v-model="listQuery.remark" label="不认识的人的手机号">不认识的人的手机号</el-radio>
              <el-radio v-model="listQuery.remark" label="其他原因需要沟通">其他原因需要沟通</el-radio>
        </span>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="submitAudit()">确 定</el-button>
        </span>
      </el-dialog>
        <el-form-item label="基本信息"/>
        <el-form-item>
          <table>
            <tr>
              <td >姓名</td>
              <td style="color:#888888">{{ listQuery.userName }}</td>
              <td>性别</td>
              <td style="color:#888888">{{listQuery.gender=='1'?'男':'女'}}</td>
              <td>手机号</td>
              <td style="color:#888888">{{ listQuery.loginName }}</td>
            </tr>
            <tr>
              <td>微信昵称</td>
              <td style="color:#888888">{{ listQuery.nickname }}</td>
              <td>微信ID</td>
              <td style="color:#888888">{{ listQuery.openid }}</td>
              <td>身份证</td>
              <td style="color:#888888">{{ listQuery.idCard }}</td>
            </tr>
            <tr>
              <td>头像</td>
              <td v-if="listQuery.headPortrait !=null"><img  :src="listQuery.headPortrait" preview  width="150" height="120"  style="margin:5px;"></td>
            </tr>
          </table>
     
        </el-form-item>
        <div> <hr style="height:1px;border:none;border-top:1px solid #FF8888;margin-right:100%"  width="100%"/></div>  
        <el-form-item label="在当前房屋">
          <span style="transform:translateY(80%);color:#A9A9A9;font-size: 14px; color: #606266;">{{ listQuery.phaseName + listQuery.buildingName + listQuery.unitName + listQuery.levelName + listQuery.roomNoName }}</span>
            <table style="transform:translateY(20%);">   
            <tr>
              <td>身份</td>
              <td style="color:#888888" v-if="listQuery.off=='1'">{{ listQuery.description }}</td>
              <td v-if="listQuery.off=='2'">
                <el-select v-model="listQuery.roleId" placeholder="请选择">
                  <el-option label="户主" value="1"/>
                  <el-option label="租客" value="2"/>
                  <el-option label="家属" value="3"/>
                </el-select>
              </td>
              <td>审核状态
              <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>                   
              <span v-if="listQuery.verifyStatus=='1'">{{ '审核通过' }}</span>
              <span v-if="listQuery.verifyStatus=='2' && listQuery.off=='1' "><font color="red">{{ '审核未通过' }}</font></span>
              <span v-if="listQuery.verifyStatus=='0' && listQuery.off=='1' "><font color="red">{{ '未审核' }}</font></span>    
              <span v-if="listQuery.off=='2' && listQuery.verifyStatus !='1'">
                <el-select v-model="listQuery.status" placeholder="请选择">
                  <el-option label="未审核" value="0"/>
                  <el-option label="通过" value="1"/>
                  <el-option label="不通过" value="2"/>
                </el-select>
              </span>
              </td>
              <td>资料手机</td>
              <td style="color:#888888">{{ listQuery.loginName }}</td>
              <td v-if="listQuery.off=='1'"><el-button round  @click="offEnd()">修改</el-button></td>
              <td v-if="listQuery.off=='2'"><el-button type="primary" round v-model="listQuery.off" :label="2" @click="userVerifyAudit">提交</el-button></td>
            </tr>
            <tr>
              <td>人脸</td>
               <td v-if="listQuery.faceImg !=null"><img  :src="listQuery.faceImg" preview  width="150" height="120"  style="margin:5px;"></td>
            </tr>          
          </table>
        </el-form-item>
        <div>
         <div> <hr style="height:1px;border:none;border-top:1px solid #FF8888;margin-right:100%"  width="100%"/></div>     
         <div style="transform:translateY(120%);"><span style="font-size:0.7vw; color: #606266;">关联本小区其他房屋</span></div> 
         <el-form-item>
          <table >
            <tr style="transform:translateY(-10%);">
              <td style="color:#A9A9A9">&emsp;&emsp;&emsp;&emsp;使用用户手机号在小区用户列表中搜索查看</td>           
            </tr>
            <tr style="transform:translateY(38%);">
              
              <td  v-for="room of listQuery.roomInfoList" style="color:#888888">{{room}}</td><br>           
            </tr>
  
          </table>
         </el-form-item>
        <div> <hr style="height:1px;border:none;border-top:1px solid #FF8888;margin-right:100%"  width="100%"/></div>
        </div>
        <span style="color:#A9A9A9;font-size: 14px; color: #606266;">
        若想修改户主登录手机号，需要户主自己登录APP在个人中心修改。或者联系荟房网络运营人员核实后修改，因为此手机号可能在其他社区在用。
        若想修改成员为其他成员的手机号，请删除此成员后添加新成员。
        </span>  
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      listQuery: {
        userVerifyId: '',
        userName: '',
        gender: '',
        loginName: '',
        nickname: '',
        openid: '',
        idCard: '',
        headPortrait: '',
        description: '',
        verifyStatus: '',
        faceImg: '',
        roomInfoList: '',
        phaseName: '', // 期
        buildingName: '', // 栋
        unitName: '' , // 单元
        levelName: '', // 层
        roomNoName: '', // 室
        off: '1', // 控制按钮的展示
        type: '', 
        roleId:'',
        status: '', // select值
        remark: ''
      },
      total: 0, // 数据总数
      dialogVisible: false
      
    }
  },
  name: 'InfoIndex',

   mounted() {
    this.listQuery.userVerifyId = this.$route.query.id
    this.buildingDetails()
  },
    methods: {
      buildingDetails() {
      this.$store.dispatch('BuildingDetails', this.listQuery).then((res) => {
       this.listQuery.userName  = res.data.taUser.userName
       this.listQuery.gender  = res.data.taUser.gender
       this.listQuery.loginName  = res.data.taUser.loginName
       this.listQuery.nickname  = res.data.taUser.nickname
       this.listQuery.openid = res.data.taUser.openid
       this.listQuery.idCard = res.data.taUser.idCard
       this.listQuery.headPortrait = res.data.taUser.headPortrait
       this.listQuery.description = res.data.taUser.description
       this.listQuery.verifyStatus = res.data.taUserVerify.verifyStatus + ''
       this.listQuery.status = res.data.taUserVerify.verifyStatus + ''
       this.listQuery.faceImg = res.data.taUserVerify.faceImg
       this.listQuery.roomNoName = res.data.taUserVerify.roomNoName
       this.listQuery.roomInfoList  = res.data.roomInfoList
       this.listQuery.roleId = res.data.taUserVerify.roleId + ''
       this.listQuery.phaseName = res.data.taUserVerify.phaseName
       this.listQuery.unitName = res.data.taUserVerify.unitName
       this.listQuery.buildingName = res.data.taUserVerify.buildingName
       this.listQuery.levelName = res.data.taUserVerify.levelName

       console.log('')
      }).catch(() => {
        console.log('BuildingDetails error')
      })
    },
  offEnd(){
    this.listQuery.type= ''
    this.listQuery.off='2'
   console.log('this.listQuery.off',this.listQuery.off)
  },
  userVerifyAudit(){
    // 审核不通过的情况下弹框选择提示原因
    if(this.listQuery.status=='2'){
      this.dialogVisible = true
      return
     }
     this.submit()
    },

    submitAudit(){
      this.dialogVisible = true
      this.submit()
    },
    // 审核结果提交
    submit(){
      this.$store.dispatch('VerifyinfoAdd', this.listQuery).then((res) => {
        const resCode = res.code
        if (resCode === '0') {
          this.$message({
            message: res.message,
            type: 'success'
          })
          this.$router.push({ name: 'building-index' })
        }
        if (resCode === '1') {
          this.$message.error(res.message)
        }
      }).catch(() => {
        console.log('UserVerifyAudit error')
      })
    }
  }

}
 
</script>

<style scoped>
table tr td {
  padding-right: 50px;
}
.form-div {
  display: flex;
  justify-content: center;
}
</style>
