<template>
  <view class="invitation-record-container">
    <view class="header">
      <view class="total-info">
        <text class="label">累计邀请人数</text>
        <text class="value">{{totalInvites}}</text>
      </view>
    </view>
    
    <view class="record-list">
      <view class="title">邀请记录</view>
      <u-empty v-if="invitedList.length === 0" text="暂无邀请记录"></u-empty>
      <view v-else class="list-content">
        <view v-for="(item, index) in invitedList" :key="index" class="record-item">
          <view class="user-info">
            <image :src="item.avatar || '/static/images/微信图片_20250806143327_218.png'" class="avatar"></image>
            <view class="info">
              <text class="name">{{item.name}}</text>
              <text class="time">{{item.time}}</text>
            </view>
          </view>
          <view class="status" :class="item.status === '已注册' ? 'success' : ''">
            {{item.status}}
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      totalInvites: 0,
      invitedList: [
        {
          name: '张三',
          time: '2025-08-06 10:30:00',
          status: '已注册',
          avatar: ''
        },
        {
          name: '李四',
          time: '2025-08-06 09:15:00',
          status: '已注册',
          avatar: ''
        }
      ]
    }
  },
  onLoad() {
    this.totalInvites = this.invitedList.length
  }
}
</script>

<style lang="scss" scoped>
.invitation-record-container {
  min-height: 100vh;
  background-color: #f5f5f5;
  
  .header {
    background: #007aff;
    padding: 30px 20px;
    
    .total-info {
      text-align: center;
      
      .label {
        font-size: 16px;
        color: rgba(255, 255, 255, 0.9);
        margin-bottom: 10px;
        display: block;
      }
      
      .value {
        font-size: 36px;
        color: #fff;
        font-weight: bold;
      }
    }
  }
  
  .record-list {
    padding: 20px;
    
    .title {
      font-size: 16px;
      font-weight: bold;
      margin-bottom: 15px;
      color: #333;
    }
    
    .record-item {
      background: #fff;
      border-radius: 10px;
      padding: 15px;
      margin-bottom: 10px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      
      .user-info {
        display: flex;
        align-items: center;
        
        .avatar {
          width: 40px;
          height: 40px;
          border-radius: 20px;
          margin-right: 10px;
        }
        
        .info {
          .name {
            font-size: 14px;
            color: #333;
            margin-bottom: 5px;
            display: block;
          }
          
          .time {
            font-size: 12px;
            color: #999;
          }
        }
      }
      
      .status {
        font-size: 14px;
        color: #999;
        
        &.success {
          color: #007aff;
        }
      }
    }
  }
}
</style>
