<template>
  <view>
    <view class="flex items-center py-2" @click="$goToPage({url:'pages/quiz/logs', params: { activity_id: data.activity_id,user_id: data.user_id}})">
      <view class="w-84rpx h-84rpx rounded-full flex-none">
        <up-avatar size="84rpx" mode="aspectFit" :src="data.avatar"></up-avatar>
      </view>
      <view class="ml-10rpx flex-1">
        <view class="flex-1 flex justify-between items-center">
          <view class="text-28rpx text-primary">{{ data.nick_name }}</view>
          <view class="text-xs text-hex-999">{{ data.history }}</view>
        </view>
        <view class="flex items-center text-sm">
          <view class="flex items-center flex-1">
            <view>猜</view>
            <view class="px-3">
              {{ data.game_home_field }} VS {{ data.game_away }}
            </view>
            <view>{{ data.score }}</view>
          </view>
          <view :style="{color:currentStatus.color}">{{ currentStatus.label }}</view>
        </view>
      </view>
    </view>
    <up-line dashed></up-line>
  </view>
</template>
<script setup>
import { computed } from 'vue'
const props = defineProps({
  data: {
    item: Object,
  },
})

const status = [
  {
    value: 0,
    label: '未公布',
    color: '#1b2f85',
  },
  {
    value: 1,
    label: '猜中了',
    color: '#e91f35',
  },
  {
    value: 2,
    label: '未猜中',
    color: '#808080',
  },
]

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