<!-- 表单预览 - 抽屉方式 -->
<template>
	<el-drawer
		v-model="visible"
		v-loading="loading"
		:title="dataForm.id != '' ? (dataForm.isLook == 0 ? '编辑' : '详情') : '新增'"
		:before-close="handleClose"
		:modal="false"
		size="80%"
		:wrapper-closable="false"
		class="detailDrawer"
	>
		<div>
			<v-form-render
				ref="vFormRef"
				:dynamic-creation="true"
				:form-json="dataForm.formJson"
				:form-data="dataForm.formData"
				:option-data="dataForm.optionData"
				:disabled-mode="dataForm.isLook == 1"
			></v-form-render>
			<el-button v-for="(item, index) in dataForm.btnList" v-show="dataForm.isLook == 0" v-prevent-reclick type="primary" @click="btnForm(item)"
				>{{ item.btnLabel }}
			</el-button>
		</div>
	</el-drawer>
</template>
<script setup lang="ts">
import { nextTick, reactive, ref } from 'vue'
import { getFormConfig, getInfo, saveForm, updateForm } from '../api/formDevReview'
import { ElMessage, ElMessageBox } from 'element-plus'

const emit = defineEmits(['refreshDataList'])
const visible = ref(false)
const loading = ref(false)
const vFormRef = ref()
const dataForm = reactive({
	formCode: '',
	loading: false,
	formJson: {},
	formData: {},
	optionData: {},
	formId: 0,
	btnList: [],
	id: '',
	btnCode: '',
	isLook: 0
})

const init = (formCode?: string, formData: any, isLook: number, btnCode: any) => {
	dataForm.id = ''
	dataForm.btnCode = ''
	dataForm.isLook = isLook
	if (formData) {
		dataForm.id = formData.id
	}
	// 重置表单数据
	if (vFormRef.value) {
		//vFormRef.value.resetFields()
		vFormRef.value.setFormData({})
	}
	visible.value = true

	if (formCode) {
		showForm(formCode, btnCode)
	}
}

const showForm = (formCode: any, btnCode: any) => {
	var data = { formCode: formCode }
	dataForm.formCode = formCode
	getFormConfig(data).then(response => {
    if(/(%[0-9A-F2-F]{2})+/i.test(response.data.formJson)){
      response.data.formJson = decodeURIComponent(response.data.formJson);
    }
		dataForm.formJson = JSON.parse(response.data.formJson)
		dataForm.btnList = response.data.fastFormBtnList

		if (dataForm.id != '') {
			var obj = { devFormCode: dataForm.formCode, btnCode: btnCode, btnFormData: { id: dataForm.id } }
			getInfo(obj).then(res => {
				vFormRef.value.setFormJson(dataForm.formJson)
				nextTick(() => {
					vFormRef.value.setFormData(res.data)
				})
			})
		} else {
			vFormRef.value.setFormJson(dataForm.formJson)
		}
	})
}

const btnForm = (btnData: any) => {
	if (btnData.serviceType == 10 || btnData.serviceType == 20) {
		submitForm(btnData)
	}
}
const handleClose = () => {
	visible.value = false
	vFormRef.value.setBlankFormJson()
	emit('refreshDataList')
}
const submitForm = (btnData: any) => {
	vFormRef.value
		.getFormData()
		.then(formData => {
			ElMessageBox.confirm('请确定要执行此操作吗？', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				var obj = { devFormCode: dataForm.formCode, btnCode: btnData.btnCode, btnFormData: formData }
				if (dataForm.id != '') {
					obj.btnFormData.id = dataForm.id
					updateForm(obj).then(() => {
						ElMessage.success({
							message: '修改成功',
							duration: 500,
							onClose: () => {
								handleClose()
							}
						})
					})
				} else {
					saveForm(obj).then(() => {
						ElMessage.success({
							message: '保存成功',
							duration: 500,
							onClose: () => {
								handleClose()
							}
						})
					})
				}
			})
		})
		.catch(error => {
			ElMessage.error({
				message: error,
				duration: 500
			})
		})
}
defineExpose({
	init
})
</script>
