<template>
  <div class='ac-progress'
    :style="styleObject"
    :class="[
      {
        'is-circle': circle
      }
    ]">

    <div class='ac-progress--cricle' v-if="circle">
      <svg :style="styleObject" viewBox='0 0 94 94'>
        <path d="M 24 74 a 37 37 0 1 1 40 0"
          stroke-linecap="round"
          stroke="#ebeef5"
          stroke-width="6.8" fill="none">
        </path>
        <path d="M 24 74 a 37 37 0 1 1 40 0"
            stroke-linecap="round"
            :stroke="color || '#E63B3F'"
            stroke-width="6.8" fill="none"
            class="el-progress-circle__path"
            style="stroke-dasharray:191 191; stroke-dashoffset: -191; transition: stroke-dashoffset 0.6s ease 0s, stroke 0.6s ease;"
            :style="{ strokeDashoffset: offset }">
        </path>
      </svg>
    </div>
    <div class='ac-progress--text'>
      <div v-if="circle">已抢</div>
      <div>{{ percentage }}%</div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'AcProgress',
  data () {
    return {
      styleObject: {
        width: this.width,
        height: this.height
      }
    }
  },
  computed: {
    offset () {
      return -(191 + 191 * (this.percentage / 100))
    }
  },
  props: {
    percentage: {
      type: Number,
      default: 0
    },
    circle: Boolean,
    color: String,
    width: {
      type: String,
      default: '4.5rem'
    },
    height: {
      type: String,
      default: '4.5rem'
    }
  }
}
</script>

<style lang='scss'>
 .ac-progress {
    display:inline-block;
    position:relative;

    &--cricle {
      height: 4.5rem;
      width: 4.5rem;
    }
    &--text {
      position: absolute;
      top: 50%;
      left: 0;
      width: 100%;
      text-align: center;
      margin: 0;
      transform: translateY(-60%);
      font-size: .8125rem;
      color: #606266;
      display: inline-block;
      vertical-align: middle;
      line-height: 1;
      color: #ff7e00;

      div:nth-child(2) {
        padding-top: .2rem;
      }
    }
  }
</style>
