import { BizContainer, BizValueType, ModeType } from '@/components';
import { business } from '@/services';
import { useIntl } from '@@/exports';
import { ProColumns, ProFormText } from '@ant-design/pro-components';
import { ProDescriptionsItemProps } from '@ant-design/pro-descriptions';
import React from 'react';

interface IExpenseCostListProps {
	ghost?: boolean;
	costId?: BusinessAPI.CostVO['costId'];
	search?: boolean;
	onValueChange?: () => void;
	mode?: ModeType;
	trigger?: () => React.ReactNode;
}
export default function ExpenseCostList(props: IExpenseCostListProps) {
	const {
		ghost = false,
		costId,
		search = true,
		mode = 'drag',
		trigger,
		onValueChange,
	} = props;
	const intl = useIntl();
	const intlPrefix = 'expenseCost';

	const columns: ProColumns<BusinessAPI.CostVO, BizValueType>[] = [
		{
			title: intl.formatMessage({ id: intlPrefix + '.column.name' }),
			dataIndex: 'name',
			key: 'name',
			renderText: (text: string) => <span className="font-medium">{text}</span>,
		},
	];

	const formContext = [
		<ProFormText key={'type'} name={'type'} hidden={true} />,
		<ProFormText key={'belong'} name={'belong'} hidden={true} />,
		<ProFormText key={'unit'} name={'unit'} hidden={true} />,
		<ProFormText
			key={'name'}
			name={'name'}
			label={intl.formatMessage({ id: intlPrefix + '.form.name.label' })}
			required={true}
			placeholder={intl.formatMessage({
				id: intlPrefix + '.form.name.placeholder',
			})}
			rules={[
				{
					required: true,
					message: intl.formatMessage({
						id: intlPrefix + '.form.name.required',
					}),
				},
			]}
		/>,
	];

	const detailColumns: ProDescriptionsItemProps<
		BusinessAPI.CostVO,
		BizValueType
	>[] = columns as ProDescriptionsItemProps<BusinessAPI.CostVO, BizValueType>[];

	return (
		<BizContainer<
			typeof business.cost,
			BusinessAPI.CostVO,
			BusinessAPI.CostPageQry,
			BusinessAPI.CostCreateCmd,
			BusinessAPI.CostUpdateCmd
		>
			rowKey={'costId'}
			permission={'operation-cost'}
			func={business.cost}
			method={'cost'}
			methodUpper={'Cost'}
			intlPrefix={intlPrefix}
			modeType={mode}
			onValueChange={onValueChange}
			container={{
				ghost,
			}}
			remark={{
				mode: 'editor',
			}}
			status
			drag={{
				fieldProps: {
					bordered: true,
					ghost,
					//@ts-ignore
					search,
					params: {
						type: 'EXPENSE_TYPE',
					},
				},
				columns,
			}}
			create={{
				formType: 'drawer',
				formContext,
				initValues: {
					type: 'EXPENSE_TYPE',
					belong: 'NONE_TYPE',
					status: true,
					unit: '元',
				},
			}}
			update={{
				formType: 'drawer',
				formContext,
			}}
			destroy={{}}
			detail={{
				rowId: costId,
				formType: 'drawer',
				columns: detailColumns,
				trigger,
			}}
		/>
	);
}