import {
	DealerSelect,
	PageContainer,
	OrderList,
	ShipOrderList,
} from '@/components';
import {
	ProCard,
	ProForm,
	ProFormDependency,
} from '@ant-design/pro-components';
import { Space, Steps } from 'antd';
import { useState } from 'react';

export default function Page() {
	const [current, setCurrent] = useState(0);

	const onChange = (value: number) => {
		console.log('onChange:', value);
		setCurrent(value);
	};

	const [dealerVO, setDealerVO] = useState<BusinessAPI.DealerVO>();

	return (
		<PageContainer
			permission={''}
			fieldProps={{
				content: (
					<Steps
						current={current}
						onChange={onChange}
						items={[
							{
								title: '步骤一',
								subTitle: '选择客户与车次',
							},
							{
								title: '步骤二',
								subTitle: '核对并录入调整项',
							},
						]}
					></Steps>
				),
			}}
		>
			{current === 0 && (
				<ProCard
					title={
						<Space>
							选择客户与车次
							<ProForm
								submitter={false}
								onFinish={(formData) => {
									setDealerVO(formData.dealerVO);
								}}
							>
								<ProFormDependency name={['dealerId', 'dealerVO']}>
									{(_, form) => (
										<DealerSelect
											noStyle={true}
											key={'dealerId'}
											onFinish={() => {
												form.submit();
											}}
										/>
									)}
								</ProFormDependency>
							</ProForm>
						</Space>
					}
					headerBordered={true}
					direction={'column'}
				>
					{dealerVO && (
						<ShipOrderList
							ghost={true}
							mode={'page'}
							params={{
								dealerId: dealerVO.dealerId,
							}}
						/>
					)}
				</ProCard>
			)}
			{current === 1 && (
				<ProCard title={'核对并录入调整项'} headerBordered={true}></ProCard>
			)}
		</PageContainer>
	);
}
