import BottomBarItem from "../BottomItemBackground";
import React, { Component } from "react";
import cls from "./righttable.module.scss";

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"],
  ["产线42", "15mm", "15mm", "15mm"],
  ["产线5", "15mm", "15mm", "15mm"],
  ["产线6", "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: [128],
  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 (
      <BottomBarItem
        icon="pause"
        title="当前产线生产规格"
        className={this.props.className}
        style={Object.assign(this.props.style, { filter: "grayscale(100%)" })}
      >
        <div
          className={cls.CenterChart1itemDetailBorder}
          style={{ paddingTop: "6px" }}
        >
          <span className={cls.CenterFormitemDetailBorderLine1}></span>
          <span className={cls.CenterFormitemDetailBorderLine2}></span>
          <span className={cls.CenterFormitemDetailBorderLine3}></span>
          <ScrollBoard config={config} style={{}} />
        </div>
      </BottomBarItem>
    );
  }
}

export default Chart1;