<template>
  <div class="activity">
    <div>
      <div class="inviteContainer">
        <img :src="inviteListTitle" class="invite-title"/>
        <div class="flex-bt i-title">
          <span>受邀好友</span>
          <span>购买时间</span>
        </div>
        <ul class="p-list">
          <li v-for="data in inviteList">
            <div class="flex-start no-margin">
              <img :src="data.avatar"/>
              <span>{{data.nickname}}</span>
            </div>
            <span class="no-margin">{{data.pay_at | formatDate}}</span>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
  import {getInviteListApi} from "../../service/api";
  import invite_list_title from '../../assets/activity/invite_list_title.png'
  export default {
    name: "index",
    data(){
      return {
        inviteListTitle: invite_list_title,
        inviteList: []
      }
    },
    filters: {
      formatDate(value){
        if(value) {
          return value.split(' ')[0]
        } else {
          return ''
        }
      }
    },
    mounted(){
      this.getInviteList();
    },
    methods:{
      getInviteList(){
        let json = {
          page: 1,
          limit: 100
        }
        getInviteListApi(json).then(res=>{
          this.inviteList = res.list
          console.log('inviteList', res.list)
        });
      }
    }
  }
</script>
<style>
  img,video{
    max-width: 100%;
  }
</style>
<style scoped lang="less">
  @import "../../util/public";
  @red: #fc4a1b;
  @borderRadius: 8px;
  .activity {
    color: #fff;
    background-color: #ffb400;
  }
  .inviteContainer {
    position: relative;
    text-align: center;
    border-radius: @borderRadius;
    padding-top: 10 / 2 * @toVw;
    padding-bottom: 38 / 2 * @toVh;
  }
  .invite-title {
    position: relative;
    width: 60%;
    height: auto;
    margin: 20 * @toVw 0;
  }
  .invite-list {
    margin-left: 32 / 2 * @toVw;
    margin-right: 32 / 2 * @toVw;
    padding: 28 / 2 * @toVh;
    border: 1px solid @red;
    border-radius: @borderRadius;
  .i-title {
    font-size: 14px;
    margin: 10 * @toVw;
  }
  .i-num {
    font-size: 18px;
  }
  }
  .flex-center {
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;
  }
  .flex-start {
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    align-items: center;
  }
  .flex-bt {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
  }
  .red{
    color: @red;
  }
  .p-list {
    margin: 16*@toVw;
    padding: 0;
    border: 2px solid #fff;
  li {
    display: flex;
    flex-flow:  row nowrap;
    justify-content: space-between;
    align-items: center;
    margin: 0;
    padding: 8 * @toVw;
  img {
    width: 74 / 2 * @toVw;
    height: 74 / 2 * @toVw;
    border-radius: 50%;
    margin-right: 5px;
  }
  }
  }
  .no-margin {
    margin: 0;
  }
</style>
