<template>
  <div class="main">
    <ul class="recommend-list">
      <li v-for="item in list" :key="item.id" @click="$router.push(`/my/recommend/${item.id}`)">
        <span class="name">推荐学生：{{ item.user_name }}</span>
        <span class="date">{{ dateFormat(item.created_time) }}</span>
        <van-icon name="arrow" />
      </li>
    </ul>
  </div>
</template>

<script>
import * as api from '@/api/index'
export default {
  data() {
    return {
      list: []
    }
  },
  methods: {
    dateFormat(value) {
      return value.split(' ')[0]
    },
    getMyRecommendList() {
      api.getMyRecommendList().then(response => {
        this.list = response
      })
    }
  },
  beforeMount() {
    this.getMyRecommendList()
  }
}
</script>

<style lang="scss">
.recommend-list {
  padding: 20px 0;
  li {
    position: relative;
    display: flex;
    align-items: center;
    padding: 16px 0;
    color: #000030;
    &::after {
      position: absolute;
      box-sizing: border-box;
      content: ' ';
      pointer-events: none;
      right: 0;
      bottom: 0;
      left: 0;
      border-bottom: 1px solid #ededed;
      transform: scaleY(0.5);
    }
    .name {
      flex: 1;
    }
    .date {
      margin-right: 10px;
    }
  }
}
</style>