<view class="page">
  <view class="nav-bar" wx:if="{{mode !== 'list'}}">
    <text class="nav-back" bindtap="goBack">‹ 返回</text>
    <text class="nav-title">{{mode === 'apply' ? '申请售后' : '填写退货物流'}}</text>
  </view>

  <!-- 售后列表 -->
  <block wx:if="{{mode === 'list'}}">
    <view class="refund-list" wx:if="{{refunds.length > 0}}">
      <view class="card" wx:for="{{refunds}}" wx:key="id">
        <view class="card-body">
          <view class="flex-between">
            <text class="refund-no">售后单: {{item.refund_no}}</text>
            <text class="refund-status {{item.status}}">{{item.status_label}}</text>
          </view>
          <view class="flex-between mt-12">
            <text class="text-gray">类型: {{item.type_label}}</text>
            <text class="text-gray">金额: ¥{{item.amount}}</text>
          </view>
          <view class="mt-12" wx:if="{{item.reason}}">
            <text class="text-gray">原因: {{item.reason}}</text>
          </view>
          <view class="mt-12" wx:if="{{item.reject_reason}}">
            <text class="text-danger">驳回原因: {{item.reject_reason}}</text>
          </view>
          <view class="flex-between mt-12">
            <text class="text-gray">{{item.created_at}}</text>
            <view>
              <!-- 已通过待寄回: 填写退货物流 -->
              <button class="btn-primary btn-mini" wx:if="{{item.status === 'approved' && item.type === 'refund_and_return'}}"
                data-id="{{item.id}}" bindtap="onOpenReturn">填写退货物流</button>
              <!-- 待审核: 可取消 -->
              <button class="btn-plain btn-mini" wx:if="{{item.status === 'pending'}}"
                data-id="{{item.id}}" bindtap="onCancelRefund">取消申请</button>
            </view>
          </view>
        </view>
      </view>
    </view>

    <empty-state
      wx:if="{{refunds.length === 0 && !loading}}"
      icon="🔄"
      text="暂无售后记录"
    />
  </block>

  <!-- 申请售后表单 -->
  <view class="card" wx:if="{{mode === 'apply'}}">
    <view class="card-body">
      <view class="text-bold mb-16" style="font-size:30rpx">申请售后 · 订单{{orderNo || ''}}</view>
      <view class="input-item">
        <text class="input-label">售后类型</text>
        <picker mode="selector" range="{{['仅退款', '退货退款']}}" bindchange="onTypeChange">
          <view class="picker-value">{{type === 'only_refund' ? '仅退款' : '退货退款'}}</view>
        </picker>
      </view>
      <view class="input-item">
        <text class="input-label">退款原因</text>
        <picker mode="selector" range="{{reasons}}" value="{{reasonIndex}}" bindchange="onReasonChange">
          <view class="picker-value">{{reason}}</view>
        </picker>
        <input class="input-field mt-8" placeholder="或自定义说明(选填)" value="{{reasonIndex === 0 ? '' : reason}}" bindinput="onReasonInput" />
      </view>
      <view class="input-item">
        <text class="input-label">退款金额</text>
        <text class="price" style="font-size:32rpx">¥{{maxAmount}}</text>
      </view>
      <button class="btn-primary btn-block mt-24" loading="{{submitting}}" bindtap="onSubmitRefund">提交申请</button>
    </view>
  </view>

  <!-- 填写退货物流 -->
  <view class="card" wx:if="{{mode === 'return'}}">
    <view class="card-body">
      <view class="text-bold mb-16" style="font-size:30rpx">填写退货物流</view>
      <view class="input-item">
        <text class="input-label">物流公司</text>
        <picker mode="selector" range="{{shippingCompanies}}" bindchange="onCompanyChange">
          <view class="picker-value">{{shippingCompany}}</view>
        </picker>
      </view>
      <view class="input-item">
        <text class="input-label">物流单号</text>
        <input class="input-field" placeholder="请输入退货快递单号" value="{{shippingNo}}" bindinput="onShippingNoInput" />
      </view>
      <view class="input-item" wx:if="{{curRefund}}">
        <text class="input-label">售后单</text>
        <text class="text-gray">{{curRefund.refund_no}}</text>
      </view>
      <button class="btn-primary btn-block mt-24" loading="{{submitting}}" bindtap="onSubmitReturn">提交退货信息</button>
    </view>
  </view>
</view>
