keyboard/keyBoard/Class/Home/V/KBTopThreeView.m

//
//  KBTopThreeView.m
//  keyBoard
//

#import "KBTopThreeView.h"
#import "UIImageView+KBWebImage.h"

@interface KBTopThreeCardView : UIView
/// 头像视图（圆形描边）
@property (nonatomic, strong) UIImageView *avatarCircleView;
/// 彩条卡片背景
@property (nonatomic, strong) UIImageView *cardImageView;
/// 标题
@property (nonatomic, strong) UILabel *titleLabel;

/// 使用角色模型渲染
- (void)renderWithCharacter:(KBCharacter *)character rank:(NSInteger)rank;
@end

@implementation KBTopThreeCardView

- (instancetype)initWithFrame:(CGRect)frame {
    if (self = [super initWithFrame:frame]) {
        [self setupUI];
    }
    return self;
}

- (void)setupUI {
    // 卡片
    [self addSubview:self.cardImageView];
    // 头像圆圈
    [self addSubview:self.avatarCircleView];
    [self.cardImageView addSubview:self.titleLabel];

    // 布局
    [self.avatarCircleView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.top.equalTo(self);
        make.centerX.equalTo(self);
        make.width.height.mas_equalTo(68);
    }];

    [self.cardImageView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.top.equalTo(self.avatarCircleView.mas_bottom).offset(-34); // 顶部悬浮重叠
        make.left.right.equalTo(self);
        make.height.mas_equalTo(KBFit(158));
    }];

  

    [self.titleLabel mas_makeConstraints:^(MASConstraintMaker *make) {
        make.centerX.equalTo(self.cardImageView);
        make.top.equalTo(self.cardImageView).offset(KBFit(95));
    }];

}

- (void)renderWithCharacter:(KBCharacter *)character rank:(NSInteger)rank {
    NSString *title = character.characterName ?: @"";
    self.titleLabel.text = title.length ? title : @"";

    // 不同名次数的配色
    UIColor *theme;
    UIImage *image;
    switch (rank) {
        case 1:
        {
            theme = [UIColor colorWithRed:1.00 green:0.86 blue:0.43 alpha:1.0];
            image = [UIImage imageNamed:@"home_rank_1"];
        }
        break;  // 金
        case 2: {
            theme = [UIColor colorWithRed:0.68 green:0.80 blue:1.00 alpha:1.0];
            image = [UIImage imageNamed:@"home_rank_2"];
        }
            break;  // 蓝
        default: {
            theme = [UIColor colorWithRed:1.00 green:0.78 blue:0.63 alpha:1.0];
            image = [UIImage imageNamed:@"home_rank_3"];

        } break; // 橙
    }
    self.cardImageView.image = image;

    // 头像图片
    [self.avatarCircleView kb_setAvatarURL:character.avatarUrl placeholder:KBPlaceholderImage];

    // 圆圈描边
    self.avatarCircleView.layer.borderColor = [UIColor colorWithRed:0.83 green:0.95 blue:0.27 alpha:1.0].CGColor;
}

#pragma mark - Lazy

- (UIImageView *)avatarCircleView {
    if (!_avatarCircleView) {
        _avatarCircleView = [[UIImageView alloc] init];
        _avatarCircleView.backgroundColor = [UIColor whiteColor];
        _avatarCircleView.layer.cornerRadius = 34;
        _avatarCircleView.layer.borderWidth = 2.0;
        _avatarCircleView.layer.masksToBounds = true;
    }
    return _avatarCircleView;
}

- (UIImageView *)cardImageView {
    if (!_cardImageView) {
        _cardImageView = [[UIImageView alloc] init];
    }
    return _cardImageView;
}


- (UILabel *)titleLabel {
    if (!_titleLabel) {
        _titleLabel = [[UILabel alloc] init];
        _titleLabel.textColor = [UIColor colorWithWhite:0.1 alpha:1];
        _titleLabel.font = [KBFont medium:13];
        _titleLabel.textAlignment = NSTextAlignmentCenter;
    }
    return _titleLabel;
}

