<script setup lang="ts">

interface Item {
  label: string
  number: number
  unit: string
}

interface BuildModuleProps {
  name: string // 名称
  icon: Icon // 图标
  total: number // 总量
  unit: string // 单位
  items: Item[]
}

const props = defineProps<BuildModuleProps>()

</script>

<template>
  <div class="build-module">
    <div class="type">
      <img class="module-icon" :style="{width: props.icon.width, height: props.icon.height }" :src="props.icon.src" alt="图标">
      <span class="module-name">{{props.name}}</span>
    </div>
    <div class="info">
      <div class="total-info">
        <span class="total-number">{{props.total}}</span>
        <span class="unit">{{props.unit}}</span>
      </div>
      <div class="detail-info">
        <div class="detail-item" v-for="(item) in props.items" :key="item.label">
          <div class="detail-item-label" v-html="item.label"></div>
          <div class="detail-item-data">
            <span class="number">{{item.number}}</span>
            <span class="unit">{{item.unit}}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="less">
@import url("@/assets/css/common.less");
.build-module {
  .flex(flex-start);
  margin: 2vh 0;

  .type {
    .flex();
    flex: 1;
    flex-direction: column;
    .module-name {
      margin-top: 1vh
    }
  }
  .info {
    flex: 4;
    .flex(flex-start, flex-start);
    flex-direction: column;
    .total-info {
      .flex(flex-start);
      .total-number {
        position: relative;
        font-size: 1.5vw;
        font-weight: 900;
        background-image: -webkit-linear-gradient(bottom,rgb(234, 163, 82),#ddc663); 
        -webkit-background-clip: text; 
        -webkit-text-fill-color: transparent;
        &::after {
          content: "";
          position: absolute;
          left: 0;
          top: 10%;
          width: 100%;
          height: 100%;
          display: inline-block;
          background-image:-webkit-linear-gradient(bottom,rgba(234, 163, 82, .6),rgba(221, 198, 99, .6)); 
          filter: blur(1.1vh) brightness(80%) opacity(0.8);
          transform: scale(0.95);
        }
      }
    }

    .detail-info {
      .flex(space-between);
      flex-wrap: wrap;
      .detail-item {
        .flex(space-between);
        width: 7.6vw;
        height: 1.4vh;
        margin: .8vh 0;

        .detail-item-label {
          display: flex;
          align-items: center;
          &::before {
            content: "";
            display: inline-block;
            width: 0.3vw;
            height: 0.6vh;
            background: #e4b35a;
            border-radius: 50%;
            margin-right: .5vw;
          }
        }

      }
    }

    .number {
      color: #e4b35a;
      font-size: .9vw;
    }
    .unit {
      font-size: .7vw;
      margin-left: .2vw;
    }
  }

}
</style>
