<template>
  <view class="confirm-order-page">
    <!-- 商品列表区域 -->
    <view class="common-section">
      <view class="section-title">{{ $t('order.goodsInfo') }}</view>
      <slot name="goodsList" />
    </view>

    <!-- 订单备注区域 -->
    <view class="remark-section common-section" @click="showRemarkPopup = true">
      <view class="remark-row">
        <text class="remark-label">{{ $t('order.remark') }}</text>
        <view class="remark-value">
          <text :class="remark ? 'remark-text' : 'remark-placeholder'">
            {{ remark || $t('order.remarkPlaceholder') }}
          </text>
          <image src="/static/icon/icon_right.png" class="arrow-icon" />
        </view>
      </view>
    </view>

    <!-- 价格明细区域 -->
    <view class="price-section common-section">
      <view class="section-title">{{ $t('order.priceDetail') }}</view>
      
      <!-- 商品总价 -->
      <view class="price-item">
        <text class="label">{{ $t('order.totalPrice') }}</text>
        <text class="value">{{ totalAmount.toFixed(2) }} {{ t('global.coin') }}</text>
      </view>
      
      <!-- 优惠券 -->
      <!-- <coupon v-model="selectedCoupon" /> -->
      
      <!-- 活动立减 -->
      <view v-if="promotionDiscounted > 0" class="price-item">
        <text class="label">{{ $t('order.promotionDiscounted') }}</text>
        <text class="discount-value">-{{ promotionDiscounted.toFixed(2) }} {{ t('global.coin') }}</text>
      </view>
      
      <!-- VIP专享立减 -->
      <view v-if="vipDiscounted > 0" class="price-item">
        <view class="label-row">
          <text class="vip-icon">VIP</text>
          <text class="label">{{ $t('order.vipDiscount') }}</text>
        </view>
        <text class="discount-value">-{{ vipDiscounted.toFixed(2) }} {{ t('global.coin') }}</text>
      </view>
      
      <!-- 积分 -->
      <view v-if="allowPointPay && userInfo?.jf > 0" class="price-item">
        <view class="label-row">
          <image src="/static/icon/jifen.png" class="icon-img" />
          <text class="label">{{ $t('order.points') }}</text>
          <text class="points-total">
            ({{ $t('order.allPoints') }}：{{ userInfo?.jf || 0 }})
          </text>
        </view>
        <text class="discount-value">-{{ pointsDiscounted.toFixed(2) }}</text>
      </view>
      
      <!-- 积分输入 -->
      <view v-if="allowPointPay && userInfo?.jf > 0" class="points-input-section">
        <text class="points-label">
          {{ $t('order.maxPoints', { max: pointsUsableMax }) }}
        </text>
        <view class="points-input-box">
          <input
            v-model="pointsDiscounted"
            type="number"
            clearable
            :placeholder="$t('order.pointsPlaceholder')"
            class="text-right"
            @input="handlePointsInput"
            @clear="handlePointsClear"
          />
        </view>
      </view>
    </view>
    
    <!-- 支付方式区域 -->
    <view class="common-section">
      <view class="section-title">{{ $t('order.paymentMethod') }}</view>
      <PayWay :peanutCoin="userInfo?.peanutCoin || 0" />
    </view>
    
    <!-- 底部汇总栏 -->
    <view class="bottom-bar">
      <view class="total-info">
        <text class="label">{{ $t('order.total') }}：</text>
        <text class="amount">{{ finalAmount }} {{ t('global.coin') }}</text>
      </view>
      <wd-button type="primary" @click="handleSubmit">
        {{ $t('order.submit') }}
      </wd-button>
    </view>
    
    <!-- 订单备注弹窗 -->
    <wd-popup
      v-model="showRemarkPopup"
      position="bottom"
    >
      <view class="remark-popup">
        <view class="popup-header">{{ $t('order.remarkTitle') }}</view>
        
        <view class="remark-content">
          <wd-textarea
            v-model="remark"
            :placeholder="$t('order.remarkPlaceholder')"
            :maxlength="200"
            show-word-limit
            class="pb-0!"
          />
        </view>
        
        <view class="popup-footer">
          <wd-button type="primary" block @click="showRemarkPopup = false">{{ $t('global.ok') }}</wd-button>
        </view>
      </view>
    </wd-popup>
  </view>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'
