<template>
	<view class="min-page bg-gray u-p-30">
		<view class="bg-fff u-p-24 border-r-12 u-flex u-row-between">
			<view>全退</view>
			<view>
				<my-radio v-model="allTui" :disabled="option.productId=='-999'"></my-radio>
			</view>
		</view>
		<view class="u-m-t-24 u-font-24 u-font-24">
			<text class="color-red">*</text>
			<text>客座费只能全退</text>
		</view>
		<view class="bg-fff  border-r-12  list u-m-t-32">
			<view class="u-flex u-row-between border-top item u-p-t-32 u-p-b-32"
				v-for="(item,index) in orderDetail.goodsList" :key="index">
				<view>
					<view>{{item.productName}}</view>
					<view class="u-m-t-10 color-999 u-font-24">{{item.productSkuName||""}}</view>
					<view class="u-m-t-10 color-999 u-font-24">最多可退×{{item.num}}</view>
				</view>
				<template v-if="option.productId=='-999'">
					<view class="u-flex">
						<view class="color-red" >￥{{item.priceAmount}}</view>
						<view class="u-flex u-m-l-32 u-col-center">
							<view class="u-m-l-28 u-m-r-28">x{{item.number}}</view>
						</view>
					</view>
				</template>
				<template v-else>
					<view class="u-flex">
						<view class="color-red" v-if="!option.userCouponId">￥{{item.priceAmount}}</view>
						<view class="u-flex u-m-l-32 u-col-center">
							<up-icon @click="changeItem(item,-1)" :size="20" name="minus-circle"></up-icon>
							<view class="u-m-l-28 u-m-r-28">{{item.number}}</view>
							<up-icon @click="changeItem(item,1)" :color="color.ColorMain" :size="20"
								name="plus-circle-fill"></up-icon>
						</view>
					</view>
				</template>
			</view>
		</view>
		<template v-if="!option.userCouponId">
			<view class="bg-fff u-m-t-32 u-p-24 border-r-12 u-flex u-row-between" >
				<view>支付金额</view>
				<view>
					{{to2(totalPrice)}}元
				</view>
			</view>
			<view class="bg-fff u-m-t-32 u-p-24 border-r-12 u-flex u-row-between" >
				<view>退款金额</view>
				<view class="color-red">
					{{to2(tuikuanPrice)}}元
				</view>
			</view>
		</template>
		
		<view class="bg-fff u-p-24 border-r-12  u-m-t-32">
			<view>退回优惠券</view>
			<view class="u-font-24 color-999 u-m-t-16" v-if="!option.userCouponId">
				该订单未使用优惠券
			</view>
		</view>
		<view class="bg-fff u-p-24 border-r-12  u-m-t-32">
			<view>
				<text class="color-red">*</text>
				<text>退款原因</text>
			</view>
			<view class="u-m-t-24 u-flex u-flex-wrap gap-28">
				<view class="tag" @click="changeTuiKuanSel(index)" :class="{active:index==tuikuan.sel}"
					v-for="(item,index) in tuikuan.list" :key="index">
					{{item}}
				</view>
			</view>
			<view class="u-m-t-24">
				<up-textarea placeholder="选填" v-model="note"></up-textarea>
			</view>
		</view>

		<view style="height: 200rpx;"></view>
		<view class="fixed-b">
			<up-button text="确认退款" @click="tuikuanConfirm" shape="circle" type="primary" size="large"
				:color="color.ColorMain"></up-button>
		</view>

	</view>
</template>

