import React, { Component } from 'react';
import './righttable.module.less';

import { ScrollBoard } from '@jiaminghi/data-view-react';

let data = [
	['产线0', '10mm', '10mm', '10mm'],
	['产线2', '8mm', '8mm', '8mm'],
	['产线3', '15mm', '15mm', '15mm'],
	['产线4', '15mm', '15mm', '15mm'],
];

let header = ['产线名', '原板宽度', '净板宽', '玻璃厚度'];

let config = {
	headerBGC: 'rgba(4, 44, 76, 0.3)',
	header: [
		'<span style="color:#fff">产线名<span/>',
		'<span style="color:#fff">原板宽度<span/>',
		'<span style="color:#fff">净板宽<span/>',
		'<span style="color:#fff">玻璃厚度<span/>',
	],
	oddRowBGC: '#042444',
	evenRowBGC: '#042c4c',
	columnWidth: [90],
	headerHeight: 40,
	hoverPause: false,
	data: replaceStyle(data, 0.7),
};

function replaceStyle(Arr, opencity) {
	let temp = [];

	for (let i = 0; i < Arr.length; i++) {
		temp[i] = [];
		for (let j = 0; j < Arr[i].length; j++) {
			temp[i][
				j
			] = ` <span style="color:rgba(255, 255, 255,${opencity})">${Arr[i][j]}<span/>`;
		}
	}

	return temp;
}

class Chart1 extends Component {
	render() {
		return (
			<div className="CenterChart1itemDetailBorder" style={{ opacity: 0.75 }}>
				<h2 className="CenterChart1itemTXT"> 当前产线生产规格</h2>
				<div className="CenterChart1itemContainer">
					<span className="CenterFormitemDetailBorderLine1"></span>
					<span className="CenterFormitemDetailBorderLine2"></span>
					<span className="CenterFormitemDetailBorderLine3"></span>
					<ScrollBoard
						config={config}
						style={{ width: '105%', height: '240%' }}
					/>
				</div>
			</div>
		);
	}
}

export default Chart1;