<template>
  <div
    class="ui-chart-progress"
    :class="['ui-chart-progress--' + type]"
  >
    <el-progress
      type="circle"
      :percentage="value"
      :status="type"
      :stroke-width="12"
      :width="width"
      :color="color"
      :show-text="false"
    ></el-progress>
    <div class="ui-chart-progress__main">
      <slot>
        <div class="ui-chart-progress__value">{{ value }}%</div>
      </slot>
    </div>
  </div>
</template>
<script>
import ElProgress from 'element-ui/lib/progress'
import 'element-ui/lib/theme-chalk/progress.css'

export default {
  name: 'UiChartProgress',
  components: {
    ElProgress
  },
  props: {
    value: {
      type: [Number, String]
    },
    size: {
      type: String,
      default: 'medium'
    },
    type: {
      type: String,
      validator(value) {
        return ['primary', 'warning', 'success', 'danger'].includes(value)
      }
    }
  },
  computed: {
    width() {
      let width
      if (this.size === 'medium') {
        width = 120
      }
      return width
    },
    color() {
      let color
      if (this.type === 'primary') {
        color = '#3385FF'
      } else if (this.type === 'warning') {
        color = '#FF8900'
      }
      return color
    }
  }
}
</script>
<style lang="less">
.ui-chart-progress{
  display: inline-block;
  position: relative;
}
.ui-chart-progress__main{
  position: absolute;
  top: 8px;
  right: 8px;
  bottom: 8px;
  left: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.ui-chart-progress__value {
  font-size: 22px;
  font-weight: bold;
}
.ui-chart-progress--primary{
  .ui-chart-progress__value{
    color: #3385FF;
  }
}
.ui-chart-progress--warning{
  .ui-chart-progress__value{
    color: #FF8900;
  }
}
</style>
