<template>
  <!-- 方形进度条 -->
  <div class="healthy-progress">
    <div
      class="h-8 bg-slate-800/60 rounded overflow-hidden border border-slate-700 healthy-progress-bar"
      :class="borderColor"
    >
      <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-animation"
        :class="diagonalPatternColor"
      ></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 { computed, onMounted, watch, ref } from "vue";
const props = defineProps({
  progress: {
    type: Number,
    default: 100,
  },
});

const borderColor = computed(() => {
  if (props.progress < 60) {
    return 'box-color-60'
  } else if (props.progress < 90) {
    return 'box-color-90'
  }
  return 'box-color-default'
});
const diagonalPatternColor = computed(() => {
  if (props.progress < 60) {
    return 'diagonal-pattern-60'
  } else if (props.progress < 90) {
    return 'diagonal-pattern-90'
  }
  return 'diagonal-pattern-default'
});
const customColors = [
  { color: "#ff6a6a", percentage: 60 },
  { color: "#f5c701", percentage: 80 },
  { color: "#08c733", percentage: 100 },
];
const customColorMethod = (percentage) => {
  if (percentage < 60) {
    return customColors[0].color;
  }
  if (percentage < 90) {
    return customColors[1].color;
  }
  return customColors[2].color;
};
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>
.box-color-60 {
  background-color: #fff;
  border-color: rgba(255, 106, 106, 1);
}
.box-color-90 {
  background-color: #fff;
  border-color: rgba(245, 199, 1, 1);
}
.box-color-default {
  background-color: #fff;
  border-color: rgba(8, 199, 51, 1);
}
.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>
<style>
.diagonal-pattern-60 {
  background-image: repeating-linear-gradient(
    45deg,
    rgba(255, 106, 106, 1),
    rgba(255, 106, 106, 1) 10px,
    rgba(255, 106, 106, 1) 15px,
    rgba(255, 255, 255, 0.1) 20px
  );
  background-size: 28px 28px;
}
.diagonal-pattern-90 {
  background-image: repeating-linear-gradient(
    45deg,
    rgba(245, 199, 1, 1),
    rgba(245, 199, 1, 1) 10px,
    rgba(245, 199, 1, 1) 15px,
    rgba(255, 255, 255, 0.1) 20px
  );
  background-size: 28px 28px;
}
.diagonal-pattern-default {
  background-image: repeating-linear-gradient(
    45deg,
    rgba(8, 199, 51, 1),
    rgba(8, 199, 51, 1) 10px,
    rgba(8, 199, 51, 1) 15px,
    rgba(8, 199, 51, 0.1) 20px
  );
  background-size: 28px 28px;
}
</style>