<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <!-- 基准的画廊模块，通过不同的 type 展示不同的样式 -->
  <div class="gallery" :class="`gallery_${type}`">
    <!-- 部分类型的画廊需要加一张图片 -->
    <div :class="`gallery-item_center_${type}`"></div>
    <div v-for="item in galleryConfig" :key="item.prop" :class="`gallery-item_${type}`">
      <!-- 画廊项的具体内容填充剩余宽度 -->
      <div class="gallery-item__label">{{ item.label }}</div>
      <div class="gallery-item__value" :class="`gallery-item__value_${item.color}`">{{ item.value }}</div>
    </div>
  </div>
</template>
<script lang="ts" setup>
  // import { get } from 'lodash-es';
  // import { computed } from 'vue';

  withDefaults(
    defineProps<{
      galleryConfig: {
        value: string;
        color: string;
        label: string;
        prop: string;
      }[];
      /** A | B | C | D */
      type: string;
    }>(),
    {
      galleryConfig: () => [],
      type: 'A',
    }
  );
  //   defineEmits(['click']);
</script>
<style lang="less" scoped>
  @import '@/design/theme.less';

  .gallery {
    position: relative;
    width: 100%;
    height: 100%;
  }
  .gallery-item__value_red {
    color: red;
  }
  .gallery-item__value_orange {
    color: orange;
  }
  .gallery-item__value_yellow {
    color: yellow;
  }
  .gallery-item__value_green {
    color: yellowgreen;
  }
  .gallery-item__value_blue {
    color: aqua;
  }
  .gallery-item__value_white {
    color: white;
  }
  .gallery-item__value_lightblue {
    color: lightblue;
  }
</style>
