<template>
  <div class="wrapper">
    <div class="title-wrapper">
      <TitleComp txt="我邀请的好友"></TitleComp>
    </div>

    <table class="table">
      <thead class="header">
        <tr>
          <th width="28%" align="left">昵称</th>
          <th width="60%" align="center">入驻时间</th>
          <th width="12%" align="center">订单数</th>
        </tr>
      </thead>
      <tbody class="tbody">
        <tr v-for="item in list">
          <td align="left">
            <span class="nick-name">{{item.nickName}}</span>
          </td>
          <td align="center">
            <span>{{item.enterTime}}</span>
          </td>
          <td align="center">
            <span>{{item.orderNum}}</span>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
import TitleComp from './title';

export default {
  name: 'FriendList',
  components: {
    TitleComp
  },
  props: {
    list: {
      type: Array,
      default() {
        return [];
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.wrapper {
  text-align: center;
  color: white;
}

.title-wrapper {
  text-align: left;
  margin-bottom: 60px;
}

.table {
  margin-top: 20px;
  width: 100%;
  font-size: 24px;

  th {
    font-weight: bold;
    color: white;
  }

  tbody {
    tr {
      height: 110px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.09);

      span {
        color: #94b0c4;
        display: block;
        height: 110px;
        line-height: 110px;
      }
    }
  }
}

.nick-name {
  width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

</style>