import * as React from 'react';
import { RouteComponentProps } from 'react-router-dom';
import { RightOutlined } from '@ant-design/icons';
import InfiniteScroll from 'react-infinite-scroller';
import echarts from '../../utils/echarts';
import BoxWrapper from '../../compontens/box';
import { overViewList, environmentalColums } from './config';
import StoreContext from '../../hooks/StoreContext';
import emptyPlanImg from './static/no-floor-plan.png';
import './index.scss';
import { usePersonTypes } from '../../hooks/person';
import { useEnvironmentalMonitoring } from '../../hooks/monitor';
import { useDeviceStatistics, useWarningList } from '../../hooks/device';
import { useProjectSchedule, ScheduleStaus } from '../../hooks/process';
let myChart;
const Index: React.FC<RouteComponentProps> = ({ history }) => {
	const [deviceStatisState, requestDeviceStatic] = useDeviceStatistics();
	const [warningListState, requestWarningList] = useWarningList();
	const [personState, requestPerson] = usePersonTypes();
	const [monitorState, requestmonitor] = useEnvironmentalMonitoring();
	const [ScheduleState, requestSchedule] = useProjectSchedule();
	React.useEffect(() => {
		requestDeviceStatic();
		requestWarningList({ page: 1, filter: 0 });
		requestPerson();
		requestmonitor();
		requestSchedule();
	}, []);
	React.useEffect(() => {
		const myChart = echarts.init(
			document.getElementById('attendance-echarts-container') as HTMLDivElement
		);
		myChart.setOption({
			color: [
				'#00A0FF',
				'#00CCD6',
				'#2EC944',
				'#E0A521',
				'#28B88E',
				'#FD4D83',
				'#7BF440',
				'#148C68',
				'#FFCA52',
			],
			title: {
				show: false,
			},
			tooltip: {
				show: true, //悬浮上去显示信息
			},
			legend: {
				show: false,
			},
			textStyle: {
				color: '#A6DAF8', //所有文字的颜色
			},
			grid: {
				top: 20,
				bottom: 25,
			},
			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,
			},
			xAxis: {
				type: 'category',
				show: true, //是否显示x轴
				axisLine: {
					show: true, // 是否显示x轴的线条
					lineStyle: {
						color: '#A6DAF8',
					},
				},
				axisLabel: {
					interval: 0,
				},
				axisTick: {
					show: false, // 是否显示x轴的刻度
				},
				data: [],
			},
			series: [
				{
					type: 'bar',
					data: [],
				},
			],
		});
	}, []);
	React.useEffect(() => {
		if (myChart) {
			// 使用刚指定的配置项和数据显示图表。
			myChart.setOption({
				xAxis: {
					data: personState.dataSource.list
						.filter((element) => {
							return [1, 2, 3, 12, 11].includes(element.type_code);
						})
						.map((element) => {
							return {
								value: element.staff_type,
							};
						}),
				},
				series: [
					{
						data: personState.dataSource.list.map((element, index) => {
							return {
								value: element.attendance,
								itemStyle: {
									color: ['#FF8F00', '#FFC952', '#00CCD6', '#28B78D'][index],
								},
							};
						}),
					},
				],
			});
		}
	}, [JSON.stringify(personState.dataSource.list), myChart]);
	return (
		<StoreContext.Consumer>
			{(value) => {
				return (
					<div className='index'>
						<section className='left-wrapper'>
							<BoxWrapper title='项目概况' className='overview'>
								<div className='overViwe-content'>
									{overViewList.map((element) => {
										return (
											<div key={element.key}>
												<span>{element.name}:</span>
												<span className='record-value'>
													{value.projectInfo[element.key] || '-'}
													{!!value.projectInfo[element.key] ? element.uint : ''}
												</span>
											</div>
										);
									})}
								</div>
							</BoxWrapper>
							<BoxWrapper
								title='考勤统计'
								titleMore={
									<div
										className='attendance-title-opertion'
										onClick={() => {
											history.push('/person');
										}}>
										<span>更多</span>
										<RightOutlined></RightOutlined>
									</div>
								}
								className='attendance-box-wrapper'>
								<div className='attendance-content'>
									<div id='attendance-echarts-container'></div>
								</div>
							</BoxWrapper>
							<BoxWrapper
								title='实时环境监测'
								className='environmental-box-wrapper'>
								<div className='environmental-content'>
									{environmentalColums.map((environmental) => {
										return (
											<div
												className='environmental-item-wrapper'
												key={environmental.name}>
												<div
													className='environmental-icon'
													style={{
														backgroundImage: `URL(${environmental.icon})`,
													}}></div>
												<div className='environmental-desc'>
													<p className='environmental-name'>
														{environmental.name}
													</p>
													<p>
														<span
															className='environmental-value'
															style={{ color: environmental.color }}>
															{monitorState.dataSource[environmental.key]}
														</span>
														<span className='environmental-uint'>
															{environmental.unit}
														</span>
													</p>
												</div>
											</div>
										);
									})}
								</div>
							</BoxWrapper>
						</section>
						<section className='content-wrapper'>
							<div className='project-plan-wrapper'>
								{value.projectInfo.project_plan ? (
									<div
										style={{
											backgroundImage: `url("${
												value.projectInfo.project_plan || emptyPlanImg
											}")`,
										}}></div>
								) : (
									<div className='project-plan-imgError'></div>
								)}
							</div>
							<BoxWrapper
								title='施工进度'
								titleMore={
									<div className='schedule-title-moreInfo'>
										<p>
											计划开工日期: <span>{value.projectInfo.start_day}</span>
										</p>
										<p>
											计划竣工日期:<span>{value.projectInfo.end_day}</span>
										</p>
									</div>
								}
								className='schedule-box-wrapper'>
								<div className='schedule-content'>
									<div className='schedule-left'>
										<span>{ScheduleState.data.start_days}</span>
										<p>已施工(天)</p>
									</div>
									<div className='schedule-cneter'>
										<div
											className='schedule-btn schedule-pre-btn'
											onClick={() => {
												const wrapperNode = document.querySelector(
													'.schedule-process-wrapper'
												) as Element;
												const elementWidth = parseFloat(
													getComputedStyle(wrapperNode.firstChild as Element)[
														'width'
													]
												);
												document
													.querySelector('.schedule-process-wrapper')
													?.scrollBy(-elementWidth, 0);
											}}>
											<div>&lsaquo;</div>
										</div>
										<div className={`schedule-process-wrapper`}>
											{ScheduleState.data.list.map((schedule, index) => {
												return (
													<div key={schedule.id}>
														<div
															className={`schedule-status schedule-status-${
																schedule.status === 1
																	? 'sucessed'
																	: schedule.status === 3
																	? 'pending'
																	: 'wait'
															}`}></div>
														<div>{ScheduleStaus[schedule.status]}</div>
														<div>{schedule.name}</div>
														<span>
															{schedule.reality_end_time ||
																schedule.expect_start_time}
														</span>
													</div>
												);
											})}
										</div>
										<div
											className='schedule-btn schedule-next-btn'
											onClick={() => {
												const wrapperNode = document.querySelector(
													'.schedule-process-wrapper'
												) as Element;
												const elementWidth = parseFloat(
													getComputedStyle(wrapperNode.firstChild as Element)[
														'width'
													]
												);
												document
													.querySelector('.schedule-process-wrapper')
													?.scrollBy(elementWidth, 0);
											}}>
											<div>&rsaquo;</div>
										</div>
									</div>
									<div className='schedule-right'>
										<span>{ScheduleState.data.total_days}</span>
										<p>总工期(天)</p>
									</div>
								</div>
							</BoxWrapper>
						</section>
						<section className='right-wrapper'>
							<BoxWrapper title='问题统计' className='problem-box-wrapper'>
								<div className='problem-content'>
									<div className='quality-content'>
										<h3>质量问题</h3>
										<div>
											<p className='problem-num'>0</p>
											<p className='proble-label'>质量整改</p>
										</div>
									</div>
									<div className='drivier-line'></div>
									<div>
										<h3>安全问题</h3>
										<div>
											<p className='problem-num problem-safe-num'>0</p>
											<p className='proble-label'>安全整改</p>
										</div>
									</div>
								</div>
							</BoxWrapper>
							<BoxWrapper
								className='warning-box-wrapper'
								title='预警信息'
								titleMore={
									<div className='warning-tab'>
										<span
											data-checked={warningListState.deepData.type === 0}
											onClick={() => {
												requestWarningList({
													page: 1,
													filter: 0,
												});
											}}>
											最新
										</span>
										<span
											data-checked={warningListState.deepData.type === 1}
											onClick={() => {
												requestWarningList({
													page: 1,
													filter: 1,
												});
											}}>
											已处理
										</span>
										<span
											data-checked={warningListState.deepData.type === 2}
											onClick={() => {
												requestWarningList({
													page: 1,
													filter: 2,
												});
											}}>
											未处理
										</span>
									</div>
								}>
								<div className='warning-content'>
									<InfiniteScroll
										threshold={30}
										pageStart={1}
										initialLoad={false}
										useWindow={false}
										loadMore={(page) => {
											if (warningListState.hasMore) {
												requestWarningList({
													page,
													filter: warningListState.deepData.type,
												});
											}
										}}
										hasMore={
											!warningListState.loading && warningListState.hasMore
										}>
										{warningListState.dataSource.map((warning, index) => {
											return (
												<div className='warning-record' key={index}>
													<div className='warning-record-header'>
														<p>{warning.name || '-'}</p>
														<p>{warning.time || '-'}</p>
													</div>
													<div className='warning-info'>
														<span>{warning.reason}</span>
													</div>
												</div>
											);
										})}
									</InfiniteScroll>
								</div>
							</BoxWrapper>
							<BoxWrapper className='device-box-wrapper' title='设备统计'>
								<div className='device-content'>
									<div className='devicle-table-colums'>
										{[
											{ title: '设备', key: 'device_type', dataIndex: 'name' },
											{ title: '设备数量', key: 'total', dataIndex: 'name' },
											{ title: '在线', key: 'online', dataIndex: 'name' },
											{ title: '离线', key: 'offline', dataIndex: 'name' },
										].map((element) => {
											return (
												<div key={element.key}>
													<span>{element.title}</span>
												</div>
											);
										})}
									</div>
									<div className='devicle-table-data'>
										{deviceStatisState.dataSource.map((record) => {
											return (
												<div className='device-record' key={record.device_type}>
													<div>{record.device_type}</div>
													<div>{record.total}</div>
													<div>{record.online}</div>
													<div>{record.offline}</div>
												</div>
											);
										})}
									</div>
								</div>
							</BoxWrapper>
						</section>
					</div>
				);
			}}
		</StoreContext.Consumer>
	);
};
export default Index;
