import { BizEditor, ButtonAccess, MaterialList } from '@/components';
import { business } from '@/services';
import { formatParam } from '@/utils/formatParam';
import { formLayout } from '@/utils/formLayout';
import {
	DrawerForm,
	ProFormDependency,
	ProFormMoney,
	ProFormText,
	ProFormTextArea,
	RouteContext,
	RouteContextType,
} from '@ant-design/pro-components';
import { ProFormUploadMaterial } from '@chageable/components';
import { message, Space, Typography } from 'antd';

interface IChargingPilePurchaseConfigProps {
	onFinish?: () => void;
}
export default function ChargingPilePurchaseConfig(
	props: IChargingPilePurchaseConfigProps,
) {
	const { onFinish } = props;
	return (
		<RouteContext.Consumer>
			{(value: RouteContextType) => {
				const { isMobile } = value;
				return (
					<DrawerForm
						trigger={
							<ButtonAccess permission={''} type="primary" size={'middle'}>
								设备购买信息设置
							</ButtonAccess>
						}
						title="设备购买信息"
						{...formLayout()}
						width={isMobile ? '100%' : '85%'}
						drawerProps={{
							destroyOnHidden: true,
						}}
						request={async () => {
							const { data } = await business.setting.showSetting({
								settingShowQry: {
									settingKey: 'CHARGING_PILE_PURCHASE_CONFIG',
								},
							});

							return {
								...data?.settingValue,
							};
						}}
						onFinish={async (values) => {
							await business.setting.updateSetting({
								settingKey: 'CHARGING_PILE_PURCHASE_CONFIG',
								settingValue: {
									...values,
									settingKey: 'CHARGING_PILE_PURCHASE_CONFIG',
								},
							});

							onFinish?.();
							message.success('更新设备购买信息成功');

							return true;
						}}
					>
						<ProFormText
							name="title"
							label="设备标题"
							placeholder={'请输入设备标题'}
							rules={[
								{
									required: true,
									message: '请输入设备标题',
								},
								{
									min: 2,
									max: 20,
								},
							]}
							required={true}
						/>
						<ProFormTextArea
							name="description"
							placeholder="请输入设备描述"
							required={true}
							rules={[
								{
									required: true,
									message: '请输入设备描述',
								},
							]}
							label="设备描述"
						/>
						<ProFormMoney
							name="price"
							placeholder="请输入购买价格"
							required={true}
							rules={[
								{
									required: true,
									message: '请输入购买价格',
								},
							]}
							label="购买价格"
							fieldProps={{
								min: 0.0,
								max: 999999.99,
								suffix: '元',
							}}
						/>
						<ProFormMoney
							name="linePrice"
							placeholder="请输入划线价格"
							required={true}
							rules={[
								{
									required: true,
									message: '请输入划线价格',
								},
							]}
							label="划线价格"
							fieldProps={{
								min: 0.0,
								max: 999999.99,
								suffix: '元',
							}}
						/>
						<ProFormUploadMaterial
							key={'image'}
							label={'设备图片'}
							name={'image'}
							required={true}
							rules={[
								{
									required: true,
									message: '设备图片必填',
								},
							]}
							extra={
								<Space direction={'vertical'}>
									<Typography.Text type={'secondary'}>
										建议尺寸待定，展示的位置待定，是否支持上传多张，待定
									</Typography.Text>
								</Space>
							}
							fieldProps={{
								maxCount: 1,
								toolBarRender: () => [
									<MaterialList
										key={'create'}
										ghost={true}
										mode={'create'}
										search={false}
									/>,
								],
								request: async (params, sorter, filter) => {
									const { data, success, totalCount } =
										await business.material.pageMaterial({
											materialPageQry: formatParam<typeof params>(
												params,
												sorter,
												filter,
											),
										});

									return {
										data: data || [],
										total: totalCount,
										success,
									};
								},
							}}
						/>
						<ProFormDependency key={'content'} name={['content']}>
							{({ content }, form) => {
								return (
									<BizEditor
										name={'content'}
										label={'购买须知'}
										required={true}
										placeholder="请输入购买须知"
										rules={[
											{
												required: true,
												message: '请输入购买须知',
											},
										]}
										value={content}
										onChange={(value) => {
											form.setFieldValue('content', value);
										}}
									/>
								);
							}}
						</ProFormDependency>
						,
					</DrawerForm>
				);
			}}
		</RouteContext.Consumer>
	);
}
