<template>
  <div class="Progress-wrapper" v-bind="$attrs">
    <template v-if="isMore">
      <div
        class="more-item"
        v-for="(value, index) in values"
        :key="index"
        :style="{
          width: `${widthPercent(value)}%`,
          backgroundColor: String(colors[index]),
          height: `${addUnit(strokeWidth)}`,
        }"
      ></div>
    </template>
    <template v-else>
      <div
        class="wrapper"
        :style="{
          height: `${addUnit(strokeWidth)}`,
        }"
      >
        <div
          :style="{
            background: `linear-gradient(90deg,${gradient})`,
            width: `${Progress}%`,
            height: `${addUnit(strokeWidth)}`,
          }"
        ></div>
      </div>
      <div
        class="label"
        :style="{ width: addUnit(labelWidth) }"
        v-if="showLabel || showPercent"
      >
        <span v-if="showLabel">
          <span class="value">{{ numToStr(value, 0) }}&nbsp;</span>
          <span class="unit text-xs">{{ unit }}</span>
        </span>
        <span v-if="showPercent" class="unit"> {{ Progress }}%</span>
      </div>
    </template>
  </div>
</template>

<script lang="ts" setup>
import { computed } from "vue";
import { hex2Rgba, getPercent, numToStr, addUnit } from "@/utils";

defineOptions({
  name: "zh-progress",
});

const props = defineProps({
  total: {
    type: Number,
    default: 100,
  },
  value: {
    type: Number,
    default: 0,
  },
  color: {
    type: String,
    default: "#17caf8",
  },
  showLabel: {
    type: Boolean,
    default: false,
  },
  showPercent: {
    type: Boolean,
    default: false,
  },
  unit: {
    type: String,
  },
  values: {
    type: Array,
    default: () => [1, 2],
  },
  colors: {
    type: Array,
    default: () => ["#14b6df", "#06b869"],
  },
  isMore: {
    type: Boolean,
    default: false,
  },
  labelWidth: {
    type: Number || String,
    default: 70,
  },
  strokeWidth: {
    type: Number || String,
    default: 6,
  },
});

const gradient = computed(() => {
  return `${hex2Rgba(props.color, 0)},${props.color}`;
});
const Progress = computed(() => {
  return getPercent(props.value, props.total, 1);
});

const sum = computed(() => {
  return props.values.reduce((sum: any, value) => sum + Number(value || 0), 0);
});

const widthPercent = (v: any) => {
  return getPercent(v, Number(sum.value), 2);
};

defineExpose({
  Progress,
});
</script>

<style lang="scss" scoped>
.Progress-wrapper {
  width: 100%;
  display: flex;
  align-items: baseline;
  .more-item {
    // height: 10px;
    border-radius: 8px;
    margin-right: 2px;
    &:last-of-type {
      margin-right: 0;
    }
  }
  .wrapper {
    width: 100%;
    // height: 10px;
    border-radius: 10px;
    background-color: rgba(9, 67, 119, 1);
    // overflow: hidden;
    div {
      position: relative;
      height: 100%;
      border-radius: 10px;
      z-index: 1;
      //&::before {
      //  content: "";
      //  position: absolute;
      //  transform: translate(50%, calc(-100% + -2px));
      //  z-index: 10;
      //  top: 0px;
      //  right: 0;
      //  width: 10px;
      //  height: 6px;
      //  background: url("@/assets/images/components/progress/icon.png")
      //    no-repeat;
      //  background-size: cover;
      //}
    }
  }
  .label {
    // width: 70px;
    display: flex;
    flex-direction: column;
    > span {
      font-size: 14px;
      margin-left: 10px;
      // white-space: nowrap;
    }
  }
}
</style>
