<template>
	<my-model ref="model" :title="title" iconColor="#000" @close="resetForm">
		<template #desc>
			<view class="u-text-left u-p-30 ">
				<view class="u-m-t-32 u-flex ">
					<uni-easyinput type="textarea" v-model="form.remark" placeholder="请输入规则内容"></uni-easyinput>
				</view>

			</view>
		</template>
		<template #btn>
			<view class="u-p-30">
				<view class="u-m-t-10">
					<my-button @tap="confirm" shape="circle" showShadow>确认</my-button>
					<my-button type="cancel" bgColor="#fff" @tap="close">
						<view class="color-999">取消</view>
					</my-button>
				</view>
			</view>
		</template>
	</my-model>
</template>

<script setup>
	import {
		reactive,
		nextTick,
		ref
	} from 'vue';
	import myModel from '@/components/my-components/my-model.vue'
	import myButton from '@/components/my-components/my-button.vue'
	import myTabs from '@/components/my-components/my-tabs.vue'
	const props = defineProps({
		title: {
			type: String,
			default: ''
		},
		data: {
			type: Array,
			default: []
		}
	})


	function changeCauses(item) {
		let prve = form.remark.length ? ',' : ''
		form.remark += prve + item.name
	}

	const causes = reactive([{
			name: '免葱',
			checked: false
		},
		{
			name: '免香菜',
			checked: false
		},
		{
			name: '不要辣',
			checked: false
		}
	])


	function setForm(key, val) {
		form[key] = val
	}




	const $form = {
		remark: ''
	}
	const form = reactive({
		...$form
	})

	function resetForm() {
		type='add'
		$item={}
		Object.assign(form, {
			...$form
		})
	}

	const model = ref(null)
	
	let type='add'
	let $item={}
	function open(item) {
		if(item!==undefined){
			form.remark=item.data||''
			type='edit'
			$item=item
		}
		model.value.open()
		
	}

	function close() {
		model.value.close()
	}
	const emits = defineEmits(['confirm'])

	function confirm() {
		const {
			remark
		} = form
		if (remark.replace(/\s*/g,'') === '') {
			return uni.showToast({
				title: '请输入规则内容',
				icon: 'none'
			})
		}
		emits('confirm', {...$item,data:remark,type})
		close()
	}
	defineExpose({
		open,
		close
	})
</script>

<style lang="scss">

</style>