<template>
  <div class="cloud-c">
    <div class="txt">已使用 {{sumSize}} / 1GB</div>
    <div class="progress">
      <el-tooltip class="item" effect="dark" :content="`图片文件占用：${result[0].zanbi}%`" placement="top">
        <div class="item green" :style="{width:result[0].zanbi+'%'}"></div>
      </el-tooltip>
      <el-tooltip class="item" effect="dark" :content="`视频文件占用：${result[1].zanbi}%`" placement="top">
        <div class="item yellow" :style="{width:result[1].zanbi+'%'}"></div>
      </el-tooltip>
      <el-tooltip class="item" effect="dark" :content="`其他文件占用：${result[2].zanbi}%`" placement="top">
        <div class="item red"  :style="{width:result[2].zanbi+'%'}"></div>
      </el-tooltip>
      <el-tooltip class="item" effect="dark" :content="`音频文件占用：${0}%`" placement="top">
        <div class="item blue"  :style="{width:0+'%'}"></div>
      </el-tooltip>
    </div>
    <div class="tuli">
      <div class="item">
        <span class="icon green"></span>图片
      </div>
      <div class="item">
        <span class="icon yellow"></span>视频
      </div>
      <div class="item">
        <span class="icon blue"></span>音频
      </div>
      <div class="item">
        <span class="icon red"></span>其他文件
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props:{
    result:{
      type:Array,
      default:[]
    }
  },
  data() {
    return {
      sumSize:'0'
    }
  },
  mounted() {
    let size=0
    this.result.forEach(x => {
      size+=x.fileSize
      x.zanbi=(x.fileSize/(1024*1024)*100).toFixed(2)
      x.zanbi=x.zanbi<1 &&x.zanbi>0?1:x.zanbi
    });
    this.sumSize=this.formatSize(size)
  },
  methods: {
    formatSize(s){
      if(s<1024){
        return s+"KB"
      }else{
        return (parseFloat(s)/1024).toFixed(2)+"MB"
      }
    }
  },
};
</script>
<style scoped>
.cloud-c .txt {
  font-size: 12px;
  color: #a2a4a7;
  text-align: right;
  margin-bottom: 14px;
}
.cloud-c .progress {
  height: 18px;
  background: rgba(241, 242, 247, 1);
  border-radius: 4px;
  display: flex;
  overflow: hidden;
}
.cloud-c .progress .item {
  height: 18px;
}
.cloud-c .progress .item:last-child {
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}
.cloud-c .tuli {
  display: flex;
  margin-top: 55px;
}
.cloud-c .tuli .item {
  flex: 1;
  font-size: 12px;
  color: #c1c6dd;
}
.cloud-c .tuli .item .icon {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  margin-right: 10px;
  display: inline-block;
}
.cloud-c .green {
  background: rgba(52, 191, 163, 1);
}
.cloud-c .yellow {
  background: rgba(255, 184, 34, 1);
}
.cloud-c .red {
  background: rgba(253, 57, 149, 1);
}
.cloud-c .blue {
  background: rgba(93, 120, 255, 1);
}
</style>