<template>
  <view class="detail-page">
    <!-- 顶部导航 -->
    <view class="nav-bar">
      <view class="nav-back" @click="goBack">
        <text class="back-arrow">‹</text>
      </view>
      <text class="nav-title">订单详情</text>
      <view class="nav-placeholder"></view>
    </view>

    <!-- 内容区域 -->
    <scroll-view class="detail-scroll" scroll-y>
      <view v-if="loading" class="loading-state">
        <text class="loading-text">加载中...</text>
      </view>

      <view v-else-if="order" class="detail-body">
        <!-- 状态卡片 -->
        <view class="status-card">
          <view class="status-icon-row">
            <view class="status-dot" :class="statusDotClass"></view>
            <text class="status-main">{{ orderStatusText(order.order_status) }}</text>
          </view>
          <text class="status-sub">{{ payStatusText(order.payment_status) }}</text>
        </view>

        <!-- 商品信息 -->
        <view class="section-card">
          <view class="section-title">商品信息</view>
          <view
            class="product-item"
            v-for="(product, idx) in order.products"
            :key="idx"
          >
            <image class="product-img" :src="product.image" mode="aspectFill" />
            <view class="product-info">
              <text class="product-name">{{ product.name }}</text>
              <view class="product-bottom">
                <text class="product-price">￥{{ getDecimal(product.unit_price) }}</text>
                <text class="product-qty">x{{ product.qty }}</text>
              </view>
            </view>
          </view>
        </view>

        <!-- 订单信息 -->
        <view class="section-card">
          <view class="section-title">订单信息</view>
          <view class="info-row">
            <text class="info-label">订单编号</text>
            <text class="info-value" @click="copyText(order.order_id)">{{ order.order_id }}</text>
          </view>
          <view class="info-row">
            <text class="info-label">下单时间</text>
            <text class="info-value">{{ formatTime(order.createdAt) }}</text>
          </view>
          <view class="info-row">
            <text class="info-label">设备编号</text>
            <text class="info-value">{{ order.device_id }}</text>
          </view>
          <view class="info-row">
            <text class="info-label">订单来源</text>
            <text class="info-value">{{ orderSourceText(order.order_source) }}</text>
          </view>
          <view class="info-row">
            <text class="info-label">商品数量</text>
            <text class="info-value">{{ order.total_qty }} 件</text>
          </view>
        </view>

        <!-- 金额信息 -->
        <view class="section-card">
          <view class="section-title">金额信息</view>
          <view class="info-row">
            <text class="info-label">商品总额</text>
            <text class="info-value">￥{{ getDecimal(order.total_amount) }}</text>
          </view>
          <view class="info-row" v-if="getDecimal(order.discount_amount) !== '0'">
            <text class="info-label">优惠金额</text>
            <text class="info-value discount">-￥{{ getDecimal(order.discount_amount) }}</text>
          </view>
          <view class="info-row total">
            <text class="info-label">实付金额</text>
            <text class="info-value price">￥{{ getDecimal(order.paid_amount) }}</text>
          </view>
        </view>

        <!-- 退款信息 -->
        <view class="section-card" v-if="order.has_refund && order.refund_info">
          <view class="section-title">退款信息</view>
          <view class="info-row">
            <text class="info-label">退款状态</text>
            <text class="info-value refunded">已退款</text>
          </view>
        </view>
      </view>

      <view v-else class="empty-state">
        <text class="empty-text">订单不存在</text>
      </view>

      <view class="bottom-spacer"></view>
    </scroll-view>

    <!-- 底部操作栏 -->
    <view class="bottom-bar" v-if="order">
      <view
        v-if="order.payment_status === 'PENDING'"
        class="btn-action btn-pay"
        @click="handlePay"
      >
        立即支付
      </view>
      <view
        v-else-if="order.payment_status === 'PAID' && !order.has_refund"
        class="btn-action btn-refund"
        @click="handleRefund"
      >
        申请退款
      </view>
    </view>
  </view>
</template>

<script>
import { get } from '@/utils/request.js';
import { checkLoginWithPrompt } from '@/utils/auth-guard.js';

