<template>
  <view class="container">
    <!-- 退款商品 -->
    <view class="section-item product-selector">
      <text class="section-label">退款商品</text>
      <text class="arrow-right">></text>
    </view>
    
    <!-- 退款原因 -->
    <view class="section-block reason-section">
      <text class="section-title">退款原因</text>
      <radio-group @change="handleReasonChange">
        <label class="radio-item" v-for="(reason, index) in refundReasons" :key="index">
          <view class="radio-wrapper">
            <radio :value="reason.value" :checked="selectedReason === reason.value" color="#999999" />
          </view>
          <text class="radio-label">{{ reason.label }}</text>
        </label>
      </radio-group>
    </view>
    
    <!-- 退款信息 -->
    <view class="section-block info-section">
      <text class="section-title">退款信息</text>
      <view class="info-row">
        <text class="info-label">订单编号：</text>
        <text class="info-value">2601081537467989</text>
      </view>
      <view class="info-row">
        <text class="info-label">订单总金额：</text>
        <text class="info-value">0.44</text>
      </view>
      <view class="info-row">
        <text class="info-label">退款数量：</text>
        <text class="info-value">1</text>
      </view>
      <view class="info-row">
        <text class="info-label">退款总金额：</text>
        <text class="info-value">0.44</text>
      </view>
    </view>
    
    <!-- 确认提交按钮 -->
    <button class="submit-btn" @click="submitRefund">确认提交</button>
  </view>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { checkAuth } from '../../utils/auth';

const selectedReason = ref('');

const refundReasons = [
  { label: '订单扣款错误', value: '1' },
  { label: '扣款金额与实际金额不符', value: '2' },
  { label: '商品过期或变质', value: '3' },
  { label: '其他（请填写投诉内容）', value: '4' }
];

const handleReasonChange = (e: any) => {
  selectedReason.value = e.detail.value;
};

/**
 * 页面加载时检查登录状态
 */
onMounted(() => {
  // 检查登录状态，未登录会自动跳转到登录页
  checkAuth();
});

const submitRefund = () => {
  if (!selectedReason.value) {
    uni.showToast({
      title: '请选择退款原因',
      icon: 'none'
    });
    return;
  }
  
  uni.showToast({
    title: '退款申请提交成功',
    icon: 'success'
  });
  
  setTimeout(() => {
    uni.navigateBack();
  }, 1500);
};
</script>

<style>
.container {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding-top: 20rpx;
}

/* 退款商品选择器 */
.section-item {
  background-color: #ffffff;
  padding: 28rpx 30rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20rpx;
}

.section-label {
  font-size: 30rpx;
  color: #333333;
}

.arrow-right {
  font-size: 32rpx;
  color: #cccccc;
}

/* 区域块 */
.section-block {
  background-color: #ffffff;
  padding: 30rpx;
  margin-bottom: 20rpx;
}

.section-title {
  font-size: 30rpx;
  color: #333333;
  font-weight: 500;
  margin-bottom: 30rpx;
  display: block;
}

/* 选项列表 */
radio-group {
  display: block;
}

.radio-item {
  display: flex;
  align-items: center;
  margin-bottom: 32rpx;
}

.radio-item:last-child {
  margin-bottom: 0;
}

.radio-wrapper {
  margin-right: 16rpx;
  display: flex;
  align-items: center;
}

.radio-wrapper radio {
  transform: scale(1.1);
}

.radio-label {
  font-size: 28rpx;
  color: #333333;
  line-height: 1.5;
}

/* 信息区域 */
.info-section {
  padding-bottom: 20rpx;
}

.info-row {
  display: flex;
  align-items: center;
  padding: 18rpx 0;
}

.info-label {
  font-size: 28rpx;
  color: #999999;
  min-width: 200rpx;
}

.info-value {
  font-size: 28rpx;
  color: #333333;
  flex: 1;
  text-align: right;
}

/* 提交按钮 */
.submit-btn {
  margin: 40rpx 30rpx;
  background-color: #f8f8f8;
  border: 1rpx solid #e8e8e8;
  border-radius: 10rpx;
  font-size: 32rpx;
  color: #333333;
  padding: 24rpx 0;
  line-height: 1;
  font-weight: 500;
}

.submit-btn::after {
  border: none;
}
</style>