<template>
  <div>
    <!-- 线型 -->
    <div v-if="type === 'line'" class="kole-progress" :class="'is-' + status">
      <div class="kole-progress-line-wrap">
        <div class="kole-progress-line"><div class="kole-progress-line-fill" :style="{ width: percent + '%' }"></div></div>
        <span v-if="showInfo" class="kole-progress-text">{{ status === 'success' ? '完成' : percent + '%' }}</span>
      </div>
    </div>
    <!-- 圆形 / 仪表盘 -->
    <div v-else class="kole-progress-circle" :class="status !== 'normal' ? 'is-' + status : ''">
      <svg width="100" height="100" viewBox="0 0 100 100">
        <circle cx="50" cy="50" r="42" fill="none" stroke="#E8ECF1" stroke-width="8"
                :stroke-dasharray="circleCirc" :stroke-dashoffset="type === 'dashboard' ? circleCirc * 0.25 : 0" />
        <circle cx="50" cy="50" r="42" fill="none" :stroke="color" stroke-width="8" stroke-linecap="round"
                :stroke-dasharray="arcLen" :stroke-dashoffset="arcLen * (1 - percent / 100)"
                :transform="type === 'dashboard' ? 'rotate(135 50 50)' : 'rotate(-90 50 50)'" />
      </svg>
      <span v-if="showInfo" class="kole-progress-circle-text">{{ percent }}%</span>
    </div>
  </div>
</template>

<script>
export default {
  name: 'KoleProgressVariants',
  props: {
    type: { type: String, default: 'line' },
    percent: { type: Number, default: 0 },
    status: { type: String, default: 'normal' },
    showInfo: { type: Boolean, default: true }
  },
  data: function () { return { r: 42 }; },
  computed: {
    circleCirc: function () { return 2 * Math.PI * this.r; },
    arcLen: function () { return this.type === 'dashboard' ? this.circleCirc * 0.75 : this.circleCirc; },
    color: function () {
      return ({ success: '#2E7D0A', warning: '#8C5A00', error: '#CF1322', normal: '#2F54EB' })[this.status] || '#2F54EB';
    }
  }
};
</script>

<style src="./ProgressVariants.css"></style>
