<template>
	<view class="u-p-l-30 u-p-r-30 u-p-t-30  u-font-28 ">
		<up-sticky offset-top="0">
			<my-tabs v-model="myQuan.types.sel" :list="myQuan.types.list"></my-tabs>
		</up-sticky>
		<view class="u-m-t-32">
			<template v-if="myQuan.types.sel==0">
				<view class="" @click="changeFullReductionCouponSel(item)"
					v-for="(item,index) in myQuan.res.fullReductionCoupon" :class="{filtergray:!item.use}" :key="index">
					<view class="quan  u-row-between u-flex u-col-center u-m-b-32 border-r-10 ">
						<view class="no-use" v-if="!item.use">
							<image class="img" src="/pagesOrder/static/image/no-use.svg" mode=""></image>
						</view>
						<view class="sel u-abso" v-if="item.id==myQuan.fullReductionCouponSel.id ">
							<up-icon name="checkbox-mark" color="#fff"></up-icon>
						</view>
						<view class="u-p-t-32 u-p-b-32 u-p-l-24 u-p-r-24 left">
							<view class="u-flex">
								<view class="hui">减</view>
								<view class="u-m-l-18">{{item.name}}</view>
							</view>
							<view class=" u-m-t-20 u-flex">
								<view>有效期:</view>
								<view class="u-font-24 u-m-l-6"> {{dayjs(item.endTime).format('YYYY-MM-DD HH:mm:ss') }}
								</view>
							</view>
							<view class="u-m-t-10 color-999 u-font-24">
								{{ formatStr(item.useRestrictions)}}
							</view>
						</view>
						<view class="right u-flex u-flex-col u-row-between">
							<view class="u-flex u-row-center u-font-36 ">
								￥{{item.discountAmount}}
							</view>
							<view class="u-flex u-font-24">
								满{{item.fullAmount}}可用
							</view>
							<view class="u-flex ">
								<view class="use-btn" @click.stop="toEmitChooseQuan(item)">去使用</view>
							</view>
						</view>
					</view>
				</view>
				<template v-if="myQuan.res.fullReductionCoupon.length<=0&&myQuan.hasAjax">
					<my-img-empty tips="暂无可用优惠券"></my-img-empty>
				</template>
			</template>

			<template v-if="myQuan.types.sel==1">
				<view class="" @click="changeProductCoupon(item)" v-for="(item,index) in myQuan.res.productCoupon"
					:class="{filtergray:!item.use}" :key="index">
					<view class="quan goods u-row-between u-flex u-col-center u-m-b-32 border-r-10 u-relative">
						<view class="no-use" v-if="!item.use">
							<image class="img" src="/pagesOrder/static/image/no-use.svg" mode=""></image>
						</view>
						<view class="sel u-abso" v-if="item.checked">
							<up-icon name="checkbox-mark" color="#fff"></up-icon>
						</view>
						<view class="u-p-t-32 u-p-b-32 u-p-l-24 u-p-r-24 left">
							<view class="u-flex">
								<up-image width="80rpx" height="80rpx" :src="item.productCover"></up-image>
								<view class="u-m-l-18">
									<view class="u-m-l-18">{{item.productName}}</view>
									<view class="u-m-l-18 u-m-t-10 u-font-24 color-666">x{{item.num}}</view>
								</view>
							</view>
							<view class=" u-m-t-14 u-flex">
								<view>有效期:</view>
								<view class="u-font-24 u-m-l-6"> {{dayjs(item.endTime).format('YYYY-MM-DD HH:mm:ss') }}
								</view>
							</view>
							<view class="u-m-t-10 color-999 u-font-24">
								{{ formatStr(item.useRestrictions)}}
							</view>
						</view>
						<view class="right u-flex u-flex-col u-col-bottom u-row-center">
							<!-- <view class="u-flex u-row-center w-full">
								<view class="color-red font-bold u-m-b-24 ">￥{{item.discountAmount}}</view>
							</view> -->
							<view class="u-flex ">
								<view class="use-btn" @click.stop="toEmitChooseQuan(item)">去使用</view>
							</view>
						</view>
					</view>

				</view>
				<template v-if="myQuan.res.productCoupon.length<=0&&myQuan.hasAjax">
					<my-img-empty tips="暂无可用优惠券"></my-img-empty>
				</template>
			</template>


		</view>

		<view :style="{height:safebottomHeight+'px'}"></view>
		<view class="fixed-b   bottom safe-bottom border-top">

			<view class="u-m-b-32 u-flex u-row-between u-p-t-10">
				<view class="u-flex">
					<text>抵扣金额：</text>
					<text class="color-red">￥</text>
					<text class="color-red">{{discountAmount}}</text>
				</view>
				<view class="u-flex u-relative">
					<text>支付金额：</text>
					<text class="color-red">￥</text>
					<text class="color-red">{{payPrice }}</text>
					<view class="u-absolute u-flex u-row-between" style="bottom: 100%;right: 0;"
						v-if="payPrice*1!=option.orderPrice*1">
						<view class="u-flex line-th color-999">
							<text class="">￥</text>
							<text class="">{{option.orderPrice}}</text>
						</view>
					</view>
				</view>
			</view>
			<view class="u-flex gap-20">
				<up-button shape="circle" plain @click="back">
					<view class="font-bold">取消</view>
				</up-button>
				<up-button shape="circle" type="primary" @click="toEmitChooseQuan()">
					<view class="font-bold">确定</view>
				</up-button>
			</view>

		</view>

		<up-modal :title="modal.title" :content="modal.content" :show="modal.clear" :confirmText="modal.confirmText"
			:cancelText="modal.cancelText" showCancelButton closeOnClickOverlay @confirm="confirmModelConfirm"
			@cancel="confirmModelCancel" @close="setModalShow('clear',false)" width="300px" />
	</view>

