import { useRoute, useRouter } from 'vue-router'
import { cloneDeep } from 'lodash-es'
import useTabs from '@/utils/useTabs'

/**
 * 使用表单处理程序封装表单的提交、初始化和回退逻辑。
 * @param {Array} formItems 表单项配置，包含表单字段名、默认值等信息。
 * @param {Object} api 包含表单提交和获取详情方法的对象。
 * @returns {Object} 返回包含表单数据、提交加载状态、表单引用、提交函数等的对象。
 */
export default function useFormHandler(formItems, api) {
	// 初始化页面类型状态
	const state = reactive({
		PAGE_TYPE: ''
	})
	let detailData = reactive({})

	// 初始化表单数据对象
	let formData = reactive({})
	// 初始化提交加载状态
	const submitLoading = ref(false)
	// 初始化表单引用数组
	const formRefs = ref([])

	// 使用vue-router的useRoute钩子获取当前路由信息
	const route = useRoute()
	// 使用vue-router的useRouter钩子获取路由管理对象
	const router = useRouter()

	/**
	 * 根据表单项配置初始化表单数据。
	 * @param {Array} formItems 表单项配置数组。
	 * @param {Object} formData 初始化后的表单数据对象。
	 */
	const initializeFormData = (formItems, formData) => {
		formItems.forEach((item) => {
			formData[item.name] = item.defaultValue || null
		})
	}

	/**
	 * 处理表单提交逻辑。
	 * @param {Object} params 提交时额外的参数配置，包含是否深度克隆formData的标志。
	 */
	const onSubmit = async (params) => {
		try {
			// 验证所有表单字段
			await Promise.all(formRefs.value.map((form) => form.validate()))
			submitLoading.value = true

			// 根据参数配置决定是否深度克隆formData
			let formDataParam = params.isDeep ? cloneDeep(params) : formData

			// 安全地处理路由查询参数
			const safeId = validateAndCleanId(route.query.id)
			if (safeId) {
				formDataParam.id = safeId
			}

			// 调用api提交表单数据
			await api.submitForm(formDataParam, safeId)
			// 提交成功后返回上一页，并关闭当前标签页
			handleBack()
		} catch (error) {
			console.error('Validation error:', error)
		} finally {
			submitLoading.value = false
		}
	}

	/**
	 * 校验并清洁ID，确保其安全使用。
	 * @param {string} id 待校验的ID。
	 * @returns {string|undefined} 校验通过后返回清洁的ID，否则返回undefined。
	 */
	const validateAndCleanId = (id) => {
		if (id && /^[a-zA-Z0-9\-_]+$/.test(id)) {
			return id
		}
		console.warn('Invalid ID:', id)
		return undefined
	}

	/**
	 * 处理返回操作，返回上一级页面并关闭当前标签页。
	 */
	const handleBack = () => {
		useTabs.close(route)
		router.go(-1) // 优化为通用的返回上一页操作
	}

	/**
	 * 根据页面类型加载表单数据。
	 * @param {String} pageType 页面类型，用于区分新增和编辑等不同场景。
	 * @returns {Promise<Object>} 返回获取的详情数据。
	 */
	const fetchData = async (pageType) => {
		initializeFormData(formItems, formData)
		if (pageType && pageType !== 'ADD') {
			try {
				const res = await api.getDetail({ id: route.query.id })

				// 根据返回的详情数据初始化表单数据
				for (let key in formData) {
					if (res[key] !== undefined) {
						formData[key] = res[key]
					}
				}

				return res
			} catch (error) {
				console.error('API request failed:', error)
			}
		}
	}

	// 返回包含各种处理函数和状态的对象
	return {
		formData,
		submitLoading,
		formRefs,
		detailData,
		onSubmit,
		handleBack,
		fetchData,
		initializeFormData
	}
}
