<template>
  <view
    class="grid grid-cols-4 items-end gap-[6rpx] relative"
    :style="`grid-template-columns: repeat(${rules.length},minmax(0,1fr))`"
  >
    <view v-for="(item, index) in rules" :key="index" class="">
      <view
        :class="['common-rectangle']"
        :style="`height: ${24 + index * 10}rpx;background-color:${item.color}`"
      ></view>
      <view
        class="flex flex-col text-[24rpx] text-center"
        :style="{ color: currentPosition === index ? item.color : '#999' }"
      >
        <text :class="currentPosition === index ? 'font-500' : ''">{{ item.label }}</text>
        <view v-html="item.range" class="whitespace-nowrap"></view>
      </view>
    </view>

    <view
      :style="{
        left: `${(currentPosition + 1 / 2) * (100 / rules.length)}%`,
        top: `${currentPosition * -8 - 10}rpx`,
      }"
      class="current-flag-wrapper"
    >
      <view class="current-flag">
        <view class="flag-text">当前</view>
        <view class="flag-triangle"></view>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
defineProps<{
  currentPosition: number // 0-3 分别对应四个矩形的位置
  rules: {
    label: string
    range: string
    color: string
  }[]
}>()
</script>

<style lang="scss" scoped>
.common-rectangle {
  width: 100%;
  position: relative;
  border-radius: 8rpx;
  clip-path: polygon(100% 0, 100% 0, 100% 100%, 0 100%, 0 10rpx);
  margin-bottom: 6rpx;
}

.current-flag-wrapper {
  position: absolute;
  margin-bottom: 8rpx;
  transition: left 0.3s ease;
  transform: translateX(-50%);
}

.current-flag {
  position: relative;
  width: 82rpx;
  height: 37rpx;
  background-color: rgba(0, 0, 0, 0.6);
  border-radius: 20rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.flag-text {
  color: #fff;
  font-size: 22rpx;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 2;
}

.flag-triangle {
  position: absolute;
  bottom: -8rpx;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 8rpx solid transparent;
  border-right: 8rpx solid transparent;
  border-top: 8rpx solid rgba(0, 0, 0, 0.6);
}
</style>