export default {
  data() {
    return {
      orderId: '',
      order: null,
      loading: false
    };
  },
  computed: {
    statusDotClass() {
      if (!this.order) return '';
      const s = this.order.order_status;
      if (s === 'COMPLETED') return 'dot-success';
      if (s === 'CANCELLED') return 'dot-grey';
      return 'dot-blue';
    }
  },
  onLoad(options) {
    this.orderId = options.order_id || '';
    if (this.orderId) {
      this.fetchOrder();
    }
  },
  methods: {
    async fetchOrder() {
      this.loading = true;
      try {
        const res = await get('/user/orders', {
          page: 1,
          limit: 1,
          filter: JSON.stringify({ order_id: this.orderId })
        });

        const ret = res.data || {};
        if (ret.code === 0 && Array.isArray(ret.data) && ret.data.length > 0) {
          this.order = ret.data[0];
        }
      } catch (e) {
        uni.showToast({ title: '获取订单失败', icon: 'none' });
      } finally {
        this.loading = false;
      }
    },

    getDecimal(val) {
      if (!val) return '0.00';
      if (val.$numberDecimal) return val.$numberDecimal;
      return String(val);
    },

    formatTime(iso) {
      if (!iso) return '';
      const d = new Date(iso);
      const pad = n => String(n).padStart(2, '0');
      return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())} ${pad(d.getHours())}:${pad(d.getMinutes())}`;
    },

    orderStatusText(status) {
      const map = { PROCESSING: '处理中', COMPLETED: '已完成', CANCELLED: '已取消' };
      return map[status] || status;
    },
    payStatusText(status) {
      const map = { PENDING: '待支付', PAID: '已支付', REFUNDED: '已退款', PARTIAL_REFUND: '部分退款' };
      return map[status] || status;
    },
    orderSourceText(source) {
      const map = { SCAN: '扫码开门', APP: 'APP下单' };
      return map[source] || source;
    },

    copyText(text) {
      uni.setClipboardData({
        data: text,
        success: () => uni.showToast({ title: '已复制', icon: 'success' })
      });
    },

    handlePay() {
      uni.showModal({
        title: '立即支付',
        content: `确认支付￥${this.getDecimal(this.order.total_amount)}？`,
        success: (res) => {
          if (res.confirm) {
            uni.showToast({ title: '支付功能开发中', icon: 'none' });
          }
        }
      });
    },
    handleRefund() {
      uni.showModal({
        title: '申请退款',
        content: '确认申请退款？',
        success: (res) => {
          if (res.confirm) {
            uni.showToast({ title: '退款功能开发中', icon: 'none' });
          }
        }
      });
    },

    goBack() {
      uni.navigateBack();
    }
  }
};
</script>

<style scoped>
page {
  height: 100%;
  background-color: #f5f5f5;
}

.detail-page {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: #f5f5f5;
}

/* 导航栏 */
.nav-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24rpx;
  height: 88rpx;
  background: #fff;
  padding-top: constant(safe-area-inset-top);
  padding-top: env(safe-area-inset-top);
}
.nav-back {
  width: 60rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}
.back-arrow {
  font-size: 48rpx;
  color: #333;
  line-height: 1;
}
.nav-title {
  font-size: 34rpx;
  font-weight: bold;
  color: #333;
}
.nav-placeholder {
  width: 60rpx;
}

/* 内容区域 */
.detail-scroll {
  flex: 1;
  height: 0;
}

/* 状态卡片 */
.status-card {
  background: linear-gradient(135deg, #2979ff, #1e60e0);
  padding: 40rpx 32rpx;
  display: flex;
  flex-direction: column;
  gap: 12rpx;
}
.status-icon-row {
  display: flex;
  align-items: center;
  gap: 12rpx;
}
.status-dot {
  width: 16rpx;
  height: 16rpx;
  border-radius: 50%;
}
.dot-blue { background: #fff; }
.dot-success { background: #52c41a; }
.dot-grey { background: #999; }
.status-main {
  font-size: 36rpx;
  font-weight: bold;
  color: #fff;
}
.status-sub {
  font-size: 26rpx;
  color: rgba(255, 255, 255, 0.75);
  padding-left: 28rpx;
}

/* 通用卡片 */
.section-card {
  background: #fff;
  margin: 20rpx;
  border-radius: 16rpx;
  padding: 24rpx 28rpx;
}
.section-title {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 20rpx;
  padding-bottom: 16rpx;
  border-bottom: 1rpx solid #f0f0f0;
}

/* 商品项 */
.product-item {
  display: flex;
  align-items: center;
  padding: 16rpx 0;
}
.product-item + .product-item {
  border-top: 1rpx solid #f5f5f5;
}
.product-img {
  width: 120rpx;
  height: 120rpx;
  border-radius: 10rpx;
  background: #f0f0f0;
  flex-shrink: 0;
}
.product-info {
  flex: 1;
  margin-left: 20rpx;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 120rpx;
}
.product-name {
  font-size: 28rpx;
  color: #333;
  font-weight: 500;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.product-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.product-price {
  font-size: 28rpx;
  color: #333;
  font-weight: bold;
}
.product-qty {
  font-size: 26rpx;
  color: #999;
}

/* 信息行 */
.info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16rpx 0;
}
.info-row + .info-row {
  border-top: 1rpx solid #f5f5f5;
}
.info-row.total {
  border-top: 1rpx solid #f0f0f0;
  margin-top: 8rpx;
  padding-top: 20rpx;
}
.info-label {
  font-size: 26rpx;
  color: #999;
}
.info-value {
  font-size: 26rpx;
  color: #333;
}
.info-value.discount {
  color: #ff6b6b;
}
.info-value.price {
  font-size: 32rpx;
  font-weight: bold;
  color: #e4393c;
}
.info-value.refunded {
  color: #ff6b6b;
}

/* 加载/空状态 */
.loading-state, .empty-state {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 120rpx 0;
}
.loading-text, .empty-text {
  font-size: 28rpx;
  color: #999;
}

/* 底部操作栏 */
.bottom-bar {
  background: #fff;
  padding: 16rpx 30rpx;
  padding-bottom: calc(16rpx + constant(safe-area-inset-bottom));
  padding-bottom: calc(16rpx + env(safe-area-inset-bottom));
  box-shadow: 0 -2rpx 12rpx rgba(0, 0, 0, 0.06);
}
.btn-action {
  width: 100%;
  height: 88rpx;
  border-radius: 44rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30rpx;
  font-weight: bold;
}
.btn-pay {
  background: linear-gradient(135deg, #2979ff, #1e60e0);
  color: #fff;
}
.btn-refund {
  background: #fff;
  border: 2rpx solid #2979ff;
  color: #2979ff;
}

/* 底部占位 */
.bottom-spacer {
  height: 40rpx;
}
</style>