import { orderApi } from '@/api/modules/order'
import { t } from '@/utils/i18n'
import type { IGoods, IGoodsDiscountParams } from '@/types/order'
import PayWay from '@/components/order/PayWay.vue'

// 使用页面传参
interface Props {
  goodsList: IGoods[],
  userInfo: object,
  allowPointPay: boolean,
  orderType: string,
}
const props = withDefaults(defineProps<Props>(), {
  goodsList: () => [],
  userInfo: () => ({}),
  allowPointPay: () => true,
  orderType: () => 'order',
})

// 订单备注
const remark = ref('')
const showRemarkPopup = ref(false)

// 价格相关
const totalAmount = ref(0) // 商品总价
const vipDiscounted = ref(0) // VIP专享立减
const promotionDiscounted = ref(0) // 活动优惠金额
const couponDiscounted = ref(0) // 优惠券优惠金额
const finalAmount = ref<string | number>('--') // 最终支付金额

// 积分相关
const pointsDiscounted = ref(0) // 积分支付金额
const pointsUsableMax = ref(0) // 最大可用积分

// 优惠券相关

/**
 * 优惠价格的请求参数
 */
const goodsListParams = ref<IGoodsDiscountParams[]>([])
const getDiscountParams = (goodsList: IGoods[]) => {
  goodsListParams.value = goodsList.map(item => ({
    productId: item.productId,
    quantity: item.productAmount || 1
  }))
}

// 监听商品列表变化，更新价格
watch(() => props.goodsList, () => {
  getDiscountParams(props.goodsList)
  // 初始化价格
  calculateAllPrices()
})

/**
 * 计算所有价格
 */
const calculateAllPrices = async () => {
  try {
    // 计算商品总价
    calculateTotalPrice()
    
    await Promise.all([
      // 获取VIP优惠
      calculateVipDiscounted(),
      
      // 获取活动优惠
      calculatePromotionDiscounted()

      // 获取优惠券列表
      // await getAvailableCoupons()
    ])

    // 计算最终价格
    calculateFinalPrice()
  } catch (error) {
    console.error('计算价格失败:', error)
  }
}

/**
 * 计算商品总价
 */
const calculateTotalPrice = () => {
  totalAmount.value = props.goodsList.reduce((sum: number, item: IGoods) => {
    // return sum + (item.price * item.productAmount)
    return sum + (item.price * 1)
  }, 0)
}

/**
 * 计算VIP优惠
 */
const calculateVipDiscounted = async () => {
  const res = await orderApi.getVipDiscountAmount(goodsListParams.value)
  vipDiscounted.value = res.discountAmount
}

/**
 * 计算活动优惠
 */
const calculatePromotionDiscounted = async () => {
  const res = await orderApi.getDistrictAmount(goodsListParams.value)
  promotionDiscounted.value = res.districtAmount
}

/**
 * 获取可用优惠券
 */
// const getAvailableCoupons = async () => {
//   try {
//     const shopProductInfos = props.goodsList.map(item => {
//       const price = item.activityPrice && item.activityPrice > 0 ? item.activityPrice : item.price
//       return `${item.productId}:${price}:${item.productAmount}`
//     }).join(',')
    
//     const res = await orderApi.getCouponListPayment(shopProductInfos)
//     if (res.code === 0 && res.data) {
//       couponList.value = res.data.couponHistoryList || []
      
//       // 如果当前选中的优惠券不可用，清除选择
//       if (selectedCoupon.value) {
//         const stillAvailable = couponList.value.find(
//           c => c.couponId === selectedCoupon.value?.couponId && c.canUse === 1
//         )
//         if (!stillAvailable) {
//           selectedCoupon.value = null
//         }
//       }
//     }
//   } catch (error) {
//     console.error('获取优惠券失败:', error)
//   }
// }

/**
 * 处理积分输入
 */
