import { messageMethod } from '../../utils/message-util'
import { getCurrentInstance, reactive, Ref, ref } from 'vue'
import BaseTable from '../../components/table/BaseTable.vue'
import { UnwrapNestedRefs } from 'vue'
import { BasePo } from '../../entity/common/base'

interface Col {
	/**
	 * 栅格占位格数，为 0 时相当于 display: none
	 */
	span?: number
	/**
	 * 栅格左侧的间隔格数，间隔内不可以有栅格
	 */
	offset?: number
}

/**
 * 修改面板的共用方法
 */
export const updateMethod = (): Required<{
	/**
	 * label 标签的文本对齐方式
	 */
	formLabelAlign: 'left' | 'right'
	/**
	 * 	label 标签布局，同 <Col> 组件，设置 span offset 值，如 {span: 3, offset: 12} 或 sm: {span: 3, offset: 12}
	 */
	formLabelCol: Col
	/**
	 * 需要为输入控件设置布局样式时，使用该属性，用法同 labelCol
	 */
	formWrapperCol: Col
	/**
	 * 表单操作按钮的位置, 底部的提交以及关闭
	 */
	formActionCol: Col
	/**
	 * 取消弹框的方法
	 */
	handleCancel: () => void
	/**
	 * 刷新的方法
	 */
	handleRefresh: () => void
	/**
	 * 刷新弹框的方法
	 */
	handleSave: () => void
	/**
	 * 是否显示
	 */
	visible: Ref<boolean>
	/**
	 * 是否显示表单
	 */
	showForm: () => void
	/**
	 * 异常消息方法（表单验证失败）
	 */
	formFail: ({ errorFields }: { errorFields: Array<{ errors: Array<string>; name: Array<string> }> }) => void
}> => {
	// 获取上下文对象信息
	const app = getCurrentInstance()
	const visible = ref<boolean>(false)
	return {
		handleCancel: (): void => app?.emit('cancel'),
		handleRefresh: (): void => app?.emit('refresh'),
		handleSave: (): void => {
			app?.emit('cancel')
			app?.emit('refresh')
		},
		formFail: ({ errorFields }: { errorFields: Array<{ errors: Array<string>; name: Array<string> }> }) => {
			// 错误提示
			errorFields.forEach(item => {
				messageMethod.error(item.errors).then()
			})
		},
		visible,
		showForm: () => {
			visible.value = true
		},
		formLabelCol: { span: 5 },
		formWrapperCol: { span: 20 },
		formLabelAlign: 'right',
		formActionCol: { span: 14, offset: 5 }
	}
}

/**
 * manage页面的共用方法
 */
export const manageMethod = <T extends BasePo>(): Required<{
	/**
	 * 刷新表格数据
	 */
	refresh: () => void
	/**
	 * 更新面板的状态
	 */
	update: UnwrapNestedRefs<
		Required<{
			id: string
			title: string
			visible: boolean
			// 弹窗的宽度
			width: string

			[ket: PropertyKey]: unknown
		}>
	>
	/**
	 * 表格ref
	 */
	baseTable: InstanceType<typeof BaseTable>
	/**
	 * 打开修改面板的操作
	 * @param vo
	 */
	handleUpdate: (vo: T | undefined) => void
}> => {
	// 获取上下文对象信息
	const app = getCurrentInstance()
	// 修改表单的部分数据
	const update = reactive({
		id: '',
		title: '',
		visible: false,
		width: '40%'
	})
	return {
		update,
		refresh: () => {
			const baseTable = app?.refs['baseTable'] as InstanceType<typeof BaseTable>
			baseTable.pageRequest()
		},
		baseTable: () => {
			return app?.refs['baseTable'] as InstanceType<typeof BaseTable>
		},
		handleUpdate: (vo: T | undefined) => {
			update.id = vo?.id ?? ''
			update.title = vo ? '编辑信息' : '新增信息'
			update.visible = true
		}
	}
}

/**
 * 弹框的信息
 * @param title 弹框的标题信息
 */
export const drawerMethod = <T extends BasePo>(
	title?: (vo: T) => string
): Required<{
	/**
	 * 更新面板的状态
	 */
	panel: UnwrapNestedRefs<
		Required<{
			id: string
			title: string
			visible: boolean
			width: string

			[ket: PropertyKey]: unknown
		}>
	>
	/**
	 * 打开修改面板的操作
	 * @param vo
	 */
	open: (vo: T) => void
}> => {
	// 弹框的输入部分数据
	const panel = reactive({
		id: '',
		title: '',
		visible: false,
		width: '40%'
	})
	return {
		panel,
		open: (vo: T) => {
			panel.id = vo?.id ?? ''
			panel.title = title ? title(vo) : '查看信息'
			panel.visible = true
		}
	}
}