import * as React from 'react';
// @ts-ignore
import { EChartsFullOption } from 'echarts/lib/options';
import moment from 'moment';
import BoxWrapper from '../../compontens/box';
import echarts from '../../utils/echarts';
import Percentage from '../../compontens/percentage';
import { PersonTypesColors, PersonAttendanceStatus } from './const';
import { CircleProcss } from '../../compontens/process';
import defultAvatar from './static/defaultAvtar.png';
import './index.scss';
import {
	useServicePersonDetail,
	usePersonTypes,
	usePersonLastAttendance,
	useAttendancetype,
} from '../../hooks/person';
let mycharts;
const person: React.FC = (props) => {
	const [personTypesState, requestPersonTypes] = usePersonTypes();
	const [attendancetypeState, requestAttendanceTypes] = useAttendancetype();
	const [servicePerson, requestServicePerson] = useServicePersonDetail();
	const [
		lastAttendanceState,
		requestLastAttendance,
	] = usePersonLastAttendance();
	React.useEffect(() => {
		requestPersonTypes();
		requestLastAttendance();
		requestAttendanceTypes();
		requestServicePerson();
	}, []);
	React.useEffect(() => {
		mycharts = echarts.init(
			document.querySelector('.company-statistics-charts') as HTMLCanvasElement
		);
	}, []);
	React.useEffect(() => {
		const option: EChartsFullOption = {
			color: ['#FF8F00', '#00CCD6'],
			tooltip: {
				show: true,
			},

			legend: {
				right: 10,
				data: [
					{
						name: '总人数',
						textStyle: {
							color: '#FF8F00',
						},
					},
					{
						name: '出勤人数',
						textStyle: {
							color: '#00CCD6',
						},
					},
				],
			},
			grid: {
				left: '3%',
				right: '4%',
				bottom: 20,
			},
			xAxis: {
				type: 'category',
				data: servicePerson.dataSource.map((element) => {
					return element.labor_company;
				}),
				axisLine: {
					show: true, // 是否显示x轴的线条
					lineStyle: {
						color: '#A6DAF8',
					},
				},
				axisTick: {
					show: false, // 是否显示x轴的刻度
				},
			},
			textStyle: {
				color: '#A6DAF8', //所有文字的颜色
			},

			yAxis: {
				type: 'value',
				show: true,
				nameTextStyle: {
					color: '#ffffff',
				},
				splitLine: {
					show: false, // 是否显示辅助线
				},
				axisTick: {
					show: false, // 是否显示y轴的刻度
				},
				axisLine: {
					show: true, // 是否显示Y轴线
					lineStyle: {
						color: '#A6DAF8',
					},
				},
				min: 0,
				scale: false,
				minInterval: 1,
			},
			series: [
				{
					name: '总人数',
					type: 'bar',
					barMaxWidth: 20,
					data: servicePerson.dataSource.map((element) => {
						return element.total;
					}),
				},
				{
					name: '出勤人数',
					type: 'bar',
					barMaxWidth: 20,
					data: servicePerson.dataSource.map((element) => {
						return element.attendance;
					}),
				},
			],
		};
		mycharts.setOption(option);
	}, [servicePerson.dataSource]);
	const getLastDatTime = React.useMemo(() => {
		const lastDateTime = moment(lastAttendanceState.dataSource.recog_time);
		return {
			lastDate: lastAttendanceState.dataSource.recog_time
				? lastDateTime.format('YYYY-MM-DD')
				: '',
			lastTime: lastAttendanceState.dataSource.recog_time
				? lastDateTime.format('HH:mm:ss')
				: '',
		};
	}, [lastAttendanceState.dataSource.recog_time]);
	return (
		<div className='person-wrapper'>
			<div className='person-summary'>
				<BoxWrapper
					title='实时进出考勤信息'
					className='real-attendance-wrapper'>
					<div className='attendance-content'>
						<div className='person-avtar'>
							<div
								style={{
									backgroundImage: `URL(${
										lastAttendanceState.dataSource.photo || defultAvatar
									})`,
								}}></div>
						</div>
						<div className='person-name'>
							{lastAttendanceState.dataSource.name}
						</div>
						<div className='person-info'>
							<div>
								<span>工号</span>：{lastAttendanceState.dataSource.work_no}
							</div>
							<div>
								<span>工种</span>：{lastAttendanceState.dataSource.work_type}
							</div>
							<div>
								<span>状态</span>：
								{PersonAttendanceStatus[lastAttendanceState.dataSource.in_out]}
							</div>
							<div>
								<span>打卡时间</span>：
								<div>
									{getLastDatTime.lastDate}&nbsp;
									{getLastDatTime.lastTime}
								</div>
							</div>
						</div>
					</div>
				</BoxWrapper>
				<div className='person-summary-center'>
					<div className='person-summary-total'>
						<div className='person-summary-real'>
							<h3>实时在场人数</h3>
							<p>{personTypesState.dataSource.total_in}</p>
						</div>
						<div className='person-total'>
							<h3>今日出勤</h3>
							<p>{personTypesState.dataSource.total_attendance}</p>
						</div>
					</div>
					<BoxWrapper title='今日出勤人数统计' className='person-type-wrapper'>
						<div className='person-type-content'>
							{personTypesState.dataSource.list.map((type) => {
								return (
									<Percentage
										key={type.type_code}
										className='percentage-class'
										text={type.staff_type}
										color={PersonTypesColors[type.type_code]}
										molecular={type.attendance}
										denominator={type.total}></Percentage>
								);
							})}
						</div>
					</BoxWrapper>
				</div>
				<BoxWrapper title='出勤工种分布' className='distribution-type-wrapper'>
					<div className='distribution-content'>
						{attendancetypeState.dataSource.map((process) => {
							return (
								<CircleProcss
									{...process}
									key={process.id}
									unit='人'
									tota={process}
									current={process.current}></CircleProcss>
							);
						})}
					</div>
				</BoxWrapper>
			</div>
			<BoxWrapper
				title='今日劳务公司出勤人数'
				className='company-statistics-wrapper'>
				<div className='company-statistics-content'>
					<div className='company-statistics-charts'></div>
				</div>
			</BoxWrapper>
		</div>
	);
};
export default person;
