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

function FaultType(props) {
	const options = {
		colors: [
			'#2760FF',
			'#5B9BFF',
			'#FFD160',
			'#8167F6',
			'#99D66C',
			'#FF8A40',
			'#12FFF5',
		],
		grid: {
			left: 0,
			top: 0,
			bottom: 0,
			right: 0,
		},
		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: 16,
				rich: {
					sub: {
						color: '#fff9',
						fontSize: 16,
					},
				},
			},
		},
		series: [
			{
				type: 'pie',
				center: ['26%', '54%'],
				radius: ['55%', '75%'],
				avoidLabelOverlap: false,
				label: {
					show: true,
					formatter: '{d}%',
					fontSize: 14,
					color: 'inherit',
				},
				labelLine: {
					length: 0,
				},
				// emphasis: {
				// 	label: {
				// 		show: true,
				// 		fontSize: 40,
				// 		fontWeight: 'bold',
				// 	},
				// },
				// labelLine: {
				// 	show: false,
				// },
				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' },
	]);
	return (
		<BottomBarItem
			icon="puzzle"
			title="产线当日缺陷分类"
			className={cls.faultType}
		>
			<div className={cls.headWidget}>
				{/* 日周月年 */}
				<Radio.Group
					defaultValue="l1"
					buttonStyle="solid"
					className={cls.radioGroup}
				>
					{lines.map((l, index) => (
						<Radio.Button
							key={l.label}
							value={l.value}
							className={`radio-group__item ${cls['radio-group__item']}`}
						>
							{l.label}
						</Radio.Button>
					))}
				</Radio.Group>
			</div>
			<div className={cls.chart}>
				<ReactECharts option={options} style={{ height: '100%' }} />
			</div>
		</BottomBarItem>
	);
}

export default FaultType;