const handlePointsInput = (value: any) => {
  let val = String(value.detail.value)
  
  // 只允许数字字符，去掉小数点
  val = val.replace(/[^0-9]/g, '')
  
  if (val === '0' || val === '') {
    pointsDiscounted.value = 0
  } else {
    let numericValue = parseInt(val, 10)
    if (numericValue < 0 || isNaN(numericValue)) {
      numericValue = 0
    }
    
    // 确保不超过最大值
    if (numericValue >= pointsUsableMax.value) {
      numericValue = pointsUsableMax.value
    }
    
    pointsDiscounted.value = numericValue
  }
  
  // 重新计算实付款
  calculateFinalPrice()
}

/**
 * 清除积分输入
 */
const handlePointsClear = () => {
  pointsDiscounted.value = 0
  calculateFinalPrice()
}

/**
 * 计算最终价格
 */
const calculateFinalPrice = () => {
  // const couponAmount = selectedCoupon.value?.couponEntity.couponAmount || 0
  const couponAmount = 0
  
  // 计算最大可用积分
  const orderAmountAfterDiscount = totalAmount.value - promotionDiscounted.value - vipDiscounted.value
  pointsUsableMax.value = Math.min(
    props?.userInfo?.jf || 0,
    Math.floor(orderAmountAfterDiscount - couponAmount)
  )
  
  // 限制当前积分不超过最大值
  if (pointsDiscounted.value > pointsUsableMax.value) {
    pointsDiscounted.value = pointsUsableMax.value
  }
  
  // 计算实付款
  const result = Math.max(
    0,
    totalAmount.value - couponAmount - pointsDiscounted.value - promotionDiscounted.value - vipDiscounted.value
  )
  finalAmount.value = result.toFixed(2)
}

/**
 * 验证订单
 */
const validateOrder = (): boolean => {
  // 验证实付金额是否计算完成
  if (typeof finalAmount.value != 'number') {
    uni.showToast({
      title: t('order.invalidPaymentAmount'),
      icon: 'none'
    })
    return false
  }

  // 验证天医币余额
  if (finalAmount.value > props.userInfo.peanutCoin) {
    uni.showToast({
      title: t('order.insufficientBalance'),
      icon: 'none'
    })
    return false
  }
  
  return true
}

/**
 * 提交订单
 */
const handleSubmit = async () => {  
  // 验证订单
  if (!validateOrder()) return

  // 创建订单 此app用天医币支付，创建订单成功即支付成功
  await createOrder()

  uni.showToast({
    title: t('order.orderSuccess'),
    icon: 'success'
  })
}

/**
 * 创建订单
 */
const createOrder = async (): Promise<string | null> => {
  const orderParams = {
    userId: props.userInfo.id,
    paymentMethod: 4, // 天医币
    orderMoney: totalAmount.value,
    realMoney: finalAmount.value,
    pointsDeduction: pointsDiscounted.value,
    // couponId: selectedCoupon.value?.id,
    // couponName: selectedCoupon.value?.couponEntity.couponName,
    vipDiscountAmount: vipDiscounted.value,
    districtMoney: promotionDiscounted.value,
    remark: remark.value,
    productList: goodsListParams.value,
    orderType: props.orderType,
    come: 10
  }
  
  const res = await orderApi.placeCourseOrder(orderParams)
  
  if (res.orderSn) {
    return res.orderSn
  }
  return null
}
</script>

<style lang="scss" scoped>
.confirm-order-page {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding: 20rpx;
  padding-bottom: 60px;
}

.common-section {
  background-color: #fff;
  border-radius: 12rpx;
  padding: 20rpx;
  margin-bottom: 20rpx;
}

.section-title {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 20rpx;
}

