<template>
  <view class="container">
    <view class="content">
      <!-- 缴费单位和所属协会 -->
      <view class="card info-card">
        <view class="info-row">
          <text class="info-label">缴费单位</text>
          <text class="info-value">{{ payName || '-' }}</text>
        </view>
        <view v-if="assoName" class="info-row">
          <text class="info-label">所属协会</text>
          <text class="info-value">{{ assoName || '-' }}</text>
        </view>
      </view>
      
      <view class="card">
        <view class="yearRow">
          <view class="label">缴费年限</view>
          <view class="control">
            <image v-if="form.renewYear > 1" :src="config.loginImage_api + '/fs/static/dd_02.png'" class="icon"
                   mode="widthFix"
                   @click="minusYear"></image>
            <image v-else :src="config.loginImage_api + '/fs/static/dd_02_g.png'" class="icon" mode="widthFix"></image>
            <text class="num">{{ form.renewYear }}年</text>
            <image v-if="form.renewYear < 5" :src="config.loginImage_api + '/fs/static/btn_03.png'" class="icon"
                   mode="widthFix"
                   @click="plusYear"></image>
            <image v-else :src="config.loginImage_api + '/fs/static/btn_03_g.png'" class="icon" mode="widthFix"></image>
          </view>
        </view>
      </view>
      
      <view class="card ">
        <!-- 费用合计 -->
        <view class="row ">
          <text class="label">费用合计</text>
          <text class="value red">{{ (form.renewYear * memberFee).toFixed(2) }}元</text>
        </view>
        
        <view v-if="preferentialPolicy" class="hintRow">
          <text
            class="hintText">温馨提示：根据中国跆协{{ preferentialData.name || '优惠' }}政策减免一年费用，每个单位在政策有效期内只享受一次
          </text>
        </view>
      </view>
      
      <view class="payRow ">
        <radio-group @change="onPayTypeChange">
          <label class="radioItem">
            <radio :checked="payType === '1'" class="custom-radio" value="1"/>
            <view class="payInfo">
              <image :src="config.baseUrl_api + '/fs/static/min.png'" class="icon" mode="widthFix"></image>
              <text>民生付</text>
            </view>
          </label>
        </radio-group>
      </view>
      
      <view class="totalRow ">
        <text class="label">支付费用合计</text>
        <text class="value redBig">{{ memberTotalFee }}元</text>
      </view>
    
    </view>
    
    <view class="bottomBtn">
      <view v-if="preferentialPolicy" class="deductRow">
        <text class="label">减免费用</text>
        <text class="value red">-{{ memberFee.toFixed(2) }}元</text>
      </view>
      <button :loading="isPaying" class="payBtn" @click="handelPay">立即支付 ¥{{ memberTotalFee }}</button>
    </view>
  
  </view>
</template>

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

const form = ref({
  renewYear: 1
})
const memberFee = ref(0)
const preferentialPolicy = ref(false)
const preferentialData = ref({
  name: '优惠'
})
const payType = ref('1')
const isPaying = ref(false)
const payName = ref('')
const assoName = ref('')

const memberTotalFee = computed(() => {
  if (preferentialPolicy.value) {
    return (memberFee.value * form.value.renewYear - memberFee.value * 1).toFixed(2)
  } else {
    return (memberFee.value * form.value.renewYear).toFixed(2)
  }
})

// 年限减
const minusYear = () => {
  if (form.value.renewYear > 1) {
    form.value.renewYear--
  }
}
// 年限加
const plusYear = () => {
  if (form.value.renewYear < 6) {
    form.value.renewYear++
  }
}

// 支付方式切换
const onPayTypeChange = (e) => {
  payType.value = e.detail.value
}

// 支付操作
const handelPay = async () => {
  if (memberTotalFee.value < 0) {
    uni.showToast({
      title: '支付金额异常',
      icon: 'none'
    })
    return
  }
  
  // 显示 loading
  uni.showLoading({
    title: '支付中...',
    mask: true
  })
  if (isPaying.value) return
  isPaying.value = true
  // 创建订单 - 参考PC端逻辑
  const [orderErr, orderRes] = await to(api.certifiedNew(form.value.renewYear))
  if (orderErr) {
    uni.hideLoading()
    isPaying.value = false
    uni.showToast({
      title: '创建订单失败',
      icon: 'none'
    })
    return
  }
  
  const data = orderRes.data
  // 无需支付，直接成功
  if (data.payFlag == 0) {
    uni.hideLoading()
    isPaying.value = false
    uni.redirectTo({
      url: `/myCenter/sucPay?orderId=${data.orderId}`
    })
    return
  }
  if (data.payResult && data.payResult.encryptedData) {
    try {
      const res = await minShengPay(data.orderId, data.payResult.encryptedData)
      if (res == 'OK') {
        isPaying.value = false
        // 支付成功，跳转到成功页面
        uni.redirectTo({
          url: `/myCenter/sucPay?orderId=${data.orderId}`
        })
      }
    } catch (e) {
      console.error('支付失败', e)
      uni.hideLoading()
      isPaying.value = false
    }
    return
  }
  uni.hideLoading()
  isPaying.value = false
}

onLoad((option) => {
  console.log(66, option)
  // 接收年限
  form.value.renewYear = Number(option.renewYear || 1)
  // 接收缴费单位和所属协会
  payName.value = decodeURIComponent(option.payName || '')
  console.log(77, payName.value)
  assoName.value = decodeURIComponent(option.assoName || '')
  // 初始化获取费用和优惠
  init()
})

