<template>
  <div class="main">
    <h3>{{$t('personal_info')}}</h3>
    <div class="content">
      <header class="header">
        <img :src="avatar">
        <span class="username">{{nickname}}</span>
        <Button @click="setInfo">{{$t('modify_personal_info')}} &gt;&gt;</Button>
    </header>
      <Table
      :columns="columns1"
      :data="data1"
      :show-header=false
      width=660
      >
      </Table>
    </div>

  </div>
</template>

<script>
import headImg from '@/assets/images/headImg.jpg'
import { GetAccountInfo } from '@/api/account.js'
import { getToken } from '@/libs/util'
export default {
  name: 'accountInfo',
  data () {
    return {
      token: getToken(),
      columns1: [
        {
          title: 'Name',
          key: 'name',
          align: 'center',
          width: 250
        },
        {
          title: 'value',
          key: 'value'
        }
      ],
      data1: [],
      memberLevelArr: [],
      memberStatusArr: [this.$t('disable'), this.$t('enable')],
      nickname: '',
      avatar: headImg
    }
  },
  created () {
    this.getInfo()
  },
  methods: {
    setInfo () {
      this.$router.push({ name: 'accountSettings' })
    },
    getInfo () {
      const data = new FormData()
      data.append('access_token', this.token)
      GetAccountInfo(data).then(res => {
        // console.log(res)
        const info = res.data.profile
        this.data1 = [{
          name: this.$t('account_level') + ':',
          value: this.memberLevelArr[info.member_level]
        },
        {
          name: this.$t('account') + ':',
          value: info.username
        },
        {
          name: this.$t('account_nickname') + ':',
          value: info.nickname
        },
        {
          name: this.$t('tel') + ':',
          value: info.mobile || '-'
        },
        {
          name: this.$t('email') + ':',
          value: info.email || '-'
        },
        {
          name: this.$t('sign_up_time') + ':',
          value: info.register_time
        },
        {
          name: this.$t('account_status') + ':',
          value: info.member_status ? this.memberStatusArr[info.member_status] : '-'
        }
        ]
        this.avatar = info.avatar || headImg
        this.nickname = info.nicknames
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.main {
  padding: 18px;
  background-color: #fff;
  height: 800px;

  h3{
    font-size: 18px;
    padding-bottom: 20px;
  }
}
.header {
  width: 660px;
  height: 140px;
  padding: 20px 30px;
  position: relative;
  border-bottom: rgb(175, 175, 175) 1px solid;
  background: rgb(247, 246, 245);

  img {
    width: 100px;
    height: 100px;
    float: left;
  }

  .username {
    font-size: 30px;
    margin-left: 15px;
    line-height: 100px;
    float: left;
  }

  button {
    position: absolute;
    left: 500px;
    bottom: 45px;
  }

}
.content {
  width: 660px;
  margin: 10px 40px;
}
</style>
