<template>
  <div class="color-div">
    <template v-for="(item, index) in data" :key="index">
      <div
        v-if="item.numRatio != '0'"
        :style="{ width: getrealRatio(item.numRatio) }"
        class="small-div"
      >
        <div
          :style="{
            borderBottomColor: colorData[index % data.length],
            opacity: index != 0 ? 1 : 0,
          }"
          class="left-border-item"
        ></div>
        <div
          :style="{
            background: colorData[index % data.length],
          }"
          class="color-item"
        ></div>
        <div
          :style="{
            borderTopColor: colorData[index % data.length],
            opacity: index != data.length - 1 ? 1 : 0,
          }"
          class="border-item"
        ></div>
      </div>
    </template>
  </div>
</template>

<script setup>
const props = defineProps({
  /**
   * data数组类型
   * Array<{
   *  numRatio: 小div块比例
   * }>
   */
  data: {
    type: Array,
    required: true,
  },
  colorData: {
    type: Array,
    required: true,
  },
});

const getrealRatio = (numRatio) => {
  const total = props.data
    .map((item) => Number(item.numRatio))
    .reduce((prev, curr) => prev + curr);
  console.log(total);
  return ((numRatio * 100) / total).toFixed(2) + "%";
};
</script>

<style lang="scss">
.color-div {
  height: 8px;
  width: 100%;
  display: flex;
  justify-content: flex-start;
  .small-div {
    display: flex;
    justify-content: flex-start;
    position: relative;
    height: 100%;
    box-sizing: border-box;
    .color-item {
      box-sizing: border-box;
      width: calc(100% - 16px);
      height: 100%;
    }
    .border-item {
      box-sizing: border-box;
      border-right: 8px solid transparent;
      border-top: 8px solid;
    }
    .left-border-item {
      box-sizing: border-box;
      border-left: 8px solid transparent;
      border-bottom: 8px solid;
    }
  }
}
</style>
