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

<script>
export default {
  metaInfo: {
    title: '我的'
  },
  name: 'my',
  data() {
    return {
      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
    },
    user() {
      return this.$store.state.user
    }
  },
  methods: {
    // 登录
    login() {
      if (this.isWeapp) {
        // 小程序
        wx.miniProgram.navigateTo({ url: '/pages/login/index' })
      } else {
        this.$router.push({
          path: '/login',
          query: { redirect_uri: window.location.href }
        })
      }
    },
    // 退出登录
    logout() {
      this.$store.dispatch('logout').then(() => {
        // 清除小程序登录状态
        wx.miniProgram.postMessage({ data: { token: '' } })
        this.$toast('退出成功')
      })
    },
    toPage(url) {
      if (this.isWeapp) {
        wx.miniProgram.navigateTo({
          url: `/pages/web/index?src=${window.location.origin}${url}`
        })
      } else {
        this.$router.push(url)
      }
    }
  },
  beforeMount() {
    this.$store.dispatch('checkLogin')
  }
}
</script>
<style lang="scss" scoped>
.info-box {
  display: flex;
  align-items: center;
  height: 2rem;
  img {
    width: 1.2rem;
    height: 1.2rem;
    margin: 0 0.2rem 0 0.4rem;
  }
  .name {
    font-size: 0.34rem;
    color: #222;
  }
}
ul {
  padding: 0 0.4rem;
  li {
    height: 1.1rem;
    border-bottom: 0.01rem solid rgba(238, 238, 238, 1);
    display: flex;
    align-items: center;
    .title {
      font-size: 0.3rem;
      color: #222;
    }
    .icon {
      margin-left: auto;
    }
  }
  li:last-child {
    border: none;
  }
}
.login-out {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  -webkit-transform: translateX(-50%);
  width: 6.7rem;
  height: 0.7rem;
  background: rgba(247, 247, 247, 1);
  border-radius: 0.12rem;
  text-align: center;
  line-height: 0.7rem;
  font-size: 0.3rem;
  color: #ccc;
}
</style>
