<template>
	<a-modal v-model:visible="openAddModel" :title="title" ok-text="提交" cancel-text="取消" @ok="sumbitForm"
		@cancel="cancelModal" width="50%">
		<a-form :model="createForm" layout="vertical">
			<a-row gutter="20">
				<a-col span="24">
					<a-form-item required label="套餐名称">
						<a-input v-model:value="createForm.name" placeholder="请输入套餐名称" />
					</a-form-item>
				</a-col>
				<a-col span="24">
					<a-form-item required label="套餐类型">
						<a-select v-model:value="createForm.type" placeholder="请选择套餐类型" @change="statusChange">
							<a-select-option :value="1">会员套餐</a-select-option>
							<a-select-option :value="2">服务点数</a-select-option>
						</a-select>
					</a-form-item>
				</a-col>
				<a-col span="24">
					<a-form-item required label="点数值">
						<a-input-number :min="0" type="number" v-model:value="createForm.point" placeholder="请输入点数值"
							style="width: 100%;" />
					</a-form-item>
				</a-col>
				<a-col span="24">
					<a-form-item required label="价格(元)">
						<a-input-number :min="0" type="number" v-model:value="createForm.price" placeholder="请输入价格"
							style="width: 100%;" />
					</a-form-item>
				</a-col>
				<a-col span="24">
					<a-form-item required label="会员日期延期天数">
						<a-input-number :min="0" type="number" v-model:value="createForm.day" placeholder="请输入价格"
							style="width: 100%;" />
					</a-form-item>
				</a-col>
			</a-row>
		</a-form>
	</a-modal>
</template>

<script setup lang="ts">
	import { ref, onMounted, computed, defineProps, watch, defineEmits } from 'vue';
	import { PostFeePackageAdd, PostFeePackageUpdate } from '@/apis/models';
	import { dataForm, otherDataForm, reset } from '@/views/buy/package/add/data.js';
	import { useCommon } from '@/hooks/useCommon';
	let { store, openAddModel, hideModal, message } = useCommon();
	const emit = defineEmits();
	let props = defineProps(['edit_record']);
	let title = ref<String>('新增套餐');
	let showMap = ref<Boolean>(false);

	let createForm = ref(dataForm)
	let addOtherForm = ref(otherDataForm)





	const sumbitForm = () => {
		if (createForm.value.name && createForm.value.type && createForm.value.price && createForm.value.point && createForm.value.day) {
			if (!createForm.value.id) {
				PostFeePackageAdd(createForm.value).then(res => {
					message.success('创建套餐成功');
					hideModal();
					resetForm();
					emit('successAdd');
				}).catch(err => {
				})
			} else {
				PostFeePackageUpdate(createForm.value).then(res => {
					message.success('修改套餐成功');
					hideModal();
					resetForm();
					emit('successAdd');
				}).catch(err => {
				})
			}

		} else {
			message.warning('请补充完整信息');
		}

	}

	const resetForm = () => {
		createForm.value = reset().dataForm;
	}
	const cancelModal = () => {
		emit('closeAdd');
		resetForm();
		hideModal();
		showMap.value = false;
	}


	openAddModel = computed(() => {
		return store.state.openAddModel;
	})

	watch(() => props.edit_record, (newVal) => {
		if (newVal) {
			title.value = '编辑套餐';
			console.log(newVal)
			createForm.value = {
				id: newVal.id,
				name: newVal.name,
				type: newVal.type,
				price: newVal.price,
				point: newVal.point,
				day: newVal.day,
				ad: newVal.ad,
				ad_day: newVal.ad_day,
			}
		} else {
			title.value = '新增套餐';
		}
	})
</script>

<style>

</style>