<template>
  <view class="page-shell order-detail-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">{{ order.status }}</text>
        <text class="hero-title">{{ order.title }}</text>
        <text class="hero-desc">订单编号 {{ order.orderNo }}</text>
      </view>

      <view class="order-item-card glass-card">
        <view class="order-art">
          <view class="order-art-ring"></view>
          <text class="order-art-label">{{ shortLabel(order.title) }}</text>
        </view>
        <view class="order-copy">
          <text class="order-name">{{ order.title }}</text>
          <text class="order-sku">{{ order.collection }} · {{ order.sku }} × {{ order.quantity }}</text>
          <text class="order-amount">实付 ¥{{ order.amount }}</text>
        </view>
      </view>

      <view class="subpage-card">
        <view class="info-list">
          <view class="info-row">
            <text class="info-label">收货人</text>
            <text class="info-value">{{ order.consignee }} {{ order.mobile }}</text>
          </view>
          <view class="info-row">
            <text class="info-label">收货地址</text>
            <text class="info-value">{{ order.address }}</text>
          </view>
          <view class="info-row">
            <text class="info-label">下单时间</text>
            <text class="info-value">{{ order.time }}</text>
          </view>
          <view class="info-row">
            <text class="info-label">订单状态</text>
            <text class="info-value">{{ order.status }}</text>
          </view>
        </view>
      </view>

      <view class="cta-row">
        <view class="secondary-button" @tap="contactService">联系客服</view>
        <view class="primary-button" @tap="primaryAction">{{ primaryLabel }}</view>
      </view>
    </view>
  </view>
</template>

<script>
import { findOrderById } from '@/data/mock'

export default {
  data() {
    return {
      order: findOrderById(5001)
    }
  },
  computed: {
    primaryLabel() {
      return this.order.statusKey === 'pay' ? '立即支付' : '返回订单'
    }
  },
  onLoad(options) {
    this.order = findOrderById(options.id)
  },
  methods: {
    shortLabel(title) {
      return String(title || '绿纤').replace(/\s+/g, '').slice(0, 2)
    },
    goBack() {
      uni.navigateBack({ fail: () => uni.redirectTo({ url: '/pages/order-list/order-list' }) })
    },
    goList() {
      uni.redirectTo({ url: '/pages/order-list/order-list' })
    },
    primaryAction() {
      if (this.order.statusKey === 'pay') {
        uni.navigateTo({ url: `/pages/payment-success/payment-success?orderId=${this.order.id}` })
        return
      }
      this.goList()
    },
    contactService() {
      uni.showToast({ title: '已为您接入专属客服', icon: 'none' })
    }
  }
}
</script>

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

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

.order-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);
}

.order-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);
}

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

.order-copy {
  flex: 1;
  margin-left: 20rpx;
}

.order-name,
.order-sku,
.order-amount {
  display: block;
}

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

.order-sku {
  margin-top: 16rpx;
  font-size: 24rpx;
  color: $text-secondary;
}

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