<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="请输入配置名" :disabled="disabled"/>
					</a-form-item>
				</a-col>
				<a-col span="24">
					<a-form-item required label="请选择文本格式">
						<a-radio-group v-model:value="createForm.txt_mode" button-style="solid" @change="txtModeChange">
							<a-radio-button :value="1">普通文本</a-radio-button>
							<a-radio-button :value="2">带有格式的文本</a-radio-button>
						</a-radio-group>
					</a-form-item>
				</a-col>
				<a-col span="24" v-if="createForm.txt_mode == 1">
					<a-form-item required label="配置内容" name="value">
						<a-textarea v-model:value="createForm.value" placeholder="请输入配置内容" />
					</a-form-item>
				</a-col>
				<a-col span="24" v-if="createForm.txt_mode == 2">
					<a-form-item required label="配置内容" name="value">
						<QuillEditor theme="snow" :options="options" toolbar="full"
							v-model:content="addOtherForm.value" @update:content="onEditorUpdate($event)"
							contentType="html" />
					</a-form-item>
				</a-col>
				<a-col span="24">
					<a-form-item required label="备注" name="mobile">
						<a-input v-model:value="createForm.remark" placeholder="请输入备注" />
					</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 { PostSysconfigAdd, PostSysconfigUpdate } from '@/apis/models';
	import he from 'he';
	import { dataForm, otherDataForm, reset } from '@/views/setting/item/add/data.js';
	import { useCommon } from '@/hooks/useCommon';
	let { store, openAddModel, hideModal, message, richOption } = useCommon();
	const emit = defineEmits();
	let props = defineProps(['edit_record']);
	let title = ref<String>('新增配置项');
	let showMap = ref<Boolean>(false);
	const options = ref(richOption)
	let disabled = ref<Boolean>(false);
	let createForm = ref<SettingListType.addFormType>(dataForm)
	let addOtherForm = ref<SettingListType.addOtherFormType>(otherDataForm)
	
	const txtModeChange = (data) => {
		if(title.value != "编辑配置项") {
			createForm.value.value = ''
			addOtherForm.value.value = ''
		}
	}

	// 富文本
	const onEditorUpdate = (data) => {
		createForm.value.value = data
	}


	const sumbitForm = () => {
		if (createForm.value.name && createForm.value.value) {
			if (!createForm.value.id) {
				PostSysconfigAdd(createForm.value).then(res => {
					message.success('创建配置项成功');
					hideModal();
					resetForm();
					emit('successAdd');
				}).catch(err => {
				})
			} else {
				PostSysconfigUpdate(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) {
			disabled.value = true;
			title.value = '编辑配置项';
			if(newVal.txt_mode == 1) {
				createForm.value.value = newVal.value
			} else {
				addOtherForm.value = {
					value: he.decode(newVal.value),
				}
			}
			createForm.value = {
				id: newVal.id,
				name: newVal.name,
				value: newVal.value,
				remark: newVal.remark,
				txt_mode: newVal.txt_mode
			}
		} else {
			disabled.value = false;
			title.value = '新增配置项';
		}
	})
</script>

<style>

</style>