peko-ios/YuMi/Modules/YMMine/View/Medals/MedalsLevelIndicatorView.m

//
//  MedalsLevelIndicatorView.m
//  YuMi
//
//  Created by P on 2025/6/18.
//

#import "MedalsLevelIndicatorView.h"
#import "UIImage+Utils.h"

// 等级指示器视图
@interface LevelItemView : UIView

@property (nonatomic, strong) UILabel *levelLabel;
@property (nonatomic, strong) UIView *dotView;  // 圆点视图
@property (nonatomic, strong) NetImageView *imageView; // 图片视图
@property (nonatomic, assign) BOOL isSelected;
@property (nonatomic, assign) NSInteger level;
@property (nonatomic, assign) BOOL hasImage;
@property (nonatomic, strong) UIImage *originalImage; // 保存原始彩色图片
@property (nonatomic, strong) UIImage *grayImage;     // 保存灰度图片
@property (nonatomic, copy) NSString *cachedImageUrl; // 缓存图片URL，用于延迟加载

- (instancetype)initWithLevel:(NSInteger)level;
- (void)setSelected:(BOOL)selected animated:(BOOL)animated;
- (void)setImageUrl:(NSString *)imageUrl;
- (void)createImageViewIfNeeded;

@end

@implementation LevelItemView

- (instancetype)initWithLevel:(NSInteger)level {
    self = [super init];
    if (self) {
        _level = level;
        _isSelected = NO;
        _hasImage = NO;
        
        // 创建圆点视图
        _dotView = [[UIView alloc] init];
        _dotView.backgroundColor = UIColorFromRGB(0x8B54E8);
        _dotView.layer.cornerRadius = 3;  // 圆点半径
        _dotView.clipsToBounds = YES;
        [self addSubview:_dotView];
        
        // 创建等级标签
        self.levelLabel = [UILabel labelInitWithText:[NSString stringWithFormat:@"LV%ld", (long)level]
                                               font:kFontMedium(10)
                                          textColor:UIColorFromRGB(0x8B54E8)];
        self.levelLabel.textAlignment = NSTextAlignmentCenter;
        [self addSubview:self.levelLabel];
        
        // 布局
        [_dotView mas_makeConstraints:^(MASConstraintMaker *make) {
            make.centerX.mas_equalTo(self);
            make.top.mas_equalTo(self);
            make.width.height.mas_equalTo(6);  // 圆点大小
        }];
        
        [self.levelLabel mas_makeConstraints:^(MASConstraintMaker *make) {
            make.centerX.mas_equalTo(self);
            make.top.mas_equalTo(_dotView.mas_bottom).offset(4);  // 圆点和文字的间距
            make.leading.trailing.bottom.mas_equalTo(self);
        }];
    }
    return self;
}

- (void)createImageViewIfNeeded {
    if (_imageView) {
        return;
    }
    
    // 创建图片视图
    _imageView = [[NetImageView alloc] init];
    _imageView.contentMode = UIViewContentModeScaleAspectFill;
    _imageView.clipsToBounds = YES;
    [self addSubview:_imageView];
    
    [_imageView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.centerX.mas_equalTo(self);
        make.bottom.mas_equalTo(_dotView.mas_top).offset(-4);
        make.width.height.mas_equalTo(40);
    }];
    
    // 调整圆点位置
    [_dotView mas_remakeConstraints:^(MASConstraintMaker *make) {
        make.centerX.mas_equalTo(self);
        make.top.mas_equalTo(_imageView.mas_bottom).offset(4);
        make.width.height.mas_equalTo(6);
    }];
    
    // 如果有缓存的图片URL，加载图片
    if (_cachedImageUrl) {
        [self loadImageWithUrl:_cachedImageUrl];
        _cachedImageUrl = nil;
    }
}

- (void)setImageUrl:(NSString *)imageUrl {
    _hasImage = YES;
    _cachedImageUrl = imageUrl;
    
    // 如果已经创建了imageView，直接加载图片
    if (_imageView) {
        [self loadImageWithUrl:imageUrl];
    }
}

- (void)loadImageWithUrl:(NSString *)imageUrl {
    // 调试时使用测试URL
    #ifdef DEBUG
    NSString *testUrl = @"https://img.toto.im/mw600/66b3de17ly1i2jopju47bj20xc1e0dx4.jpg.webp";
    imageUrl = testUrl;
    NSLog(@"调试模式: 使用测试图片URL: %@", testUrl);
    #endif
    
    // 加载图片并处理灰度效果
    @kWeakify(self);
    [_imageView loadImageWithUrl:imageUrl completion:^(UIImage * _Nullable image, NSURL * _Nonnull url) {
        @kStrongify(self);
        if (image) {
            UIImage *cutImage = [image cutImage:CGSizeMake(40, 40)];
            self.originalImage = cutImage;
            self.grayImage = [cutImage grayscaleImage];
            [self updateImageEffect];
        }
    }];
}

