<template>
  <view class="success-container">
    <!-- 成功图标（渐变圆形+动效） -->
    <view class="success-icon">
      <view class="icon-circle">
        <text class="check-icon">✓</text>
      </view>
    </view>
    
    <!-- 支付成功标题（动画） -->
    <view class="success-title">支付成功</view>
    <view class="success-subtitle">支付成功，请等待审核</view>
    
    <!-- 订单信息卡片（带阴影） -->
    <view class="info-card">
      <view class="info-item">
        <text class="label">交易流水号</text>
        <text class="value">{{ orderInfo.tradeNo || '--' }}</text>
      </view>
      <view class="info-item">
        <text class="label">商户名称</text>
        <text class="value">{{ orderInfo.merchantName || '中国跆拳道协会' }}</text>
      </view>
      <view class="info-item">
        <text class="label">订单金额</text>
        <text class="value amount">{{ orderInfo.price ? orderInfo.price + '元' : '--' }}</text>
      </view>
    </view>
    
    <!-- 确定按钮（渐变+动效） -->
    <view class="confirm-btn-area">
      <button class="confirm-btn" @click="goBack">确定</button>
    </view>
  </view>
</template>

<script setup>
import {
  ref
} from 'vue'
import {
  onLoad
} from '@dcloudio/uni-app'
import to from 'await-to-js'
import * as api from '@/common/api.js'

const orderInfo = ref({
  id: '',
  tradeNo: '',
  merchantName: '中国跆拳道协会',
  price: ''
})

const goBack = () => {
  uni.redirectTo({
    // url: '/login/login'
    url: '/personal/order'
  })
}

onLoad(async (option) => {
  if (option.orderId) {
    const [err, res] = await to(api.getOrderInfo(option.orderId))
    if (!err && res.data) {
      orderInfo.value = res.data
    } else {
      orderInfo.value.id = option.orderId
    }
  }
})
</script>

<style scoped>
/* 全局容器 */
.success-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 100rpx 40rpx 60rpx;
  min-height: 100vh;
  background-color: #f8f9fa;
  box-sizing: border-box;
}

/* 成功图标容器 */
.success-icon {
  margin-bottom: 40rpx;
  animation: fadeIn 0.6s ease-out;
}

/* 渐变圆形背景 */
.icon-circle {
  width: 180rpx;
  height: 180rpx;
  border-radius: 50%;
  /* 青绿色渐变 */
  background: linear-gradient(135deg, #06c1ae, #04a896);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8rpx 30rpx rgba(6, 193, 174, 0.3);
  /* 轻微上浮动效 */
  animation: scaleIn 0.8s ease-out;
}

/* 对勾图标 */
.check-icon {
  font-size: 90rpx;
  color: #ffffff;
  font-weight: bold;
}

/* 支付成功标题 */
.success-title {
  font-size: 48rpx;
  font-weight: 700;
  color: #333333;
  margin-bottom: 12rpx;
  animation: slideUp 0.6s ease-out;
}

/* 副标题 */
.success-subtitle {
  font-size: 28rpx;
  color: #666666;
  margin-bottom: 60rpx;
  animation: slideUp 0.8s ease-out;
}

/* 订单信息卡片 */
.info-card {
  width: 100%;
  background: #ffffff;
  border-radius: 20rpx;
  padding: 40rpx 30rpx;
  box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.05);
  margin-bottom: 80rpx;
  animation: fadeIn 1s ease-out;
}

/* 单个信息项 */
.info-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24rpx 0;
  border-bottom: 1rpx solid #f5f5f5;
}

/* 最后一项去掉下划线 */
.info-item:last-child {
  border-bottom: none;
}

/* 标签样式 */
.label {
  font-size: 32rpx;
  color: #666666;
  white-space: nowrap;
  margin-right: 20rpx;
  flex-shrink: 0;
}

/* 值样式 */
.value {
  font-size: 32rpx;
  color: #333333;
  text-align: right;
  word-break: break-all;
  word-wrap: break-word;
}

/* 金额特殊样式 */
.amount {
  color: #cd1e27;
  font-weight: 600;
}

/* 确定按钮区域 */
.confirm-btn-area {
  width: 100%;
  padding: 0 20rpx;
  box-sizing: border-box;
}

/* 确定按钮（渐变+动效） */
.confirm-btn {
  width: 100%;
  height: 90rpx;
  line-height: 90rpx;
  /* 按钮渐变背景 */
  background: #fff;
  color: #C4121B;
  font-size: 36rpx;
  font-weight: 600;
  border-radius: 45rpx;
  border: 1px solid #C4121B;
  animation: slideUp 1s ease-out;
  /* 禁止默认样式 */
  position: relative;
  overflow: hidden;
}

/* 按钮点击反馈 */
.confirm-btn::after {
  border: none;
}

.confirm-btn:active {
  transform: scale(0.98);
  box-shadow: 0 4rpx 10rpx rgba(6, 193, 174, 0.2);
}

/* 动画定义 */
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  
  100% {
    opacity: 1;
  }
}

@keyframes scaleIn {
  0% {
    transform: scale(0);
  }
  
  70% {
    transform: scale(1.1);
  }
  
  100% {
    transform: scale(1);
  }
}

@keyframes slideUp {
  0% {
    opacity: 0;
    transform: translateY(30rpx);
  }
  
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
</style>