<template>
  <div :class="['coil-card-hover', variant]" v-if="coil && coil.currentCoilNo !== '-'">
    <div class="coil-mini-header">
      <span class="coil-mini-no">{{ coil.currentCoilNo }}</span>
      <span class="coil-mini-weight">{{ coil.netWeight ? coil.netWeight + 't' : '-' }}</span>
    </div>
    <div class="coil-mini-body">
      <span class="coil-mini-spec">{{ coil.specification || '-' }}</span>
      <span class="coil-mini-material">{{ coil.material || '-' }}</span>
      <span :class="['coil-mini-status', statusClass(coil.qualityStatus)]">{{ coil.qualityStatus || '-' }}</span>
    </div>
    <div class="coil-detail-popup">
      <div class="popup-header">
        <span class="popup-title">钢卷详情</span>
        <span class="popup-close">&#10005;</span>
      </div>
      <div class="popup-content">
        <div class="popup-row">
          <span class="popup-label">入场卷号</span>
          <span class="popup-value">{{ coil.enterCoilNo || '-' }}</span>
        </div>
        <div class="popup-row">
          <span class="popup-label">当前卷号</span>
          <span class="popup-value">{{ coil.currentCoilNo || '-' }}</span>
        </div>
        <div class="popup-row">
          <span class="popup-label">物料名称</span>
          <span class="popup-value">{{ coil.itemName || '-' }}</span>
        </div>
        <div class="popup-row">
          <span class="popup-label">规格</span>
          <span class="popup-value">{{ coil.specification || '-' }}</span>
        </div>
        <div class="popup-row">
          <span class="popup-label">材质</span>
          <span class="popup-value">{{ coil.material || '-' }}</span>
        </div>
        <div class="popup-row">
          <span class="popup-label">净重</span>
          <span class="popup-value">{{ coil.netWeight || 0 }} t</span>
        </div>
        <div class="popup-row">
          <span class="popup-label">生产厂家</span>
          <span class="popup-value">{{ coil.manufacturer || '-' }}</span>
        </div>
        <div class="popup-row">
          <span class="popup-label">镀层</span>
          <span class="popup-value">{{ coil.zincLayer || '-' }}</span>
        </div>
        <div class="popup-row">
          <span class="popup-label">质量状态</span>
          <span class="popup-value">{{ coil.qualityStatus || '-' }}</span>
        </div>
        <div class="popup-row">
          <span class="popup-label">逻辑库位</span>
          <span class="popup-value">{{ coil.warehouseName || '-' }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getFuturisticStatusClass } from '../statusUtils'

export default {
  name: 'CoilCardCompact',
  props: {
    coil: { type: Object, default: () => ({}) },
    variant: { type: String, default: '' }
  },
  methods: {
    statusClass(status) {
      const cls = getFuturisticStatusClass(status)
      const map = {
        'futuristic-status-success': 'status-success',
        'futuristic-status-danger': 'status-danger',
        'futuristic-status-warning': 'status-warning',
        'futuristic-status-default': 'status-default'
      }
      return map[cls] || 'status-default'
    }
  }
}
</script>
