import cls from './index.module.css';
import { randomInt } from '../../../../utils';
import * as echarts from 'echarts';
import { Switch, Radio } from 'antd';
import ReactECharts from 'echarts-for-react';

const EnergyCostChart = (props) => {
	const options = {
		color: ['#FFD160', '#12FFF5', '#2760FF'],
		grid: { top: 32, right: 12, bottom: 20, left: 48 },
		xAxis: {
			type: 'category',
			data: Array(7)
				.fill(1)
				.map((_, index) => {
					const today = new Date();
					const dtimestamp = today - index * 24 * 60 * 60 * 1000;
					return `${new Date(dtimestamp).getMonth() + 1}.${new Date(
						dtimestamp,
					).getDate()}`;
				})
				.reverse(),
			axisLabel: {
				color: '#fff',
				fontSize: 12,
			},
			axisTick: { show: false },
			axisLine: {
				lineStyle: {
					width: 1,
					color: '#213259',
				},
			},
		},
		yAxis: {
			name: '单位/m³',
			nameTextStyle: {
				color: '#fff',
				fontSize: 10,
				align: 'right',
			},
			type: 'value',
			axisLabel: {
				color: '#fff',
				fontSize: 12,
				formatter: '{value} %',
			},
			axisLine: {
				show: true,
				lineStyle: {
					color: '#213259',
				},
			},
			splitLine: {
				lineStyle: {
					color: '#213259a0',
				},
			},
			interval: 10,
			min: 0,
			max: 100,
		},
		series: [
			{
				data: Array(7)
					.fill(1)
					.map((_) => {
						return randomInt(60, 100);
					}),
				type: 'line',
				areaStyle: {
					color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
						{ offset: 0, color: '#FFD16040' },
						{ offset: 0.5, color: '#FFD16020' },
						{ offset: 1, color: '#FFD16010' },
					]),
				},
				// smooth: true,
			},
		],
		tooltip: {
			trigger: 'axis',
		},
	};

	function handleSwitchChange(val) {
		// val: boolean
		console.log('switch change', val);
	}

	return (
		<div className={cls.energyCostChart}>
			<div className={cls.titleBar}>
				<h2>能耗趋势图</h2>
				<Switch defaultChecked onChange={handleSwitchChange} />
				<div className={cls.legend}>
					<span className="legend__title">班次详情</span>
					<ul className="legend__list">
						<li>总量</li>
					</ul>
				</div>
				<Radio.Group
					defaultValue="week"
					buttonStyle="solid"
					className={cls.radioGroup}
				>
					<Radio.Button value="day" className="radio-group__item">
						日
					</Radio.Button>
					<Radio.Button value="week" className="radio-group__item">
						周
					</Radio.Button>
					<Radio.Button value="month" className="radio-group__item">
						月
					</Radio.Button>
					<Radio.Button value="year" className="radio-group__item">
						年
					</Radio.Button>
				</Radio.Group>
			</div>
			<div className="flex-1">
				<ReactECharts option={options} style={{ height: '180px' }} />
			</div>
		</div>
	);
};

export default EnergyCostChart;
