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'>
                <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;