<template>
  <view class="order-detail-page">
    <!-- 自定义导航栏 -->
    <view class="custom-nav safe-area-top">
      <view class="nav-content">
        <view class="nav-btn" @click="goBack">
          <uni-icons type="left" size="22" color="#1E293B"></uni-icons>
        </view>
        <text class="nav-title">订单详情</text>
        <view class="nav-btn"></view>
      </view>
    </view>

    <scroll-view scroll-y class="page-content" v-if="order">
      <!-- 订单状态 -->
      <view class="status-section" :class="order.status">
        <view class="status-icon">
          <uni-icons :type="statusIcon" size="48" color="#FFFFFF"></uni-icons>
        </view>
        <text class="status-text">{{statusText}}</text>
        <text class="status-desc">{{statusDesc}}</text>
      </view>

      <!-- 订单信息 -->
      <view class="section-card">
        <view class="section-title">订单信息</view>
        <view class="info-list">
          <view class="info-item">
            <text class="info-label">订单编号</text>
            <text class="info-value">{{order.orderNo}}</text>
          </view>
          <view class="info-item">
            <text class="info-label">创建时间</text>
            <text class="info-value">{{formatDateTime(order.createTime)}}</text>
          </view>
          <view class="info-item" v-if="order.payTime">
            <text class="info-label">支付时间</text>
            <text class="info-value">{{formatDateTime(order.payTime)}}</text>
          </view>
          <view class="info-item" v-if="order.cancelTime">
            <text class="info-label">取消时间</text>
            <text class="info-value">{{formatDateTime(order.cancelTime)}}</text>
          </view>
        </view>
      </view>

      <!-- 套餐信息 -->
      <view class="section-card" v-if="order.subscriptionPlan">
        <view class="section-title">套餐信息</view>
        <view class="plan-card">
          <text class="plan-name">{{order.subscriptionPlan.name}}</text>
          <text class="plan-desc">{{order.subscriptionPlan.description}}</text>
          <view class="plan-resources">
            <view class="resource-item">
              <uni-icons type="home-filled" size="16" color="#667eea"></uni-icons>
              <text>{{order.subscriptionPlan.maxApartments}} 栋公寓</text>
            </view>
            <view class="resource-item">
              <uni-icons type="shop-filled" size="16" color="#667eea"></uni-icons>
              <text>{{order.subscriptionPlan.maxRooms}} 个房间</text>
            </view>
            <view class="resource-item">
              <uni-icons type="person-filled" size="16" color="#667eea"></uni-icons>
              <text>{{order.subscriptionPlan.maxUsers}} 个用户</text>
            </view>
          </view>
        </view>
      </view>

      <!-- 费用明细 -->
      <view class="section-card">
        <view class="section-title">费用明细</view>
        <view class="price-list">
          <view class="price-row">
            <text class="row-label">套餐价格</text>
            <text class="row-value">{{orderPriceText}}</text>
          </view>
          <view class="price-row">
            <text class="row-label">购买时长</text>
            <text class="row-value">{{order.months}} 个月</text>
          </view>
          <view class="price-row">
            <text class="row-label">订阅费用</text>
            <text class="row-value">¥{{order.amount}}</text>
          </view>
          <view class="price-row" v-if="order.billingCycle">
            <text class="row-label">计费周期</text>
            <text class="row-value">{{billingCycleText}}</text>
          </view>
          <view class="price-row" v-if="order.discountAmount > 0">
            <text class="row-label">优惠金额</text>
            <text class="row-value discount">-¥{{order.discountAmount}}</text>
          </view>
          <view class="price-row total">
            <text class="row-label">实付金额</text>
            <text class="row-value total-price">¥{{order.actualAmount}}</text>
          </view>
        </view>
      </view>

      <!-- 支付信息 -->
      <view class="section-card" v-if="order.status === 'paid'">
        <view class="section-title">支付信息</view>
        <view class="info-list">
          <view class="info-item">
            <text class="info-label">支付方式</text>
            <text class="info-value">{{getPaymentMethodText(order.paymentMethod)}}</text>
          </view>
          <view class="info-item" v-if="order.transactionId">
            <text class="info-label">交易号</text>
            <text class="info-value">{{order.transactionId}}</text>
          </view>
        </view>
      </view>

      <!-- 有效期 -->
      <view class="section-card" v-if="order.status === 'paid' && order.startDate">
        <view class="section-title">有效期</view>
        <view class="validity-info">
          <view class="validity-item">
            <text class="validity-label">开始时间</text>
            <text class="validity-value">{{formatDate(order.startDate)}}</text>
          </view>
          <view class="validity-arrow">
            <uni-icons type="right" size="20" color="#94A3B8"></uni-icons>
          </view>
          <view class="validity-item">
            <text class="validity-label">结束时间</text>
            <text class="validity-value">{{formatDate(order.endDate)}}</text>
          </view>
        </view>
      </view>

      <view class="safe-area-bottom" style="height: 140rpx;"></view>
    </scroll-view>

    <!-- 底部操作栏 -->
    <view class="bottom-bar safe-area-bottom" v-if="order && order.status === 'pending'">
      <button class="action-btn cancel" @click="cancelOrder">取消订单</button>
      <button class="action-btn pay" @click="showPaymentInfo">付款说明</button>
    </view>
  </view>