// 更新图片效果
- (void)updateImageEffect {
    if (!_hasImage || !_imageView) {
        return;
    }
    
    if (_isSelected && _originalImage) {
        // 选中状态：显示彩色图片
        self.imageView.image = _originalImage;
    } else if (!_isSelected && _grayImage) {
        // 非选中状态：显示灰度图片
        self.imageView.image = _grayImage;
    }
}

- (void)setSelected:(BOOL)selected animated:(BOOL)animated {
    if (_isSelected == selected) {
        return;
    }
    
    _isSelected = selected;
    
    void (^updateBlock)(void) = ^{
        UIColor *color = selected ? [UIColor whiteColor] : UIColorFromRGB(0x8B54E8);
        self.levelLabel.textColor = color;
        self.dotView.backgroundColor = color;
        
        // 如果有图片，更新图片效果
        if (self.hasImage) {
            [self updateImageEffect];
        }
    };
    
    if (animated) {
        [UIView animateWithDuration:0.2 animations:updateBlock];
    } else {
        updateBlock();
    }
}

@end

// 等级指示器容器视图
@interface MedalsLevelIndicatorView()

@property (nonatomic, strong) NSMutableArray<LevelItemView *> *levelItems;
@property (nonatomic, strong) NSMutableArray<UIView *> *connectionLines;  // 连接线数组
@property (nonatomic, assign) NSInteger maxLevel;
@property (nonatomic, assign) NSInteger selectedLevel;

@end

@implementation MedalsLevelIndicatorView

- (instancetype)init {
    self = [super init];
    if (self) {
        _levelItems = [NSMutableArray array];
        _connectionLines = [NSMutableArray array];
        _selectedLevel = 1;
        _indicatorType = MedalsLevelIndicatorTypeNormal;
        
        UITapGestureRecognizer *tapGesture = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(handleTap:)];
        [self addGestureRecognizer:tapGesture];
    }
    return self;
}

- (void)setupWithMaxLevel:(NSInteger)maxLevel {
    if (maxLevel < 0) {
        maxLevel = 1;
    }
    if (_maxLevel == maxLevel && _levelItems.count == maxLevel) {
        return;
    }
    
    _maxLevel = maxLevel;
    
    // 清除现有的等级指示器和连接线
    for (UIView *view in _levelItems) {
        [view removeFromSuperview];
    }
    [_levelItems removeAllObjects];
    
    for (UIView *line in _connectionLines) {
        [line removeFromSuperview];
    }
    [_connectionLines removeAllObjects];
    
    // 创建新的等级指示器
    CGFloat itemWidth = 25.0;  // 每个等级指示器的宽度
    
    // 计算可用宽度（考虑左右各20点的边距）
    CGFloat availableWidth = self.bounds.size.width;// - 40.0; // 左右各减去20点
    
    // 计算间距
    CGFloat spacing = 0;
    if (maxLevel > 1) {
        spacing = (availableWidth - itemWidth * maxLevel) / (maxLevel - 1);
    }
    
    // 如果间距太小，设置一个最小值
    spacing = MAX(spacing, 10.0);
    
    // 起始位置（左边距20点）
    CGFloat startX = 20.0;
    
    for (NSInteger i = 1; i <= maxLevel; i++) {
        // 创建等级指示器
        LevelItemView *levelItem = [[LevelItemView alloc] initWithLevel:i];
        [self addSubview:levelItem];
        [_levelItems addObject:levelItem];
        
        // 设置位置
        CGFloat x = startX + (i - 1) * (itemWidth + spacing);
        [levelItem mas_makeConstraints:^(MASConstraintMaker *make) {
            make.width.mas_equalTo(itemWidth);
            make.height.mas_equalTo(self);
            make.centerY.mas_equalTo(self);
            make.leading.mas_equalTo(self).offset(x);
        }];
        
        // 如果不是第一个，添加连接线
        if (i > 1) {
            UIView *line = [[UIView alloc] init];
            line.backgroundColor = UIColorFromRGB(0x8B54E8);  // 默认非选中颜色
            [self insertSubview:line atIndex:0];
            [_connectionLines addObject:line];
            
            // 连接线位置：从上一个圆点到当前圆点
            [line mas_makeConstraints:^(MASConstraintMaker *make) {
                make.height.mas_equalTo(1);  // 线的高度
                make.centerY.mas_equalTo(levelItem.dotView);
                make.leading.mas_equalTo(_levelItems[i-2].dotView.mas_centerX);
                make.trailing.mas_equalTo(levelItem.dotView.mas_centerX);
            }];
        }
    }
    
    // 默认选中LV1
    [self setSelectedLevel:1 animated:NO];
    
    // 根据类型设置图片可见性
    [self updateImageVisibility];
}

