<template>
  <div class="mx-report-summary-card">
    <div class="mx-report-summary-title" v-if="titles.length">
      <span v-for="(i,idx) in titles" :key="idx"
        :class="{ 'mx-report-summary-highlight': i.highlight }">{{ i.label }}</span>
    </div>
    <template v-if="subTitles.every(t => Array.isArray(t))">
      <div class="mx-report-summary-subTitle" v-for="sub in subTitles">
        <span v-for="(i,idx) in sub" :key="idx"
          :class="{ 'mx-report-summary-highlight': i.highlight }">{{ i.label }}</span>
      </div>
    </template>
    <div class="mx-report-summary-subTitle" v-else>
      <span v-for="(i,idx) in subTitles" :key="idx"
        :class="{ 'mx-report-summary-highlight': i.highlight }">{{ i.label }}</span>
    </div>
  </div>
</template>
<script>
  export default {
    props: {
      titles: {
        type: Array,
        default: () => [{
            label: "参加考试人数：",
            highlight: false,
          },
          {
            label: "50人",
            highlight: true,
          },
        ],
      },
      subTitles: {
        type: Array,
        default: () => [{
            label: "最高分",
            highlight: false,
          },
          {
            label: "150",
            highlight: true,
          },
          {
            label: "最低分",
            highlight: false,
          },
          {
            label: "102",
            highlight: true,
          },
        ],
      },
    },
  };
</script>
<style scoped>
  .mx-report-summary-card {
    display: flex;
    flex-direction: column;
  }

  .mx-report-summary-title {
    font-size: 15px;
    font-weight: 500;
    color: #555555;
    margin-bottom: 10px;
  }

  .mx-report-summary-subTitle {
    font-size: 12px;
    font-weight: 400;
    color: #555555;
    margin-bottom: 10px;
  }

  .mx-report-summary-highlight {
    color: #51c9a7;
  }
</style>
