<template>
  <div
    class="progress-pool"
    :style="{ background: boxbg, bordercolor: bordercolor }"
  >
    <div
      class="progress-pool-line"
      :style="{ background: linebg, width: percvalue }"
    ></div>
    <div class="pro-pool-seat-out" :style="{ width: percvalue }">
      <div
        v-for="(item, index) in Math.ceil(25 * decimvalue)"
        :key="index"
        class="pro-pool-seat"
      ></div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    boxbg: { // 盒子的背景色
      Type: String,
      default: 'rgba(177, 212, 242, 0.05)',
    },
    bordercolor: { // 盒子边框颜色
      Type: String,
      default: 'rgba(222, 242, 254, 0.1)',
    },
    linebg: { // 进度条的背景色
      Type: String,
      default: 'linear-gradient(90deg, #6097C6, #FFFFFF)',
    },
    percvalue: {
      Type: String,  //进度条的百分比 如 50% 70%
      default: 0
    },
    decimvalue: {
      Type: Number,  //百分的小数形式 如 0.5 0.7
      default: 0
    },
  },
}
</script>

<style lang="scss" scoped>
.progress-pool {
  position: relative;
  padding: 1.5px 2px;
  width: 100%;
  height: 10px;
  background: rgba(255, 206, 90, 0.05);
  border: 1px solid rgba(255, 206, 90, 0.1);
  .pro-pool-seat-out {
    height: 100%;
    width: 30%;
    display: flex;
    justify-content: space-between;
    padding: 0 2px;
  }
  .pro-pool-seat {
    width: 2px;
    height: 100%;
    // background: rgba(255, 206, 90, 0.05);
    background: black;
    z-index: 9;
  }
  .progress-pool-line {
    position: absolute;
    left: 2px;
    top: 1.5px;
    width: 30%;
    height: calc(100% - 3px);
    background: linear-gradient(90deg, #ff7e00, #ffb400);
  }
}
</style>