<script setup lang="ts">
import { px2vw } from '@/utils'

const props = withDefaults(
  defineProps<{
    rate: number
    width?: number | string
    bg?: string
    border?: string
    activeBg?: string
  }>(),
  {
    rate: 0,
    bg: '#cc8a33',
    border: '#c08129',
    activeBg: '#fffe36',
  },
)
// const roundRate = computed(() => Math.round(props.rate * 10));
const beforeBg = computed(() => (props.rate > 0 ? props.activeBg : 'transparent'))
const active_width = computed(() => props.rate * 100 + '%')
const __width = computed(() => {
  if (props.width) {
    return px2vw(props.width)
  }
  return '100%'
})
</script>
<template>
  <div :class="['progress-bar', 'px-progress-bar', rate >= 1 ? 'all' : null]">
    <div v-for="i in 10" :key="i" :class="['progress-bar-item', 'px-item', 'item-' + i]"></div>
  </div>
</template>
<style scoped lang="scss">
.progress-bar {
  box-sizing: border-box;
  width: v-bind(__width);
  height: 2.5vh;
  border-radius: 2.5vh;
  background: v-bind(bg);
  overflow: hidden;
  display: flex;
  &.all {
    background: v-bind(activeBg);
  }
  &.px-progress-bar {
    border: 0.25vh solid v-bind(border);
    position: relative;
    // &::before {
    //     position: absolute;
    //     content: '';
    //     width: 10%;
    //     height: 100%;

    //     left: -5%;
    //     top: 0;
    //     background: v-bind(beforeBg);
    // }
    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: calc(v-bind(active_width) + 10px);
      height: 100%;
      border-radius: 2.5vh 0 0 2.5vh;
      background: v-bind(beforeBg);
      transform: skew(-45deg) translate(-15px);
    }
  }
  &-item {
    box-sizing: border-box;
    width: 10%;
    transform: skew(-45deg);
    flex-shrink: 0;

    &.px-item {
      border-right: 0.42vh solid v-bind(border);
    }
    &:last-child {
      // width: 12%;
      border-right: none;
    }
    // &.active {
    //     background: v-bind(activeBg);
    // }
  }
}
</style>
