<template>
	<my-model ref="model" :title="title" iconColor="#000" @close="resetForm">
		<template #desc>
			<view class="u-text-left u-p-30 ">
				<view>
					<view>名称</view>
					<view class="u-m-t-24 border u-flex input-box">
						<input v-model="form.name" type="text" placeholder-class="placeholder-class"
							placeholder="请输入名称" />
					</view>
				</view>
				<view class="u-m-t-32">
					<view>价格</view>
					<view class="u-m-t-24 border u-flex input-box">
						<input v-model="form.price" type="digit" placeholder-class="placeholder-class"
							placeholder="请输入价格" />
					</view>
				</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="confirm">取消</my-button>
				</view>
			</view>
		</template>
	</my-model>
</template>

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

	const $form = {
		name: '',
		price: ''
	}
	const form = reactive({...$form})

	function resetForm() {
		Object.assign(form,{...$form})
	}

	const model = ref(null)

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

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

	function confirm() {
		const {
			name,
			price
		} = form
		if (!name) {
			return uni.showToast({
				icon: 'none',
				title: '请输入附加费名称'
			})
		}
		close()
		emits('confirm',{
			name,
			price
		})
	}
	defineExpose({
		open,
		close
	})
</script>

<style lang="scss">
	.border {
		border: 1px solid #E5E5E5;
		border-radius: 4rpx;
	}

	.input-box {
		padding: 22rpx 32rpx;
		font-size: 28rpx;
		color: #666;
	}

	.placeholder-class {
		font-size: 28rpx;
	}
</style>