<template>
  <div class="step-item">
    <div class="step-content">
      <div class="coil-card-wrapper inbound-coil-wrapper">
        <div class="coil-card-header inbound-header">
          <span class="card-label">&#128666; 发货</span>
        </div>
        <div class="coil-card-futuristic">
          <div class="coil-futuristic-body">
            <div class="coil-icon-container">
              <svg class="coil-svg" viewBox="0 0 200 200">
                <defs>
                  <linearGradient id="coilGradShip1" x1="0%" y1="0%" x2="100%" y2="100%">
                    <stop offset="0%" style="stop-color:#f59e0b;stop-opacity:0.5" />
                    <stop offset="50%" style="stop-color:#ef4444;stop-opacity:0.4" />
                    <stop offset="100%" style="stop-color:#f59e0b;stop-opacity:0.5" />
                  </linearGradient>
                  <linearGradient id="coilGradShip2" x1="0%" y1="0%" x2="100%" y2="0%">
                    <stop offset="0%" style="stop-color:#fcd34d;stop-opacity:0.4" />
                    <stop offset="100%" style="stop-color:#fca5a5;stop-opacity:0.3" />
                  </linearGradient>
                </defs>
                <circle cx="100" cy="100" r="70" fill="none" stroke="url(#coilGradShip1)" stroke-width="2.5">
                  <animate attributeName="r" values="70;72;70" dur="2s" repeatCount="indefinite" />
                </circle>
                <circle cx="100" cy="100" r="60" fill="none" stroke="url(#coilGradShip2)" stroke-width="1.8" opacity="0.6">
                  <animate attributeName="stroke-dashoffset" values="0;377" dur="4s" repeatCount="indefinite" />
                </circle>
                <circle cx="100" cy="100" r="45" fill="url(#coilGradShip1)" opacity="0.15">
                  <animate attributeName="opacity" values="0.15;0.3;0.15" dur="3s" repeatCount="indefinite" />
                </circle>
                <circle cx="100" cy="100" r="35" fill="url(#coilGradShip2)" opacity="0.2" />
                <circle cx="100" cy="100" r="25" fill="url(#coilGradShip1)" opacity="0.25" />
                <circle cx="100" cy="100" r="15" fill="white" opacity="0.4" />
                <line x1="100" y1="100" x2="100" y2="30" stroke="url(#coilGradShip1)" stroke-width="1" opacity="0.4" />
                <line x1="100" y1="100" x2="170" y2="100" stroke="url(#coilGradShip1)" stroke-width="1" opacity="0.4" />
                <line x1="100" y1="100" x2="100" y2="170" stroke="url(#coilGradShip1)" stroke-width="1" opacity="0.4" />
                <line x1="100" y1="100" x2="30" y2="100" stroke="url(#coilGradShip1)" stroke-width="1" opacity="0.4" />
                <circle cx="100" cy="100" r="4" fill="#f59e0b">
                  <animate attributeName="r" values="4;6;4" dur="1.5s" repeatCount="indefinite" />
                </circle>
              </svg>
            </div>
            <div class="coil-attr-tags">
              <div class="attr-tag attr-top">
                <div class="attr-content">
                  <span class="attr-label">发货状态</span>
                  <span class="attr-value" :class="coilInfo.status === 1 ? 'futuristic-status-success' : 'futuristic-status-warning'">
                    {{ coilInfo.status === 1 ? '已发货' : '未发货' }}
                  </span>
                </div>
              </div>
            </div>
          </div>
          <div class="coil-futuristic-footer" v-if="coilInfo.status === 1">
            <div class="footer-item">
              <span class="footer-label">发货人</span>
              <span class="footer-value">{{ coilInfo.exportByName || '-' }}</span>
            </div>
            <div class="footer-item">
              <span class="footer-label">发货时间</span>
              <span class="footer-value">{{ formatTime(coilInfo.exportTime) }}</span>
            </div>
          </div>
          <div class="coil-futuristic-footer" v-else>
            <div class="footer-item" style="flex: 1;">
              <span class="footer-label">状态</span>
              <span class="footer-value">等待发货</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

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

export default {
  name: 'ShipmentCard',
  props: {
    coilInfo: { type: Object, default: () => ({}) }
  },
  methods: {
    formatTime(time) {
      return formatTime(time)
    }
  }
}
</script>
