<template>
  <div class="detail-container">
    <div class="top-bar">
      <el-button link size="large" :icon="ArrowLeft" @click="goBack">返回</el-button>
    </div>
    <div class="detail-body" v-loading="loading">
      <div class="media">
        <div class="cover">
          <el-image v-if="detail?.coverImageUrl" :src="getFilePrefix + detail.coverImageUrl" :preview-src-list="[getFilePrefix + detail.coverImageUrl]" preview-teleported fit="cover" />
          <div v-else class="cover-empty">—</div>
          <div v-if="detail?.modelUrl" class="badge360" @click="openModel">360</div>
        </div>
      </div>
      <div class="info">
        <div class="title">{{ detail?.name || '—' }}</div>
        <!-- <div class="meta">
          <span class="cat">{{ detail?.categoryInfo?.name || detail?.categoryId || '—' }}</span>
          <span v-if="detail?.material" class="tag">{{ detail.material }}</span>
          <span v-if="detail?.age" class="tag">{{ detail.age }}</span>
        </div> -->
        <div class="chips">
          <span v-if="Number(detail?.isHot) === 1" class="chip hot">热门</span>
          <!-- <span class="chip status" :class="Number(detail?.status) === 1 ? 'on' : 'off'">{{ Number(detail?.status) === 1 ? '显示' : '隐藏' }}</span> -->
        </div>
        <div class="kv-list">
          <div class="kv-item">
            <div class="kv-label">分类名称</div>
            <div class="kv-val">{{ detail?.categoryInfo?.name || '—' }}</div>
          </div>
          <div class="kv-item">
            <div class="kv-label">材质</div>
            <div class="kv-val">{{ detail?.material || '—' }}</div>
          </div>
          <div class="kv-item">
            <div class="kv-label">年代</div>
            <div class="kv-val">{{ detail?.age || '—' }}</div>
          </div>
        </div>
        <div class="desc">
          <div class="section">
            <div class="section-title">出土信息</div>
            <div class="section-text">{{ detail?.excavationInfo || '—' }}</div>
          </div>
        </div>
      <div class="collect-bar" v-if="isLogin">
        <el-button class="collect-btn" :type="isCollected ? 'danger' : 'warning'" size="large" @click="toggleCollect">
          {{ isCollected ? '取消收藏' : '收藏' }}
        </el-button>
      </div>
      </div>
      
      <div class="story-panel">
        <div class="section">
          <div class="section-title">文物故事</div>
          <div class="section-text" v-html="detail?.story || '—'"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, getCurrentInstance, onMounted } from 'vue'
import { getRelic } from '@/api/relic'
import { addItemCollection, delItemCollection } from '@/api/itemCollection'
// 不再在前端获取当前用户ID，改由后端基于登录态判断
import { Back,ArrowLeft } from '@element-plus/icons-vue'
import Cookies from 'js-cookie'

const { proxy } = getCurrentInstance()
const getFilePrefix = proxy.getFilePrefix
const loading = ref(true)
const detail = ref(null)
const isCollected = ref(false)
const collectionId = ref(null)
let relicIdCache = null
const isLogin = ref(!!Cookies.get('role'))

function formatDate(val) {
  if (!val) return '—'
  const d = new Date(val)
  if (isNaN(d.getTime())) return '—'
  const yyyy = d.getFullYear()
  const MM = String(d.getMonth() + 1).padStart(2, '0')
  const DD = String(d.getDate()).padStart(2, '0')
  const HH = String(d.getHours()).padStart(2, '0')
  const mm = String(d.getMinutes()).padStart(2, '0')
  return `${yyyy}-${MM}-${DD} ${HH}:${mm}`
}

function openModel() {
  if (detail.value?.modelUrl) {
    window.open(getFilePrefix + detail.value.modelUrl, '_blank')
  }
}

function goBack() {
  proxy.$router.back()
}

function refreshCollectStatus() {
  if (!isLogin.value) {
    isCollected.value = false
    collectionId.value = null
    return
  }
  const list = Array.isArray(detail.value?.itemCollections) ? detail.value.itemCollections : []
  const mine = list.length ? list[0] : null
  isCollected.value = !!mine
  collectionId.value = mine ? mine.id : null
}

function fetchDetail() {
  if (!relicIdCache) { loading.value = false; return }
  getRelic(relicIdCache).then(res => {
    detail.value = res.data || res
    loading.value = false
    refreshCollectStatus()
  }).catch(() => { loading.value = false })
}

