import * as api from './api';
import { UserPageQuery, AddReq, DelReq, EditReq, CreateCrudOptionsProps, CreateCrudOptionsRet ,useCompute} from '@fast-crud/fast-crud';
import dayjs from 'dayjs';

const { compute } = useCompute();

export const createCrudOptions = function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOptionsRet {
	const pageRequest = async (query: UserPageQuery) => {
		return await api.GetList(query);
	};
		
	const editRequest = async ({ form, row }: EditReq) => {
		form.id = row.id;
		return await api.UpdateObj(form);
	};
	const delRequest = async ({ row }: DelReq) => {
		return await api.DelObj(row.id);
	};
	const addRequest = async ({ form }: AddReq) => {
		return await api.AddObj(form);
	};

	return {
		crudOptions: {
			request: {
				pageRequest,
				addRequest,
				editRequest,
				delRequest,
			},
			actionbar: {
				buttons: {
					add: {
					show: false,
					text: '创建借用单',
					click: () => {
						window.dispatchEvent(new CustomEvent('borrow-add'))
					}
					}
				}
			},
			rowHandle: {
				fixed: 'right',
				width: 330,
				buttons: {
					view: {
						show: true,
						order:1,
						click: ({ row }) => {
							// eslint-disable-next-line no-console
							// console.log("row:::",row);
							window.dispatchEvent(new CustomEvent('borrow-view', { detail: row }));
						},
					},
					edit: {
						show:compute( ({row})=>{
							return row.status == 1 && row.borrow_type!==0;
						}), 
						order:4,
						disabled:compute( ({row})=>{
							return row.status !== 1;
						}), 
						click: ({ row }) => {
							window.dispatchEvent(new CustomEvent('borrow-edit', { detail: row }));
						}
					},
					remove: {
						order:10,
						show: compute( ({row})=>{
							return row.status !== 5||row.status===6 ;
						}),
					},
					/* 查看结算单 */
					settlement: {
						order:6,
						show:compute( ({row})=>{
							return row.status === 5 ||row.status==7;
						}), 
						text: '查看结算单',
						click: ({ row }) => {
							window.dispatchEvent(new CustomEvent('borrow-settlement', { detail: row }));
						}
					},
					collectEquipment:{
						order:2,
						show:compute( ({row})=>{
							return row.status === 2;
						}), 
						text: '领取',
						click: ({ row }) => {
							window.dispatchEvent(new CustomEvent('borrow-collect', { detail: row }));
						}
					},
					returnEquipment:{
						order:3,
						show:compute( ({row})=>{
							return row.status === 5||row.status===6;
						}), 
						text: '归还',
						click: ({ row }) => {
							window.dispatchEvent(new CustomEvent('borrow-return', { detail: row }));
						}
					}
				},
			},
			search:{
				show:true,
			},
			toolbar:{
				show:true,
			},
			columns: {
				_index: {
					title: '序号',
					form: { show: false },
					column: {
						align: 'center',
						width: '70px',
						columnSetDisabled: true,
						formatter: (context: any) => {
							let index = context.index ?? 1;
							let pagination = crudExpose!.crudBinding.value.pagination;
							return ((pagination!.currentPage ?? 1) - 1) * pagination!.pageSize + index + 1;
						},
					},
				},
				application_no: { search: { show: true },title: '借用单编号', column: { minWidth: 140 } , form:{
					component: { placeholder: '请输入设备编号' },
				}},
				borrower_type_label: { title: '借用人角色', column: { minWidth: 100 } },
				borrow_type_label: { search: { show: false },title: '借用性质', column: { minWidth: 100 } },
				"borrower_info.user_code":{title:"学号/工号",column: { minWidth: 100 }},
				"borrower_info.name": {
					title: '借用人',
					search:{
						show:true,		
					},
					column: {
						show:true,
						minWidth: 100,
					},  form:{
						component: { placeholder: '请输入设备编号' },
					}
				},
				external_borrower_name: { title: '借用人', column: { show:false, minWidth: 100 } },
				emergency_phone: { 
					title: '联系方式',	
					search:{show:true}, column: { minWidth: 120 },  form:{
					component: { placeholder: '请输入设备编号' },
				}
			    },
				team_type_label: { title: '个人/团队', column: { minWidth: 80 } },
				team_members: { title: '团队成员', column: { show:false,minWidth: 120 } },
				team_members_count: { title: '团队人数', column: { show:false,minWidth: 80 }},
				create_datetime: {
					title: '创建时间',
					column: { minWidth: 160, formatter: ({ value }: any) => (value ? dayjs(value).format('YYYY-MM-DD HH:mm:ss') : '') },
				},
				status_label: { title: '当前状态', column: { minWidth: 80 } },
				actual_start_time: {
					title: '借出时间',
					column: { minWidth: 140, formatter: ({ value }: any) => (value ? dayjs(value).format('YYYY-MM-DD HH:mm:ss') : '') },
				},
				expected_end_time: {
					title: '预计归还',
					column: { minWidth: 140, formatter: ({ value }: any) => (value ? dayjs(value).format('YYYY-MM-DD HH:mm:ss') : '') },
				},
				actual_end_time: {
					title: '完结时间',
					column: { minWidth: 140, formatter: ({ value }: any) => (value ? dayjs(value).format('YYYY-MM-DD HH:mm:ss') : '') },
				},
				return_location: { title: '存放仓库', column: { minWidth: 120 } },
				



				
				purpose: { title: '借用目的', column: { minWidth: 150 ,show:false} },
				expected_start_time: {
					title: '预计开始',
					
					column: { minWidth: 140,show:false, formatter: ({ value }: any) => (value ? dayjs(value).format('YYYY-MM-DD HH:mm:ss') : '') },
				},
			
				
				approve_time: {
					title: '审批时间',
					column: { show:false,minWidth: 140, formatter: ({ value }: any) => (value ? dayjs(value).format('YYYY-MM-DD HH:mm') : '') },
				},
				approve_remark: { title: '审批备注', column: {show:false, minWidth: 120 } },
				total_items: { title: '设备数量', column: { show:false,minWidth: 80 } },
				
				
				applicant_remark: { title: '申请备注', column: { show:false, minWidth: 120 } },
				
				update_datetime: {
					title: '更新时间',
					column: { show:false,minWidth: 160, formatter: ({ value }: any) => (value ? dayjs(value).format('YYYY-MM-DD HH:mm:ss') : '') },
				},
			},
		},
	};
};
