<template>
	<view>
		<my-model title="退菜" ref="model" @close="onModelClose" @open="onModelOpen">
			<template #desc>
				<view class="u-p-30 u-text-left">
					<view>
						{{data.productName}}
					</view>
					<view class="u-flex  u-m-t-32" :class="{'gray':data.productId=='-999'}">
						<up-number-box :min="0" :max="maxNum" :buttonSize="44" v-model="number" integer
							:disabled="data.productId=='-999'">
							<template #minus>
								<view class="minus number-box-btn"></view>
							</template>
							<template #input>
								<view class="u-flex-1 u-row-center u-text-center input">
									<up-input :disabled="data.productId=='-999'" @change="parseIntNumber($event,false)"
										@blur="parseIntNumber($event,true)" v-model="number" border="none"
										type="digit"></up-input>
								</view>
							</template>
							<template #plus>
								<view class="plus number-box-btn">
									<up-icon v-if="data.productId=='-999'" name="plus" color="#ccc" size="16"
										bold></up-icon>
									<up-icon v-else name="plus" color="#999" size="16" bold></up-icon>
								</view>
							</template>
						</up-number-box>
					</view>
					<view class="u-m-t-32">
						<view class="u-font-24">
							<text class="color-999">退菜理由</text>
							<text class="color-red">*</text>
						</view>
						<view class="u-flex u-flex-wrap u-m-t-24">
							<view class="u-flex u-m-r-16 u-m-b-16" v-for="(item,index) in tags" :key="index">
								<up-tag @click="changeTagSel(item)" :text="item.label" plain borderColor="#E6FOFF"
									color="#318AFE" v-if="item.checked"> </up-tag>
								<up-tag @click="changeTagSel(item)" borderColor="#E5E5E5" color="#666"
									:text="item.label" plain v-else> </up-tag>
							</view>
						</view>
						<view class="u-m-t-24">
							<up-textarea v-model="form.note" placeholder="备注"></up-textarea>
						</view>
					</view>
				</view>
			</template>
			<template #btn>
				<view class="u-p-t-18 u-p-l-30 u-p-r-30 u-p-b-10">
					<my-button box-shadow shape="circle" @tap="confirm">确认退菜</my-button>
					<view class="u-m-t-10">
						<my-button @tap="onModelClose" shape="circle" bgColor="#fff" type="cancel"
							box-shadow>取消</my-button>
					</view>
				</view>

			</template>
		</my-model>

		<up-modal :show="confirmModal.show" title="提示" @close="confirmModalClose" @cancel="confirmModalClose"
			@confirm="confirmModalConfirm" showCancelButton>
			<view>
				<view>
					<up-radio-group v-model="confirmModal.selRefundStock">
						<up-radio v-for="(item,index) in confirmModal.refundStocks" :key="index" :label="item.name"
							:name="item.key"></up-radio>
					</up-radio-group>
				</view>
			</view>
		</up-modal>


	</view>

</template>