function toggleCollect() {
  if (!relicIdCache) return
  if (!isLogin.value) return
  if (!isCollected.value) {
    addItemCollection({ itemId: relicIdCache }).then(r => {
      // proxy.$message.success((r && r.msg) || '已收藏')
      fetchDetail()
    })
  } else if (collectionId.value) {
    delItemCollection(collectionId.value).then(r => {
      // proxy.$message.success((r && r.msg) || '已取消收藏')
      fetchDetail()
    })
  }
}

onMounted(() => {
  const relicId = proxy.$route.params.relicId
  relicIdCache = relicId
  fetchDetail()
})
</script>

<style scoped>
.detail-container {
  width: 80%;
  margin: 24px auto 40px;
  padding-top: 16px;
}
.top-bar {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 16px;
}
.detail-body {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 28px;
  grid-auto-rows: min-content;
}
.media {
  display: flex;
}
.cover {
  position: relative;
  width: 100%;
  height: 520px;
  background: #f9f6f1;
  border: 1px solid #e7dfcf;
  border-radius: 16px;
  overflow: hidden;
}
.cover :deep(.el-image) {
  width: 100%;
  height: 100%;
}
.cover-empty {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #909399;
  font-size: 18px;
}
.badge360 {
  position: absolute;
  top: 16px;
  left: 16px;
  background: #ffffff;
  color: #8a2b2b;
  border: 1px solid #e8d9cf;
  border-radius: 999px;
  padding: 8px 12px;
  font-weight: 800;
  cursor: pointer;
}
.badge360:hover {
  background: #fef4f4;
}
.info {
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, #faf7f2 0%, #f7f3ea 100%);
  border: 1px solid #e7dfcf;
  border-radius: 16px;
  padding: 16px 18px;
  box-shadow: 0 6px 14px rgba(138,43,43,0.08);
}
.title {
  font-size: 28px;
  font-weight: 800;
  color: #2c1f1f;
  letter-spacing: 1px;
  margin-bottom: 12px;
}
.meta {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.chips {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
}
.chip {
  display: inline-block;
  padding: 4px 10px;
  font-size: 12px;
  border-radius: 999px;
  border: 1px solid #e8d9cf;
  background: #f5e9e2;
  color: #8a2b2b;
  font-weight: 700;
}
.chip.hot {
  background: #ffefe6;
  border-color: #ffd5bf;
  color: #c64820;
}
.chip.status.on {
  background: #e8f5e9;
  border-color: #c8e6c9;
  color: #2e7d32;
}
.chip.status.off {
  background: #fdecea;
  border-color: #f5c6c6;
  color: #c62828;
}
.kv-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px 16px;
  margin-bottom: 12px;
}
.kv-item {
  display: flex;
  gap: 8px;
  align-items: baseline;
}
.kv-label {
  width: 80px;
  color: #8a2b2b;
  font-weight: 700;
  font-size: 13px;
}
.kv-val {
  color: #2c1f1f;
  font-size: 14px;
}
.cat {
  font-size: 14px;
  color: #8a2b2b;
  background: #f5e9e2;
  border: 1px solid #e8d9cf;
  border-radius: 999px;
  padding: 4px 10px;
}
.tag {
  font-size: 14px;
  color: #2c1f1f;
  background: #efe9df;
  border: 1px solid #e0d6c7;
  border-radius: 999px;
  padding: 4px 10px;
}
.desc {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.section {
  background: #ffffff;
  border: 1px solid #eadfce;
  border-radius: 14px;
  padding: 16px;
}
.section-title {
  font-size: 16px;
  font-weight: 800;
  color: #2c1f1f;
  margin-bottom: 8px;
}
.section-text {
  color: #606266;
  line-height: 1.9;
  font-size: 16px;
}
.story-panel {
  grid-column: 1 / -1;
}
.collect-bar {
  grid-column: 1 / -1;
  display: flex;
  justify-content: center;
  margin-top: 16px;
}
.collect-btn {
  padding: 18px 44px;
  font-size: 18px;
  border-radius: 999px;
  box-shadow: 0 8px 18px rgba(138,43,43,0.12);
  font-weight: 700;
}
.section-text :deep(img) {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 8px auto;
  border-radius: 8px;
}
</style>
