<template>
	<u-popup
		v-model:show="popupVisible"
		mode="center"
		round="20"
		:safe-area-inset-bottom="false"
		@close="handlePopupClose"
	>
		<HazardFormPanel
			ref="panelRef"
			v-bind="panelProps"
			:show="popupVisible"
			@update:show="popupVisible = $event"
			@success="(payload) => emit('success', payload)"
			@confirm="(payload) => emit('confirm', payload)"
			@clear-draft="emit('clear-draft')"
			@close="popupVisible = false"
		/>
	</u-popup>
</template>

<script setup>
import { computed, ref } from 'vue';
import HazardFormPanel from './HazardFormPanel.vue';

const props = defineProps({
	show: {
		type: Boolean,
		default: false
	},
	title: {
		type: String,
		default: '填写隐患信息'
	},
	mode: {
		type: String,
		default: 'collect'
	},
	modelValue: {
		type: Object,
		default: null
	},
	extraParams: {
		type: Object,
		default: () => ({})
	},
	showDraftBanner: {
		type: Boolean,
		default: false
	},
	bodyHeight: {
		type: String,
		default: ''
	},
	canvasId: {
		type: String,
		default: 'hazardFormWatermarkCanvas'
	}
});

const emit = defineEmits(['update:show', 'update:modelValue', 'success', 'confirm', 'clear-draft']);

const popupVisible = computed({
	get: () => props.show,
	set: (value) => emit('update:show', value)
});

const panelProps = computed(() => ({
	title: props.title,
	mode: props.mode,
	modelValue: props.modelValue,
	extraParams: props.extraParams,
	showDraftBanner: props.showDraftBanner,
	bodyHeight: props.bodyHeight,
	canvasId: props.canvasId
}));

const handlePopupClose = () => {
	popupVisible.value = false;
};

const panelRef = ref(null);

defineExpose({
	getPayload: (...args) => panelRef.value?.getPayload?.(...args),
	applyPayload: (...args) => panelRef.value?.applyPayload?.(...args),
	resetForm: (...args) => panelRef.value?.resetForm?.(...args),
	validateForm: (...args) => panelRef.value?.validateForm?.(...args)
});
</script>
