<template>
  <view class="pay-order-container">
    <!-- 页面头部 -->
    <view class="page-header">
      <text class="title">确认并支付</text>
    </view>
    
    <!-- 订单核心信息 -->
    <view class="order-info">
      <view class="info-item">
        <text class="label">人数合计：</text>
        <text class="value red">{{ formData.all ?? 0 }}人</text>
      </view>
      <view class="info-item">
        <text class="label">新会员合计：</text>
        <text class="value red">{{ formData.new ?? 0 }}人</text>
      </view>
      <view class="info-item">
        <text class="label">续费会员合计：</text>
        <text class="value red">{{ formData.old ?? 0 }}人</text>
      </view>
      <view class="info-item total-price">
        <text class="label">支付总费用：</text>
        <text class="value red">{{ formData.price ?? 0 }}元</text>
      </view>
    </view>
    
    <!-- 支付方式选择 -->
    <view class="pay-type-section">
      <view class="section-title">选择支付方式</view>
      <view class="payment-methods">
        <radio-group @change="handlePayTypeChange">
          <label class="payment-item" :class="{ selected: payType === '1' }">
            <radio :checked="payType === '1'" value="0" />
            <image :src="config.baseUrl_api + '/fs/static/min.png'" class="icon ml10" mode="widthFix"></image>
            <text class="pay-name ml10">民生付</text>
          </label>
          <label class="payment-item" :class="{ selected: payType === '3' }">
            <radio :checked="payType === '3'" value="1" />
            <image :src="config.baseUrl_api + '/fs/static/min.png'" class="icon ml10" mode="widthFix"></image>
            <text class="pay-name ml10">对公转账</text>
          </label>
        </radio-group>
      </view>
    </view>

    <!-- 对公转账表单 -->
    <view v-if="payType === '3'" class="transfer-form">
      <view class="form-item">
        <text class="form-label">联系人</text>
        <input class="form-input" v-model="form.contactPerson" placeholder="请输入联系人" />
      </view>
      <view class="form-item">
        <text class="form-label">联系电话</text>
        <input class="form-input" v-model="form.contactTel" type="number" placeholder="请输入联系电话" />
      </view>
    </view>

    <!-- 底部支付按钮 -->
    <view class="fixed-bottom">
      <button :loading="payLoading" class="pay-btn red-bg" @click="handlePay">立即支付</button>
    </view>
  </view>
</template>

<script setup>
import {
  ref
} from 'vue'
import {
  onLoad
} from '@dcloudio/uni-app';
import * as api from '@/common/api.js'
import config from '@/config.js'
import {minShengPay} from "@/common/pay";

// 核心数据
const formData = ref({}) // 订单统计数据
const rangeId = ref('') // 核心业务ID
const payType = ref('1') // 支付方式（默认0=民生付）
const payLoading = ref(false) // 支付按钮加载状态
const form = ref({
  contactPerson: '',
  contactTel: ''
})

// 页面加载接收参数
onLoad(async (options) => {
  console.log('订单ID：', options.rangeId)
  if (options.rangeId) {
    rangeId.value = options.rangeId
    await getCount()
  }
})

async function getCount() {
  try {
    const res = await api.getNewCountByRangeId(rangeId.value)
    formData.value = res.data || {
      all: 0,
      new: 0,
      old: 0
    }
  } catch (e) {
    formData.value = {
      all: 0,
      new: 0,
      old: 0
    }
  }
}

// 支付方式切换
function handlePayTypeChange(e) {
  payType.value = e.detail.value == '0' ? '1' : '3'
  console.log('支付方式：', payType.value)
  if (payType.value === '3') {
    form.value.contactPerson = ''
    form.value.contactTel = ''
  }
}