<script setup>
	import color from '@/commons/color.js';
	import infoBox from '@/commons/utils/infoBox.js';
	import * as orderApi from '@/http/yskApi/order.js'
	import {hasPermission} from '@/commons/utils/hasPermission.js'
	import {
		$returnOrder
	} from '@/http/yskApi/Instead.js'
	import {
		onLoad,
		onShow,
		onHide
	} from '@dcloudio/uni-app';
	import {
		computed,
		reactive,
		ref,
		watch
	} from 'vue';
	let allTui = ref(false)
	let note = ref('')
	const tuikuan = reactive({
		list: ['点错', '数量点错', '客人要求', '协商退费'],
		sel: -1
	})

	function changeTuiKuanSel(i) {
		tuikuan.sel = i
	}
	const orderDetail = reactive({
		goodsList: [],
		info: {},
		seatFee: {
			totalAmount: 0
		}
	})

	watch(() => allTui.value, (newval) => {
		orderDetail.goodsList.map(v => {
			v.number = newval ? v.num : 0
		})
	})

	const totalNumber = computed(() => {
		return orderDetail.goodsList.reduce((prve, cur) => {
			return prve + cur.num * 1
		}, 0)
	})
	const tuikuanNumber = computed(() => {
		return orderDetail.goodsList.reduce((prve, cur) => {
			return prve + cur.number * 1
		}, 0)
	})

	const totalPrice = computed(() => {
		return orderDetail.goodsList.reduce((prve, cur) => {
			return prve + cur.priceAmount * 1
		}, 0)
	})
	const tuikuanPrice = computed(() => {
		return orderDetail.goodsList.reduce((prve, cur) => {
			const n=(cur.number/cur.num*100) * cur.priceAmount
			return prve + (n/100).toFixed(2)
		}, 0)
	})


	function to2(n) {
		return Number(n).toFixed(2);
	}

	function changeItem(item, step) {
		if(item.productId=='-999'){
			return
		}
		console.log(item);
		let newval = item.number * 1 + step * 1;
		if (newval <= 0) {
			newval = 0;
		}
		if (newval >= item.num) {
			newval = item.num;
		}
		item.number = newval;
		allTui.value = totalNumber.value == tuikuanNumber.value ? true : false;
	}

	async function tuikuanConfirm() {
		const canTuikuan=await hasPermission('允许退款')
		if(!canTuikuan){
			return infoBox.showToast('您没有退款权限')
		}
		if (tuikuanNumber.value <= 0) {
			return infoBox.showToast('退款商品数量不能为0！')
		}
		const selTag=tuikuan.list[tuikuan.sel]
		const noteResult=`${selTag?selTag:''}${note.value?(','+note.value):''}` 
		if (!noteResult) {
			return infoBox.showToast('请输入或选择退款原因！')
		}
		await $returnOrder({
			"orderId": option.orderId,
			"note":noteResult,
			"orderDetails":orderDetail.goodsList.filter(v=>v.number*1).map(v=>{
				return {
					id:v.id,
					num:v.number*1
				}
			})
		})
		 infoBox.showToast('退款请求提交成功')
		setTimeout(()=>{
			uni.navigateBack({delta:1})
		},500)
	}
	const option=reactive({
		productId:'-999'
	})
	onLoad((opt) => {
		Object.assign(option,opt)
		if(opt.productId=='-999'){
			allTui.value=true
		}
		if (Array.isArray(opt)) {
			orderDetail.goodsList = opt
		} else {
			orderDetail.goodsList = [opt]
		}
		console.log(opt);
	})
</script>

<style lang="scss" scoped>
	.fixed-b {
		position: fixed;
		left: 110rpx;
		right: 110rpx;
		bottom: calc(env(safe-area-inset-bottom) + 32rpx);
		/* #ifdef H5 */
		bottom: 100rpx;
		/* #endif */
	}

	.gap-28 {
		gap: 28rpx;
		font-size: 24rpx;
	}

	.list {
		padding: 0 24rpx;
	}

	.list .item:first-child {
		border: none;
	}

	.tag {
		padding: 8rpx 16rpx 6rpx 16rpx;
		border: 1px solid #E5E5E5;
		border-radius: 4rpx;

		&.active {
			border-color: #E6F0FF;
			color: $my-main-color;
		}
	}
</style>