// 此类不再持有 plusButton

@end


@interface KBTopThreeView()
@property (nonatomic, strong) KBTopThreeCardView *leftCard;
@property (nonatomic, strong) KBTopThreeCardView *centerCard;
@property (nonatomic, strong) KBTopThreeCardView *rightCard;
/// 统一的底部加号按钮（移出卡片，放到 KBTopThreeView）
@property (nonatomic, strong) UIButton *plusButton;
/// 左右卡片底部也有 plus 按钮
@property (nonatomic, strong) UIButton *leftPlusButton;
@property (nonatomic, strong) UIButton *rightPlusButton;
@end

@implementation KBTopThreeView

- (instancetype)initWithFrame:(CGRect)frame {
    if (self = [super initWithFrame:frame]) {
        self.backgroundColor = [UIColor whiteColor];
        [self setupUI];
    }
    return self;
}

- (void)setupUI {
    [self addSubview:self.leftCard];
    [self addSubview:self.centerCard];
    [self addSubview:self.rightCard];
    [self addSubview:self.plusButton];
    [self addSubview:self.leftPlusButton];
    [self addSubview:self.rightPlusButton];

    // 横向均分布局
    [self.centerCard mas_makeConstraints:^(MASConstraintMaker *make) {
        make.centerX.equalTo(self);
        make.top.equalTo(self).offset(8);
        make.width.mas_equalTo(KBFit(96));
        make.height.mas_equalTo(KBFit(180));
    }];
    // 第二、三名比第一名矮一点：顶部向下偏移
    CGFloat sideTopDelta = 12.0; // 侧边两张比中间低 12pt（可按设计调整）
    [self.leftCard mas_makeConstraints:^(MASConstraintMaker *make) {
        make.top.equalTo(self.centerCard).offset(sideTopDelta);
        make.right.equalTo(self.centerCard.mas_left).offset(-8);
        make.width.equalTo(self.centerCard);
        // 与中间卡片底部对齐，通过高度差体现“更矮”
        make.height.equalTo(self.centerCard);
    }];
    [self.rightCard mas_makeConstraints:^(MASConstraintMaker *make) {
        make.top.equalTo(self.centerCard).offset(sideTopDelta);
        make.left.equalTo(self.centerCard.mas_right).offset(8);
        make.width.equalTo(self.centerCard);
        make.height.equalTo(self.centerCard);
    }];

    // 用 plusButton 来“撑起”本视图，且底部对齐
    [self.plusButton mas_makeConstraints:^(MASConstraintMaker *make) {
        make.top.equalTo(self.centerCard.mas_bottom).offset(12);
        make.centerX.equalTo(self); // 或改为 equalTo(self.centerCard) 以严格与中卡居中
        make.width.mas_equalTo(60);
        make.height.mas_equalTo(28);
        make.bottom.equalTo(self).offset(-8);
    }];

    // 左右 plus 按钮，同样底部对齐，用它们一起撑起视图
    [self.leftPlusButton mas_makeConstraints:^(MASConstraintMaker *make) {
        make.top.equalTo(self.leftCard.mas_bottom).offset(12);
        make.centerX.equalTo(self.leftCard);
        make.width.height.equalTo(self.plusButton);
        make.bottom.equalTo(self).offset(-8);
    }];
    [self.rightPlusButton mas_makeConstraints:^(MASConstraintMaker *make) {
        make.top.equalTo(self.rightCard.mas_bottom).offset(12);
        make.centerX.equalTo(self.rightCard);
        make.width.height.equalTo(self.plusButton);
        make.bottom.equalTo(self).offset(-8);
    }];
}

