<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>{{item.name}}</span>
          </td>
          <td align="center">
            <span>{{item.time}}</span>
          </td>
          <td align="center">
            <span>{{item.count}}</span>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

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

export default {
  name: 'FriendList',
  components: {
    TitleComp
  },
  props: {
    count: {
      type: Number,
      default: 10
    },
    orderCount: {
      type: Number,
      default: 20
    },
    list: {
      type: Array,
      default() {
        return [{
          name: '1212',
          time: '2019.04.24 12:15:00',
          count: 10
        }, {
          name: '1212',
          time: '2019.04.24 12:15:00',
          count: 10
        }];
      }
    }
  }
};
</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;
      box-shadow: inset 0 -1px 0 0 rgba(255,255,255,0.09);

      span {
        color: #94b0c4;
        display: inline-block;
        height: 110px;
        line-height: 110px;
      }
    }
  }
}
</style>