import * as React from 'react';
import {
	Table,
	PageHeader,
	Input,
	Row,
	Col,
	Drawer,
	Descriptions,
	Image,
} from 'antd';
import { ColumnProps } from 'antd/lib/table';
import { useStaffList } from '../../hooks/person';
const { Search } = Input;
const personInfos = [
	{
		title: '姓名',
		key: 'name',
	},
	{
		title: '生日',
		key: 'birthday',
	},
	{
		title: '地址',
		key: 'address',
	},
	{
		title: '创建时间',
		key: 'created_at',
	},
	{
		title: '性别',
		key: 'gender',
	},
	{
		title: '班组',
		key: 'group',
	},
	{
		title: '身份证',
		key: 'id_cert',
	},
	{
		title: '发证机关',
		key: 'id_issue',
	},
	{
		title: '证件有效期',
		key: 'id_period',
	},

	{
		title: '劳务公司',
		key: 'labor_company',
	},

	{
		title: '员工类型',
		key: 'staff_type',
	},
	{
		title: '工号',
		key: 'work_no',
	},
	{
		title: '工种',
		key: 'work_type',
	},
	{
		title: '录入设备',
		key: 'sn',
	},
	{
		title: '现场人员红外照片',
		key: 'inf_photo',
		img: true,
	},
	{
		title: '现场人员可见光照片',
		key: 'photo',
		img: true,
	},
	{
		title: '证件照片',
		key: 'id_photo',
		img: true,
	},
];

export default () => {
	const { state: listState, request: requestList } = useStaffList();
	const [searchState, handleChangeSearhState] = React.useState({
		page: 1,
		filter: '',
	});
	const [drawerState, handleChangeDrawerState] = React.useState({
		drawerVisible: false,
		values: {},
	});
	React.useEffect(() => {
		requestList(searchState);
	}, [searchState]);
	const colums: ColumnProps<any>[] = [
		{
			title: '姓名',
			key: 'name',
			dataIndex: 'name',
			render: (dataIndex, record) => {
				return (
					<a
						onClick={() => {
							handleChangeDrawerState((preState) => ({
								...preState,
								drawerVisible: true,
								values: record,
							}));
						}}>
						{dataIndex}
					</a>
				);
			},
		},

		{
			title: '性别',

			key: 'gender',
			dataIndex: 'gender',
		},
		{
			title: '身份证',
			key: 'id_cert',
			dataIndex: 'id_cert',
		},
		{
			title: '员工类型',

			key: 'staff_type',
			dataIndex: 'staff_type',
		},
		{
			title: '工号',
			key: 'work_no',
			dataIndex: 'work_no',
		},
		{
			title: '工种',

			key: 'work_type',
			dataIndex: 'work_type',
		},
		{
			title: '班组',

			key: 'group',
			dataIndex: 'group',
		},
		{
			title: '劳务公司',

			key: 'labor_company',
			dataIndex: 'labor_company',
		},
	];
	return (
		<div>
			<PageHeader title='人员列表' style={{ paddingLeft: 0 }}></PageHeader>
			<Row gutter={[0, 30]}>
				<Col span={6}>
					<Search
						placeholder='员工姓名，工种，员工类型或工号'
						onSearch={(value) => {
							handleChangeSearhState((preState) => ({
								...preState,
								page: 1,
								filter: value,
							}));
						}}></Search>
				</Col>
			</Row>
			<Table
				rowKey={(record) => record.id}
				bordered
				pagination={{
					hideOnSinglePage: true,
					total: listState.total,
					current: listState.page,
					onChange: (page) => {
						handleChangeSearhState((preState) => ({ ...preState, page }));
					},
				}}
				dataSource={listState.dataSource}
				loading={listState.loading}
				columns={colums}></Table>
			<Drawer
				width={800}
				title='人员信息'
				onClose={() => {
					handleChangeDrawerState((preState) => ({
						...preState,
						drawerVisible: false,
					}));
				}}
				placement='right'
				visible={drawerState.drawerVisible}>
				<Descriptions title={null} column={{ xxl: 2, xl: 2 }} bordered>
					{personInfos.map((element) => {
						return (
							<Descriptions.Item label={element.title} key={element.key}>
								{element.img ? (
									<Image
										width={100}
										src={drawerState.values[element.key]}></Image>
								) : (
									drawerState.values[element.key]
								)}
							</Descriptions.Item>
						);
					})}
				</Descriptions>
			</Drawer>
		</div>
	);
};
