<template>
  <section class="kf-panels kf-p-pro-loop">
    <span class="kf-p-label" :title="label">{{label}}</span>
    <div class="kf-p-body">
      <div class="circular" :style="style" :data-percent="loopValue"></div>
    </div>
  </section>
</template>

<script setup>
import { max } from "lodash";
import { computed, toRefs } from "vue";
import {themeColor} from "../index.js";

const props = defineProps(['config','label']);
const { config ,label} = toRefs(props);

// 进度
let percent = '10%';
let chartColor = 'transparent'
let chartProgressColor = themeColor;
let progressWidth = '12px'

const style = computed(() => {
  parent = loopValue.value;
  return {
    '--percent': percent,
    '--chartColor': chartColor,
    '--chartProgressColor': chartProgressColor,
    '--progressWidth': progressWidth
  }
})
const loopValue = computed(() => {
  let data = config.value;
  if (!data) return;
  let value = 0;
  const maxNum = data.maximum || 100;
  const minNum = data.minimum || 0;
  if (typeof data.value === 'number') {
    value = (data.value / (maxNum - minNum) * 100).toFixed(1) + '%';
  }
  percent = value;
  return value;
})
</script>

<style lang="scss" scoped>
.kf-p-link {
  font-style: italic;
}
.kf-free-panel .kf-panels,.kf-p-pro-loop {
  .kf-p-body {
    // justify-content: center;
  }
}

.kf-free-panel .kf-panels,
.kf-p-pro-loop {
  height: 100px;
  --pro-loop-width: 80px;
  --pro-loop-height: 80px;
  .circular {
    border-radius: 50%;
    width: var(--pro-loop-width);
    height: var(--pro-loop-height);
    position: relative;
    background-image: conic-gradient(
      var(--chartProgressColor) var(--percent),
      var(--chartColor) var(--percent)
    );
    border: 1px solid #3a3a3a;
    &::after {
      content: attr(data-percent);
      background: #1C1C1C;
      width: calc(var(--pro-loop-width) - var(--progressWidth));
      height: calc(var(--pro-loop-height) - var(--progressWidth));
      border-radius: 50%;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      position: absolute;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      font-size: 15px;
      color: rgba(122, 206, 128,0.7);
      border: 1px solid #3a3a3a;
    }
  }
}
</style>