.price-section {
  .price-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15rpx 0;
    font-size: 28rpx;
    
    .label-row {
      display: flex;
      align-items: center;
      gap: 10rpx;
      
      .label {
        color: #666;
      }
      
      .vip-icon {
        padding: 2rpx 8rpx;
        background-color: #f94f04;
        color: #fff;
        font-size: 20rpx;
        border-radius: 4rpx;
        font-weight: bold;
      }
      
      .icon-img {
        width: 40rpx;
        height: 40rpx;
      }
      
      .points-total {
        font-size: 24rpx;
        color: #aaa;
      }
    }
    
    .label {
      color: #666;
    }
    
    .value {
      color: #333;
      font-weight: 500;
    }
    
    .value-row {
      display: flex;
      align-items: center;
      gap: 10rpx;
    }
    
    .discount-value {
      color: #fe6035;
      font-weight: 500;
    }
  }
  
  .points-input-section {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15rpx 0;
    margin-top: 10rpx;
    background-color: #f5f5f5;
    border-radius: 20rpx;
    padding: 20rpx;
    
    .points-label {
      font-size: 28rpx;
      color: #7dc1f0;
      font-weight: 600;
    }
    
    .points-input-box {
      width: 320rpx;
    }
  }
}

.goods-section {
  .goods-item {
    position: relative;
    display: flex;
    padding-bottom: 20rpx;
    border-bottom: 1px solid #f0f0f0;
    
    &:last-child {
      border-bottom: none;
      padding-bottom: 0;
    }
    
    .vip-badge {
      position: absolute;
      top: 20rpx;
      left: 0;
      z-index: 1;
    }
    
    .goods-image {
      width: 140rpx;
      height: 140rpx;
      flex-shrink: 0;
      margin-right: 20rpx;
      background-color: #f5f5f5;
      border-radius: 8rpx;
      overflow: hidden;
      
      image {
        width: 100%;
        height: 100%;
      }
    }
    
    .goods-info {
      flex: 1;
      display: flex;
      flex-direction: column;
      
      .goods-name {
        font-size: 28rpx;
        color: #333;
        line-height: 1.4;
        margin-bottom: 10rpx;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
      }
      
      .price-info {
        .price-row {
          display: flex;
          align-items: baseline;
          gap: 10rpx;
          
          .vip-price,
          .activity-price {
            font-size: 32rpx;
            font-weight: bold;
            color: #e97512;
          }
          
          .normal-price {
            font-size: 32rpx;
            font-weight: bold;
            color: #333;
          }
          
          .vip-label {
            font-size: 22rpx;
            color: #fa2d12;
          }
          
          .activity-label {
            font-size: 22rpx;
            color: #613804;
          }
          
          .original-price {
            font-size: 24rpx;
            color: #999;
            text-decoration: line-through;
          }
        }
      }
      
      .quantity-row {
        display: flex;
        align-items: center;
        font-size: 24rpx;
        color: #999;
        
        .quantity-label {
          margin-right: 10rpx;
        }
        
        .quantity-control {
          display: flex;
          align-items: center;
        }
      }
    }
  }
}

.remark-section {
  .remark-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    
    .remark-label {
      font-size: 28rpx;
      font-weight: bold;
      color: #333;
    }
    
    .remark-value {
      display: flex;
      align-items: center;
      gap: 10rpx;
      max-width: 500rpx;
      
      .remark-text {
        font-size: 24rpx;
        color: #333;
        text-align: right;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      
      .remark-placeholder {
        font-size: 24rpx;
        color: #b0b0b0;
      }
      
      .arrow-icon {
        width: 24rpx;
        height: 24rpx;
      }
    }
  }
}

.remark-popup {
  background-color: #fff;
  border-radius: 20rpx 20rpx 0 0;
  
  .popup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30rpx;
    border-bottom: 1px solid #f0f0f0;
    
    .popup-title {
      font-size: 32rpx;
      font-weight: 500;
      color: #333;
    }
  }
  
  .remark-content {
    min-height: 300rpx;
  }
  
  .popup-footer {
    padding: 20rpx;
    border-top: 1px solid #f0f0f0;
  }
}

.bottom-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20rpx;
  background-color: #fff;
  box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.1);
  z-index: 999;
  
  .total-info {
    flex: 1;
    
    .label {
      font-size: 28rpx;
      color: #666;
    }
    
    .amount {
      font-size: 36rpx;
      color: #ff4444;
      font-weight: bold;
      margin-left: 10rpx;
    }
  }
}
</style>