- (void)layoutSubviews {
    [super layoutSubviews];
    
    if (_maxLevel > 0 && _levelItems.count > 0) {
        // 计算可用宽度（考虑左右各20点的边距）
        CGFloat itemWidth = 25.0;
        CGFloat availableWidth = self.bounds.size.width;// - 40.0; // 左右各减去20点
        
        // 计算间距
        CGFloat spacing = 0;
        if (_maxLevel > 1) {
            spacing = (availableWidth - itemWidth * _maxLevel) / (_maxLevel - 1);
        }
        
        // 如果间距太小，设置一个最小值
        spacing = MAX(spacing, 10.0);
        
        // 起始位置（左边距20点）
        CGFloat startX = 20.0;
        
        for (NSInteger i = 0; i < _levelItems.count; i++) {
            LevelItemView *item = _levelItems[i];
            CGFloat x = startX + i * (itemWidth + spacing);
            [item mas_updateConstraints:^(MASConstraintMaker *make) {
                make.leading.mas_equalTo(self).offset(x);
            }];
        }
        
        // 更新连接线
        for (NSInteger i = 0; i < _connectionLines.count && i + 1 < _levelItems.count; i++) {
            UIView *line = _connectionLines[i];
            [line mas_updateConstraints:^(MASConstraintMaker *make) {
                make.leading.mas_equalTo(_levelItems[i].dotView.mas_centerX);
                make.trailing.mas_equalTo(_levelItems[i+1].dotView.mas_centerX);
            }];
        }
    }
}

- (void)setSelectedLevel:(NSInteger)level animated:(BOOL)animated {
    if (level < 1 || level > _maxLevel) {
        return;
    }
    
    _selectedLevel = level;
    
    // 更新等级指示器状态
    for (NSInteger i = 0; i < _levelItems.count; i++) {
        LevelItemView *item = _levelItems[i];
        [item setSelected:(i + 1) <= level animated:animated];
    }
    
    // 更新连接线状态
    for (NSInteger i = 0; i < _connectionLines.count; i++) {
        UIView *line = _connectionLines[i];
        // 连接线的状态取决于它连接的两个等级指示器是否都被选中
        // 如果连接线两端的等级指示器都被选中，则连接线也被选中
        BOOL isSelected = (i + 2) <= level;
        
        void (^updateBlock)(void) = ^{
            line.backgroundColor = isSelected ? [UIColor whiteColor] : UIColorFromRGB(0x8B54E8);
        };
        
        if (animated) {
            [UIView animateWithDuration:0.2 animations:updateBlock];
        } else {
            updateBlock();
        }
    }
}

- (void)setIndicatorType:(MedalsLevelIndicatorType)indicatorType {
    _indicatorType = indicatorType;
    
    // 如果已经创建了视图，需要根据类型进行调整
    if (_levelItems.count > 0) {
        // 如果是带图片类型，创建 imageView
        if (indicatorType == MedalsLevelIndicatorTypeWithImage) {
            for (LevelItemView *item in _levelItems) {
                [item createImageViewIfNeeded];
            }
        }
        [self updateImageVisibility];
    }
}

// 根据指示器类型更新图片可见性
- (void)updateImageVisibility {
    for (LevelItemView *item in _levelItems) {
        if (item.imageView) {
            item.imageView.hidden = (_indicatorType == MedalsLevelIndicatorTypeNormal);
        }
    }
}

- (void)setImageUrl:(NSString *)imageUrl forLevel:(NSInteger)level {
    if (level < 1 || level > _maxLevel || level > _levelItems.count) {
        return;
    }
    
    LevelItemView *item = _levelItems[level - 1];
    
    // 根据指示器类型决定是否创建和加载图片
    if (_indicatorType == MedalsLevelIndicatorTypeWithImage) {
        [item createImageViewIfNeeded]; // 确保创建了 imageView
        [item setImageUrl:imageUrl];
    } else {
        // 在普通模式下，只保存URL，不创建 imageView
        [item setImageUrl:imageUrl];
    }
}

- (void)handleTap:(UITapGestureRecognizer *)gesture {
    CGPoint location = [gesture locationInView:self];
    
    for (NSInteger i = 0; i < _levelItems.count; i++) {
        LevelItemView *item = _levelItems[i];
        CGPoint itemLocation = [self convertPoint:location toView:item];
        
        // 检查点击是否在 item 的边界内
        if (CGRectContainsPoint(item.bounds, itemLocation)) {
            NSInteger level = i + 1;
            [self setSelectedLevel:level animated:YES];
            
            if (_levelSelectedBlock) {
                _levelSelectedBlock(level);
            }
            break;
        }
    }
}

// 计算布局参数
- (void)calculateLayoutParams:(CGFloat *)itemWidth spacing:(CGFloat *)spacing startX:(CGFloat *)startX forMaxLevel:(NSInteger)maxLevel {
    *itemWidth = 25.0;  // 每个等级指示器的宽度
    
    // 计算可用宽度
    CGFloat availableWidth = self.bounds.size.width;
    
    // 计算间距
    *spacing = 0;
    if (maxLevel > 1) {
        *spacing = (availableWidth - (*itemWidth) * maxLevel) / (maxLevel - 1);
    }
    
    // 如果间距太小，设置一个最小值
    *spacing = MAX(*spacing, 10.0);
    
    // 起始位置（左边距20点）
    *startX = 20.0;
}

@end