<template>
  <div class="lookOver">
    <div class="lookOver__header">
      <div class="lookOver__header--left">
        <img v-if="dataObj.avatar" :src="dataObj.avatar" alt="">
        <img v-else :src="headImg">
        <p>{{ dataObj.username }}</p>
      </div>
      <div class="lookOver__header--right">
        <router-link :to="{name:'compileUser',query:{id:this.id}}">
          <Button class="lookOver__header--right--btn" type="warning">{{$t('edit')}}</Button>
        </router-link>
        <Button class="lookOver__header--right--btn" @click="$router.go(-1)">{{$t('back')}}</Button>
      </div>
    </div>
    <div class="lookOver__body">
      <Form :label-width="100" class="lokOver__body__from">
        <FormItem :label="$t('account_level')+'：'">
            <p> {{ dataObj.member_level_name }} </p>
        </FormItem>
        <FormItem :label="$t('account')+'：'">
            <p> {{ dataObj.username }} </p>
        </FormItem>
        <FormItem :label="$t('nickname')+'：'">
            <p> {{ dataObj.nickname }} </p>
        </FormItem>
        <FormItem :label="$t('tel')+'：'">
            <p> {{ dataObj.mobile }} </p>
        </FormItem>
        <FormItem :label="$t('email')+'：'">
            <p> {{ dataObj.email }} </p>
        </FormItem>
        <FormItem :label="$t('sign_up_time')+'：'">
            <p> {{ dataObj.register_time }} </p>
        </FormItem>
        <FormItem :label="$t('sign_up_ip')+'：'">
            <p> {{ dataObj.ip }} </p>
        </FormItem>
        <FormItem :label="$t('status')+'：'">
            <p v-if='dataObj.memberStatusMap === 0' style="color: red"> {{ memberStatusMap[dataObj.memberStatusMap] }} </p>
            <p v-else style="color: green"> {{ memberStatusMap[dataObj.memberStatusMap] }} </p>
        </FormItem>
      </Form>
    </div>
  </div>
</template>

<script>
import { GetMember } from '@/api/user'
import { getToken } from '@/libs/util'
import headImg from '@/assets/images/headImg.jpg'
export default {
  data () {
    return {
      headImg,
      dataObj: {
        username: '',
        ip: '',
        mobile: '',
        nickname: '',
        register_time: '',
        email: '',
        avatar: '',
        member_level: 0,
        member_level_name: '',
        memberStatusMap: 0
      },
      id: '',
      // memberLevelNameMap: ['普通会员', '管理员', '超级管理员'], // todo
      memberStatusMap: [this.$t('disable'), this.$t('working')],
      token: getToken()
    }
  },
  created () {
    this.getUserInfo()
  },
  methods: {
    // 获取会员详细信息
    getUserInfo () {
      this.id = this.$route.query.id
      const formdata = new FormData()
      formdata.append('access_token', this.token)
      formdata.append('id', this.id)
      GetMember(formdata).then(res => {
        if (res.ret === 200) {
          const data = res.data.member
          this.dataObj = { username: data.username, ip: data.ip, mobile: data.mobile, nickname: data.nickname, register_time: data.register_time, email: data.email, avatar: data.avatar, member_level: data.member_level, memberStatusMap: data.member_status, member_level_name: data.member_level_name }
        }
      })
    }
  }
}
</script>

<style  lang='scss'>
.lookOver{
  background:rgba(255,255,255,1);
  box-shadow:0px 0px 30px 0px rgba(0,0,0,0.05);
  border-radius:10px;
  padding: 20px;
  &__header{
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
    &--left{
      display: flex;
      img{
        display:inline-block;
        width: 120px;
        height: 120px;
        border: 2px solid #999;
        margin-right: 20px;
      }
      p{
        font-weight: 700;
        font-size: 18px;
      }
    }
    &--right{
      margin-right: 50%;
      &--btn{
        margin-right: 20px;
      }
    }
  }
  &__body{
      outline: 1px solid #999;
      // outline-bottom: none;
      width: 600px;
      /deep/ .ivu-form-item{
        border-bottom: 1px solid #999;
        margin-bottom: 0;
      }
      /deep/ .ivu-form-item:last-child{
        border-bottom: none;
      }
      /deep/ .ivu-form-item-content{
        border-left: 1px solid #999;
        height: 33px;
        text-align: center;
      }
  }
}
</style>