- (void)configWithCharacters:(NSArray<KBCharacter *> *)characters {
    if (characters.count == 0) {
        // 无数据时清空标题与头像
        [self.centerCard renderWithCharacter:[KBCharacter new] rank:1];
        [self.leftCard renderWithCharacter:[KBCharacter new] rank:2];
        [self.rightCard renderWithCharacter:[KBCharacter new] rank:3];
        return;
    }

    KBCharacter *first  = characters.count > 0 ? characters[0] : nil;
    KBCharacter *second = characters.count > 1 ? characters[1] : nil;
    KBCharacter *third  = characters.count > 2 ? characters[2] : nil;

    if (first)  [self.centerCard renderWithCharacter:first  rank:1];
    if (second) [self.leftCard   renderWithCharacter:second rank:2];
    if (third)  [self.rightCard  renderWithCharacter:third  rank:3];
}

#pragma mark - Lazy
- (KBTopThreeCardView *)leftCard { if (!_leftCard) _leftCard = [KBTopThreeCardView new]; return _leftCard; }
- (KBTopThreeCardView *)centerCard { if (!_centerCard) _centerCard = [KBTopThreeCardView new]; return _centerCard; }
- (KBTopThreeCardView *)rightCard { if (!_rightCard) _rightCard = [KBTopThreeCardView new]; return _rightCard; }

- (UIButton *)plusButton {
    if (!_plusButton) {
        _plusButton = [UIButton buttonWithType:UIButtonTypeCustom];
        [_plusButton setTitle:@"+" forState:UIControlStateNormal];
        [_plusButton setTitleColor:[UIColor colorWithRed:0.20 green:0.65 blue:0.50 alpha:1.0] forState:UIControlStateNormal];
        _plusButton.titleLabel.font = [UIFont systemFontOfSize:18 weight:UIFontWeightSemibold];
        _plusButton.layer.cornerRadius = 14.0;
        _plusButton.layer.masksToBounds = YES;
        // 默认浅色背景，可按需要在外层配置
        _plusButton.backgroundColor = [[UIColor colorWithRed:0.20 green:0.65 blue:0.50 alpha:1.0] colorWithAlphaComponent:0.15];
    }
    return _plusButton;
}

- (UIButton *)leftPlusButton {
    if (!_leftPlusButton) {
        _leftPlusButton = [UIButton buttonWithType:UIButtonTypeCustom];
        [_leftPlusButton setTitle:@"+" forState:UIControlStateNormal];
        [_leftPlusButton setTitleColor:[UIColor colorWithRed:0.20 green:0.65 blue:0.50 alpha:1.0] forState:UIControlStateNormal];
        _leftPlusButton.titleLabel.font = [UIFont systemFontOfSize:18 weight:UIFontWeightSemibold];
        _leftPlusButton.layer.cornerRadius = 14.0;
        _leftPlusButton.layer.masksToBounds = YES;
        _leftPlusButton.backgroundColor = [[UIColor colorWithRed:0.20 green:0.65 blue:0.50 alpha:1.0] colorWithAlphaComponent:0.15];
    }
    return _leftPlusButton;
}

- (UIButton *)rightPlusButton {
    if (!_rightPlusButton) {
        _rightPlusButton = [UIButton buttonWithType:UIButtonTypeCustom];
        [_rightPlusButton setTitle:@"+" forState:UIControlStateNormal];
        [_rightPlusButton setTitleColor:[UIColor colorWithRed:0.20 green:0.65 blue:0.50 alpha:1.0] forState:UIControlStateNormal];
        _rightPlusButton.titleLabel.font = [UIFont systemFontOfSize:18 weight:UIFontWeightSemibold];
        _rightPlusButton.layer.cornerRadius = 14.0;
        _rightPlusButton.layer.masksToBounds = YES;
        _rightPlusButton.backgroundColor = [[UIColor colorWithRed:0.20 green:0.65 blue:0.50 alpha:1.0] colorWithAlphaComponent:0.15];
    }
    return _rightPlusButton;
}

@end