<!-- 订单详情页 -->
<view class="page-container">
  <!-- 自定义导航栏 -->
  <view class="custom-nav">
    <view class="status-bar" style="height: {{statusBarHeight}}px;"></view>
    <view class="nav-bar">
      <view class="nav-left" bindtap="goBack">
        <image src="/images/icon-chevron-left.png" class="nav-back-icon" mode="aspectFit"></image>
      </view>
      <view class="nav-title">订单详情</view>
      <view class="nav-right"></view>
    </view>
  </view>

  <!-- 内容区域 -->
  <scroll-view scroll-y class="content" enhanced show-scrollbar="{{false}}" style="padding-top: {{totalNavHeight}}px;">
    <!-- 订单状态卡片 -->
    <view class="status-card">
      <view class="status-icon-wrap {{order.iconBg}}">
        <image src="{{order.icon}}" class="status-icon" mode="aspectFit"></image>
      </view>
      <text class="status-title">{{order.status}}</text>
      <text class="status-desc">{{order.statusDesc}}</text>
    </view>

    <!-- 订单信息卡片 -->
    <view class="info-card">
      <view class="card-title">订单信息</view>
      
      <view class="info-row">
        <text class="info-label">订单类型</text>
        <text class="info-value">{{order.typeName}}</text>
      </view>
      
      <view class="info-row">
        <text class="info-label">商品名称</text>
        <text class="info-value">{{order.productName}}</text>
      </view>
      
      <view class="info-row">
        <text class="info-label">订单金额</text>
        <view class="info-price">
          <text class="price-symbol">{{order.priceSymbol}}</text>
          <text class="price-value">{{order.price}}</text>
        </view>
      </view>
      
      <view class="info-row">
        <text class="info-label">支付方式</text>
        <text class="info-value">{{order.payMethod}}</text>
      </view>
    </view>

    <!-- 订单编号卡片 -->
    <view class="info-card">
      <view class="card-title">订单编号</view>
      
      <view class="info-row">
        <text class="info-label">订单号</text>
        <view class="info-copy">
          <text class="info-value">{{order.orderNo}}</text>
          <text class="copy-btn" bindtap="onCopyOrderNo">复制</text>
        </view>
      </view>
      
      <view class="info-row">
        <text class="info-label">创建时间</text>
        <text class="info-value">{{order.createTime}}</text>
      </view>
      
      <view class="info-row">
        <text class="info-label">支付时间</text>
        <text class="info-value">{{order.payTime}}</text>
      </view>
    </view>

    <!-- 底部按钮 -->
    <view class="bottom-actions">
      <view class="action-btn outline" bindtap="onContactService">联系客服</view>
      <view class="action-btn primary" wx:if="{{order.canReview}}" bindtap="onReview">评价订单</view>
      <view class="action-btn primary" wx:elif="{{order.canRefund}}" bindtap="onRefund">申请退款</view>
    </view>
  </scroll-view>
</view>

<!-- 评价弹窗 -->
<view class="review-modal-mask" wx:if="{{showReviewModal}}" bindtap="closeReviewModal"></view>
<view class="review-modal {{showReviewModal ? 'show' : ''}}" wx:if="{{showReviewModal}}">
  <!-- 弹窗头部 -->
  <view class="review-modal-header">
    <text class="review-modal-title">评价订单</text>
    <view class="review-modal-close" bindtap="closeReviewModal">
      <text class="close-icon">×</text>
    </view>
  </view>
  
  <!-- 弹窗内容 -->
  <scroll-view scroll-y class="review-modal-content">
    <!-- 评分选择 -->
    <view class="review-section">
      <text class="section-title">服务评分</text>
      <view class="rating-stars">
        <view class="star-item {{reviewRating >= 1 ? 'active' : ''}}" bindtap="selectRating" data-rating="1">⭐</view>
        <view class="star-item {{reviewRating >= 2 ? 'active' : ''}}" bindtap="selectRating" data-rating="2">⭐</view>
        <view class="star-item {{reviewRating >= 3 ? 'active' : ''}}" bindtap="selectRating" data-rating="3">⭐</view>
        <view class="star-item {{reviewRating >= 4 ? 'active' : ''}}" bindtap="selectRating" data-rating="4">⭐</view>
        <view class="star-item {{reviewRating >= 5 ? 'active' : ''}}" bindtap="selectRating" data-rating="5">⭐</view>
      </view>
      <text class="rating-text">{{reviewRating}}分 - {{reviewRating >= 4 ? '非常满意' : (reviewRating >= 3 ? '一般' : '不满意')}}</text>
    </view>
    
    <!-- 标签选择 -->
    <view class="review-section">
      <text class="section-title">选择标签（最多5个）</text>
      <view class="tag-list">
        <view class="tag-item {{selectedTags.indexOf(item) > -1 ? 'active' : ''}}" 
              wx:for="{{reviewTags}}" wx:key="*this"
              bindtap="toggleTag" data-tag="{{item}}">
          {{item}}
        </view>
      </view>
    </view>
    
    <!-- 评价内容 -->
    <view class="review-section">
      <text class="section-title">评价内容</text>
      <textarea class="review-textarea" 
                placeholder="请输入您的评价内容（选填）" 
                value="{{reviewContent}}"
                bindinput="onReviewInput"
                maxlength="500"></textarea>
      <text class="char-count">{{reviewContent.length}}/500</text>
    </view>
    
    <!-- 匿名选项 -->
    <view class="anonymous-section" bindtap="toggleAnonymous">
      <view class="checkbox {{isAnonymous ? 'checked' : ''}}">
        <text wx:if="{{isAnonymous}}">✓</text>
      </view>
      <text class="anonymous-text">匿名评价</text>
    </view>
  </scroll-view>
  
  <!-- 提交按钮 -->
  <view class="review-modal-footer">
    <button class="submit-btn {{submittingReview ? 'disabled' : ''}}" 
            bindtap="submitReview" 
            disabled="{{submittingReview}}">
      {{submittingReview ? '提交中...' : '提交评价'}}
    </button>
  </view>
</view>