</template>

<script setup>
	import {
		ref,
		reactive,
		watch,
		computed,
		onMounted
	} from 'vue';
	import color from '@/commons/color.js'
	import dayjs from 'dayjs';
	import {
		getSafeBottomHeight
	} from '@/commons/utils/safe-bottom.js'
	import go from '@/commons/utils/go.js'
	import {
		onLoad,
		onReady
	} from '@dcloudio/uni-app'
	import * as orderApi from '@/http/yskApi/order.js'
	import {
		$activateByOrderId
	} from '@/http/yskApi/Instead.js'
	import infoBox from '@/commons/utils/infoBox.js'
	import {
		queryAllShopUser
	} from '@/http/yskApi/shop-user.js'
	import {
		returnNewGoodsList,
		returnCoupCanUse,
		returnCouponAllPrice,
		returnProductCoupon,
		returnCanUseFullReductionCoupon
	} from '../quan_util.js'

	const modal = reactive({
		title: '提示',
		cancelText: '取消',
		confirmText: '确定',
		content: '',
		key: '',
		clear: false,
		data: ''
	})

	function confirmModelCancel() {
		setModalShow('clear', false, '')
	}
	async function confirmModelConfirm() {
		if (modal.key == 'clear') {
			myQuan.fullReductionCouponSel = {
				id: ''
			}
			const item = modal.data
			item.checked = !item.checked
			const CheckedArr = myQuan.res.productCoupon.filter(v => v.checked)
			const noCheckedArr = myQuan.res.productCoupon.filter(v => !v.checked)
			noCheckedArr.map(v => {
				console.log(returnCoupCanUse(canDikouGoodsArr, v, CheckedArr));
				v.use = returnCoupCanUse(canDikouGoodsArr, v, CheckedArr)
			})
			setModalShow('clear', false, '')
		}
	}

	function setModalShow(key = 'show', show = true, data) {
		modal.key = key
		modal[key] = show
		modal.data = data
	}



	function back() {
		uni.navigateBack()
	}
	let order = ref({

	})
	let canDikouGoodsArr = []
	const myQuan = reactive({
		fullReductionCouponSel: {
			id: ''
		},
		res: {
			fullReductionCoupon: [],
			productCoupon: []
		},
		types: {
			list: ['满减券(单选)', '商品券(多选)'],
			sel: 0
		},
		list: [],
		sel: -1,
		hasAjax: false
	})

	function changeProductCoupon(item) {
		if (!item.use) {
			return
		}
		if (myQuan.fullReductionCouponSel.id && !item.checked) {
			const goodsQuan = myQuan.res.productCoupon.filter(v => v.checked)
			const fullReductionCoupon = myQuan.fullReductionCouponSel.id ? [myQuan.fullReductionCouponSel] : []
			let coupArr = [...goodsQuan, item]
			const payPrice = option.orderPrice - returnCouponAllPrice(coupArr, canDikouGoodsArr, user.value)
			if (payPrice<=0) {
				modal.content = '选择该商品券后支付金额将为0，继续选择将取消选择的满减券'
				modal.cancelText = '取消'
				modal.confirmText = '继续选择'
				setModalShow('clear', true, item)
				return
			}
			if (myQuan.fullReductionCouponSel.fullAmount > payPrice) {
				modal.content = '选择该商品券后将不满足选择抵扣券的最低满减需求，继续选择将取消选择的满减券'
				modal.cancelText = '取消'
				modal.confirmText = '继续选择'
				setModalShow('clear', true, item)
				return
			}
		}

		item.checked = !item.checked
		const CheckedArr = myQuan.res.productCoupon.filter(v => v.checked)
		if (CheckedArr.length <= 0) {
			return myQuan.res.productCoupon.map(v => {
				v.use = true
			})
		}
		const noCheckedArr = myQuan.res.productCoupon.filter(v => !v.checked)
		noCheckedArr.map(v => {
			console.log(returnCoupCanUse(canDikouGoodsArr, v, CheckedArr));
			v.use = returnCoupCanUse(canDikouGoodsArr, v, CheckedArr)
		})
		
		
	}

	function changeFullReductionCouponSel(item) {
		if (!item.use) {
			return
		}
		console.log(item);
		if (item.id == myQuan.fullReductionCouponSel.id) {
			myQuan.fullReductionCouponSel = {
				id: ''
			}
		} else {
			myQuan.fullReductionCouponSel = item
		}
		myQuan.res.fullReductionCoupon = returnCanUseFullReductionCoupon($fullReductionCoupon, payPrice.value, myQuan
			.fullReductionCouponSel)
	}

	function formatStr(str) {
		console.log(str);
		if(!str){
			return ''
		}
		const reg=/^[,]+|[,]+$/g;
		return `${str}`.replace(reg, '')
	}

	function toUse(item) {

	}
	let user = reactive({
		isVip: false
	})

	let $fullReductionCoupon = []
	let $productCoupon = []
	async function getQuan() {
		order.value = await orderApi.tbOrderInfoDetail(option.orderId)
		if (order.value.memberId) {
			const userRes = await queryAllShopUser({
				id: order.value.memberId
			})
			if (userRes.content[0]) {
				user.value = userRes.content[0]
			}
		}

		console.log(order.value);
		const res = await $activateByOrderId({
			orderId: option.orderId,
			memberId: option.memberId
		})
		canDikouGoodsArr = returnNewGoodsList(order.value.detailList || [])
		res.fullReductionCoupon = res.fullReductionCoupon.map((v) => {
			if(option.orderPrice<=0){
				return {...v,use:false}
			}else{
				return{
					...v,
					use:v.use && option.orderPrice * 1 >= v
					.fullAmount * 1
				}  
			}
			
		})
		res.productCoupon = res.productCoupon.map(v => {
			const calcCoup = returnProductCoupon(v, canDikouGoodsArr, user.value)
			return {
				...calcCoup,
				checked: false,
				use:option.orderPrice<=0?false:v.use
			}
		}).filter((v) => v.use);
		$fullReductionCoupon = res.fullReductionCoupon
		$productCoupon = res.productCoupon
		myQuan.res = res
		myQuan.hasAjax = true;
	}
	const option = reactive({
		orderId: '',
		memberId: '',
		orderPrice: 0
	})

	function toEmitChooseQuan(item) {
		let arr = []
		if (item) {
			arr = [item]
		} else {
			if (myQuan.fullReductionCouponSel.id) {
				arr.push(myQuan.fullReductionCouponSel)
			}
			const goodsQuan = myQuan.res.productCoupon.filter(v => v.checked)
			arr.push(...goodsQuan)
		}
		uni.$emit('choose-quan', arr)
		back()
	}
	const discountAmount = computed(() => {
		const goodsQuan = myQuan.res.productCoupon.filter(v => v.checked)
		const fullReductionCoupon = myQuan.fullReductionCouponSel.id ? [myQuan.fullReductionCouponSel] : []
		let coupArr = [...fullReductionCoupon, ...goodsQuan]
		return returnCouponAllPrice(coupArr, canDikouGoodsArr, user.value)
	})
	const payPrice = computed(() => {
		const pay = option.orderPrice - discountAmount.value
		return (pay < 0 ? 0 : pay).toFixed(2)
	})
	watch(() => myQuan.types.sel, (newval) => {
		if (newval == 0) {
			myQuan.res.fullReductionCoupon = returnCanUseFullReductionCoupon($fullReductionCoupon, payPrice.value,
				myQuan.fullReductionCouponSel)
		}
		if (newval == 1) {

		}
	})
	onLoad((opt) => {
		Object.assign(option, opt)
		getQuan()
	})
	let safebottomHeight = ref(0)
	onReady(() => {
		getSafeBottomHeight('bottom', 0).then(height => {
			console.log(height);
			safebottomHeight.value = height
		})
	})
