import * as React from 'react';
import moment from 'moment';
import {
	Table,
	PageHeader,
	Button,
	Form,
	Input,
	DatePicker,
	Row,
	Modal,
	Timeline,
} from 'antd';
import { ColumnProps } from 'antd/lib/table';
import { SearchOutlined } from '@ant-design/icons';
import { useAddtendanceList } from '../../hooks/attendance';
const { RangePicker } = DatePicker;
const { useState, useEffect } = React;
const personAttendance = () => {
	const { state: listState, request: requestAttendace } = useAddtendanceList();
	const [modalState, handleChangeModalState] = useState<{
		visible: boolean;
		values?: { list: { time: string; in_out: string; is_in: boolean }[] };
	}>({
		visible: false,
		values: {
			list: [],
		},
	});
	const [searchState, handleChangeSearchState] = useState({
		page: 1,
		filter: '',
		start: 0,
		end: 0,
	});
	useEffect(() => {
		requestAttendace(searchState);
	}, [searchState]);
	const colums: ColumnProps<any>[] = [
		{
			title: '姓名',
			dataIndex: 'name',
			key: 'name',
		},
		{
			title: '工号',
			dataIndex: 'work_no',
			key: 'work_no',
		},
		{
			title: '性别',
			dataIndex: 'gender',
			key: 'gender',
		},
		{
			title: '考勤时间',
			dataIndex: 'date',
			key: 'date',
		},
		{
			title: '工种',
			dataIndex: 'work_type',
			key: 'work_type',
		},
		{
			title: '岗位',
			dataIndex: 'staff_type',
			key: 'staff_type',
		},
		{
			title: '查看',
			render: (record) => {
				return (
					<Button
						type='link'
						onClick={() => {
							handleChangeModalState((preState) => ({
								...preState,
								visible: true,
								values: record,
							}));
						}}>
						查看
					</Button>
				);
			},
		},
	];
	return (
		<div>
			<PageHeader title='人员考勤'></PageHeader>
			<Row gutter={[0, 30]}>
				<Form
					layout='inline'
					onFinish={({ filter, start, end }) => {
						handleChangeSearchState((preState) => ({
							...preState,
							filter,
							page: 1,
							start: start ? start.unix() : 0,
							end: end ? end.unix() : 0,
						}));
					}}>
					<Form.Item name='filter' label='关键字'>
						<Input allowClear placeholder='员工姓名，工种或员工类型'></Input>
					</Form.Item>
					<Form.Item
						name='start'
						label='开始时间'
						dependencies={['end']}
						rules={[
							({ getFieldValue }) => ({
								validator(rule, value) {
									if (!value) {
										return Promise.resolve();
									}
									const endValue = getFieldValue('end');
									if (endValue && endValue.months() !== value.months()) {
										return Promise.reject('开始时间和结束时间必须是同一个月');
									}
								},
							}),
						]}>
						<DatePicker
							disabledDate={(current) => {
								return current && current >= moment().endOf('day');
							}}
							allowClear></DatePicker>
					</Form.Item>
					<Form.Item
						name='end'
						label='结束时间'
						dependencies={['start']}
						rules={[
							({ getFieldValue }) => ({
								validator(rule, value) {
									if (!value) {
										return Promise.resolve();
									}
									const endValue = getFieldValue('start');
									if (endValue && endValue.months() !== value.months()) {
										return Promise.reject('开始时间和结束时间必须是同一个月');
									}
								},
							}),
						]}>
						<DatePicker
							disabledDate={(current) => {
								return current && current >= moment().endOf('day');
							}}
							allowClear></DatePicker>
					</Form.Item>
					<Button
						type='primary'
						htmlType='submit'
						icon={<SearchOutlined></SearchOutlined>}>
						搜索
					</Button>
				</Form>
			</Row>
			<Table
				rowKey={(record) => record.id}
				loading={listState.loading}
				pagination={{
					hideOnSinglePage: true,
					current: listState.page,
					total: listState.total,
					onChange: (page) => {
						handleChangeSearchState((preState) => ({ ...preState, page }));
					},
				}}
				columns={colums}
				dataSource={listState.dataSource}></Table>
			<Modal
				title='考勤明细'
				footer={null}
				visible={modalState.visible}
				onCancel={() => {
					handleChangeModalState((preState) => ({
						...preState,
						visible: false,
						values: undefined,
					}));
				}}>
				<Timeline mode='alternate'>
					{modalState.values?.list.map((element, index) => {
						return (
							<Timeline.Item
								color={element.is_in ? 'green' : 'red'}
								key={index}>
								{element.time}
								{element.in_out}
							</Timeline.Item>
						);
					})}
				</Timeline>
			</Modal>
		</div>
	);
};
export default personAttendance;
