<template>
	<view class="exchange-page">
		<navBar :title="'在线兑换'"  />
		<!-- <uni-nav-bar left-icon="left" title="在线兑换" fixed color="#8B2316" height="180rpx" :border="false" backgroundColor="#ffffff" @clickLeft="goBack" /> -->

		<scroll-view scroll-y class="content">
			<!-- 收货地址 -->
			<!-- <view class="addr-card" @click="changeAddress">
				<view class="addr-header">
					<text class="addr-title">收货信息</text>
					<text class="addr-change">{{ selectedAddress ? '更换' : '添加' }}</text>
				</view>
				<view v-if="selectedAddress" class="addr-info">
					<text class="addr-row">{{ selectedAddress.receiver }}  {{ selectedAddress.mobile }}</text>
					<text class="addr-row small">{{ selectedAddress.fullAddress || (selectedAddress.region + ' ' + selectedAddress.detail) }}</text>
				</view>
				<view v-else class="addr-empty">请添加收货地址</view>
			</view> -->

			<view class="goods-title">{{ title }}</view>
			<view class="top-row flex">
				<view class="price">{{ price }}积分</view>
				<view class="times" v-if="times>0">已兑换{{ times }}次</view>
			</view>

			<view class="divider"></view>

			<view class="section">
				<view class="section-label">兑换数量</view>
				<view class="qty-row">
					<view class="qty-btn" :class="{ active: qty === 1 }" @click="setQty(1)">1</view>
					<view class="qty-btn" :class="{ active: qty === 2 }" @click="setQty(2)">2</view>
					<view class="qty-btn" :class="{ active: qty === 3 }" @click="setQty(3)">3</view>
				</view>
			</view>

			<view class="section flex">
				<view class="section-label" style="margin-bottom: 0;">所需积分</view>
				<view class="need-points">{{ needPoints }}积分</view>
			</view>
		</scroll-view>

		<view class="footer-bar" @click="goAddress">
			<view class="confirm-btn" >我要兑换</view>
		</view>
	</view>
	<unidialog
	:title="'确认兑换信息'"
	:titleColor="'#000'"
    :visible="freeVisible"
    :content="freeContent"
    @close="freeClose"
    @confirm="freeConfirm"
  >
   
  </unidialog>
</template>

<script setup>
import { ref } from 'vue'
import { onLoad, onShow } from '@dcloudio/uni-app'
import goods_api from '@/api/goods_api'
import unidialog from '@/components/dialog/dialog.vue';
const freeVisible = ref(false)
import navTo from '@/utils/navTo';
const freeContent = ref('您的积分不足，是否购买积分？')
const freeClose = () => {
	freeVisible.value = false
}
const freeConfirm = () => {
	freeVisible.value = false;
	navTo({
		url: '/pages_app/buyPoint/buyPoint?product_id='+id.value+'&type=goods'
	})
}
const times=ref(0);
const title = ref('')
const price = ref(0)
const qty = ref(1)
const needPoints = ref(0)
const totalPoints = ref(0)
const selectedAddress = ref(null)
const id = ref('')
const type = ref(null)

const goBack = () => uni.navigateBack()

const setQty = (n) => {
	qty.value = n
	needPoints.value = n * Number(price.value || 0)
}

onLoad((opts) => {
	console.log(opts);
	if (opts) {
		title.value = decodeURIComponent(opts.title || '')
		price.value = Number(opts.price || 0)
		id.value = opts.id || ''
		type.value = opts.type
		times.value = opts.times
		setQty(1)
		
	}
})

onShow(() => {
	loadAddress()
	getTotalPoints()
})

const STORAGE_KEY = 'goods_addresses'
const SELECTED_KEY = 'goods_selected_address'
const loadAddress = () => {
	try {
		const sel = uni.getStorageSync(SELECTED_KEY)
		if (sel && sel.id) {
			selectedAddress.value = sel
			return
		}
		const list = uni.getStorageSync(STORAGE_KEY)
		if (Array.isArray(list) && list.length) {
			selectedAddress.value = list[0]
		} else {
			selectedAddress.value = null
		}
	} catch (e) {
		selectedAddress.value = null
	}
}

