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

const props = withDefaults(
  defineProps<{
    type?: 'primary' | 'success' | 'error' | 'warning'
    rate: number
    height?: number | string
    width?: number | string
    bg?: string
    border?: string
    activeBg?: string
  }>(),
  {
    rate: 0,
    height: 30,
    bg: '#cc8a33',
    border: '#c08129',
    activeBg: '#fffe36',
  },
)
const colorConfig = {
  primary: ['#2D39BC', '#6B73E5', '#90FCF7'],
  success: ['#27A363', '#25BF6E', '#1FFF8A'],
  error: ['#B22731', '#CB3741', '#FF3542'],
  warning: ['#C08129', '#CC8A33', '#FFFE36'],
}
const _bg = computed(() => (props.type ? colorConfig[props.type][0] : props.bg))
const _border = computed(() => (props.type ? colorConfig[props.type][1] : props.border))
const _activeBg = computed(() => (props.type ? colorConfig[props.type][2] : props.activeBg))

// const roundRate = computed(() => Math.round(props.rate * 10));
const beforeBg = computed(() => (props.rate > 0 ? _activeBg.value : 'transparent'))
const active_width = computed(() => props.rate * 100 + '%')
const __width = computed(() => (props.width ? px2vw(props.width) : '100%'))
const _height = isNaN(Number(props.height)) ? props.height : px2vw(props.height)
</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: v-bind(_height);
  border-radius: v-bind(_height);
  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: v-bind(_height) 0 0 v-bind(_height);
      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>
