<script>
export default {
  data() {
    return {
    }
  },
  props: {
    eventId: {
      type: Number,
      required: true
    },
    leagueName: {
      type: String,
      required: true
    },
    teamHomeName: {
      type: String,
      required: true
    },
    teamAwayName: {
      type: String,
      required: true
    },
    dateTime: {
      type: String,
      required: true
    },
    matchNumStr: {
      type: String,
      required: false
    },
    selected: {
      type: Boolean,
      required: false
    },
    disabled: {
      type: Boolean,
      required: false
    },
    autoScroll: {
      type: Boolean,
      required: false
    },
  },
  watch: {
    selected(newVlaue) {
      if (this.autoScroll && newVlaue) {
        this.$refs['gameItem'].scrollIntoView({ behavior: 'smooth', block: 'start', inline: 'start' });
      }
    }
  },
  computed: {},
  methods: {},
  mounted() {
  }
}
</script>

<template>
  <div class="match-item" :class="{ selected, disabled }" ref="gameItem">
    <div class="match-league"><strong v-if="matchNumStr">[{{ matchNumStr }}]</strong>{{ leagueName }}</div>
    <div class="match-team team-home">{{ teamHomeName }}</div>
    <div class="match-team team-away">{{ teamAwayName }}</div>
    <div class="match-time">{{ dateTime }}</div>
  </div>
</template>

<style lang="scss" scoped>

.match-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 10px 15px;
  &.selected {
    background-color: hsl(var(--primary) / 0.15);
  }
}

.match-league {
  font-size: 16px;
  margin-bottom: 4px;
  strong {
    margin-right: 4px;
    font-weight: normal;
    color: hsl(var(--destructive));
  }
}

.match-team {
  font-size: 14px;
  line-height: 20px;
  &.team-home {
    color: hsl(var(--primary));
  }
  &.team-away {
    color: hsl(var(--destructive));
  }
}

.match-time {
  font-size: 12px;
  color: hsl(var(--foreground) / 0.7);
  margin-top: 4px;
}
</style>
