<template>
  <div class="count-data">
    <!-- 素材消耗 -->
    <div>
      <div class="icon-bg bg1">
        <i class="el-icon-s-cooperation"></i>
      </div>
      <div class="material-consume">
        <span>素材消耗</span>
        <span>{{ countData.total_cost }}</span>
      </div>
    </div>
    <!-- 素材总数量 -->
    <div>
      <div class="icon-bg bg2">
        <i class="el-icon-folder-opened"></i>
      </div>
      <div class="material-nums">
        <el-tooltip
          class="item"
          effect="dark"
          content="该应用下的历史总素材"
          placement="right"
        >
          <span>素材总数量</span>
        </el-tooltip>
        <span>{{ countData.total_videos }}</span>
      </div>
    </div>
    <!-- 在投素材数量 -->
    <div>
      <div class="icon-bg bg3">
        <i class="el-icon-thumb"></i>
      </div>
      <div class="material-putin">
        <span>在投素材数量</span>
        <span>{{ countData.total_running_videos }}</span>
      </div>
    </div>
    <!-- 新增素材 -->
    <div>
      <div class="icon-bg bg4">
        <i class="el-icon-date"></i>
      </div>
      <div class="material-nums">
        <span>新增素材</span>
        <span>{{ countData.new_videos }}</span>
      </div>
    </div>
    <!-- 新增素材成本 -->
    <div>
      <div class="icon-bg bg5">
        <span class="i5">$</span>
      </div>
      <div class="material-new-cost">
        <span>新增素材成本</span>
        <span>{{ countData.buy_price }}</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    countData: {
      type: Object,
      default() {
        return {};
      },
    },
  },
};
</script>

<style scoped>
.count-data {
  display: flex;
  padding: 5px;
  justify-content: space-between;
}

.count-data > div {
  width: 19%;
  padding: 20px 8px;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
  display: flex;
  justify-content: flex-start;
}

.material-consume,
.material-nums,
.material-putin,
.material-new-cost {
  display: flex;
  flex-direction: column;
}

.item {
  margin: 4px;
}
</style>

<!-- 图标样式 -->
<style scoped>
.icon-bg {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background-color: purple;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 20px;
}

.bg1 {
  background-color: #d9e9ff;
}

.bg2 {
  background-color: #e8e3ff;
}

.bg4 {
  background-color: #d6f3dc;
}

.bg3 {
  background-color: #fbdadc;
}

.bg5 {
  background-color: #fdf1dc;
}

.el-icon-folder-opened {
  font-size: 20px;
  color: #886cff;
}

.el-icon-thumb {
  font-size: 20px;
  color: #ef3737;
}

.i5 {
  font-size: 20px;
  color: #f5b72e;
}

.el-icon-s-cooperation {
  font-size: 20px;
  color: #2f88ff;
}

.el-icon-date {
  font-size: 20px;
  color: #36c635;
}
</style>