<template>
  <view class="page">
    <NavBar title="退款详情" :showBack="true" />
    <scroll-view class="detail-scroll" scroll-y v-if="detail">
      <view class="section">
        <text class="section-title">退款信息</text>
        <view class="info-row"><text class="info-label">订单编号</text><text class="info-value">{{ detail.orderNo }}</text></view>
        <view class="info-row"><text class="info-label">退款金额</text><text class="info-value amount">{{ formatMoney(detail.refundAmount) }}</text></view>
        <view class="info-row"><text class="info-label">申请时间</text><text class="info-value">{{ detail.createTime }}</text></view>
        <view class="info-row"><text class="info-label">状态</text><view class="card-status" :class="statusClass(detail.status)"><text>{{ RefundStatusText[detail.status] }}</text></view></view>
      </view>
      <view class="section" v-if="orderVideoUrl">
        <text class="section-title">订单视频</text>
        <video
          :src="orderVideoUrl"
          controls
          enable-play-gesture
          object-fit="contain"
          style="width:100%;height:400rpx;border-radius:12rpx;background:#000;"
        />
      </view>
    </scroll-view>
    <view class="bottom-actions" v-if="detail && detail.status === 0">
      <view class="action-row">
        <view class="action-btn approve" @click="handleReview(true)"><text>通过</text></view>
        <view class="action-btn reject" @click="handleReview(false)"><text>驳回</text></view>
      </view>
      <input class="remark-input" v-model="remark" placeholder="输入审核备注(可选)" />
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app';
import NavBar from '@/components/NavBar.vue';
import { getRefundDetail, reviewRefund } from '@/api/refund';
import { getOrderMedia } from '@/api/order';
import { RefundStatusText } from '@/utils/constants';
import { formatMoney, showToast, showConfirm } from '@/utils/common';
const detail = ref<any>(null); const remark = ref(''); const orderVideoUrl = ref('');
onLoad((options?: Record<string, string>) => { const id = options?.id ? Number(options.id) : 0; if (id) loadDetail(id); });
const loadDetail = async (id: number) => {
  try {
    detail.value = await getRefundDetail(id);
    if (detail.value?.activityId) {
      try {
        const media = await getOrderMedia(detail.value.activityId);
        if (media?.video_url) orderVideoUrl.value = media.video_url;
        else if (media?.main_video?.length) orderVideoUrl.value = media.main_video[0];
      } catch { /* 媒体获取失败不影响详情展示 */ }
    }
  } catch { showToast('加载失败'); uni.navigateBack(); }
};
const statusClass = (status: number) => status === 0 ? 'pending' : status === 1 ? 'approved' : 'rejected';
const handleReview = async (approved: boolean) => {
  if (!(await showConfirm(approved ? '确认通过？' : '确认驳回？'))) return;
  try { await reviewRefund(detail.value.id, { approved, remark: remark.value }); showToast(approved ? '已通过' : '已驳回', 'success'); setTimeout(() => uni.navigateBack(), 1500); } catch { showToast('操作失败'); }
};
</script>

<style lang="scss" scoped>
.page { height: 100vh; background: $bg-color-page; display: flex; flex-direction: column; padding-bottom: env(safe-area-inset-bottom); }
.detail-scroll { flex: 1; height: 0; }
.section { background: $bg-color-card; margin-bottom: $spacing-2; padding: $spacing-3 $spacing-4; }
.section-title { display: block; font-size: 28rpx; font-weight: 600; color: $text-color-primary; margin-bottom: $spacing-3; padding-bottom: $spacing-2; border-bottom: 1rpx solid $border-color-light; }
.info-row { display: flex; align-items: center; justify-content: space-between; padding: $spacing-2 0; border-bottom: 1rpx solid $border-color-light; }
.info-label { font-size: 28rpx; color: $text-color-secondary; flex-shrink: 0; }
.info-value { font-size: 28rpx; color: $text-color-primary; text-align: right; }
.info-value.amount { font-weight: 700; color: $primary-color-dark; font-size: 32rpx; }
.card-status { padding: 4rpx 16rpx; border-radius: 8rpx; font-size: 22rpx; font-weight: 500; }
.card-status.pending { background: $warning-color-bg; color: $warning-color; }
.card-status.approved { background: $success-color-bg; color: $success-color; }
.card-status.rejected { background: $error-color-bg; color: $error-color; }
.bottom-actions { padding: $spacing-3 $spacing-4; padding-bottom: calc(24rpx + env(safe-area-inset-bottom)); background: $bg-color-card; border-top: 1rpx solid $border-color-light; flex-shrink: 0; }
.action-row { display: flex; gap: $spacing-2; margin-bottom: $spacing-3; }
.action-btn { flex: 1; padding: 24rpx 0; border-radius: $radius-base; display: flex; align-items: center; justify-content: center; }
.action-btn.approve { background: $success-color-bg; } .action-btn.approve text { color: $success-color; }
.action-btn.reject { background: $error-color-bg; } .action-btn.reject text { color: $error-color; }
.remark-input { width: 100%; height: 80rpx; background: $bg-color-page; border-radius: $radius-base; padding: 0 20rpx; font-size: 28rpx; box-sizing: border-box; }
</style>

