<template>
	<a-modal v-model:visible="openAddModel" :title="title" ok-text="提交" cancel-text="取消" @ok="sumbitForm"
		@cancel="cancelModal" width="50%">
		<a-form :model="createForm" :label-col="{span: 4}" labelAlign="right">
			<a-row gutter="20">
				<a-col span="24">
					<a-form-item required label="代码名称" name="name">
						<a-input v-model:value="createForm.name" placeholder="请输入代码名称" />
					</a-form-item>
				</a-col>
				<a-col span="24">
					<a-form-item required label="代码code" name="code">
						<a-input v-model:value="createForm.code" placeholder="请输入代码code" />
					</a-form-item>
				</a-col>
				<a-col span="24">
					<a-form-item required label="代码值" name="value">
						<a-input v-model:value="createForm.value" placeholder="请输入代码值" />
					</a-form-item>
				</a-col>
				<a-col span="24">
					<a-form-item required label="是否显示" name="display">
						<a-radio-group v-model:value="createForm.display" @change="displayChange">
							<a-radio value="S">是</a-radio>
							<a-radio value="H">否</a-radio>
						</a-radio-group>
					</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 { PostDictAdd, PostDictUpdate } from '@/apis/models';
	import { dataForm, otherDataForm, reset } from '@/views/dictionary/list/add/data.js';
	import { useCommon } from '@/hooks/useCommon';
	let { store, openAddModel, hideModal, message, richOption } = useCommon();
	const emit = defineEmits();
	let props = defineProps(['edit_record', 'level_record']);
	let title = ref<String>('新增字典');

	let createForm = ref<DictionaryListType.addFormType>(dataForm)


	const sumbitForm = () => {
		console.log(createForm.value)
		if (!createForm.value.id) {
			PostDictAdd(createForm.value).then(res => {
				message.success('创建字典成功');
				hideModal();
				resetForm();
				emit('successAdd');
			}).catch(err => {
			})
		} else {
			PostDictUpdate(createForm.value).then(res => {
				message.success('修改字典成功');
				hideModal();
				resetForm();
				emit('successAdd');
			}).catch(err => {
			})
		}
	}

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


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

	watch(() => [props.edit_record, props.level_record], (newVal) => {
		if (newVal[0]) {
			console.log(newVal[0])
			title.value = '编辑字典';
			createForm.value = {
				id: newVal[0].id,
				code: newVal[0].code,
				name: newVal[0].name,
				display: newVal[0].display,
				childs: newVal[0].childs,
				parent_id: newVal[0].ParentId,
				value: newVal[0].value,
			}
		} else if (newVal[1]) {
			title.value = "添加子级";
			if (newVal[1].parent_id == -1) {
				createForm.value.parent_id = newVal[1].id
			} else {
				createForm.value.parent_id = newVal[1].id
			}
		} else {
			title.value = '编辑字典';
		}
		
	})
</script>

<style>

</style>