</script>

<style lang="scss" scoped>
	// $quan-color:rgb(233, 77, 60);
	$quan-color: #318AFE;

	.no-use {
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		display: flex;
		justify-content: center;
		align-items: center;

		.img {
			width: 200rpx;
			height: 200rpx;
			z-index: 10;
		}
	}

	.fixed-b {
		position: fixed;
		bottom: 0;
		background-color: #fff;
		right: 0;
		left: 0;
	}

	.bg-gray {
		border-radius: 18rpx;
		overflow: hidden;
	}

	.price1 {
		color: rgb(255, 107, 0);
	}

	.payType {
		.radio {
			display: flex;
			justify-content: center;
			align-items: center;
			background-color: rgb(255, 212, 0);
			width: 40rpx;
			height: 40rpx;
			border-radius: 40rpx;
			opacity: 0;

		}

		.active {
			.radio {
				opacity: 1;
			}
		}
	}

	.left-block {
		position: relative;

		&::after {
			content: '';
			position: absolute;
			left: -30rpx;
			display: block;
			width: 12rpx;
			top: 0;
			background-color: rgb(255, 212, 0);
			bottom: 0;
		}
	}

	.filtergray {
		filter: grayscale(1);
	}

	.radio {
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: rgb(255, 255, 255);
		width: 40rpx;
		height: 40rpx;
		border-radius: 40rpx;

		&.active {}
	}

	.use-btn {
		background-color: #fff;
		border-radius: 100rpx;
		padding: 4rpx 20rpx;
		color: $quan-color;
	}

	.u-font-40 {
		font-size: 40rpx;
	}

	.yilingqu {
		position: absolute;
		bottom: 20rpx;
		right: 20rpx;
	}

	.lingqu {
		position: absolute;
		bottom: 20rpx;
		right: 20rpx;
		background-color: rgb(255, 207, 0);
		padding: 10rpx 30rpx;
		border-radius: 100rpx;
	}

	.btn {
		background-color: $my-main-color;
		color: #fff;
		border: none;
		padding: 10rpx 20rpx;
		border-radius: 10rpx;
	}

	.hui {
		// background-color: $quan-color;
		background-image: linear-gradient(to right bottom, rgb(254, 103, 4), rgb(241, 50, 42));
		padding: 4rpx 10rpx;
		border-radius: 10rpx;
		font-size: 24rpx;
		color: #fff;
	}

	.quan {
		border: 1px solid rgb(238, 238, 238);
		position: relative;
		border-radius: 10rpx;
		box-shadow: 0 0 5px #eee;
		overflow: hidden;
		.left{
			max-width: 70%;
		}
		.sel {
			padding: 2rpx 4rpx;
			position: absolute;
			background-color: $quan-color;
			left: 0;
			top: 0;
			border-radius: 0 0 24rpx 0;
		}

		.right {
			position: absolute;
			top: 0;
			right: 0;
			bottom: 0;
			padding: 20rpx 24rpx;
			color: #fff;
			display: flex;
			flex-direction: column;
			background-color: $quan-color;
			height: 100%;
		}

		&.goods {
			.right {
				background-color: #fff;
				position: initial;

				.use-btn {
					padding: 10rpx 40rpx;
					color: #fff;
					background-color: $quan-color;
				}
			}
		}
	}

	.bottom {
		padding: 30rpx 30rpx 80rpx 30rpx;
	}
</style>