<template>
  <div class="pk-message-card" @click="showDetail">
    <div class="pk-message-header">
      <img class="pk-icon" src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/pk.png" alt="PK" />
      <span class="pk-title">PK 邀请</span>
    </div>
    <div class="pk-message-body">
      <div class="pk-status" :class="statusClass">{{ statusText }}</div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, watch, onMounted } from 'vue'
import { queryPkRecord } from '@/api/pk-mini'
import { getPromiseStorage } from '@/utils/pk-mini/storage'

const props = defineProps({
  item: {
    type: Object,
    required: true
  }
})

const pkInfo = ref({})
const info = ref({})

const statusText = computed(() => {
  switch (pkInfo.value.pkStatus) {
    case 0: return '等待响应'
    case 1: return '已同意'
    case 2: return '已拒绝'
    default: return '查看详情'
  }
})

const statusClass = computed(() => {
  switch (pkInfo.value.pkStatus) {
    case 0: return 'pending'
    case 1: return 'accepted'
    case 2: return 'rejected'
    default: return ''
  }
})

function showDetail() {
  // 可以扩展为打开详情弹窗
}

watch(() => props.item, (newVal) => {
  if (newVal?.payload?.customData?.id) {
    queryPkRecord({ id: newVal.payload.customData.id }).then((res) => {
      pkInfo.value = res
    }).catch(() => {})
  }
}, { immediate: true })

onMounted(() => {
  getPromiseStorage('user').then((res) => {
    info.value = res
  }).catch(() => {})
})
</script>

<style scoped>
.pk-message-card {
  width: 200px;
  padding: 15px;
  background: linear-gradient(135deg, #e4f9f9, #ffffff);
  border-radius: 12px;
  border: 1px solid #4fcacd;
  cursor: pointer;
  transition: all 0.3s ease;
}
.pk-message-card:hover {
  transform: scale(1.02);
  box-shadow: 0 4px 12px rgba(79, 202, 205, 0.3);
}
.pk-message-header {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}
.pk-icon {
  width: 30px;
  height: 30px;
  margin-right: 10px;
}
.pk-title {
  font-size: 16px;
  font-weight: bold;
  color: #03aba8;
}
.pk-message-body {
  display: flex;
  justify-content: center;
}
.pk-status {
  padding: 5px 15px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 500;
}
.pk-status.pending {
  background-color: #fff3e0;
  color: #f57c00;
}
.pk-status.accepted {
  background-color: #e8f5e9;
  color: #43a047;
}
.pk-status.rejected {
  background-color: #ffebee;
  color: #e53935;
}
</style>
