<script>
export default {
  data() {
    return {
    }
  },
  props: {
    eventId: {
      type: Number
    },
    leagueName: {
      type: String
    },
    teamHomeName: {
      type: String
    },
    teamAwayName: {
      type: String
    },
    dateTime: {
      type: String
    },
    selected: {
      type: Boolean
    },
    disabled: {
      type: Boolean
    },
    autoScroll: {
      type: Boolean
    },
  },
  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">{{ 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: #e9f3fe;
  }
}

.match-league {
  font-size: 16px;
  font-weight: 500;
  color: #333;
  margin-bottom: 4px;
}

.match-team {
  font-size: 14px;
  line-height: 20px;
  &.team-home {
    color: #0958d9;
  }
  &.team-away {
    color: #f5222d;
  }
}

.match-time {
  font-size: 12px;
  color: #888;
  margin-top: 4px;
}

.dark {
  .match-item {
    &.selected {
      background-color: #172b41;
    }
  }
  .match-league {
    color: #fff;
  }
  .match-team {
    &.team-home {
      color: #5797ff;
    }
    &.team-away {
      color: #ff626a;
    }
  }
}
</style>
