<template>
	<fs-page>

		<fs-crud ref="crudRef" v-bind="crudBinding">
			</fs-crud>
      <!-- <ItemsList v-if="formData?.items" :itemss="formData.items" /> -->
			<!-- <RefuseNotification/> -->
      <SpecialBorrowApp v-if="showSpecialBorrowDialogapp" v-model:visible="showSpecialBorrowDialogapp" :modelValue="borrowForm" @submit="handleBorrowSubmit" />
      <WarehouseSelectDialog 
        v-model="showWarehouseDialog" 
        :formId="currentApprovalFormId" 
        @confirm="handleWarehouseConfirm" 
      />
	</fs-page>
</template>

<script lang="ts" setup name="approval">
import { onMounted,ref,onBeforeUnmount,onActivated ,provide,watch,nextTick} from 'vue';
import { useFs , useCrud, useExpose } from '@fast-crud/fast-crud';
import { createCrudOptions } from './curd';
import { ElMessage } from 'element-plus';
import { BorrowingReview } from './api';
// import BorrowApprovalDialog from './BorrowApprovalDialog/index.vue';
import RefuseNotification from './RefuseNotification/index.vue';
import ItemsList from './ItemsList/index.vue';
import SpecialBorrowApp from './SpecialBorrowApp/index.vue';
import WarehouseSelectDialog from './components/WarehouseSelectDialog.vue';
// const { crudBinding, crudRef, crudExpose, crudOptions, resetCrudOptions } = useFs({ createCrudOptions });
const showRejectDialog = ref(false);
const rejectReason = ref('');
const currentFormId = ref(null);
const showSpecialBorrowDialogapp = ref(false);
const borrowForm = ref({});
const showWarehouseDialog = ref(false);
const currentApprovalFormId = ref(null);



const { crudBinding, crudRef, crudExpose ,crudOptions} = useFs({
  createCrudOptions: (props) =>
    createCrudOptions({
      ...props,
      showRejectDialog,
      rejectReason,
      currentFormId,
      showWarehouseDialog,
      currentApprovalFormId
    })
});





provide('showRejectDialog', showRejectDialog);
provide('rejectReason', rejectReason);
provide('currentFormId', currentFormId);
provide('crudExpose', crudExpose);


function onBorrowTypeSelected(type: number, mode: 'view' | 'edit' | 'add' |'collect',record?: any) {
	nextTick(() => {
		borrowForm.value = { ...(record || {}), borrow_type: type, mode };
	});
	if (type != 1) {
    showSpecialBorrowDialogapp.value = true;
	} 
	
}

async function handleView(e: Event) {
	const customEvent = e as CustomEvent;
	const row = customEvent.detail;
	onBorrowTypeSelected(row.borrow_type, 'view',row);
}

async function handleBorrowSubmit(formData: any) {
	try {
		if (formData.mode === 'edit') {
			// await api.UpdateObj(formData);
			ElMessage.success('编辑成功');
		} else {
			// await api.AddObj(formData);
			ElMessage.success('添加成功');
		}
		
		// 刷新列表
		crudRef.value && crudRef.value.doRefresh && crudRef.value.doRefresh();	
		crudExpose.doRefresh();

	} catch (e) {
		// 错误处理
		console.error(formData.mode === 'edit' ? '编辑失败' : '提交失败', e);
		ElMessage.error(formData.mode === 'edit' ? '编辑失败' : '提交失败');
	}
}

async function handleWarehouseConfirm(data: { formId: number; warehouseId: number }) {
	try {
		await BorrowingReview(data.formId, "approve", "同意借用", data.warehouseId);
		ElMessage.success("审批通过");
		crudExpose.doRefresh();
	} catch (error) {
		console.error('审批失败:', error);
		ElMessage.error("审批失败");
	}
}






// const formRef = crudExpose.getFormRef();

const formData = ref<any>(null);

onMounted(() => {
	crudExpose.doRefresh();
  window.addEventListener('approve-view', handleView as EventListener);
 

});

onBeforeUnmount(() => {
	window.removeEventListener('approve-view', handleView as EventListener);
});


</script>

<style scoped lang="scss"></style>
