<template>
	<fs-page class="borrow-page"> 
		<fs-crud ref="crudRef" v-bind="crudBinding" />
		<BorrowTypeSelect v-model:visible="showBorrowTypeDialog" @select="onBorrowTypeSelected" />
		<!-- <CommonBorrow v-if="showCommonBorrowDialog" v-model:visible="showCommonBorrowDialog" :modelValue="borrowForm" @submit="handleBorrowSubmit" /> -->
		<ClassroomBorrow
			v-if="showClassroomBorrowDialog"
			v-model:visible="showClassroomBorrowDialog"
			:modelValue="borrowForm"
			@submit="handleBorrowSubmit"
		/>
		<SpecialBorrow v-if="showSpecialBorrowDialog" v-model:visible="showSpecialBorrowDialog" :modelValue="borrowForm" @submit="handleBorrowSubmit" />
	</fs-page>
</template>
<script lang="ts" setup name="borrow">
import { ref, onMounted, onBeforeUnmount,nextTick  } from 'vue';
import { useFs } from '@fast-crud/fast-crud';
import { createCrudOptions } from './crud';
// import { GetPermission } from './api';
// import { handleColumnPermission } from '/@/utils/columnPermission';
import BorrowTypeSelect from './component/BorrowTypeSelect/index.vue';
// import CommonBorrow from './component/CommonBorrow/index.vue';
import ClassroomBorrow from './component/ClassroomBorrow/index.vue';
import SpecialBorrow from './component/SpecialBorrow/index.vue';
import * as api from './api';
import { ElMessage } from 'element-plus';

const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions });
const showBorrowTypeDialog = ref(false);
// const showCommonBorrowDialog = ref(false);
const showClassroomBorrowDialog = ref(false);
const showSpecialBorrowDialog = ref(false);
const borrowForm = ref({});

function onBorrowTypeSelected(type: number, mode: 'view' | 'edit' | 'add',record?: any) {
	showBorrowTypeDialog.value = false;
	// 初始化表单数据，带上所选借用性质
	// borrowForm.value = { borrow_type: type, mode: mode };
			nextTick(() => {
			borrowForm.value = { ...(record || {}), borrow_type: type, mode };
		});
	if (type == 0) {
		showSpecialBorrowDialog.value = true;
		
	} else if (type == 1) {
		showClassroomBorrowDialog.value = true;
	} else {
		showSpecialBorrowDialog.value = true;
	}
}

async function handleBorrowSubmit(formData: any) {
	try {
		await api.AddObj(formData);
		showCommonBorrowDialog.value = false;
		// 刷新列表
		crudRef.value && crudRef.value.doRefresh && crudRef.value.doRefresh();
		ElMessage.success('保存成功');
		crudExpose.doRefresh();

	} catch (e) {
		// 错误处理
		console.error('提交失败', e);
	}
}

async function handleView(e: CustomEvent) {
	const row = e.detail;
	onBorrowTypeSelected(row.borrow_type, 'view',row);
}
async function handleEdit(e: CustomEvent) {
	const row = e.detail;
	onBorrowTypeSelected(row.borrow_type, 'edit',row);
}
async function handleRemove(e: CustomEvent) {
	const row = e.detail;
	onBorrowTypeSelected(row.borrow_type);
}

let observer: MutationObserver | null = null;

onMounted(() => {
	// 设置列权限
	// const newOptions = await handleColumnPermission(GetPermission, crudOptions);
	//重置crudBinding
	// resetCrudOptions(newOptions);
	// 刷新
	crudExpose.doRefresh();
	window.addEventListener('borrow-view', handleView);
	window.addEventListener('borrow-edit', handleEdit);
	window.addEventListener('borrow-remove', handleRemove);
	// 创建借用单按钮
	function insertButton() {
		const fsActionbar = document.querySelector('.borrow-page .fs-actionbar');
		if (fsActionbar && !fsActionbar.querySelector('.my-create-btn')) {
			const button = document.createElement('button');
			button.className = 'el-button el-button--primary el-button--default my-create-btn';
			button.innerHTML = '创建借用单';
			button.onclick = () => {
				showBorrowTypeDialog.value = true;
			};
			fsActionbar.append(button);
		}
	}

	// 先尝试插入一次
	insertButton();

	// 监听 DOM 变化，确保 actionbar 出现时插入按钮
	observer = new MutationObserver(() => {
		insertButton();
	});
	observer.observe(document.body, { childList: true, subtree: true });
});
onBeforeUnmount(() => {
	if (observer) {
		observer.disconnect();
		observer = null;
	}
	window.removeEventListener('borrow-view', handleView);
});
</script>
<style lang="scss" scoped></style>
