<template>
  <div>
    <div class="info-box">
      <img v-if="info.avatar" :src="info.avatar" alt="">
      <img v-else src="../../assets/images/tx.png" alt="">
      <div class="name" v-if="info.nickname">{{ info.nickname }}</div>
      <div class="name" v-else @click="goLogin">点击登录</div>
    </div>
    <ul>
      <li v-for="(item, index) in navList" :key="index" @click="go(item.url)">
        <div class="title">{{ item.title }}</div>
        <van-icon name="arrow" class="icon"/>
      </li>
    </ul>
    <div class="login-out" @click="logout">
      退出登录
      <!-- <van-button type="default" >退出登录</van-button> -->
    </div>
  </div>
</template>

<script>
import { logout, getUser } from '@/api/account.js'
export default {
  name: 'my',
  data() {
    return {
      info: {},
      navList: [
        {
          title: '已购课程',
          url: '/my/buyCourses'
        }
        // {
        //   title: '已做试题',
        //   url: '/my/exam'
        // }
        // {
        //   title: '已学课程',
        //   url: '/my/buyCourses'
        // }
        // {
        //   title: '消息/通知',
        //   url: '/my/buyCourses'
        // },
        // {
        //   title: '意见反馈',
        //   url: '/my/buyCourses'
        // }
      ]
    }
  },
  computed: {
    isWeapp() {
      return this.$store.state.isWeapp
    }
  },
  methods: {
    logout() {
      logout().then(response => {
        console.log(response, '======')
        this.$toast('退出成功')
      })
    },
    go(url) {
      this.$router.push(url)
    },
    goLogin() {
      if (this.isWeapp) {
        // 小程序
        wx.miniProgram.navigateTo({
          url: `/pages/login/index?redirect_uri=${encodeURIComponent(
            `/exam/result?type=${this.$route.query.type}&is_create=0&papersUrl=${this.$route.query.papersUrl}`
          )}`
        })
      } else {
        this.$router.push({
          path: '/login',
          query: {
            redirect_uri: '/my'
          }
        })
      }
    }
  },
  mounted() {
    getUser().then(res => {
      this.info = res
    })
  }
}
</script>
<style lang="scss" scoped>
  .info-box{
    display: flex;
    align-items: center;
    height: 2rem;
    img{
      width: 1.2rem;
      height: 1.2rem;
      margin:0 .2rem 0 .4rem;
    }
    .name{
      font-size: .34rem;
      color: #222;
    }
  }
  ul{
    padding: 0 .4rem;
    li{
      height: 1.1rem;
      border-bottom: .01rem solid rgba(238,238,238,1);
      display: flex;
      align-items: center;
      .title{
        font-size: .3rem;
        color: #222;
      }
      .icon{
        margin-left: auto;
      }
    }
    li:last-child{
      border: none;
    }
  }
  .login-out{
    position: absolute;
    bottom: .34rem;
    left: 50%;
    -webkit-transform: translateX(-50%);
    width:6.7rem;
    height:.7rem;
    background:rgba(247,247,247,1);
    border-radius:.12rem;
    text-align: center;
    line-height: .7rem;
    font-size: .3rem;
    color: #ccc;
  }
</style>
