<template>
	<el-dialog
		:close-on-click-modal="false"
		style="position: relative"
		:destroy-on-close="true"
		:close-on-press-escape="false"
		v-model="state.isShowDialog"
		width="70%"
		center
	>
		<div v-loading="state.loading" v-if="state.loading" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%"></div>
		<div v-drag="['.app-container .el-dialog', '.app-container .el-dialog__header']"></div>
		<formCreate ref="fc" v-model="formData" v-model:api="state.fApi" :rule="state.rule" :option="state.option"></formCreate>
		<template #footer>
			<el-button v-if="state.status != 2 && !state.isHiddenBtn" type="primary" @click="handleSubmit" id="xFormSubmitBtn">提交</el-button>
		</template>
	</el-dialog>
</template>
<script setup>
import { reactive, ref } from 'vue';
import { get, add, update } from '@/api/public/basic';
import { ElMessage } from 'element-plus';
import { gatherId } from '@/utils/dataGather';
import xForm from '@/xForm/pc/index.es.js';
import ganttBox from '@/views/develop/page/components/calendarBox/calendarBox.vue';
import CodeBox from '@/views/develop/page/components/codeBox/codeBox.vue';
import UploadBox from '@/views/develop/page/components/uploadBox/uploadBox.vue';

const formCreate = xForm.formCreate
xForm.component('TestGanttBox', ganttBox);
xForm.component('CodeBox', CodeBox);
xForm.component('UploadBox', UploadBox);
const emit = defineEmits(['handleQuery']);
const fc = ref();
const props = defineProps({
	bindPage: {
		type: String,
		default: '',
	},
	listId: {
		type: String,
		default: '',
	},
	query: {
		type: Object,
		default: () => {},
	},
});

const state = reactive({
	//实例对象
	fApi: {},
	//表单数据
	formData: {},
	//表单生成规则
	rule: [],
	//组件参数配置
	option: {},
	isShowDialog: false,
	// 0 新增  1 修改 2 详情
	status: 0,
	// 更新表单需要用的id
	updateId: '',
	loading: true,
});

const handleSubmit = () => {
	state.fApi.submit().then((data) => {
		// 提交成功
		let formData = state.fApi.selfAbrObj ? { ...state.fApi.formData(), ...state.fApi.selfAbrObj } : { ...state.fApi.formData() };
		if (state.updateId) {
			delete formData.proprietorId;
			delete formData.proprietorName;
			// 修改
			update(state.updateId, formData, props.listId).then((response) => {
				if (response.status == 0) {
					ElMessage.success('保存成功');
					state.isShowDialog = false;
					emit('handleQuery', props.query);
				} else {
					ElMessage.error(response.msg);
				}
			});
		} else {
			add(formData, props.listId).then((res) => {
				if (res.status == 0) {
					ElMessage.success('保存成功');
					state.updateId = res.data;
					state.isShowDialog = false;
					emit('handleQuery', props.query);
				} else {
					ElMessage.error(response.msg);
				}
			});
		}
	});
};

// 获取列表详情
const getDetail = (mainKey) => {
	get(mainKey, props.listId).then((response) => {
		if (response.status == 0) {
			state.fApi.coverValue({});
			setTimeout(() => {
				state.fApi.setValue((response.data && response.data[0]) || {});
			});
		} else {
			ElMessage.error(response.msg);
		}
	});
};

const openDialog = (status, mainKey) => {
	state.loading = true;

	// 获取表单配置
	get(props.bindPage, gatherId.PAGE_LIST_ID).then((response) => {
		if (response.status == 0) {
			const data = response.data && response.data[0];
			state.status = status;
			if (data.template) {
				const templateParse = JSON.parse(data.template);
				state.rule = templateParse.rule;
				state.option = templateParse.options;
				setTimeout(() => {
					state.isShowDialog = true;
				});
			}

			setTimeout(() => {
				// 是否隐藏按钮
				state.isHiddenBtn = state.fApi.isHiddenBtn;
				// 挂载事件
				state.fApi.selfEvents &&
					Object.keys(state.fApi.selfEvents).forEach((item) => {
						document.getElementById(`${item}`).addEventListener(`click`, () => {
							state.loading = true;
							state.fApi.selfEvents[item]().then((res) => {
								if (res) {
									state.loading = false;
									// 特定按钮处理
									if (item == 'time_save_add') {
										ElMessage.success('保存成功');
										emit('handleQuery', props.query);
									} else {
										ElMessage.success('保存成功');
										state.isShowDialog = false;
										emit('handleQuery', props.query);
									}
								} else {
									ElMessage.error('保存失败');
									state.isShowDialog = false;
								}
							});
						});
					});
			});
			if (status) {
				state.updateId = mainKey;
				if (status == 2) {
					// 禁用
					// state.fApi.disabled(true)
					// 阅读模式
					state.option.preview = true;
				}
				getDetail(mainKey);
			} else {
				// state.fApi.coverValue({})
				state.updateId = '';
				setTimeout(() => {
					// 自动写入默认值
					state.fApi.coverValue({});
					if (state.fApi.default) {
						Object.keys(state.fApi.default).forEach((key) => {
							state.fApi.setValue(key, state.fApi.default[key]);
						});
					}
				});
			}
			// 过渡
			setTimeout(() => {
				state.loading = false;
			}, 700);
		} else {
			ElMessage.error(response.msg);
		}
	});
};

defineExpose({
	openDialog,
});
</script>