// 立即支付核心逻辑
async function handlePay() {
  // 基础校验
  if (!rangeId.value || rangeId.value === '-1') {
    return uni.showToast({
      title: '订单ID异常',
      icon: 'none'
    })
  }

  // 对公转账校验
  if (payType.value === '3') {
    if (!form.value.contactPerson) {
      return uni.showToast({ title: '请输入联系人', icon: 'none' })
    }
    if (!form.value.contactTel) {
      return uni.showToast({ title: '请输入联系电话', icon: 'none' })
    }
    // 手机号格式校验
    if (!/^1[3-9]\d{9}$/.test(form.value.contactTel)) {
      return uni.showToast({ title: '请输入正确的手机号', icon: 'none' })
    }
  }

  try {
    payLoading.value = true
    uni.showLoading({
      title: '提交中...',
      mask: true
    })

    // 构建请求参数
    const params = {
      id: rangeId.value,
      payType: payType.value
    }
    if (payType.value === '3') {
      params.contactPerson = form.value.contactPerson
      params.contactTel = form.value.contactTel
    }

    const res = await api.goPay(params)
    const resData = res.data

    // 对公转账 - 跳转转账信息页面
    if (resData.payFlag == 2) {
      uni.hideLoading()
      uni.redirectTo({
        url: `/myCenter/transferPay?orderId=${resData.orderId}`
      })
      return
    }

    // 民生付
    if (resData.payResult && resData.payResult.encryptedData) {
      const reason = await minShengPay(resData.orderId, resData.payResult.encryptedData)
      if (reason == 'OK') {
        uni.showToast({ title: '支付成功', icon: 'success' })
        setTimeout(() => {
          uni.hideLoading()
          uni.redirectTo({
            url: `/personalVip/payment`
          })
        }, 1500)
      }
    }

  } catch (err) {
    console.log(err)
    const errMsg = err?.data?.msg || err?.message || '支付失败，请稍后重试'
    uni.showToast({
      title: errMsg,
      icon: 'none'
    })
  } finally {
    uni.hideLoading()
    payLoading.value = false
  }
}
</script>

<style lang="scss" scoped>
.pay-order-container {
  padding: 30rpx;
  background-color: #fff;
  min-height: 100vh;
  box-sizing: border-box;
}

.icon {
  width: 30px;
}

// 页面头部
.page-header {
  text-align: center;
  padding: 20rpx 0;
  border-bottom: 1px solid #eee;
  margin-bottom: 40rpx;
  
  .title {
    font-size: 36rpx;
    font-weight: 600;
    color: #333;
  }
}

// 订单信息区域
.order-info {
  margin-bottom: 60rpx;
  
  .info-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 25rpx 0;
    border-bottom: 1px solid #f5f5f5;
    font-size: 32rpx;
    
    .label {
      color: #666;
    }
    
    .value {
      font-weight: 600;
      font-size: 34rpx;
    }
    
    .red {
      color: #E60012;
    }
  }
  
  .total-price {
    border-bottom: none;
    margin-top: 10rpx;
    
    .label {
      font-size: 34rpx;
      color: #333;
    }
    
    .value {
      font-size: 38rpx;
    }
  }
}

// 支付方式区域
.pay-type-section {
  margin-bottom: 30rpx;

  .section-title {
    font-size: 32rpx;
    font-weight: 600;
    color: #333;
    margin-bottom: 20rpx;
    position: relative;
    padding-left: 20rpx;

    &::before {
      content: '';
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      width: 6rpx;
      height: 28rpx;
      background: linear-gradient(180deg, #FF755A, #F51722);
      border-radius: 3rpx;
    }
  }
}

.payment-methods {
  background: #f8f9fa;
  border-radius: 12rpx;
  padding: 20rpx;

  .payment-item {
    display: flex;
    align-items: center;
    padding: 16rpx;
    border-radius: 12rpx;
    border: 2rpx solid transparent;

    &.selected {
      border-color: #e4393c;
      background: #fff;
    }

    // 覆盖原生 radio 样式
    ::v-deep radio .wx-radio-input,
    ::v-deep radio .uni-radio-input {
      width: 36rpx;
      height: 36rpx;
      border-color: #ccc !important;
    }

    ::v-deep radio .wx-radio-input.wx-radio-input-checked,
    ::v-deep radio .uni-radio-input-checked {
      border-color: #e4393c !important;
      background: #e4393c !important;
    }

    .icon {
      width: 40rpx;
      height: 40rpx;
    }

    .pay-name {
      font-size: 30rpx;
      color: #333;
      font-weight: 500;
    }

    .ml10 {
      margin-left: 10rpx;
    }
  }
}

// 对公转账表单
.transfer-form {
  background: #f8f9fa;
  border-radius: 12rpx;
  padding: 20rpx;
  margin-bottom: 30rpx;

  .form-item {
    display: flex;
    align-items: center;
    padding: 20rpx 0;
    border-bottom: 1rpx solid #eee;

    &:last-child {
      border-bottom: none;
    }
  }

  .form-label {
    font-size: 28rpx;
    color: #333;
    width: 140rpx;
    flex-shrink: 0;
  }

  .form-input {
    flex: 1;
    font-size: 28rpx;
    color: #333;
    text-align: right;
  }
}

// 底部支付按钮
.fixed-bottom {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20rpx 30rpx 30rpx;
  background-color: #fff;
  border-top: 1px solid #eee;
  
  .pay-btn {
    width: 100%;
    height: 88rpx;
    line-height: 88rpx;
    border-radius: 44rpx;
    font-size: 34rpx;
    font-weight: 600;
  }
  
  .red-bg {
    background-color: #E60012;
    color: #fff;
  }
}
</style>