const changeAddress = () => {
	let list = []
	try {
		const cached = uni.getStorageSync(STORAGE_KEY)
		list = Array.isArray(cached) ? cached : []
	} catch (e) { list = [] }
	if (!list.length) {
		uni.navigateTo({ url: '/pages_goods/exchange/address' })
		return
	}
	uni.navigateTo({ url: '/pages_goods/exchange/address_list' })
}

const goAddress = () => {
	if(Number(needPoints.value) > Number(totalPoints.value)){
		freeVisible.value = true
	}else{
		uni.navigateTo({ 
		url: '/pages_goods/exchange/address?goodsUuid='+id.value+'&type='+type.value+'&goodsNum='+qty.value+'&goodsName='+title.value+'&goodsPoints='+needPoints.value
	   })
	}
	
	

	//{"goodsUuid":"e6ca84edc8e64242a379dd0b895ea812",
	// "address":"北京市东城区你一下",
	// "user_name":"噢噢",
	// "mobile":"13825244552",
	// "goodsNum":"1",
	// "email":""}
	// 模拟下单：此处可调用后端接口完成兑换
	// uni.showModal({
	// 	title: '确认兑换',
	// 	content: `兑换“${title.value}”x${qty.value}，共需 ${needPoints.value} 积分`,
	// 	success: (r) => {
	// 		if (r.confirm) {
	// 			// 扣减本地积分（演示）
	// 			totalPoints.value = Math.max(0, totalPoints.value - needPoints.value)
	// 			uni.removeStorageSync(SELECTED_KEY)
	// 			goods_api.createGoodsOrder(data).then(res => {
	// 				console.log(res)
	// 				if (res.code == 200) {
	// 					uni.showToast({ title: '兑换成功', icon: 'none' })
	// 					uni.navigateBack()
	// 				} else {
	// 					uni.showToast({ title: res.msg, icon: 'none' })
	// 				}
	// 			})
	// 		}
	// 	}
	// })
}
const getTotalPoints = () => {
	goods_api.getTotalPoints && goods_api.getTotalPoints().then(res => {
		if (res.code == 200) {
			totalPoints.value = res.data || 0
		}
	}).catch(() => {})
}
</script>

<style scoped>
.flex{
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.top-row {
	padding-bottom: 24rpx;
	padding-right: 24rpx;
}
.top-row .times{
	color: #999;
	font-size: 28rpx;
}
.exchange-page { min-height: 100vh; background: #fff; }
.content { position: absolute; top: calc(var(--status-bar-height) + 44px); bottom: 120rpx; left: 0; right: 0; background: #fff; }
.addr-card { background: #fff; padding: 24rpx; border-bottom: 1rpx solid #f0f0f0; }
.addr-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12rpx; }
.addr-title { color: #333; font-size: 30rpx; }
.addr-change { color: #38c1b1; font-size: 28rpx; }
.addr-info { display: flex; flex-direction: column; gap: 8rpx; }
.addr-row { color: #333; font-size: 28rpx; }
.addr-row.small { color: #666; font-size: 26rpx; }
.addr-empty { color: #bbb; font-size: 28rpx; }
.goods-title { padding: 24rpx; font-size: 32rpx; color: #333; line-height: 1.6; }
.price { padding: 0 24rpx 0rpx; color: #e74c3c; font-size: 30rpx; }
.divider { height: 16rpx; background: #f5f5f5; }
.section { padding: 24rpx; }
.section-label { color: #333; font-size: 30rpx; margin-bottom: 20rpx; }
.qty-row { display: flex; justify-content: space-between; }
.qty-btn { flex: 1;max-width:205rpx; text-align: center; height: 96rpx; line-height: 96rpx; border: 2rpx solid #38c1b1; color: #38c1b1; border-radius: 12rpx; font-size: 36rpx; }
.qty-btn.active { background: #38c1b1; color: #fff; }
.need-points { color: #333; font-size: 30rpx; text-align: right; }
.footer-bar { position: fixed; left: 0; right: 0; bottom: 0; height: 120rpx; background: #27c5b8; display: flex; align-items: center; justify-content: center; }
.confirm-btn { color: #fff; font-size: 34rpx; font-weight: 700; }
</style>

