<template>
  <div class="number-card-container">
    <div
      class="number-card"
      v-for="(item, index) in list"
      :key="index"
      :style="styleExtra"
      @click.prevent="onClickCard(item)"
    >
      <p :style="numberStyle" class="number-card-number">{{ item[numberKey] }}</p>
      <span :style="textStyle" class="number-card-text">{{ item[textKey] }}</span>
    </div>
  </div>
</template>

<script>
export default {
  name: "EnNumberCard",
  props: {
    list: {
      type: Array,
      default: () => [],
    },
    numberKey: {
      type: String,
      default: "number",
    },
    textKey: {
      type: String,
      default: "text",
    },
    numberStyle: {
      type: String,
      default: "#1C9FFF",
    },
    textStyle: {
      type: String,
      default: "#C1C1C1",
    },
    styleExtra: {
      type: Object,
      default: () => {},
    },
  },
  methods: {
    onClickCard(data) {
      this.$emit("onClick", data);
    },
  },
};
</script>

<style lang="scss" scoped>
.number-card-container {
  @extend %flex-middle-center;
  justify-content: space-around;
  column-count:3;
  column-gap: j(10);
  .number-card {
    width: j(100);
    height: j(81);
    border-radius: j(10);
    background-color: white;
    text-align: center;
    padding: j(12);
    box-sizing: content-box;
    margin-bottom: j(10);
    &-number {
      font-family: "OPPOSans";
      font-size: j(40);
      line-height: j(53);
      color: #1c9fff;
    }
    &-text {
      font-size: j(14);
      line-height: j(18);
      color: #c1c1c1;
    }
  }
}
</style>
