<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 = '3px'

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 {
  height: 60px;
}

.kf-free-panel .kf-panels,
.kf-p-pro-loop {
  --pro-loop-width: 65%;
  --pro-loop-height: 12px;
  .circular {
    width: var(--pro-loop-width);
    height: var(--pro-loop-height);
    position: relative;
    background-image: linear-gradient( 90deg,
      var(--chartProgressColor) var(--percent),
      var(--chartColor) var(--percent)
    );
    border: 1px solid #3a3a3a;
    border-radius: 5px;
    &::after {
      content: attr(data-percent);
      left: calc(var(--percent) - 22%);
      top: -25px;
      position: absolute;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      color: rgba(122, 206, 128,0.7);
      background-color: rgba(6, 241, 162,0.05);
      border: 1px solid rgba(6, 241, 162,0.15);
      border-radius: 3px;
      padding: 1px 2px;
    }
  }
}
</style>