<template>
	<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">
					<up-number-box :min="1" :max="data.num" :buttonSize="44" v-model="number" integer>
						<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 @change="parseIntNumber($event,false)" @blur="parseIntNumber($event,true)"
									v-model="number" border="none" type="number"></up-input>
							</view>
						</template>
						<template #plus>
							<view class="plus number-box-btn">
								<up-icon 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-30">
				<my-button box-shadow shape="circle" @tap="confirm">确认退菜</my-button>
				<view class="u-m-t-10">
					<my-button @tap="toggleModelShow" shape="circle" bgColor="#fff" type="cancel"
						box-shadow>取消</my-button>
				</view>
			</view>

		</template>
	</my-model>
</template>

<script setup>
	import {
		reactive,
		ref,
		watch
	} from 'vue';
	import infoBox from '@/commons/utils/infoBox.js'
	const props = defineProps({
		data: {
			type: Object,
			default: () => {}
		},
		show: {
			type: Boolean,
			default: false
		}
	})
	const form = reactive({
		note: ''
	})
	const emits = defineEmits(['update:show', 'confirm'])
	let model = ref(null)
	let modelShow = ref(props.show)
	let number = ref(1)
	const tags = ref([{
		label: "点错",
		checked: false
	}, {
		label: "不想要了",
		checked: false
	}, {
		label: "食材不足",
		checked: false
	}, {
		label: "等待时间过长",
		checked: false
	}])
	let timer = null

	function parseIntNumber(val, isNow) {
		console.log(val);
		let newval = parseInt(val)
		if (newval > props.data.num) {
			newval = props.data.num
		}
		if (newval < 1) {
			newval = 1
		}
		if (isNow) {
			number.value = parseInt(newval)
			return
		}
		timer = setTimeout(() => {
			number.value = newval
		}, 100)
	}

	function changeTagSel(item) {
		item.checked = !item.checked
	}
	watch(() => props.show, (newval) => {
		modelShow.value = newval
	})
	watch(() => modelShow.value, (newval) => {
		emits('update:show', newval)
		if (newval) {
			open()
		} else {
			close()
		}
	})

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

	function onModelClose() {
		modelShow.value = false
	}

	function onModelOpen() {
		modelShow.value = true
	}

	function open() {
		model.value.open()
	}

	function close() {
		model.value.close()
	}

	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("请输入退菜原因");
		}
		emits('confirm', {
			note,
			num: number.value
		})
	}
</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;
	}

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