<template>
  <el-dialog
    title="用户详情"
    center
    :visible.sync="dialogObj.show"
    width="800px">
    <el-row align="middle" type="flex">
      <el-col :span="4"><label>头像</label></el-col>
      <el-col :span="8">
        <img :src="userDetail.avatar"/>
      </el-col>
      <el-col :span="4"><label>昵称</label></el-col>
      <el-col :span="8">{{userDetail.nickname}}</el-col>
    </el-row>
    <el-row>
      <el-col :span="4"><label>手机号</label></el-col>
      <el-col :span="8">{{userDetail.mobile}}</el-col>
      <el-col :span="4"><label>用户ID</label></el-col>
      <el-col :span="8">{{userDetail.user_id}}</el-col>
    </el-row>
    <el-row>
      <el-col :span="4"><label>生日</label></el-col>
      <el-col :span="8">{{userDetail.birthday}}</el-col>
      <el-col :span="4"><label>邀请类型</label></el-col>
      <el-col :span="8">{{userDetail.invite_type}}</el-col>
    </el-row>
    <el-row>
      <el-col :span="4"><label>等级</label></el-col>
      <el-col :span="8">{{userDetail.level}}</el-col>
      <el-col :span="4"><label>邀请人ID</label></el-col>
      <el-col :span="8">{{userDetail.invite_user_id}}</el-col>
    </el-row>
    <el-row align="middle" type="flex">
      <el-col :span="4"><label>邀请码</label></el-col>
      <el-col :span="8">
         {{userDetail.invite_code}}
      </el-col>
      <el-col :span="4"><label>老师ID</label></el-col>
      <el-col :span="8">
        {{userDetail.teacher_id}}
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="4"><label>注册时间</label></el-col>
      <el-col :span="8">{{userDetail.created_at}}</el-col>
      <el-col :span="4"><label>最后登录</label></el-col>
      <el-col :span="8">{{userDetail.last_login_at}}</el-col>
    </el-row>
  </el-dialog>
</template>

<script>
  import {getUserDetailApi} from "../../service/api";
  export default {
    name: "detail",
    props:[
      'dialogObj'
    ],
    data(){
      return {
        userDetail:{},
        show:false
      }
    },
    methods:{
      getDetail(){
        if(!this.dialogObj.id) return;
        getUserDetailApi(this.dialogObj.id).then(res=>{
          this.userDetail = res
        })
      },
      initDialog(){
        this.getDetail();
        this.show = this.dialogObj.show;
      }
    },
    watch:{
      'dialogObj.show'(value){
        if(value){
          this.loading = true;
          this.initDialog()
        }
      },
      show(value){
        this.$emit("changeShow",value);
      }
    }
  }
</script>

<style scoped lang="less">
  .el-col{
    height: 60px;
    img{
      width: 50px;
      border-radius: 100px;
    }
    label{
      color: #5982e6;
    }
  }
</style>