import * as React from 'react';
import 'moment/locale/zh-cn';
import { Spin, Select, PageHeader, Typography, Descriptions } from 'antd';
import { useProjectInfo } from '../../hooks/project';
import './index.scss';

const basicInfos = [
	{
		name: 'name',
		label: '工程名称',
	},
	{
		name: 'desc',
		label: '工程简介',
	},
	{
		name: 'category',
		label: '项目类型',
	},

	{
		name: 'price',
		label: '工程造价(万元)',
	},
	{
		name: 'location',
		label: '项目地址',
	},

	{
		name: 'covered_area',
		label: '总建筑面积(㎡)',
	},
	{
		name: 'start_day',
		label: '计划开工日期',
	},
	{
		name: 'end_day',
		label: '计划竣工日期',
	},

	{
		name: 'manager',
		label: '项目负责人',
	},
	{
		name: 'manager_phone',
		label: '项目负责人电话',
	},
	{
		name: 'safety_record_no',
		label: '安监备案号',
	},
	{
		name: 'construction',
		label: '总承包单位',
	},
	{
		name: 'development',
		label: '建筑单位',
	},
	{
		name: 'oversee',
		label: '监理单位',
	},
	{
		name: 'design',
		label: '设计单位',
	},
	{
		name: 'exploration',
		label: '勘察单位',
	},
];
const projectDetail: React.FC = (props) => {
	const [infoState, requestInfo] = useProjectInfo();
	React.useEffect(() => {
		requestInfo();
	}, []);

	return (
		<div className='project-wrappaer'>
			<PageHeader title='工程信息'></PageHeader>
			<Spin spinning={infoState.loading}>
				<Descriptions bordered column={{ xxl: 2 }}>
					{basicInfos.map((element) => {
						return (
							<Descriptions.Item label={element.label} key={element.name}>
								{infoState.data[element.name]}
							</Descriptions.Item>
						);
					})}
				</Descriptions>
			</Spin>
		</div>
	);
};
export default projectDetail;
