<template>
  <view class="pay-order-container">

    <!-- 订单核心信息 -->
    <view class="order-info">
      <view class="info-item">
        <text class="label">缴费单位：</text>
        <text class="value normal">{{ displayPayName }}</text>
      </view>
      <view class="info-item">
        <text class="label">所属协会：</text>
        <text class="value normal">{{ displayAssoName }}</text>
      </view>
      <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="{ selected: payType === '0' }" class="payment-item">
            <radio :checked="payType =='0'" 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="{ selected: payType === '3' }" class="payment-item">
            <radio :checked="payType === '3'" value="3"/>
            <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 v-model="form.contactPerson" class="form-input" placeholder="请输入联系人"/>
      </view>
      <view class="form-item">
        <text class="form-label">联系电话</text>
        <input v-model="form.contactTel" class="form-input" placeholder="请输入联系电话" type="number"/>
      </view>
    </view>
    
    <!-- 底部支付按钮 -->
    <view class="fixed-bottom">
      <button :loading="payLoading" class="pay-btn red-bg" @click="handlePay">立即支付</button>
    </view>
  </view>
</template>

<script setup>
import {
  computed,
  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 orderId = ref('') // common/order 订单ID，用于订单列表再次支付
const payName = ref('')
const assoName = ref('')
const payType = ref('0') // 支付方式（默认0=民生付）
const payLoading = ref(false) // 支付按钮加载状态
const form = ref({
  contactPerson: '',
  contactTel: ''
})
const app = getApp()
const memberInfo = app.globalData?.memberInfo || {}
const deptInfo = app.globalData?.dept || app.globalData?.userInfo?.dept || {}

const pickFirst = (...values) => {
  const value = values.find(item => item !== undefined && item !== null && String(item).trim() !== '')
  return value ? String(value) : ''
}

const displayPayName = computed(() => {
  return pickFirst(
    memberInfo.name,
    memberInfo.deptName,
    deptInfo.deptName,
    formData.value.orderName,
    formData.value.payDeptName,
    formData.value.payMemName,
    formData.value.memberName,
    payName.value,
    formData.value.memName
  ) || '-'
})

const displayAssoName = computed(() => {
  return pickFirst(
    deptInfo.aname,
    deptInfo.associateName,
    memberInfo.aname,
    memberInfo.associateName,
    memberInfo.assoName,
    formData.value.assoName,
    formData.value.associateName,
    formData.value.associationName,
    formData.value.aname,
    formData.value.parentName,
    assoName.value
  ) || '-'
})

// 页面加载接收参数
onLoad(async (options) => {
  console.log('缴费范围ID：', options.rangeId, '订单ID：', options.orderId)
  payName.value = decodeURIComponent(options.payName || '')
  assoName.value = decodeURIComponent(options.assoName || '')
  if (options.orderId) {
    orderId.value = options.orderId
  }
  if (options.rangeId) {
    rangeId.value = options.rangeId
    await getCount()
  }
  if (options.orderId) {
    await getOrderDetail()
  }
})

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

async function getOrderDetail() {
  try {
    const res = await api.orderDetail(orderId.value)
    const data = res.data || {}
    let content = {}
    if (data.content) {
      try {
        content = typeof data.content === 'string' ? JSON.parse(data.content) : data.content
      } catch (e) {
        content = {}
      }
    }
    formData.value = {
      ...formData.value,
      ...data,
      ...content,
      all: content.allPersonCount ?? data.allCount ?? data.all ?? 0,
      new: content.newPersonCount ?? data.newCount ?? data.new ?? 0,
      old: content.renewPersonCount ?? data.oldCount ?? data.old ?? 0,
      price: data.price ?? content.price ?? 0
    }
    payName.value = pickFirst(data.orderName, content.orderName, data.payDeptName, data.payMemName, content.payDeptName, content.payMemName, data.memberName, content.memberName, payName.value)
    assoName.value = pickFirst(data.assoName, data.associateName, data.associationName, data.aname, data.parentName, content.assoName, content.associateName, content.associationName, content.aname, content.parentName, assoName.value)
  } catch (e) {
    formData.value = {
      ...formData.value,
      all: 0,
      new: 0,
      old: 0
    }
  }
}

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

// 立即支付核心逻辑
async function handlePay() {
  // 基础校验
  if ((!rangeId.value && !orderId.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: orderId.value || rangeId.value,
      payType: payType.value
    }
    if (payType.value === '3') {
      params.contactPerson = form.value.contactPerson
      params.contactTel = form.value.contactTel
    }

    const res = orderId.value ? await api.payForOrder(params) : 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;
  border-top: 1px solid #f5f5f5;
  border-bottom: 1px solid #f5f5f5;

  .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;
      flex-shrink: 0;
    }

    .value {
      font-weight: 600;
      font-size: 34rpx;
      text-align: right;
      word-break: break-all;
    }

    .normal {
      color: #111;
      font-size: 30rpx;
    }

    .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>