<!-- 充值中心 -->
<template>
	<view class="container">
		<up-navbar bgColor="transparent" title="充值中心" @leftClick="back"></up-navbar>
		<view class="header-wrap">
			<image class="bg" src="/static/czzx_header_bg.png" mode="aspectFill"></image>
			<view class="select-shop">
				<view class="select-btn">
					<up-icon name="map" color="#333"></up-icon>
					<text class="t">{{shopInfo.shopName}}</text>
					<up-icon name="arrow-right" color="#333"></up-icon>
				</view>
			</view>
			<view class="balance-wrap">
				<view class="left">
					<text class="i t">余额</text>
					<text class="n t">{{shopUserInfo.amount||0}}</text>
				</view>
				<view class="right">
					<text class="t" @click="toDetail">明细</text>
					<text class="t" @click="toPwd">密码设置</text>
				</view>
			</view>
			<view class="btm-wrap">
				<view class="">

				</view>
			</view>
		</view>
		<view class="bottom">
			<view class="u-flex u-flex-between">
				<view class="u-flex ">
					<image src="/static/vip/money.png" style="width: 44rpx;height: 44rpx;" mode=""></image>
					<text class="u-m-l-24 color-333 font-16 font-700">立即充值</text>
				</view>
				<view class="font-12 color-999">
					<text>充值代表接受</text>
					<text style="color: #ECB592;">《用户隐私协议》</text>
				</view>
			</view>
			<view class="list u-m-t-40">
				<view class="item color1" @click="sel=index" v-for="(item,index) in list" :key="index"
					:class="{active:sel==index}">
					<view class="">
						<text>￥</text>
						<text class="font-700" style="font-size: 48 u-flex-1rpx;"
							:class="{color2:sel==index}">{{item.amount}}</text>
					</view>
					<view class="font-12" v-if="item.rewardAmount" :class="{color2:sel==index}">
						<text>赠</text>
						<text>￥</text>
						<text class="font-14">{{item.rewardAmount}}</text>
					</view>
					<view class="font-12" v-if="item.rewardPoints" style="color: #5F2E0F;">
						<text>送</text>
						<text class="font-14">{{item.rewardPoints}}</text>
						<text class="">积分</text>
					</view>
					<view class="font-12 color-666" v-if="item.couponInfoList.length">
						<text>送</text>
						<text>{{couponNum(item.couponInfoList) }}</text>
						<text>张券</text>
						<text class="color2 u-m-l-8" v-if="sel==index" @click="lookCoupon(item)">查看</text>
					</view>

					<view class="sel u-flex" v-if="sel==index">
						<image class="image" src="/static/vip/sel.png" mode=""></image>
					</view>
				</view>
			</view>
			<template v-if="state.isCustom">
				<view class="u-flex other flex-center">
					<text class="font-14 color-333 font-700 u-m-r-28">其他金额</text>
					<up-input v-model="money" type="number" placeholder="请输入充值金额" border="none"
						placeholder-style="font-size:14px;"></up-input>
				</view>
				<view class="color-999 font-12 u-m-t-4">自定义金额充值时，不享受任何优惠赠送</view>
			</template>

			<button class="buy-btn" @click="buy">
				<text class="font-16 ">￥{{charge_money}}</text>
				<text class="font-14 u-m-l-24">立即充值</text>
			</button>
			<view class="u-m-t-36 color-999 font-12">
				<view>充值说明</view>
				<view class="u-m-t-16">
					<text>适用门店</text>
					<text class="color2 u-m-l-28" @click="toShopList">全国门店通用 {{'>'}} </text>
				</view>
				<view class="u-m-t-16">
					<text>有效期限</text>
					<text class=" u-m-l-28">永久有效 </text>
				</view>
				<view class="u-m-t-16 u-flex u-flex-y-center">
					<text class="no-wrap">注意事项</text>
					<view class="u-m-l-28">
						<view>1.储值完成后不支持自助退款，可联系商家处理</view>
						<view> 2.余额不支持转赠，不可提现，长期有效</view>
					</view>

				</view>
				<view class="u-m-t-16 u-flex u-flex-y-center">
					<text class="no-wrap">充值说明</text>
					<text class="u-m-l-28" style="word-break: break-all;">
						{{state.remark||''}}
					</text>

				</view>
			</view>
		</view>
		<CouponList v-model="couponModel.show" :list="couponModel.couponInfoList"></CouponList>
	</view>
</template>

