<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div class="flex flex-items-center flex-wrap">
    <div
      v-for="(item, index) in items"
      :key="`simpleboard${index}`"
      class="mini-board"
      :class="`mini-board_${type} ${item.to ? 'cursor-pointer' : ''}`"
      @click="redirectTo(getFormattedText(data, item.to))"
    >
      <slot name="label">
        <div class="mini-board__label" :class="`mini-board__label_${type}`">
          {{ getFormattedText(data, item.label) }}
          <Tooltip v-if="item.tooltips && item.tooltips.length">
            <template #title>
              <div
                v-for="(value, inx) in item.tooltips"
                :key="`simpletip${inx}`"
                class="mini-board__tip"
                :class="` ${value.to ? 'cursor-pointer' : ''}`"
                @click="redirectTo(getFormattedText(data, value.to))"
              >
                {{ getFormattedText(data, value.label) }}
                ：
                {{ getFormattedText(data, value.value) }}
              </div>
            </template>
            <question-circle-outlined />
          </Tooltip>
        </div>
      </slot>
      <slot name="value">
        <div class="mini-board__value" :class="`mini-board__value_${type}`">
          {{ getFormattedText(data, item.value) }}
        </div>
      </slot>
    </div>
  </div>
</template>
<script lang="ts" setup>
  import { Tooltip } from 'ant-design-vue';
  import { QuestionCircleOutlined } from '@ant-design/icons-vue';
  import { getFormattedText, redirectTo } from '../hooks/helper';

  withDefaults(
    defineProps<{
      items: {
        label: string;
        value?: string;
        to?: string;
        tooltips?: { label: string; value: string; to: string }[];
      }[];
      data: any;
      type: string;
    }>(),
    {
      type: 'A',
    }
  );

  defineEmits(['click']);
</script>
<style lang="less" scoped>
  @import '/@/design/theme.less';
  @font-face {
    font-family: 'DDIN-Bold';
    src: url('/@/assets/font//D-DIN-Bold.otf');
  }
  @font-face {
    font-family: 'DDIN';
    src: url('/@/assets/font//D-DIN.otf');
  }

  .mini-board {
    --image-board-bg-A-1: url('/@/assets/images/sealedGoaf/configurable/miniBoard/board-bg-A-1.png');
    --image-board-bg-A-2: url('/@/assets/images/sealedGoaf/configurable/miniBoard/board-bg-A-2.png');
    --image-board-bg-A-3: url('/@/assets/images/sealedGoaf/configurable/miniBoard/board-bg-A-3.png');
    --image-board-bg-A-4: url('/@/assets/images/sealedGoaf/configurable/miniBoard/board-bg-A-4.png');
    --image-board-bg-A-5: url('/@/assets/images/sealedGoaf/configurable/miniBoard/board-bg-A-5.png');

    height: 50px;
    line-height: 25px;
    width: 130px;
    padding: 0 5px 0 5px;
    text-align: center;
    background-size: 100% 100%;
    position: relative;
    pointer-events: all;
  }

  .mini-board__label {
    white-space: nowrap;
  }
  .mini-board__value {
    white-space: nowrap;
  }
  .mini-board_A {
    width: 190px;
    height: 43px;
    display: flex;
    justify-content: space-between;
    align-items: end;
    padding: 0 5px 0 10px;
    background-image: var(--image-board-bg-A-1);
    background-size: 100% 100%;
  }
  .mini-board_A:nth-child(2) {
    background-image: var(--image-board-bg-A-2);
  }
  .mini-board_A:nth-child(3) {
    background-image: var(--image-board-bg-A-3);
  }
  .mini-board_A:nth-child(4) {
    background-image: var(--image-board-bg-A-4);
  }
  .mini-board_A:nth-child(5) {
    background-image: var(--image-board-bg-A-5);
  }
  .mini-board_A:nth-child(6) {
    background-image: var(--image-board-bg-A-1);
  }
  .mini-board__label_A {
    color: #000000;
    font-size: 137x;
    font-family: 'Source Han Sans SC';
    font-style: normal;
    font-weight: 700;
    padding-bottom: 5px;
  }
  .mini-board__value_A {
    width: 55px;
    color: #000000;
    font-size: 26px;
    padding-bottom: 10px;
    font-family: 'DDIN-Bold';
  }

  .mini-board__tip {
    padding: 4px;
    margin: 4px 0px;
    background-color: @map-popup-bg;
  }
  .mini-board__tip:hover {
    background-color: @primary-color;
  }
</style>