</template>

<script>
  import { billingApi } from '@/api/index.js'

  export default {
    data() {
      return {
        orderId: null,
        order: null
      }
    },
    computed: {
      statusIcon() {
        const map = {
          pending: 'info-filled',
          paid: 'checkmarkempty',
          cancelled: 'closeempty'
        }
        return map[this.order?.status] || 'info-filled'
      },
      statusText() {
        const map = {
          pending: '待支付',
          paid: '已支付',
          cancelled: '已取消'
        }
        return map[this.order?.status] || '未知状态'
      },
      statusDesc() {
        const map = {
          pending: '请按平台收款信息付款，管理员确认后套餐生效',
          paid: '订单已支付成功，套餐已生效',
          cancelled: '订单已取消，如有疑问请联系客服'
        }
        return map[this.order?.status] || ''
      },
      orderPriceText() {
        if (!this.order) return '¥0/月'
        if (this.order.billingCycle === 'yearly' && this.order.subscriptionPlan?.yearlyPrice) {
          return `¥${this.order.subscriptionPlan.yearlyPrice}/年`
        }
        return `¥${this.order.unitPrice || this.order.subscriptionPlan?.monthlyPrice || 0}/月`
      },
      billingCycleText() {
        const map = {
          monthly: '月付',
          yearly: '年付',
          custom: '自定义周期'
        }
        return map[this.order?.billingCycle] || this.order?.billingCycle || '-'
      }
    },
    onLoad(options) {
      this.orderId = options.id
      if (this.orderId) {
        this.loadOrderDetail()
      }
    },
    methods: {
      async loadOrderDetail() {
        try {
          uni.showLoading({ title: '加载中...' })
          const res = await billingApi.getOrderDetail(this.orderId)
          uni.hideLoading()
          
          if (res.code === 200) {
            this.order = res.data
          } else {
            uni.showToast({ title: res.message || '加载失败', icon: 'none' })
          }
        } catch (error) {
          uni.hideLoading()
          console.error('加载订单详情失败:', error)
          uni.showToast({ title: '加载失败', icon: 'none' })
        }
      },

      getPaymentMethodText(method) {
        const map = {
          alipay: '支付宝',
          wechat: '微信支付',
          bank: '银行转账'
        }
        return map[method] || method || '-'
      },

      formatDateTime(dateTime) {
        if (!dateTime) return '-'
        const date = new Date(dateTime)
        return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')} ${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}`
      },

      formatDate(date) {
        if (!date) return '-'
        return new Date(date).toLocaleDateString('zh-CN')
      },

      cancelOrder() {
        uni.showModal({
          title: '提示',
          content: '确定要取消该订单吗？',
          success: async (res) => {
            if (res.confirm) {
              try {
                uni.showLoading({ title: '取消中...' })
                const result = await billingApi.cancelOrder(this.orderId)
                uni.hideLoading()
                
                if (result.code === 200) {
                  uni.showToast({ title: '已取消', icon: 'success' })
                  this.loadOrderDetail()
                } else {
                  uni.showToast({ title: result.message || '取消失败', icon: 'none' })
                }
              } catch (error) {
                uni.hideLoading()
                console.error('取消订单失败:', error)
                uni.showToast({ title: '取消失败', icon: 'none' })
              }
            }
          }
        })
      },

      showPaymentInfo() {
        uni.showModal({
          title: '付款说明',
          content: `订单 #${this.order.orderNo}\n应付金额：¥${this.order.actualAmount}\n请按平台收款信息完成转账，管理员确认后套餐自动生效。`,
          showCancel: false,
          confirmText: '我知道了'
        })
      },

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

<style scoped>
  .order-detail-page {
    min-height: 100vh;
    background: #F8FAFC;
    display: flex;
    flex-direction: column;
  }

  /* 导航栏 */
  .custom-nav {
    background: #FFFFFF;
    border-bottom: 2rpx solid #F1F5F9;
  }

  .nav-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20rpx 32rpx;
  }

  .nav-btn {
    width: 72rpx;
    height: 72rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
  }

  .nav-title {
    font-size: 34rpx;
    font-weight: 600;
    color: #1E293B;
  }

  /* 页面内容 */
  .page-content {
    flex: 1;
    padding: 24rpx 32rpx;
  }

  /* 状态区域 */
  .status-section {
    background: #FFFFFF;
    border-radius: 24rpx;
    padding: 48rpx;
    margin-bottom: 24rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .status-section.pending {
    background: linear-gradient(135deg, #FEF3C7 0%, #FDE68A 100%);
  }

  .status-section.paid {
    background: linear-gradient(135deg, #D1FAE5 0%, #A7F3D0 100%);
  }

  .status-section.cancelled {
    background: linear-gradient(135deg, #F3F4F6 0%, #E5E7EB 100%);
  }

  .status-icon {
    width: 100rpx;
    height: 100rpx;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24rpx;
  }

  .status-section.pending .status-icon {
    background: #F59E0B;
  }

  .status-section.paid .status-icon {
    background: #10B981;
  }

  .status-section.cancelled .status-icon {
    background: #9CA3AF;
  }

  .status-text {
    font-size: 36rpx;
    font-weight: 700;
    color: #1E293B;
    margin-bottom: 12rpx;
  }

  .status-desc {
    font-size: 26rpx;
    color: #64748B;
  }

  /* 区块卡片 */
  .section-card {
    background: #FFFFFF;
    border-radius: 24rpx;
    padding: 28rpx;
    margin-bottom: 24rpx;
    box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
  }

  .section-title {
    font-size: 30rpx;
    font-weight: 700;
    color: #1E293B;
    margin-bottom: 24rpx;
  }

  /* 信息列表 */
  .info-list {
    display: flex;
    flex-direction: column;
    gap: 20rpx;
  }

  .info-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .info-label {
    font-size: 28rpx;
    color: #64748B;
  }

  .info-value {
    font-size: 28rpx;
    color: #1E293B;
    font-weight: 500;
  }

  /* 套餐卡片 */
  .plan-card {
    background: #F8FAFC;
    border-radius: 16rpx;
    padding: 28rpx;
  }

  .plan-name {
    display: block;
    font-size: 32rpx;
    font-weight: 700;
    color: #1E293B;
    margin-bottom: 12rpx;
  }

  .plan-desc {
    display: block;
    font-size: 26rpx;
    color: #64748B;
    margin-bottom: 20rpx;
  }

  .plan-resources {
    display: flex;
    gap: 24rpx;
    flex-wrap: wrap;
  }

  .resource-item {
    display: flex;
    align-items: center;
    gap: 8rpx;
    font-size: 26rpx;
    color: #64748B;
  }

  /* 费用明细 */
  .price-list {
    display: flex;
    flex-direction: column;
    gap: 20rpx;
  }

  .price-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .price-row.total {
    margin-top: 20rpx;
    padding-top: 20rpx;
    border-top: 2rpx solid #F1F5F9;
  }

  .row-label {
    font-size: 28rpx;
    color: #64748B;
  }

  .row-value {
    font-size: 28rpx;
    color: #1E293B;
    font-weight: 500;
  }

  .row-value.discount {
    color: #67C23A;
  }

  .row-value.total-price {
    font-size: 40rpx;
    color: #F56C6C;
    font-weight: 700;
  }

  /* 有效期 */
  .validity-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16rpx;
  }

  .validity-item {
    flex: 1;
    background: #F8FAFC;
    border-radius: 16rpx;
    padding: 24rpx;
    text-align: center;
  }

  .validity-label {
    display: block;
    font-size: 24rpx;
    color: #64748B;
    margin-bottom: 8rpx;
  }

  .validity-value {
    display: block;
    font-size: 28rpx;
    color: #1E293B;
    font-weight: 600;
  }

  .validity-arrow {
    flex-shrink: 0;
  }

  /* 底部操作栏 */
  .bottom-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #FFFFFF;
    border-top: 2rpx solid #F1F5F9;
    padding: 24rpx 32rpx;
    display: flex;
    gap: 24rpx;
  }

  .action-btn {
    flex: 1;
    padding: 28rpx;
    border-radius: 16rpx;
    font-size: 30rpx;
    font-weight: 600;
    border: none;
  }

  .action-btn.cancel {
    background: #F3F4F6;
    color: #64748B;
  }

  .action-btn.pay {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #FFFFFF;
  }
</style>
