import * as React from 'react';
import { DatePicker } from 'antd';
import {} from 'echarts';
import moment, { Moment } from 'moment';
import { DatePickerProps } from 'antd/lib/date-picker';
import './index.scss';
import echarts from '../../../../utils/echarts';
interface Iprops {
	unit?: string;
	className?: string;
	dateType: 'hours' | 'day' | 'month';
	defaultTime: Moment;
	onChangeDate: (value: Moment | null, dateString: string) => void;
	dataSource: {
		xAxisData: string[];
		yAxisData: string[];
	};
	lineStyle?: object;
}
const dataStatistics: React.FC<Iprops> = (props) => {
	const chartInstance = React.useRef<any>(null);
	const echartsContainer = React.useRef<HTMLDivElement>(null);
	const {
		className,
		dateType,
		defaultTime,
		onChangeDate,
		dataSource,
		lineStyle = {},
	} = props;
	React.useEffect(() => {
		chartInstance.current = echarts.init(
			echartsContainer.current as HTMLDivElement
		);
	}, []);
	React.useEffect(() => {
		chartInstance.current.setOption({
			xAxis: {
				type: 'category',
				show: true, //是否显示x轴
				axisLine: {
					show: true, // 是否显示x轴的线条
					lineStyle: {
						color: '#A6DAF8',
					},
				},
				data: dataSource.xAxisData,
				axisTick: {
					show: false, // 是否显示x轴的刻度
				},
			},
			grid: {
				top: '15%',
				bottom: '20%',
			},
			yAxis: {
				name: `单位：${props.unit}`, // Y轴加上单位
				// nameTextStyle: {
				//   color: '#A5D9F7', //单位颜色
				// },
				type: 'value',
				show: true,

				splitLine: {
					show: false, // 是否显示辅助线
				},
				axisTick: {
					show: false, // 是否显示y轴的刻度
				},
				axisLine: {
					show: true, // 是否显示Y轴线
					lineStyle: {
						color: '#A6DAF8',
					},
				},
				min: 0,
				scale: false,
				minInterval: 1,
			},

			series: [
				{
					data: dataSource.yAxisData,
					type: 'line',
					symbol: 'none', // 取消小圆点
					smooth: true,
					lineStyle: {
						color: '#FFC951',
						width: 3,
						...lineStyle,
					},
				},
			],
		});
	}, [dataSource, lineStyle]);

	let datePickerOptions: DatePickerProps = {
		allowClear: false,
		onChange: onChangeDate,
		defaultValue: defaultTime,
	};
	switch (dateType) {
		case 'hours':
			datePickerOptions = {
				...datePickerOptions,
				disabledDate: (current) => {
					return current && current > moment().endOf('hours');
				},

				showTime: { format: 'HH' },
				format: 'YYYY-MM-DD HH',
			};
			break;
		case 'day':
			datePickerOptions = {
				...datePickerOptions,
				format: 'YYYY-MM-DD',
				disabledDate: (current) => {
					return current && current > moment().endOf('day');
				},
			};
			break;
		default:
			datePickerOptions = {
				...datePickerOptions,
				disabledDate: (current) => {
					return current && current > moment().endOf('month');
				},
				format: 'YYYY-MM',
				picker: 'month',
			};
	}
	return (
		<div className='data-statistics-charts-wrapper'>
			<DatePicker
				allowClear
				dropdownClassName='data-statistics-picker-date'
				className='data-statistics-date'
				{...datePickerOptions}></DatePicker>
			<div className={className} ref={echartsContainer}></div>;
		</div>
	);
};
export default dataStatistics;
