<template>
  <view class="text-sm">
    <view class="p-3">
      <view>{{ data.game_day }} {{ data.game_name }}</view>
      <view class="grid grid-cols-2 mt-2">
        <view class="grid grid-cols-3 mr-20rpx">
          <view>{{ data.game_home_field }}</view>
          <view class="text-center">VS</view>
          <view class="text-right">{{ data.game_away }}</view>
        </view >
        <view class="grid grid-cols-2 ml-40rpx">
          <view>{{ data.score }}</view>
          <view :style="{ color: currentStatus.color }" class="text-right">{{
            currentStatus.label
          }}</view>
        </view>
      </view>
    </view>
    <up-line color="#EEEEEE"></up-line>
  </view>
</template>
<script setup>
import { computed } from 'vue'
import { status } from './status'
const props = defineProps({
  data: {
    type: Object,
    default: () => {},
  },
})

const currentStatus = computed(() =>
  status.find((e) => e.value == props.data.status)
)
</script>
