<template>
  <!-- 头部 -->
  <div class="member-head">
    <div class="content">
      <a href="javascript:void(0)" class="logo"></a>
      <div class="nav">
        <nuxt-link
          to="/member-center/member-center"
          href="javascript:void(0)"
          :class="['item', tabType == 0 ? 'active' : '']"
          >{{$t('memberCenter.home')}}</nuxt-link
        >
        <nuxt-link
          to="/member-center/buy-member"
          href="javascript:void(0)"
          :class="['item', tabType == 1 ? 'active' : '']"
          >{{$t('memberCenter.purchaseMembership')}}</nuxt-link
        >
        <nuxt-link
          to="/member-center/member-equity"
          href="javascript:void(0)"
          :class="['item', tabType == 2 ? 'active' : '']"
          >{{$t('memberCenter.memberBenefits')}}</nuxt-link
        >
        <nuxt-link
          to="/member-center/integral-mall"
          href="javascript:void(0)"
          :class="['item', tabType == 3 ? 'active' : '']"
          >{{$t('memberCenter.pointsMall')}}</nuxt-link
        >
      </div>
      <div class="user" v-show="showMemberInfo">
        <div class="user-box">
          <div class="img">
            <img :src="userPic" v-if="userPic" alt />
            <img src="~/assets/images/buyer-img.png" v-if="!userPic" alt />
          </div>
          <div class="name">{{ memberInfo.nickName }}</div>
          <div :class="['grow-date',this.$store.state.locale == 'en'?'en':'']">
            <div class="growth-box">
              <div class="text">{{$t('memberCenter.growthValue')}}：</div>
              <div class="growth">
                <span
                  class="percent"
                  :style="{
                    width: (memberInfo.growth / memberInfo.nextGrowth) <1? (memberInfo.growth / memberInfo.nextGrowth) * 100 + '%' : '100%',
                    borderRadius: (memberInfo.growth / memberInfo.nextGrowth) <1 ? '12px 0 0 12px' : '12px',
                    }"
                ></span>
                <span class="number" v-if="memberInfo.nextGrowth && memberInfo.growth < memberInfo.nextGrowth">{{ memberInfo.growth }}/{{ memberInfo.nextGrowth }}</span>
                <span class="number" v-else-if="!memberInfo.nextGrowth">{{$t('memberCenter.memberFull')}}</span>
                <span class="number" v-else>{{ memberInfo.growth }} {{$t('memberCenter.upgradeable')}}</span>
              </div>
              <div class="rank">{{ memberInfo.levelName }}</div>
            </div>
            <!-- <div class="date" v-if="memberInfo.levelType != 0">
              <div class="text" style="width:60px">会员等级：</div>
              <div class="rank">{{ memberInfo.levelName }}</div>
            </div> -->
            <div class="date" v-if="memberInfo.levelType != 0">
              <div class="text">{{$t('memberCenter.expirationDate')}}：</div>
              <div class="time">{{ memberInfo.endTime }} {{$t('memberCenter.expiration')}}</div>
            </div>
          </div>
        </div>
        <a href="javascript:void(0)" class="out" @click="loginOut">{{$t('memberCenter.logout')}}</a>
      </div>
    </div>
  </div>
  <!-- /头部 -->
</template>

<script>
import Cookie from 'js-cookie'
export default {
  data () {
    return {
      memberInfo: {},
      tabType: 0,
      // tabType: this.$router.history.current
      path: this.$router.history.current.path,
      userPic: "",  //会员头像
      showMemberInfo: false,
    }
  },
  mounted () {
    this.path == '/member-center/member-center' ? this.showMemberInfo = false : this.showMemberInfo = true

    const pathIndex = this.path.indexOf("/", this.path.indexOf("/") + 1)
    const currentPath = this.path.substring(pathIndex + 1)
    if (currentPath == 'member-center') {
      this.tabType = 0
    } else if (currentPath == 'buy-member') {
      this.tabType = 1
    } else if (currentPath == 'member-equity') {
      this.tabType = 2
    } else if (currentPath == 'integral-mall') {
      this.tabType = 3
    }
    //用户信息
    this.$axios.get('/p/score/scoreLevel/page?levelType=' + 0).then(({ data }) => {
      this.memberInfo = data
      console.log(data)
    })

    // 获取会员头像
    this.$axios.get('/p/user/userInfo').then(({ data }) => {
      this.userPic = data.pic
    })


  },
  methods: {
    /**
     * 退出登录
     */
    loginOut () {
      this.$axios.post('/logOut').then(({ data }) => {
        const user = {
          nickName: '',
          userAvatar: ''
        }
        this.$store.commit('user/SET_USER', user)
        Cookie.remove('token')
        window.localStorage.clear()
        this.$route.path == '/' ? location.reload() : this.$router.push({ path: '/' })
      })
    },
  }
}
</script>

<style scoped src="~/assets/css/member-center.css">
</style>