<template>
  <section class="activity-progress">
    <div class="progress-row">
      <div class="progress-meta">
        <p class="progress-value">{{ Math.round(props.value) }}</p>
        <p class="progress-subtitle">{{ subtitle }}</p>
      </div>
      <div class="progress-track">
        <div class="track-stage">
          <div class="track-icons">
            <span v-for="n in 5" :key="n" class="progress-cell"></span>
          </div>
          <div class="progress-bar">
            <div class="progress-bar-fill" :style="{ width: `${fillPercent}%` }"></div>
          </div>
          <div class="track-labels">
            <span style="font-size: 24px;" v-for="tick in ticks" :key="tick">{{ tick }}</span>
          </div>
        </div>
      </div>
    </div>
  </section>
</template>

<script setup lang="ts">
import { computed } from 'vue'

const ticks = [20, 40, 60, 80, 100] as const

const props = withDefaults(
  defineProps<{
    subtitle?: string
    /** 0–100，条形末端与各刻度中心对齐（刻度均分整条轨道） */
    value?: number
  }>(),
  {
    subtitle: '本日活跃',
    value: 40,
  },
)

/** 均分五列时列中心约在 10%/30%/50%/70%/90%，将数值映射到条形宽度 */
const fillPercent = computed(() => {
  const v = Math.min(100, Math.max(0, props.value))
  if (v <= 0) return 0
  if (v < 20) return (v / 20) * 10
  return Math.min(90, v - 10)
})
</script>

<style scoped lang="scss">
.activity-progress {
  margin-bottom: 32px;
  // border-radius: 12px;
  background: #fff;
  // padding: 16px 20px;
}

.progress-row {
  display: flex;
  align-items: flex-end;
  gap: 32px;
}

.progress-meta {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 180px;

}

.progress-value {
  font-size: 80px;
  font-weight: 600;
  color: var(--color-text-brand);
}

.progress-subtitle {
  margin-top: 4px;
  padding: 6px 24px;
  font-size: var(--font-size-body-s);
  color: var(--color-text-brand);
  background-color: var(--color-brand-10);
  line-height: var(--line-height-body-s); 
}

.progress-track {
  flex: 1;
  margin-left: 68px;
  margin-right: 32px;
  min-width: 0;
}

.track-stage {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.track-icons,
.track-labels {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  justify-items: center;
  
}

.track-icons {
  margin-bottom: 0;
}

.progress-cell {
  box-sizing: border-box;
  height: 72px;
  width: 72px;
  max-width: 100%;
  border-radius: 4px;
  border: 1px solid #ccd5e8;
  background: #f2f5fa;
}

/* 轨道通栏，与方块列对齐：蓝段止于刻度处的百分比位置 */
.progress-bar {
  height: 6px;
  border-radius: 4px;
  background: #dde3ed;
  position: relative;
  overflow: hidden;
}

.progress-bar-fill {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  border-radius: 4px;
  background: var(--color-text-brand);
  transition: width 0.2s ease;
}

.track-labels {
  margin-top: 0;
  font-size: 14px;
  color: #7c879e;
  line-height: 1.2;
}
</style>
