<template>
  <view class="page-shell pickup-code-page">
    <view class="page-blur"></view>
    <view class="page-blur-secondary"></view>
    <view class="page-blur-tertiary"></view>

    <view class="page-content subpage-content">
      <view class="subpage-nav">
        <view class="subpage-back" @tap="goBack">‹</view>
        <view class="subpage-title-wrap">
          <text class="subpage-title">核销码</text>
          <text class="subpage-subtitle">到店出示核销码，任意门店核销后即可完成自提</text>
        </view>
      </view>

      <view class="subpage-hero glass-card">
        <text class="hero-kicker">待自提</text>
        <text class="hero-title">门店自提取件码</text>
        <text class="hero-desc">订单编号 {{ info.orderNo }} · {{ info.storeName }}</text>
      </view>

      <lf-pickup-code
        v-if="info.pickupCode"
        :code="info.pickupCode"
        title="门店自提取件码"
        desc="到自提门店出示取件码，门店核销后即可完成自提。"
      />

      <view class="subpage-card">
        <view class="section-head">
          <text class="section-title">核销信息</text>
          <text class="section-link">门店自提</text>
        </view>
        <view class="info-list">
          <view class="info-row">
            <text class="info-label">自提门店</text>
            <text class="info-value">{{ info.storeName || '—' }}</text>
          </view>
          <view class="info-row">
            <text class="info-label">核销方式</text>
            <text class="info-value">到店出示取件码核销</text>
          </view>
          <view class="info-row">
            <text class="info-label">取件码</text>
            <text class="info-value">{{ info.pickupCode }}</text>
          </view>
        </view>
      </view>

      <view class="cta-row">
        <view class="secondary-button" @tap="copyCode">复制取件码</view>
        <view class="primary-button" @tap="goOrderDetail">返回订单</view>
      </view>
    </view>
  </view>
</template>

<script>
import { getPickupCode } from '@/api/mall'

export default {
  data() {
    return {
      orderId: '',
      info: {}
    }
  },
  onLoad(options) {
    this.orderId = options.orderId || options.id || ''
    this.loadCode()
  },
  methods: {
    loadCode() {
      getPickupCode(this.orderId)
        .then((data) => {
          this.info = data || {}
        })
        .catch(() => {})
    },
    copyCode() {
      if (!this.info.pickupCode) return
      uni.setClipboardData({
        data: this.info.pickupCode,
        success: () => uni.showToast({ title: '取件码已复制', icon: 'none' })
      })
    },
    goBack() {
      uni.navigateBack({ fail: () => this.goOrderDetail() })
    },
    goOrderDetail() {
      uni.redirectTo({ url: `/packageProfile/order-detail/order-detail?id=${this.orderId}` })
    }
  }
}
</script>

<style lang="scss" scoped>
@import '@/styles/mixins.scss';
@import '@/styles/subpage.scss';

.product-card {
  display: flex;
  padding: 28rpx;
  margin-bottom: 24rpx;
}

.product-art {
  width: 180rpx;
  height: 180rpx;
  border-radius: 28rpx;
  flex-shrink: 0;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(241, 246, 241, 0.96);
  border: 1rpx solid rgba(120, 146, 121, 0.14);
  box-shadow: inset 0 1rpx 0 rgba(255, 255, 255, 0.65);
  overflow: hidden;
}

.product-art-ring {
  width: 96rpx;
  height: 96rpx;
  border-radius: 50%;
  border: 1rpx solid rgba(120, 146, 121, 0.18);
  background: rgba(255, 255, 255, 0.45);
  animation: lfPulseSoft 5.2s ease-in-out infinite;
}

.product-art-label {
  position: absolute;
  font-size: 24rpx;
  letter-spacing: 4rpx;
  color: $brand-primary-deep;
  font-weight: 600;
}

.product-art::before {
  content: '';
  position: absolute;
  right: -30rpx;
  top: -30rpx;
  width: 120rpx;
  height: 120rpx;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(210, 191, 156, 0.22), rgba(210, 191, 156, 0));
  animation: lfFloatSoft 9.8s ease-in-out infinite;
}

.product-copy {
  flex: 1;
  margin-left: 22rpx;
}

.product-name,
.product-spec,
.product-qty,
.product-amount {
  display: block;
}

.product-name {
  font-size: 30rpx;
  line-height: 1.5;
  font-weight: 700;
}

.product-spec,
.product-qty {
  margin-top: 14rpx;
  font-size: 24rpx;
  line-height: 1.7;
  color: $text-secondary;
}

.product-amount {
  margin-top: 18rpx;
  font-size: 34rpx;
  font-weight: 700;
  color: $brand-primary-deep;
}
</style>