// 初始化接口
async function init() {
  uni.showLoading({
    title: '加载中...'
  })
  const [err] = await to(Promise.all([
    getMyMemberCertUnitFeeApi(),
    canUseDiscountApi(),
    getZtxDiscountPolicyApi()
  ]))
  uni.hideLoading()
  if (err) {
    console.error('初始化失败：', err)
  }
}

// 获取会员单价
async function getMyMemberCertUnitFeeApi() {
  const [err, res] = await to(api.getMyMemberCertUnitFee())
  if (!err && res.data) {
    memberFee.value = Number(res.data || 1500)
  }
}

// 是否可用优惠
async function canUseDiscountApi() {
  const [err, res] = await to(api.canUseDiscount())
  if (!err && res.data !== undefined) {
    preferentialPolicy.value = res.data
  }
}

// 获取优惠政策详情
async function getZtxDiscountPolicyApi() {
  const [err, res] = await to(api.getZtxDiscountPolicy())
  if (!err && res.data) {
    preferentialData.value = res.data
  }
}
</script>

<style lang="scss" scoped>
/* 整体容器 */
.container {
  min-height: 100vh;
  background-color: #f7f7f7;
}

/* 内容区域 */
.content {
  padding: 20rpx 20rpx 120rpx;
}

/* 卡片 */
.card {
  background: #fff;
  border-radius: 8rpx;
  padding: 25rpx 20rpx;
  margin-bottom: 20rpx;
}

/* 缴费单位和所属协会信息 */
.info-card {
  .info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16rpx 0;
    border-bottom: 1rpx solid #f5f5f5;
    
    &:last-child {
      border-bottom: none;
    }
    
    .info-label {
      font-size: 28rpx;
      color: #666;
    }
    
    .info-value {
      font-size: 28rpx;
      color: #333;
      font-weight: 500;
    }
  }
}

/* 缴费年限行 */
.yearRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20rpx;
}

.yearRow .label {
  font-size: 28rpx;
  color: #333;
}

.yearRow .control {
  display: flex;
  align-items: center;
}

.control image {
  width: 50rpx;
  height: 50rpx;
}

/* 加减按钮样式 */
.num-btn {
  width: 40rpx;
  height: 40rpx;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  border: 1rpx solid #C4121B;
}

.num-btn.disabled {
  border-color: #ccc;
}

.num-btn.disabled .btn-icon {
  color: #ccc;
}

.btn-icon {
  font-size: 24rpx;
  color: #C4121B;
  font-weight: bold;
}

.yearRow .num {
  font-size: 28rpx;
  color: #333;
  min-width: 80rpx;
  text-align: center;
  margin: 0 10rpx;
}


/* 通用行 */
.row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  
}

.row .label {
  font-size: 28rpx;
  color: #333;
}

.row .value {
  font-size: 30rpx;
  color: #C4121B;
  font-weight: 500;
}

/* 优惠提示 */
.hintRow {
  display: flex;
  align-items: flex-start;
  font-size: 24rpx;
  line-height: 1.4;
}

.hint-icon {
  width: 24rpx;
  height: 24rpx;
  border-radius: 50%;
  background-color: #C4121B;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 10rpx;
  flex-shrink: 0;
  margin-top: 2rpx;
}

.icon {
  width: 30px;
}

.icon-check {
  color: #fff;
  font-size: 16rpx;
}

.hintRow .hintText {
  color: #FF8124;
  flex: 1;
  margin-top: 10rpx;
}

/* 减免费用 */
.deductRow {
  background: #fff;
  padding: 20rpx 20rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10rpx;
  border-radius: 8rpx;
}

.deductRow .label {
  font-size: 28rpx;
  color: #333;
}

.deductRow .value {
  font-size: 30rpx;
  color: #C4121B;
}

/* 支付方式行 */
.payRow {
  background: #fff;
  border-radius: 8rpx;
  padding: 20rpx 20rpx;
  margin-bottom: 20rpx;
}

.radioItem {
  display: flex;
  align-items: center;
}

/* 自定义红色单选框 */
::v-deep .custom-radio .wx-radio-input {
  width: 30rpx;
  height: 30rpx;
  border-radius: 50%;
  border: 2rpx solid #ccc;
}

::v-deep .custom-radio .wx-radio-input.wx-radio-input-checked {
  border-color: #C4121B !important;
  background: #C4121B !important;
}


.payInfo {
  display: flex;
  align-items: center;
  margin-left: 15rpx;
}

.payInfo .icon {
  width: 40rpx;
  height: 40rpx;
  margin-right: 10rpx;
}

.payInfo text {
  font-size: 28rpx;
  color: #333;
}

/* 总费用行（突出显示） */
.totalRow {
  background: #fff;
  border-radius: 8rpx;
  padding: 20rpx 20rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10rpx;
}

.totalRow .label {
  font-size: 28rpx;
  color: #333;
}

.redBig {
  font-size: 32rpx;
  color: #C4121B;
  font-weight: bold;
}

/* 底部按钮 */
.bottomBtn {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20rpx 20rpx;
  background: #fff;
  border-top: 1rpx solid #eee;
}

.payBtn {
  width: 100%;
  height: 88rpx;
  line-height: 88rpx;
  background-color: #C4121B;
  color: #fff;
  border-radius: 8rpx;
  font-size: 32rpx;
  text-align: center;
  border: none;
}

.payBtn[disabled] {
  background-color: #ccc;
  color: #999;
}

/* 通用红色文字 */
.red {
  color: #C4121B;
}
</style>