<template>
  <el-dialog
    title="用户详情"
    center
    append-to-body
    :visible.sync="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>创建时间</label></el-col>
      <el-col :span="8">{{userDetail.created_at}}</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>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.level}}</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:[
      'showDetail',
      'showId'
    ],
    data(){
      return {
        userDetail:{},
        show:this.showDetail
      }
    },
    methods:{
      getDetail(){
        getUserDetailApi(this.showId).then(res=>{
          this.userDetail = res
        })
      }
    },
    watch:{
      show(value){
        this.$emit("changeShow",value);
      },
      showDetail(value){
        this.show = value
        this.getDetail()
      }
    }
  }
</script>

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