<template>
  <!-- 方形进度条 -->
  <div class="healthy-progress">
    <div
      class="h-8 bg-slate-800/60 test rounded overflow-hidden border border-slate-700 healthy-progress-bar"
    >
      <div
        id="square-progress-bar"
        class="healthy-progress-bar h-full transition-all duration-500 ease-out bg-gradient-to-r from-secondary to-green-400 diagonal-pattern diagonal-pattern-animation"
      ></div>
      <div class="justify-between items-center mb-2 healthy-text-position">
        <span class="font-semibold">健康度:</span>
        <span id="square-progress-value" class="text-lg font-bold"> 45%</span>
      </div>
    </div>
    <!-- <div class="justify-between items-center mb-2 ">
      <span class="font-semibold">健康度</span>
      <span id="square-progress-value" class="text-lg font-bold"> 45%</span>
    </div> -->
  </div>
</template>
<script setup>
import { onMounted, watch } from "vue";
const props = defineProps({
  progress: {
    type: Number,
    default: 100,
  },
});
watch(() => props.progress, (newProgress) => {
  init()
});
tailwind.config = {
  theme: {
    extend: {
      colors: {
        primary: "#3B82F6",
        secondary: "#10B981",
        accent: "#8B5CF6",
        dark: "#1E293B",
        light: "#F8FAFC",
      },
      fontFamily: {
        inter: ["Inter", "sans-serif"],
      },
    },
  },
};
const init = () => {
  const squareProgressBar = document.getElementById("square-progress-bar");
  const squareProgressValue = document.getElementById("square-progress-value");
  //   updateProgressBars();
  squareProgressBar.style.width = `${props.progress}%`;
  squareProgressValue.textContent = `${Math.max(0, props.progress)}%`;
};
const updateProgressBars = () => {
  // 方形进度条
  squareProgressBar.style.width = `${100 - 20}%`;
  squareProgressValue.textContent = `${Math.max(0, props.progress)}%`;
};
onMounted(() => {
  init();
});
</script>

<style scoped>
.test {
  background-color: #fff;
  border-color: rgba(6, 241, 14, 0.829);
}
.healthy-text-position {
  position: absolute;
  z-index: 99;
  top: 50%;
  left:0;
  transform: translateY(-50%);
  padding-left: 10px;
}
.healthy-progress {
  height: calc(100%);
}
.healthy-progress-bar {
  height: calc(100%);
  position: relative;
}
</style>