import cls from './index.module.css';
import GraphBase from '../GraphBase';
import ReactECharts from 'echarts-for-react';
import { useState } from 'react';

function FaultType(props) {
	const options = {
		colors: [
			'#2760FF',
			'#5B9BFF',
			'#FFD160',
			'#8167F6',
			'#99D66C',
			'#FF8A40',
			'#12FFF5',
		],
		grid: {
			left: 24,
			top: 10,
			bottom: 10,
			right: 24,
		},
		legend: {
			icon: 'circle',
			top: 32,
			right: 0,
			bottom: 32,
			width: 296,
			height: 130,
			itemGap: 30,
			formatter: function (name) {
				return `${name} {sub|${
					options.series[0].data.find((o) => o.name == name).value
				}}`;
			},
			textStyle: {
				color: '#DFF1FE',
				fontSize: 18,
				rich: {
					sub: {
						color: '#fff9',
						fontSize: 18,
					},
				},
			},
		},
		series: [
			{
				type: 'pie',
				center: ['26%', '54%'],
				radius: ['55%', '75%'],
				avoidLabelOverlap: false,
				label: {
					show: true,
					formatter: '{d}%',
					fontSize: 14,
					color: 'inherit',
				},
				labelLine: {
					length: 0,
				},
				data: [
					{ value: 1048, name: '缺陷1' },
					{ value: 735, name: '缺陷2' },
					{ value: 580, name: '缺陷3' },
					{ value: 484, name: '缺陷4' },
					{ value: 300, name: '缺陷5' },
					{ value: 300, name: '缺陷6' },
					{ value: 300, name: '缺陷8' },
				],
			},
		],
	};

	const [lines, setLines] = useState([
		{ id: 1, label: '产线1', value: 'l1' },
		{ id: 2, label: '产线2', value: 'l2' },
		{ id: 3, label: '产线3', value: 'l3' },
		{ id: 4, label: '产线4', value: 'l4' },
		{ id: 5, label: '产线5', value: 'l5' },
	]);

	function handleDateChange(v) {
		console.log('date ', v);
	}

	// 根据使用的页面决定背景的大小
	const bgSize =
		props.page == 'home' ? ['middle', 'short'] : ['middle', 'short'];

	return (
		<GraphBase
			icon="battery"
			title="产线当日缺陷分类"
			dateOptions={lines.map((item) => item.label)}
			onDateChange={handleDateChange}
			size={bgSize}
			style={{ width: '600px' }}
		>
			<div className={cls.chart}>
				<ReactECharts option={options} style={{ height: '100%' }} />
			</div>
		</GraphBase>
	);
}

export default FaultType;