<!---儲存空間組成條圖--->
<template>
  <div class="space-bar">
    <h2 class="spacetotal-title">
      校總空間量：<span class="spacetotal-num">2,500 GB</span>
    </h2>
    <div class="spacetotal-solution">
      空間購置方案:
      <span v-for="(item, index) in spaceTotalSolution" :key="index">
        <div
          class="colorball"
          :style="{ 'background-color': `${item.color}` }"
        ></div>
        <span class="solname"
          >{{ item.name }}({{ item.space }}G)<span v-if="index != 2">
            +</span
          ></span
        >
      </span>
    </div>
    <div class="colorbar-wrap">
      <div
        class="color-bar"
        v-for="(item, index) in spaceTotalSolution"
        :key="index"
        :style="{
          'background-color': `${item.color}`,
          width: `${(item.space / 2500) * 100}%`,
        }"
      ></div>
    </div>
    <br />
    <div class="spacetotal-solution">空間使用狀況:</div>
    <div class="colorbar-wrap">
      <div class="color-Sprite"></div>
      <div
        class="color-bar-bottom"
        v-for="(item, index) in usingCondition"
        :key="index + 'a'"
        :style="{
          'background-color': `${item.color}`,
          width:  index==0?`${(item.space / 100) * 100}%`:`${(teacherSpaceUsing / 100) * 100}%`,
        }"
      ></div>
    </div>
    <div class="colorbar-num">
      {{ usingCondition[0].space + teacherSpaceUsing }} GB / 100.0 GB
    </div>
    <span class="colorbar-text"
      v-for="(item, index) in usingCondition"
      :key="index"
      :style="{ color: `${item.color}` }"
      >{{ item.name }}:{{ index==0?item.space:teacherSpaceUsing }}GB</span
    >
     <span class="colorbar-text" :style="{ color: `#99999c ` }">剩餘空間:{{(100-(usingCondition[0].space + teacherSpaceUsing)).toFixed(2)}}GB</span>
  </div>
</template>

<script>
export default {
  name: "Spacebar",
  props:['teacherSpaceUsing'],
  data() {
    return {
      spaceTotalSolution: [
        {
          name: "IES5基本方案",
          space: 500,
          color: "#00f492",
        },
        {
          name: "1500G擴充購置方案",
          space: 1500,
          color: "#f862bb",
        },
        {
          name: "500G擴充購置方案",
          space: 500,
          color: "#65dcda",
        },
      ],
      usingCondition: [
        {
          name: "IES5已使用空間",
          space: 27.8,
          color: "#d6b8ff",
        },
        {
          name: "已分配至教師空間",
          space: this.teacherSpaceUsing,
          color: "#f6d76d",
        },
      ],
    };
  },
};
</script>

<style lang='less'>
@import "./Spacebar.less";
</style>