import React, { useMemo, Fragment, useEffect } from 'react';
import { RouteComponentProps } from 'react-router-dom';
import {
	Spin,
	Descriptions,
	Form,
	Timeline,
	Divider,
	Image,
	Input,
	Switch,
	Row,
	Button,
	Col,
	message,
} from 'antd';
import {
	useTaskDetails,
	TaskProcess,
	useUpdateTask,
	TaskType,
	taskStatus,
	taskStatusEnums,
} from '../../hooks/task';
import Upload from '../../compontens/upload';

const APPLY_STATUS_OPTIONS = [
	{
		name: '通过',
		value: 1,
	},
	{
		name: '不通过',
		value: 0,
	},
];

const getTaskProcessLabelByIndex = (state: number) => {
	return {
		1: '创建人',
		2: '处理人',
		3: '审核人',
	}[state];
};

const getTaskProcessLabelDescByIndex = (state: number) => {
	return {
		1: '任务描述',
		2: '处理内容',
		3: '审批回复',
	}[state];
};

const TaskDetail: React.FC<RouteComponentProps<{ id: string }>> = ({
	match,
}) => {
	const [form] = Form.useForm();
	const { state: detailState, request: requestDetail } = useTaskDetails();
	const { state: upTaskState, request: requestUpdateTask } = useUpdateTask();
	const taskId = +match.params.id;
	useEffect(() => {
		requestDetail(+match.params.id);
	}, [taskId]);
	const handleSumitForm = (data) => {
		requestUpdateTask({ ...data, id: taskId })
			.then(() => {
				message.success('提交成功');
				requestDetail(taskId);
				form.resetFields();
			})
			.catch((error) => {
				message.error(error.message);
			});
	};
	const isCanHandle = [
		taskStatusEnums.pending_handle,
		taskStatusEnums.refused,
	].includes(detailState.dataSource?.status as any);

	return (
		<Spin spinning={detailState.loading}>
			<Button
				type='primary'
				onClick={() => {
					history.back();
				}}>
				返回
			</Button>
			<Divider>任务详情</Divider>
			<Descriptions title='任务描述'>
				{[
					{
						key: 'task_name',
						label: '任务名称',
					},
					{
						key: 'task_code',
						label: '任务编码',
					},
					{
						// TODO 任务状态显示
						key: 'status',
						label: '任务状态',
						value: (value) => value,
					},
				].map((infos) => {
					return (
						<Descriptions.Item label={infos.label} key={infos.key}>
							<b>
								{infos.value?.(
									taskStatus[detailState.dataSource?.[infos.key]]
								) || detailState.dataSource?.[infos.key]}
							</b>
						</Descriptions.Item>
					);
				})}
			</Descriptions>
			<Divider>任务进度</Divider>
			<Timeline>
				{detailState.dataSource?.list.map((process, index) => {
					return (
						<Timeline.Item key={index}>
							<Descriptions
								bordered
								layout='vertical'
								title={TaskProcess[process.pipe_type]}>
								{[
									{
										label: getTaskProcessLabelByIndex(process.pipe_type),
										key: 'person',
									},
									{ label: '操作时间', key: 'pipe_time' },
									{
										label: '状态',
										key: 'status',
									},
									{
										label: getTaskProcessLabelDescByIndex(process.pipe_type),
										key: 'desc',
									},
									{
										label: '附件',
										key: 'img',
										renderValue: (
											<div>
												{process.img.map((img) => {
													return (
														<Image width={200} src={img} key={img}></Image>
													);
												})}
											</div>
										),
									},
								].map((infos) => {
									return (
										<Descriptions.Item label={infos.label} key={infos.key}>
											<b>{infos.renderValue || process[infos.key] || '-'}</b>
										</Descriptions.Item>
									);
								})}
							</Descriptions>
						</Timeline.Item>
					);
				})}
			</Timeline>
			{isCanHandle && (
				<Fragment>
					<Divider>审批</Divider>
					<Row>
						<Col span={6}>
							<Form onFinish={handleSumitForm} form={form}>
								{[
									{
										label: '处理人',
										name: 'processing_person',
										required: true,
										children: <Input placeholder='请输入处理人'></Input>,
									},
									{
										name: 'processing_results',
										label: '备注',
										children: (
											<Input.TextArea placeholder='请输入备注'></Input.TextArea>
										),
									},
									{
										name: 'processing_results_img',
										label: '附件',
										valuePropName: 'fileList',
										children: <Upload></Upload>,
									},
								].map((formItem) => {
									return (
										<Form.Item
											rules={[
												{
													required: formItem.required,
													message: `请输入${formItem.label}`,
												},
											]}
											{...formItem}
											key={formItem.name}></Form.Item>
									);
								})}
								<Button
									type='primary'
									htmlType='submit'
									size='large'
									loading={upTaskState.loading}>
									确认处理
								</Button>
							</Form>
						</Col>
					</Row>
				</Fragment>
			)}
		</Spin>
	);
};
export default TaskDetail;
