<template>
  <div class="progress-bar">
    <span class="progress-title">法案进展：</span>
    <div class="progress-steps">
      <div
        v-for="(stage, idx) in [...visibleStages].reverse()"
        :key="idx"
        class="tag"
        :style="{ zIndex: visibleStages.length - idx }"
      >
        {{ stage }}
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue'

const props = defineProps({
  stages: { type: Array, required: true },
  current: { type: Number, default: 0 },
})

/**
 * 只渲染到当前步骤为止的阶段
 * @returns {Array} 可见的阶段列表
 */
const visibleStages = computed(() => {
  return props.stages.slice(0, props.current + 1)
})
</script>

<style scoped>
.progress-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  height: 26px;
}
.progress-title {
  font-size: 16px;
  font-weight: 700;
  color: rgba(59, 65, 75, 1);
  letter-spacing: 1px;
  line-height: 24px;
  white-space: nowrap;
  flex-shrink: 0;
}
.progress-steps {
  display: flex;
  align-items: center;
}
.tag {
  height: 24px;
  line-height: 22px;
  padding: 0 10px 0 30px;
  background: rgba(255, 255, 255, 1);
  color: rgb(95, 101, 108);
  border-top: 1px solid rgb(234, 236, 238);
  border-bottom: 1px solid rgb(234, 236, 238);
  position: relative;
  margin-left: -10px;
  font-family: 'Microsoft YaHei', sans-serif;
  font-size: 14px;
  font-weight: 400;
  white-space: nowrap;
  box-sizing: border-box;
}
.tag::after {
  content: '';
  position: absolute;
  top: 50%;
  right: -8.485px;
  width: 16.97px;
  height: 16.97px;
  background: inherit;
  border-top: 1px solid rgb(234, 236, 238);
  border-right: 1px solid rgb(234, 236, 238);
  transform: translateY(-50%) rotate(45deg);
  z-index: 1;
  box-shadow: 2px -2px 2px rgba(0, 0, 0, 0.05);
  box-sizing: border-box;
}
.tag:first-child {
  margin-left: 0;
  padding-left: 10px;
  border-left: 1px solid rgb(234, 236, 238);
  border-radius: 4px 0 0 4px;
}
.tag:last-child {
  background: rgb(59, 65, 75);
  color: rgba(255, 255, 255, 1);
  border-color: rgb(59, 65, 75);
  padding-right: 10px;
  border-radius: 0;
  border-right: none;
}
.tag:last-child::after {
  display: block;
  border-color: rgb(59, 65, 75);
  box-shadow: none;
}
.tag:first-child:last-child {
  margin-left: 0;
  padding: 0 10px;
  border-radius: 4px 0 0 4px;
  background: rgb(59, 65, 75);
  color: rgba(255, 255, 255, 1);
  border: 1px solid rgb(59, 65, 75);
  border-right: none;
}
</style>
