import React, { useEffect } from 'react';
import { Modal, Form, Input, Select, InputNumber, message } from 'antd';
import { UpdateStoreGoods } from '../services';
const key = 'message';

const GoodsForm = (props) => {
	const { Option } = Select;
	const [form] = Form.useForm();

	/**
	 * 初始化表单信息
	 */
	const handleInitForm = () => {
		if (props.goods) {
			form.setFieldsValue(props.goods);
		}
	}

	/**
	 * 点击确定时触发
	 */
	const handleOk = async () => {
		const formData = await form.validateFields();
		try {
			message.loading('正在修改', key);
			message.destroy(key);
			const response = await UpdateStoreGoods({
				...props.goods,
				...formData
			});
			message.destroy(key);
			if (response.statusCode === 200) {
				message.success('修改成功');
				props.onOk();
			} else {
				message.success('修改失败');
			}
		} catch (error) {
			message.error('修改失败请重试！');
		}
	}

	useEffect(() => {
		handleInitForm();
	}, []);

	return (
		<Modal
			title={`编辑【${props.goods.goods_Name}】`}
			width={640}
			visible={props.open}
			onOk={handleOk}
			onCancel={props.onCancel}
			destroyOnClose
		>
			<Form
				layout="vertical"
				form={form}
			>
				<Form.Item name="id" hidden={true}>
					<Input />
				</Form.Item>
				<Form.Item label={'价格'} name="price" rules={[{ required: true }]}>
					<InputNumber placeholder="价格" min={0} />
				</Form.Item>
				<Form.Item label={'会员价格'} name="vipPrice" rules={[{ required: true }]}>
					<InputNumber placeholder="价格" min={0} />
				</Form.Item>

				<Form.Item label={'状态'} name="status" rules={[{ required: true }]}>
					<Select placeholder="状态">
						<Option value={1}>下架</Option>
						<Option value={0}>上架</Option>
					</Select>
				</Form.Item>
			</Form>
		</Modal>
	);
};

export default GoodsForm;