<script setup>
	import {
		reactive,
		ref,
		watch
	} from 'vue';
	import infoBox from '@/commons/utils/infoBox.js'
	const emits = defineEmits(['update:show', 'confirm'])
	const props = defineProps({
		data: {
			type: Object,
			default: () => {
				return {
					productId: '-999'
				}
			}
		},
		show: {
			type: Boolean,
			default: false
		}
	})
	const confirmModal = reactive({
		show: false,
		selRefundStock: false,
		refundStocks: [{
			name: '已上菜(仅退菜不退库存)',
			key: false
		}, {
			name: '未上菜(退菜后退库存)',
			key: true,
		}]
	})

	function confirmModalClose() {
		confirmModal.show = false
		confirmModal.selRefundStock = false
	}
	const form = reactive({
		note: ''
	})
	let model = ref(null)
	let modelShow = ref(props.show)
	let number = ref(0)
	let maxNum = ref(0)

	const tags = ref([{
		label: "点错",
		checked: false
	}, {
		label: "不想要了",
		checked: false
	}, {
		label: "食材不足",
		checked: false
	}, {
		label: "等待时间过长",
		checked: false
	}])
	let timer = null
	watch(() => props.show, (newval) => {
		modelShow.value = newval
	})
	watch(() => modelShow.value, (newval) => {
		emits('update:show', newval)
		if (newval) {
			open()
		} else {
			close()
		}
	})

	function parseIntNumber(val, isNow) {
		console.log(val)
		let newval = val * 1
		if (newval > props.data.num - props.data.returnNum) {
			newval = props.data.num - props.data.returnNum
		}

		if (isNow) {
			number.value = newval * 1
			return
		}
		timer = setTimeout(() => {
			number.value = newval
		}, 100)
	}

	function changeTagSel(item) {
		item.checked = !item.checked
	}

	function toggleModelShow(show) {
		modelShow.value = show ? true : false
	}


	function onModelClose() {
		number.value = 1
		modelShow.value = false
	}

	function onModelOpen() {
		modelShow.value = true
	}

	function open() {
		model.value.open()
		number.value = props.data.num - props.data.returnNum
		maxNum.value = props.data.num - props.data.returnNum
	}

	function close() {
		model.value.close()
		tags.value.map(v => {
			v.checked = false
		})
		form.note = ''
	}
	import {
		getProductDetail
	} from '@/http/api/product.js'
	import {
		getCategoryDetail
	} from '@/http/api/cateGory.js'
	async function getGoodsCategory(goods) {
		const res = await getProductDetail(goods.productId)
		if (res) {
			console.log('res', res);
			const res1 = await getCategoryDetail(res.categoryId)
			return res1
		}
		uni.showToast({
			title: '获取该商品信息数据失败',
			icon: 'none'
		})
		return null
	}

	function confirmModalConfirm() {
		refundGoods()
		confirmModalClose()
	}

	function refundGoods() {
		const selTag = tags.value.filter(item => item.checked).map(item => item.label).join(",")
		const note = selTag + (form.note.length > 0 ? "," + form.note : "");
		let par = {
			orderId: props.data.orderId,
			refundAmount: number.value * props.data.unitPrice,
			refundReason: note,
			refundStock: confirmModal.selRefundStock,
			refundDetails: [{
				id: props.data.id,
				returnAmount: number.value * props.data.unitPrice,
				num: number.value,
			}],
		}
		emits('confirm', par)
	}
	/**
	 * 确认退菜
	 */
	async function confirm() {
		const selTag = tags.value.filter(item => item.checked).map(item => item.label).join(",")
		const note = selTag + (form.note.length > 0 ? "," + form.note : "");
		console.log({
			note,
			num: number.value
		});
		if (!note) {
			return infoBox.showToast("请输入退菜原因");
		}
		const shopInfo = uni.getStorageSync('shopInfo')
		if (shopInfo.refundMode == 1) {
			const res = await getGoodsCategory(props.data)
			if (res.refundMode === 3) {
				confirmModal.show = true
				return
			}
		}
		if (shopInfo.refundMode == 2) {
			const res = await getProductDetail(props.data.productId)
			if (res.refundMode === 3) {
				confirmModal.show = true
				return
			}
		}
		refundGoods()
	}
</script>

<style lang="scss" scoped>
	.number-box-btn {
		position: relative;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 122rpx;
		height: 84rpx;
		background: #F7F7FA;
		border-radius: 8rpx 0rpx 0rpx 8rpx;
		border: 2rpx solid #F9F9F9;
		box-sizing: border-box;
	}

	.input {
		border: 2rpx solid #F9F9F9;
	}

	::v-deep .u-input__content__field-wrapper__field {
		height: 84rpx;
	}

	::v-deep .uni-input-input {
		text-align: center;
	}

	.gray {
		.minus::after {
			border-color: #ccc;
		}

	}

	.minus {
		&::after {
			content: '';
			display: block;
			width: 28rpx;
			height: 0rpx;
			border: 1px solid #999999;
		}
	}

	::v-deep .u-border {
		border-width: 1px !important;
	}

	::v-deep .u-number-box {
		width: 100%;
	}
</style>