<template>
  <view class="h-rank-line-container">
    <!-- 左侧进度条区域 -->
    <view class="progress-section">
      <!-- 灰条背景 -->
      <view class="gray-bar">
        <!-- 蓝条，根据百分比显示 -->
        <view class="blue-bar" :style="{ width: percentage + '%' }">
          <!-- 蓝条结尾的竖条 -->
          <view class="end-line"></view>
        </view>
      </view>
    </view>

    <!-- 右侧插槽区域 -->
    <view class="slot-section">
      <slot></slot>
    </view>
  </view>
</template>

<script>
export default {
  name: 'HRankLine',
  props: {
    // 百分比值，范围0-100
    percentage: {
      type: Number,
      default: 0,
      validator: (value) => {
        return value >= 0 && value <= 100
      }
    }
  },
  data() {
    return {}
  }
}
</script>

<style lang="scss" scoped>
.h-rank-line-container {
  display: flex;
  align-items: center;
  width: 100%;
  height: 60rpx;

}

.progress-section {
  flex: 1;
  margin-right: 20rpx;
}

.gray-bar {
  position: relative;
  width: 100%;
  height: 24rpx;
  background: #f0f0f0;
  border-radius: 12rpx;
  // overflow: hidden;
}

.blue-bar {
  position: relative;
  height: 100%;
  background: linear-gradient(90deg, #0098FA 0%, #0098FA 100%);
  border-radius: 12rpx 0 0 12rpx;
  transition: width 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.end-line {
  width: 4rpx;
  height: 35rpx;
  background: #0098FA;
  border-radius: 2rpx;
  box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.2);
  margin-right: -2rpx;
}

.slot-section {
  flex-shrink: 0;
  min-width: 100rpx;
  text-align: right;
}

/* 响应式适配 */
@media (max-width: 768px) {
  .h-rank-line-container {
    height: 50rpx;
  }

  .gray-bar {
    height: 20rpx;
  }

  .end-line {
    height: 35rpx;
  }
}
</style>