import * as React from 'react';
import StoreContext from '../../hooks/StoreContext';
import { Image, Row, Col, PageHeader, Upload, Button, message } from 'antd';
import { PlusOutlined, UploadOutlined } from '@ant-design/icons';
import { useUpload } from '../../hooks/upload';
import { useProjectInfo, useUpdateProjectPic } from '../../hooks/project';

const projectPlan: React.FC = () => {
	const value = React.useContext(StoreContext);
	const { state: uploadState, request: requestUpload } = useUpload();
	const {
		state: changePicState,
		request: requestChangePic,
	} = useUpdateProjectPic();
	const beforeUpload = (file) => {
		const formData = new FormData();
		formData.append('file', file);
		requestUpload(formData)
			.then((url: any) => {
				requestChangePic({ picType: 1, picUrl: [url] })
					.then(() => {
						value.changeProjectInfo({
							project_effect_pic: url,
						});
					})
					.catch((error) => {
						message.error(error.message);
					});
			})
			.catch((error) => {
				message.error(error.message);
			});
		return false;
	};
	return (
		<div>
			<PageHeader style={{ paddingLeft: 0 }} title='施工效果图'></PageHeader>
			<Row>
				<Col span={12}>
					<Image src={value.projectInfo.project_effect_pic} />
				</Col>
			</Row>
			<Upload
				beforeUpload={beforeUpload}
				accept='image/*'
				showUploadList={false}>
				<Button
					loading={uploadState.loading}
					type='primary'
					style={{ marginTop: 8 }}
					icon={<UploadOutlined />}>
					点击上传
				</Button>
			</Upload>
		</div>
	);
};
export default projectPlan;
