<script setup>
const parseEventKey = (key) => {
  if (key == 'm') {
    return '独赢';
  }
  else if (key?.startsWith('wm')) {
    const ratio = key.split('_')[1];
    return `净胜 ${ratio}`;
  }
  else if (key?.startsWith('ou')) {
    const ratio = key.split('_')[1];
    return `大/小 ${ratio}`;
  }
  return key;
}
defineProps({
  eventId: {
    type: Number,
    required: true
  },
  platform: {
    type: String,
    required: true
  },
  leagueName: {
    type: String,
    required: true
  },
  teamHomeName: {
    type: String,
    required: true
  },
  teamAwayName: {
    type: String,
    required: true
  },
  dateTime: {
    type: String,
    required: true
  },
  events: {
    type: Array,
    required: true
  },
  matchNumStr: {
    type: String,
    required: false
  },
  selected: {
    type: Array,
    required: false
  }
})
</script>

<template>
  <div class="match-card">
    <div class="card-header">
      <div class="league-name"><strong v-if="matchNumStr">[{{ matchNumStr }}]</strong>{{ leagueName }}</div>
      <div class="date-time">{{ dateTime }}</div>
    </div>
    <div class="team-name">
      <span class="home-name">{{ teamHomeName }}</span>
      <em>VS</em>
      <span class="away-name">{{ teamAwayName }}</span>
    </div>
    <div class="events-list" :class="{'list-row2': events.length <= 2}">
      <table>
        <tr v-for="item in events">
          <th>{{ parseEventKey(item[0]) }}</th>
          <td><span :class="{'selected': selected.includes(item[1]?.key)}">{{ item[1]?.value ? item[1].value : '-' }}</span></td>
          <td><span :class="{'selected': selected.includes(item[2]?.key)}">{{ item[2]?.value ? item[2].value : '-' }}</span></td>
          <td><span :class="{'selected': selected.includes(item[3]?.key)}">{{ item[3]?.value ? item[3].value : '-' }}</span></td>
        </tr>
      </table>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.match-card {
  display: flex;
  flex-direction: column;
  padding: 20px;
}
.card-header {
  display: flex;
  height: 30px;
  align-items: center;
  justify-content: space-between;
  .league-name {
    font-size: 16px;
    strong {
      margin-right: 4px;
      font-weight: normal;
      color: hsl(var(--destructive));
    }
  }
  .date-time {
    font-size: 12px;
    color: hsl(var(--foreground) / 0.7);
  }
}
.team-name {
  display: flex;
  align-items: center;
  font-size: 14px;
  .disabled & {
    display: none;
  }
  span, em {
    display: block;
  }
  span {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    &:first-child {
      text-align: left;
    }
    &:last-child {
      text-align: right;
    }
  }
  em {
    margin: 0 10px;
    font-style: normal;
    color: #ff9d4a;
  }
  .home-name {
    color: hsl(var(--primary));
  }
  .away-name {
    color: hsl(var(--destructive));
  }
}
.events-list {
  margin-top: 10px;
  .disabled & {
    display: none;
  }
  table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    table-layout: fixed;
    th, td {
      height: 30px;
      border: 1px solid hsl(var(--border));
      text-align: center;
    }
    th {
      width: 80px;
      font-weight: normal;
    }
    td {
      width: calc((100% - 64px) / 2);
    }
    span {
      display: inline-block;
      height: 20px;
      line-height: 20px;
      vertical-align: middle;
      padding: 0 5px;
      &.selected {
        border-radius: 4px;
        background-color: hsl(var(--primary));
        color: hsl(var(--primary-foreground));
      }
    }
  }
  &.list-row2 {
    table {
      th, td {
        height: 45px;
      }
    }
  }
}
</style>
