<template>
  <article class="poster-card" :class="{ 'is-readonly': readonly }" @click="handleClick">
    <div class="poster-thumb">
      <img :src="item.poster" :alt="item.title" loading="lazy" />
      <span class="score-badge">{{ item.score }}</span>
    </div>

    <div class="poster-body">
      <div class="poster-meta-row">
        <span class="status-pill" :class="statusClass">{{ item.status }}</span>
        <span class="poster-time">{{ item.updatedAt }}</span>
      </div>
      <h3>{{ item.title }}</h3>
      <p>{{ item.subtitle }}</p>
      <div class="poster-owner">
        <span class="poster-sheet">{{ item.sheetName }}</span>
        <span>{{ item.accountName }}</span>
        <small>{{ item.owner }}</small>
      </div>
      <div class="tag-list">
        <span v-for="tag in item.tags" :key="tag">{{ tag }}</span>
      </div>
    </div>
  </article>
</template>

<script setup>
import { computed } from 'vue'

const props = defineProps({
  item: {
    type: Object,
    required: true,
  },
  readonly: {
    type: Boolean,
    default: false,
  },
})

const emit = defineEmits(['edit'])

const statusClass = computed(() => {
  if (props.item.status === '正常') return 'is-normal'
  if (props.item.status === '待复核') return 'is-warning'
  return 'is-danger'
})

function handleClick() {
  if (!props.readonly) {
    emit('edit', props.item)
  }
}
</script>
