<template>
	<view>
		<view class="box" v-if="isShow">
			<view class="u-flex u-col-center" style="align-items: center;">
				<image src="/static/icon/charge.png" class="charge" mode=""></image>
				<view class="u-m-l-28 color-333 font-700"> 充值享优惠</view>
			</view>
			<scroll-view scroll-x="true" class="u-m-t-20">
				<view class="list">
					<view class="item color1" @click="itemClick(index)" v-for="(item,index) in list" :key="index"
						:class="{active:sel==index}">
						<view class="">
							<text>￥</text>
							<text class="font-700" style="font-size: 48rpx;"
								: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">
							<text>送</text>
							<text class="font-14">{{item.rewardPoints}}</text>
							<text>积分</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>

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

</template>

<script setup>
	import CouponList from '@/components/coupon/list.vue'
	import * as rechargeApi from '@/common/api/market/recharge.js'
	import {
		useCartsStore
	} from '@/stores/carts.js';
	import {
		onMounted,reactive,
		ref,
		watch
	} from 'vue';
	const couponModel = reactive({
		show: false,
		couponInfoList: []
	})
	
	function lookCoupon(item) {
		couponModel.couponInfoList = item.couponInfoList
		couponModel.show = true
	}
	
	function couponNum(list) {
		return list.reduce((prve, cur) => {
			return prve + cur.num
		}, 0)
	}
	const cartStore = useCartsStore()

	const list = ref([])
	const sel = ref(-1)
	const isShow = ref(false)
	let data={}
	let $riginList=[]
	async function init() {
		console.log('recharge', )
		const shopId = uni.cache.get('shopId')
		const res = await rechargeApi.config({
			shopId
		})
		if (res) {
			data=res;
			$riginList=res.rechargeDetailList
			isShow.value = res.isOrder
			list.value = res.rechargeDetailList.filter(v=>v.amount>cartStore.orderCostSummary.finalPayAmount)
			if(list.value.length){
				updateSel()
			}
		}
	}
	watch(()=>cartStore.orderCostSummary.finalPayAmount,(newval)=>{
		list.value=$riginList.filter(v=>v.amount>newval)
		if(list.value.length){
			updateSel()
		}
	})
	const emits=defineEmits(['updateChargeSel','updateRechargeId'])
	function updateSel(){
		const selItem=list.value[sel.value]
		emits('updateChargeSel',selItem?selItem:{})
		emits('updateRechargeId',data.id)
	}
	function itemClick(index){
		
		console.log('itemClick',sel.value,index);
		if(sel.value==-1){
			sel.value=index
			return 
		}
		if(sel.value==index){
			sel.value=-1
			return
		}
		sel.value=index
	}
	watch(()=>sel.value,(newval)=>{
		updateSel()
	})
	onMounted(() => {
		init()
	})
</script>

<style lang="scss" scoped>
	.color1{
		color: #5F2E0F;
	}
	.color2{
		color: #FF6300;
	}
	.box {
		background-color: #fdf9f6;
		padding: 30rpx;
		margin-top: 32rpx;
		border-radius: 22rpx;
		overflow: hidden;
	}

	.charge {
		width: 70rpx;
		height: 70rpx;
	}

	.list {
		display: flex;
		gap: 20rpx;
		padding: 20rpx 0;

		.item {
			padding: 36rpx 22rpx;
			border-radius: 42rpx;
			background: linear-gradient(180deg, #F5F5F5 58.54%, #FFF 104.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;
			min-width: 202rpx;

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