<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 :buttonSize="44" :inputWidth="220" v-model="number"></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 v-if="item.checked"> </up-tag>
							<up-tag @click="changeTagSel(item)" borderColor="#E5E5E5" color="#999" :text="item.label" plain v-else> </up-tag>
						</view>
					</view>
					<view class="u-m-t-24">
						<up-input placeholder="备注"></up-input>
					</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 {
		ref,
		watch
	} from 'vue';
	const props = defineProps({
		data: {
			type: Object,
			default: () => {}
		},
		show: {
			type: Boolean,
			default: false
		}
	})
	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}])
	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(){
		emits('confirm')
	}
</script>

<style>
</style>