<template>
  <view class="h-line-container">
    <!-- 单个长条容器 -->
    <view class="single-line-container" :style="{
      height: lineHeight + 'rpx'
    }">
      <!-- 背景条 -->
      <view class="line-background" :style="{
        borderRadius: borderRadius + 'rpx',
        backgroundColor: backgroundColor
      }"></view>

      <!-- 背景条 -->
      <view class="line-background" :style="{
        borderRadius: borderRadius + 'rpx',
        backgroundColor: backgroundColor
      }"></view>

      <!-- 分段进度条 -->
      <view v-for="(item, index) in data" :key="index" class="segment-progress" :style="{
        width: calculateSegmentWidth(item) + '%',
        left: calculateSegmentLeft(index) + '%',
        backgroundColor: item.color || defaultColor,
        borderRadius: getSegmentBorderRadius(index) + 'rpx'
      }">
        <!-- 每个分段的数值显示 -->
        <text v-if="item.value > 0" class="segment-text">
          {{ item.value }}
        </text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'HLine',
  props: {
    // 数据数组
    data: {
      type: Array,
      default: () => []
    },
    // 总数量（用于计算百分比）
    total: {
      type: Number,
      default: 0
    },
    // 条宽度
    itemWidth: {
      type: Number,
      default: 200
    },
    // 条高度
    lineHeight: {
      type: String,
      default: '40'
    },
    // 条间距
    itemSpacing: {
      type: Number,
      default: 32
    },
    // 圆角大小
    borderRadius: {
      type: Number,
      default: 20
    },
    // 背景颜色
    backgroundColor: {
      type: String,
      default: '#f5f5f5'
    },
    // 默认进度条颜色
    defaultColor: {
      type: String,
      default: '#4873E3'
    },
    // 是否显示百分比
    showPercentage: {
      type: Boolean,
      default: true
    },
 
  
    // 百分比文字大小
    percentageSize: {
      type: Number,
      default: 24
    },
    // 百分比文字颜色
    percentageColor: {
      type: String,
      default: '#666666'
    }
  },
  computed: {
    // 计算总数量（如果未传入total，则使用data中所有值的和）
    computedTotal() {
      if (this.total > 0) {
        return this.total;
      }
      return this.data.reduce((sum, item) => sum + (item.value || 0), 0);
    }
  },
  methods: {
    // 计算每个分段的宽度百分比
    calculateSegmentWidth(item) {
      if (this.computedTotal === 0) return 0;
      const percentage = (item.value / this.computedTotal) * 100;
      // 确保最小宽度为1%，以便显示
      return Math.max(1, percentage);
    },

    // 计算每个分段的左侧位置
    calculateSegmentLeft(index) {
      if (index === 0) return 0;
      let left = 0;
      for (let i = 0; i < index; i++) {
        left += this.calculateSegmentWidth(this.data[i]);
      }
      return left;
    },

    // 获取分段圆角样式
    getSegmentBorderRadius(index) {
      if (this.data.length === 1) {
        return this.borderRadius;
      }
      if (index === 0) {
        return `${this.borderRadius} 0 0 ${this.borderRadius}`;
      }
      if (index === this.data.length - 1) {
        return `0 ${this.borderRadius} ${this.borderRadius} 0`;
      }
      return 0;
    },

    // 计算总百分比
    calculateTotalPercentage() {
      if (this.computedTotal === 0) return 0;
      return Math.round((this.computedTotal / this.total) * 100);
    }
  }
}
</script>

<style lang="scss" scoped>
.h-line-container {
  display: flex;
  align-items: center;
  padding: 8rpx 0;
  width: 100%;
}

.single-line-container {
  position: relative;
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 20rpx;
}

.line-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.segment-progress {
  position: absolute;
  top: 0;
  height: 100%;
  z-index: 2;
  transition: width 0.3s ease;
}

.segment-progress {
  position: absolute;
  top: 0;
  height: 100%;
  z-index: 2;
  transition: width 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.segment-text {
  font-size: 23rpx;
  font-weight: 500;
  color: #ffffff;
  text-shadow: 0 0 2rpx rgba(0, 0, 0, 0.5);
}
</style>