<script setup>
	import {
		APIusershopInfodetail,
		APIshopUserInfo
	} from '@/common/api/member.js'
	import CouponList from '@/components/coupon/list.vue'
	import * as rechargeApi from '@/common/api/market/recharge.js'
	import {
		recharge
	} from '@/common/api/order/index.js'
	import {
		joinMember
	} from '@/common/api/order/index.js'
	import {
		ref,
		onMounted,
		computed,
		reactive,
		watch
	} from 'vue'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		pay
	} from '@/utils/pay.js'
	
	function toShopList(){
		uni.navigateTo({
			url:'/pages/user/member/czzx-shop-list?shopId='+option.shopId
		})
	}

	function couponNum(list) {
		return list.reduce((prve, cur) => {
			return prve + cur.num
		}, 0)
	}
	const couponModel = reactive({
		show: false,
		couponInfoList: []
	})

	function lookCoupon(item) {
		couponModel.show = true
		couponModel.couponInfoList = item.couponInfoList
	}
	async function buy() {
		if (!charge_money.value) {
			return uni.showToast({
				title: '请选择或者输入充值金额',
				icon: 'none'
			})
		}
		const json = {
			shopId: option.shopId,
			shopUserId: shopUserInfo.id,
		}
		if (sel.value < 0) {
			json.amount = `${money.value}`.trim() * 1
		} else {
			json.rechargeDetailId = list.value[sel.value].id
			json.amount = list.value[sel.value].amount
		}
		const res = await recharge(json)
		if (!res) {
			return uni.showToast({
				title: '充值失败',
				icon: 'error'
			})
		}
		const payRes = await pay(res)
		console.log(payRes);
		if (payRes) {
			uni.showToast({
				title: '充值成功',
				icon: 'none'
			})
			init()
		}

	}

	function toDetail() {
		uni.navigateTo({
			url: '/pages/user/member/billDetails?type=1&shopId=' + option.shopId
		})
	}

	function toPwd() {
		uni.navigateTo({
			url: '/pages/user/member/setPassword?type=1&shopId=' + option.shopId
		})
	}

	function back() {
		uni.navigateBack();
	}
	const list = ref([])
	const sel = ref(0)
	const money = ref(null);
	const option = reactive({
		shopId: ''
	})
	const shopInfo = reactive({})
	const shopUserInfo = reactive({})
	const state = reactive({})
	async function init() {
		const shopInfoRes = await APIusershopInfodetail({
			shopId: option.shopId
		})
		if (shopInfoRes) {
			Object.assign(shopInfo, shopInfoRes.shopInfo)
		}
		const shopUserInfoRes = await APIshopUserInfo({
			shopId: option.shopId
		})
		if (shopUserInfoRes) {
			Object.assign(shopUserInfo, shopUserInfoRes)
		}
		const res = await rechargeApi.config({
			shopId: option.shopId
		})
		if (res) {
			Object.assign(state, res)
			list.value = res.rechargeDetailList
		}
	}
	const charge_money = computed(() => {
		if (sel.value < 0) {
			if (money.value > 0) {
				return money.value
			}
			return ''
		}
		const item = list.value[sel.value]
		if (item) {
			return item.amount
		}
		return ''
	})
	onLoad((opt) => {
		Object.assign(option, opt)
		init()
	})

	watch(() => money.value, (newval) => {
		if (newval && newval > 0) {
			sel.value = -1
		}
	})
</script>

<style scoped lang="scss">
	.color1 {
		color: #5F2E0F;
	}

	.color2 {
		color: #FF6300;
	}

	.buy-btn {
		margin-top: 28rpx;
		padding: 32rpx 32rpx;
		color: #fff;
		font-size: 16px;
		font-weight: 700;
		border-radius: 80rpx;
		line-height: 1;
		background: linear-gradient(98deg, #fe6d1100 40.64%, #FFD1B4 105.2%), linear-gradient(259deg, #FE6D11 50.14%, #FFD1B4 114.93%);
		box-shadow: 0 14rpx 30.4rpx 0 #fe8b435e;
	}

	.other {
		background: #F6F6F6;
		padding: 24rpx 16rpx;
		margin-top: 40rpx;
	}

	.header-wrap {
		width: 100%;
		height: 530rpx;
		box-sizing: border-box;
		padding: calc(var(--status-bar-height) + 140rpx) 28rpx 28rpx;
		position: relative;

		.bg {
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;
		}

		.select-shop {
			display: flex;
			align-items: center;
			position: relative;

			.select-btn {
				display: flex;
				align-items: center;
				gap: 12upx;

				.t {
					color: #333;
				}
			}
		}

		.balance-wrap {
			display: flex;
			justify-content: space-between;
			position: relative;
			padding-top: 40upx;

			.left {
				display: flex;
				align-items: center;

				.t {
					color: #5e3110;

					&.i {
						position: relative;
						top: 10upx;
						font-size: 28upx;
					}

					&.n {
						font-size: 64upx;
						font-weight: bold;
					}
				}
			}

			.right {
				display: flex;
				flex-direction: column;
				gap: 12upx;

				.t {
					color: #86491d;
					font-size: 28upx;
				}
			}
		}
	}

	.bottom {
		background-color: rgba(255, 255, 255, .3);
		padding: 40rpx 28rpx 0 28rpx;
		transform: translateY(-140rpx);
		border-radius: 74rpx 74rpx 0 0;
	}

	.list {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		column-gap: 20rpx;
		row-gap: 22rpx;

		.item {
			padding: 36rpx 22rpx;
			border-radius: 42rpx;
			background: linear-gradient(180deg, #F5F5F5 58.54%, #FFF 140.47%);
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			position: relative;
			box-sizing: border-box;
			border: 6rpx solid transparent;
			transition: all .3s ease-in-out;

			&.active {
				background: linear-gradient(180deg, #FFC29A -26.17%, #FFF 64.06%);
				border: 6rpx solid #FE6C0E;
				box-shadow: 0 0 31rpx 2rpx #fe8b435e;
			}

			.sel {
				position: absolute;
				bottom: 0;
				left: 50%;

				transform: translateX(-50%) translateY(21rpx);

				.image {
					width: 42rpx;
					height: 42rpx;
				}
			}
		}
	}
</style>