<template>
  <div>
    <div class="info-box">
      <img src="../../assets/images/tx.png" alt="">
      <div class="name">点击登录</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>
    <van-button type="default" @click="logout">退出登录</van-button>
  </div>
</template>

<script>
import { logout } from '@/api/account.js'
export default {
  name: 'my',
  data() {
    return {
      navList: [
        {
          title: '已购课程',
          url: '/my/buyCourses'
        },
        {
          title: '已做试题',
          url: '/my/buyCourses'
        },
        {
          title: '已学课程',
          url: '/my/buyCourses'
        },
        {
          title: '消息/通知',
          url: '/my/buyCourses'
        },
        {
          title: '意见反馈',
          url: '/my/buyCourses'
        }
      ]
    }
  },
  methods: {
    logout() {
      logout().then(response => {
        this.$toast('退出成功')
      })
    },
    go(url) {
      this.$router.push(url)
    }
  }
}
</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;
    }
  }
</style>
