import { createMuiTheme, FormControlLabel, Input, MuiThemeProvider, TableCell, Typography } from '@material-ui/core'
import MUIDataTable from 'mui-datatables';
import React, { Component } from 'react'
import NumberFormat from 'react-number-format';
import * as R from 'ramda'


var ct = require("../../library/CustomTable");
const getMuiTheme = () => createMuiTheme(ct.customTable3());

const options = ct.customOptionsFixedColumn();
const style = {
    position: "sticky",
    left: 0,
    zIndex: 101,
    background: "white",
};
const style2 = {
    position: "sticky",
    background: "white",
    zIndex: 100
};

export default class TableSubHolding extends Component {
    render() {
        let dataTable2 = this.props.dataTable
        const handleChangeBS = (value, tableMeta, type) => {
            let val = String(value).split(",").join("")
            if (type === "actual") {
                dataTable2[tableMeta.rowIndex][tableMeta.columnIndex] = Number(val).toFixed(1)
            } else {
                let indexParent = dataTable2.findIndex((val) => val[1] === dataTable2[tableMeta.rowIndex][2])
                if (indexParent > 0) {
                    // console.log(indexParent)
                    let a = dataTable2[tableMeta.rowIndex][tableMeta.columnIndex] = Number(val)
                    let jagain = dataTable2[indexParent][tableMeta.columnIndex]
                    a = dataTable2[indexParent][tableMeta.columnIndex] = jagain === undefined ? (0 + Number(val)).toFixed(1) : Number(jagain + Number(val)).toFixed(1)
                } else {
                    dataTable2[tableMeta.rowIndex][tableMeta.columnIndex] = Number(val).toFixed(1)
                }
            }
        }
        const handleValueBS = (data) => {
            let total = 0
            dataTable2.map((item, index) => {
                if (data.rowData[1] === item[2]) {
                    total = item[data.columnIndex] === undefined ? (Number(total) + 0) : (Number(total) + Number(item[data.columnIndex]))
                }
            })
            let indexParent = dataTable2.findIndex((val) => val[1] === dataTable2[data.rowIndex][2])
            let a = dataTable2[data.rowIndex][data.columnIndex] = Number(total).toFixed(1)
            // console.log(indexParent);
            return a
        }
        const handleFormulaBS = (data, tableMeta) => {
            let arrayFormula = tableMeta.rowData[3].match(/[a-zA-Z]+|[0-9]+|[-!$%^&*()_+|~=`{}\[\]:";'<>?,.\/]+(?:\.[0-9]+@|)/g)
            let arrayJumlah = []
            arrayFormula.map((item, indexs) => {
                let index = dataTable2.findIndex((val) => val[22] == item)
                if (index > 0) {
                    arrayJumlah.push(dataTable2[index][tableMeta.columnIndex])
                } else {
                    arrayJumlah.push(item)
                }
                // if (indexs % 2 !== 0) {
                //     operator.push(item)
                // }
            })
            let array = arrayJumlah
            let total = 0
            let opt = ""
            array.map((item, index) => {
                if (item == "+") {
                    opt = "tambah"
                } else if (item == "-") {
                    opt = "kurang"
                } else if (item == "*") {
                    opt = "kali"
                } else if (item == "/") {
                    opt = "bagi"
                } else {
                    if (opt == "tambah") {
                        total = Number(total) + Number(item)
                    } else if (opt == "kurang") {
                        total = Number(total) - Number(item)
                    } else if (opt == "kali") {
                        total = Number(total) * Number(item)
                    } else if (opt == "bagi") {
                        total = Number(total) / Number(item)
                    } else {
                        total += item
                    }
                }
            })
            let a = dataTable2[tableMeta.rowIndex][tableMeta.columnIndex] = Number(total).toFixed(1)
            return a

        }
        const handleValidationBS = (data, tableMeta) => {
            let arrayFormula = tableMeta.rowData[3].match(/[a-zA-Z]+|[0-9]+|[-!$%^&*()_+|~=`{}\[\]:";'<>?,.\/]+(?:\.[0-9]+@|)/g)
            let arrayJumlah = []
            arrayFormula.map((item, indexs) => {
                let index = dataTable2.findIndex((val) => val[22] == item)
                if (index > 0) {
                    arrayJumlah.push(dataTable2[index][tableMeta.columnIndex])
                } else {
                    arrayJumlah.push(item)
                }
                // if (indexs % 2 !== 0) {
                //     operator.push(item)
                // }
            })
            let array = arrayJumlah
            let total = 0
            let opt = ""
            array.map((item, index) => {
                if (item == "+") {
                    opt = "tambah"
                } else if (item == "-") {
                    opt = "kurang"
                } else if (item == "*") {
                    opt = "kali"
                } else if (item == "/") {
                    opt = "bagi"
                } else {
                    if (opt == "tambah") {
                        total = Number(total) + Number(item)
                    } else if (opt == "kurang") {
                        total = Number(total) - Number(item)
                    } else if (opt == "kali") {
                        total = Number(total) * Number(item)
                    } else if (opt == "bagi") {
                        total = Number(total) / Number(item)
                    } else {
                        total += item
                    }
                }
            })
            let a = dataTable2[tableMeta.rowIndex][tableMeta.columnIndex] = Number(total).toFixed(1)
            return a
        }

        const handleNotesPLDetail = (value, tableMeta) => {
            // console.log(value)
            let a = dataTable2[tableMeta.rowIndex][tableMeta.columnIndex] = value
            // console.log(dataTable2[tableMeta.rowIndex]);
        }
        const handleChangePLDetail = (value, tableMeta, type) => {
            let val = String(value).split(",").join("")
            if (type === "actual") {
                dataTable2[tableMeta.rowIndex][tableMeta.columnIndex] = Number(val)
            } else {
                // let indexParent = dataTable2.findIndex((val) => val[1] == dataTable2[tableMeta.rowIndex][2])
                // if (indexParent > 0) {
                //     // // console.log(indexParent)
                //     let a = dataTable2[tableMeta.rowIndex][tableMeta.columnIndex] = Number(val)
                //     let jagain = dataTable2[indexParent][tableMeta.columnIndex]
                //     a = dataTable2[indexParent][tableMeta.columnIndex] = jagain == undefined ? (0 + Number(val)) : (Number(jagain) + Number(val))
                // } else {
                dataTable2[tableMeta.rowIndex][tableMeta.columnIndex] = Number(val)
                // }

            }
        }
        const handleTotalPLDetail = (tableMeta) => {
            let total = 0
            dataTable2[tableMeta.rowIndex].map((item, index) => {
                if (index >= 8 && index <= 19) {
                    let valItem = item == undefined || item == "" ? 0 : item
                    total += Number(valItem)
                }
            })
            let indexParent = dataTable2.findIndex((val) => val[1] == tableMeta.rowData[2])
            if (String(tableMeta.rowData[5]).toLocaleLowerCase() == "sales price") {
                let value = Number(dataTable2[tableMeta.rowIndex - 2][20]) / Number(dataTable2[tableMeta.rowIndex - 1][20])
                dataTable2[tableMeta.rowIndex][20] = R.equals(value, NaN) ? "0.0" : value
                return R.equals(value, NaN) ? "0.0" : value
            } else if (indexParent !== -1 && String(dataTable2[indexParent][5]).toLocaleUpperCase() == "GROSS PROFIT MARGIN (% OF REVENUE)") {
                return handleFormulaPLDetail(0, tableMeta, 0)
            }
            else {

                dataTable2[tableMeta.rowIndex][20] = total
                return total
            }
            // console.log(total);
        }
        const handleValuePLDetail = (data) => {
            let total = 0
            dataTable2.map((item, index) => {
                if (data.rowData[1] == item[2]) {
                    total = item[data.columnIndex] == undefined ? (Number(total) + 0) : (Number(total) + Number(item[data.columnIndex]))
                }
            })
            let indexParent = dataTable2.findIndex((val) => val[1] == dataTable2[data.rowIndex][2])
            let a = dataTable2[data.rowIndex][data.columnIndex] = Number(total)
            // console.log(indexParent);
            return a
        }
        const handleFormulaPLDetail = (data, tableMeta, month) => {
            let arrayFormula = tableMeta.rowData[3].match(/[a-zA-Z]+|[0-9]+|[-!$%^&*()_+|~=`{}\[\]:";'<>?,.\/]+(?:\.[0-9]+@|)/g)
            let arrayJumlah = []
            arrayFormula.map((item, indexs) => {
                let index = dataTable2.findIndex((val) => val[23] == item)
                if (index > 0) {
                    arrayJumlah.push(dataTable2[index][tableMeta.columnIndex])
                } else {
                    arrayJumlah.push(item)
                }
                // if (indexs % 2 !== 0) {
                //     operator.push(item)
                // }
            })
            let array = arrayJumlah
            let total = 0
            let opt = ""
            array.map((item, index) => {
                if (item == "+") {
                    opt = "tambah"
                } else if (item == "-") {
                    opt = "kurang"
                } else if (item == "*") {
                    opt = "kali"
                } else if (item == "/") {
                    opt = "bagi"
                } else {
                    if (opt == "tambah") {
                        total = Number(total) + Number(item)
                    } else if (opt == "kurang") {
                        total = Number(total) - Number(item)
                    } else if (opt == "kali") {
                        total = Number(total) * Number(item)
                    } else if (opt == "bagi") {
                        total = R.equals((Number(total) / Number(item)), NaN) ? '0' : Number(total) / Number(item)
                    } else {
                        total += item
                    }
                }
            })
            let a = dataTable2[tableMeta.rowIndex][tableMeta.columnIndex] = Number(total)
            return a

        }

        const handleValueFormulaDBPL = (value, tableMeta, column, periode, forecast) => {
            let splitFormula = String(tableMeta.rowData[3]).split(/([()@])/)
            // let splitFormula = String(tableMeta.rowData[3]).split('@')
            let baru = []
            let anjay = []

            // if (forecast !== undefined) {
            //     console.log(tableMeta)
            // }

            splitFormula.map((item, index) => {
                let items = String(item).substr(Number(String(item).length) - 1, 1)
                let subForm = String(item).substr(0, Number(String(item).length) - 1)
                let re = /^[a-zA-Z0-9_]+$/;
                let asd = ''
                if (item !== "") {
                    if (!re.test(items)) {
                        baru.push(subForm)
                        baru.push(items)
                    } else {
                        baru.push(String(item))
                    }
                }
            })

            baru.map((item, index) => {
                if (item == '-' || item == '+' || item == '/' || item == '*' || item == '(' || item == ')') {
                    anjay.push(item)
                } else {
                    if (String(item).includes('#')) {
                        if (forecast !== undefined) {
                            let forecastt = 0
                            forecast.map((items, index) => {
                                if (items.periode == periode) {
                                    forecastt += Number(items.value)
                                }
                            })
                            anjay.push(forecastt)
                        } else {
                            if (String(item).includes('[M-1]')) {
                                let tst = String(item).replace('[M-1]', '')
                                let data = column == 7 ? 18 : column - 1
                                let period = data == 18 ? Number(this.props.periode) - 1 : this.props.periode
                                let indexID = tableMeta.rowData[data].formula.findIndex((val) => val.item_formula == String(`@${tst}`) && val.periode == period)

                                if (indexID !== -1) {
                                    let valuezz = tableMeta.rowData[data].formula[indexID].value
                                    anjay.push(valuezz == "" ? 0 : valuezz)
                                }
                            } else {
                                let indexID = value.formula.findIndex((val) => val.item_formula == String(`@${item}`) && val.periode == Number(this.props.periode))
                                if (indexID !== -1) {
                                    let valuezz = value.formula[indexID].value
                                    anjay.push(valuezz == "" ? 0 : valuezz)
                                }
                            }
                        }

                    } else {
                        let indexID = dataTable2.findIndex((val) => val[22] == item)
                        if (indexID !== -1) {
                            // if (forecast !== undefined) {
                            //     console.log(dataTable2[indexID])
                            //     console.log(column)
                            //     console.log(dataTable2[indexID][column])

                            // }
                            if (forecast != undefined) {
                                // console.log(dataTable2[indexID][column])
                            }
                            let valuezz = dataTable2[indexID][column].value == undefined ? dataTable2[indexID][column] : dataTable2[indexID][column].value
                            anjay.push(valuezz == "" ? 0 : valuezz)
                        } else {
                            if (item === '(-1)') {
                                anjay.push(-1)
                            }
                        }
                    }
                }
            })

            let anjay2 = []
            let kurung = false
            let item1 = []
            anjay.map((item, index) => {
                if (item == "(") {
                    kurung = true
                } else if (item == ")") {
                    kurung = false
                    anjay2.push(item1)
                    item1 = []
                } else {
                    if (kurung) {
                        item1.push(item)
                    } else {
                        anjay2.push(item)
                    }
                }
            })

            // if (tableMeta.rowData[5] == "1.0 Cash inflow/ (outflow)  from Operating Activities") {
            //     console.log(anjay2)
            // }

            let total = 0
            let opt = ""
            let totalPrio = 0
            let optPrio = ""
            let prio = false
            anjay2.map((item, index) => {
                if (Array.isArray(item)) {
                    prio = true
                    item.map((items, indexs) => {
                        if (items == "+") {
                            optPrio = "tambah"
                        } else if (items == "-") {
                            optPrio = "kurang"
                        } else if (items == "*") {
                            optPrio = "kali"
                        } else if (items == "/") {
                            optPrio = "bagi"
                        } else {
                            if (optPrio == "tambah") {
                                totalPrio = Number(totalPrio) + Number(items)
                            } else if (optPrio == "kurang") {
                                totalPrio = Number(totalPrio) - Number(items)
                            } else if (optPrio == "kali") {
                                totalPrio = Number(totalPrio) * Number(items)
                            } else if (optPrio == "bagi") {
                                totalPrio = Number(totalPrio) / Number(items) == NaN ? 0 : Number(totalPrio) / Number(items)
                            } else {
                                totalPrio += Number(items)
                            }
                        }
                    })

                    if (index == anjay2.length - 1) {
                        if (opt == "tambah") {
                            total = Number(total) + Number(totalPrio)
                        } else if (opt == "kurang") {
                            total = Number(total) - Number(totalPrio)
                        } else if (opt == "kali") {
                            total = Number(total) * Number(totalPrio)
                        } else if (opt == "bagi") {
                            total = Number(total) / Number(totalPrio) == NaN ? 0 : Number(total) / Number(totalPrio)
                        } else {
                            total += Number(totalPrio)
                        }
                    }
                } else {
                    // console.log(item.length)
                    if (item == "+") {
                        opt = "tambah"
                        if (prio) {
                            total = Number(Number(totalPrio) + Number(total))
                            prio = false
                            totalPrio = 0
                            optPrio = ""
                        }
                    } else if (item == "-") {
                        opt = "kurang"
                        if (prio) {
                            total = Number(Number(totalPrio) + Number(total))
                            prio = false
                            totalPrio = 0
                            optPrio = ""
                        }
                    } else if (item == "*") {
                        opt = "kali"
                        if (prio) {
                            total = Number(Number(totalPrio) + Number(total))
                            prio = false
                            totalPrio = 0
                            optPrio = ""
                        }
                    } else if (item == "/") {
                        opt = "bagi"
                        if (prio) {
                            total = Number(Number(totalPrio) + Number(total))
                            prio = false
                            totalPrio = 0
                            optPrio = ""
                        }
                    } else {
                        if (opt == "tambah") {
                            total = Number(total) + Number(item)
                        } else if (opt == "kurang") {
                            total = Number(total) - Number(item)
                        } else if (opt == "kali") {
                            total = Number(total) * Number(item)
                        } else if (opt == "bagi") {
                            total = Number(total) / Number(item) == NaN ? 0 : Number(total) / Number(item)
                        } else {
                            total += Number(item)
                        }
                    }
                }
            })

            total = R.equals(total, NaN) ? "0.0" : total
            // // total = R.equals(total, NaN) ? "0.0" : total
            // // console.log(dataTable2[tableMeta.rowIndex][22])
            // // console.log(tableMeta.rowData[5])   
            // // if (tableMeta.rowData[5] == 'Beginning Balance') {
            // console.log(baru)
            // console.log(anjay)
            // console.log(anjay2)
            // console.log(total)
            // }

            if (dataTable2[tableMeta.rowIndex][column].value == undefined) {
                // console.log([tableMeta.rowIndex][tableMeta.columnIndex])
                dataTable2[tableMeta.rowIndex][column] = total
            } else {
                dataTable2[tableMeta.rowIndex][column].value = total
            }

            return total
        }

        const handleForecastDBPL = (tableMeta, periode, column) => {
            let total = 0

            if (tableMeta.rowData[3].includes('#PL')) {
                dataTable2[tableMeta.rowIndex][25].map((item, index) => {
                    if (item.periode == periode) {
                        total += Number(item.value)
                    }
                })
            } else {
                total = handleValueFormulaDBPL(dataTable2[tableMeta.rowIndex][column], tableMeta, column, periode, dataTable2[tableMeta.rowIndex][25])
            }

            // console.log(column)
            // console.log(tableMeta.rowIndex)
            // console.log(total)
            dataTable2[tableMeta.rowIndex][column] = total
            // total = handleValueFormulaDBPL(dataTable2[tableMeta.rowIndex][column], tableMeta, column, periode, dataTable2[tableMeta.rowIndex][25])
            // console.log(total)
            return total
        }

        const handleFormulaRatio = (value, tableMeta, month) => {
            let total = 0
            if (month > 12) {
                total = Number(dataTable2[35][7 + month])
            } else {
                for (let index = 0; index < month; index++) {
                    total += Number(dataTable2[35][8 + index])
                    // console.log(index);
                }
                total = total/month
            }
            let hasil = Number(value) / total
            // console.log(hasil, value, total);
            return Number(hasil).toFixed(2)
        }

        const columnDBBS = [{
            name: "",
            options: {
                display: false
            }
        }, {
            name: "",
            options: {
                display: false
            }
        }, {
            name: "",
            options: {
                display: false
            }
        }, {
            name: "",
            options: {
                display: false
            }
        }, {
            name: "",
            options: {
                display: false
            }
        }, {
            name: "Account",
            options: {
                customHeadRender: (columnMeta) => (
                    <TableCell key={columnMeta.index} style={{ ...style, top: 0, zIndex: 103, backgroundColor: '#1c71b8', width: 300 }}>
                        <Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'left' }}>{columnMeta.name}</Typography>
                    </TableCell>
                ),
                setCellProps: () => ({ style }),
                customBodyRender: (val, tableMeta) => {
                    return (
                        <div style={{ width: 300 }}>
                            {
                                tableMeta.rowData[4] == 0 ?
                                    <span style={{ fontSize: 12, fontWeight: 'bold' }}>{String(tableMeta.rowData[0] === 4 ? "" : val).toUpperCase()}</span>
                                    :
                                    <div style={{ paddingLeft: 20 * Number(tableMeta.rowData[4]) }}>
                                        <span style={{ fontSize: 12 }}>{tableMeta.rowData[0] === 4 ? "" : val}</span>
                                    </div>
                            }
                        </div>
                    )
                }
            }
        }, {
            name: `MB ${this.props.periode}`,
            options: {
                customHeadRender: (columnMeta) => (
                    <th style={{ ...style2, color: '#fff', backgroundColor: '#07a7d0', top: 0, zIndex: 102, fontSize: 13, fontWeight: 1, width: 150, borderRight: "1px solid rgb(255, 255, 255)", padding: 0 }} >
                        {/* <TableCell style={{ ...style2, top: 0, zIndex: 99, backgroundColor: '#1c71b8', width: 96 }}>
                            <Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography>
                        </TableCell> */}
                        <div style={{ borderBottom: "1px #fff solid", backgroundColor: '#1c71b8', textAlign: 'center', fontSize: 12, fontWeight: 'bold', padding: 5 }}>{columnMeta.name}</div>
                        <div className="grid grid-3x" style={{ ...style2, color: '#fff', fontSize: 12, fontWeight: 'bold', position: "sticky" }}>
                            <div className="column-1 grid grid-4x" style={{ placeSelf: 'center', textAlign: 'center', backgroundColor: '#07a7d0' }}>
                                <div className="column-1" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#07a7d0' }}>
                                    <span>{"1"}</span>
                                </div>
                                <div className="column-2" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#07a7d0' }}>
                                    <span>{"2"}</span>
                                </div>
                                <div className="column-3" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#07a7d0' }}>
                                    <span>{"3"}</span>
                                </div>
                                <div className="column-4" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#07a7d0' }}>
                                    <span>{"4"}</span>
                                </div>
                            </div>
                            <div className="column-2 grid grid-4x" style={{ placeSelf: 'center', textAlign: 'center', backgroundColor: '#07a7d0' }}>
                                <div className="column-1" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#07a7d0' }}>
                                    <span>{"5"}</span>
                                </div>
                                <div className="column-2" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#07a7d0' }}>
                                    <span>{"6"}</span>
                                </div>
                                <div className="column-3" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#07a7d0' }}>
                                    <span>{"7"}</span>
                                </div>
                                <div className="column-4" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#07a7d0' }}>
                                    <span>{"8"}</span>
                                </div>

                            </div>
                            <div className="column-3 grid grid-4x" style={{ placeSelf: 'center', textAlign: 'center', backgroundColor: '#07a7d0' }}>
                                <div className="column-1" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#07a7d0' }}>
                                    <span>{"9"}</span>
                                </div>
                                <div className="column-2" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#07a7d0' }}>
                                    <span>{"10"}</span>
                                </div>
                                <div className="column-3" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#07a7d0' }}>
                                    <span>{"11"}</span>
                                </div>
                                <div className="column-4" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, backgroundColor: '#07a7d0' }}>
                                    <span>{"12"}</span>
                                </div>
                            </div>

                        </div>
                    </th>
                ),
                setCellProps: () => ({ style2 }),
                customBodyRender: (value, tableMeta, updateValue) => {
                    return (
                        <div>
                            <div className="grid grid-3x content-center">
                                <div className="grid grid-4x content-center">
                                    <div className="col-1">
                                        {tableMeta.rowData[0] === 4 ?
                                            null
                                            : tableMeta.rowData[0] === 1 ?
                                                null :
                                                <div style={{ flex: 1 }}>
                                                    <FormControlLabel
                                                        style={{ margin: 0 }}
                                                        value={value}
                                                        control={
                                                            <NumberFormat
                                                                thousandSeparator={true}
                                                                style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                                type="text"
                                                                placeholder=""
                                                                disabled={true}
                                                                value={Number(tableMeta.rowData[7]).toFixed(1)}
                                                            />
                                                        }
                                                    />
                                                </div>
                                        }
                                    </div>
                                    <div className="col-2">
                                        {tableMeta.rowData[0] === 4 ?
                                            null
                                            : tableMeta.rowData[0] === 1 ?
                                                null :
                                                <div style={{ flex: 1 }}>
                                                    <FormControlLabel
                                                        style={{ margin: 0 }}
                                                        value={value}
                                                        control={
                                                            <NumberFormat
                                                                thousandSeparator={true}
                                                                style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                                type="text"
                                                                placeholder=""
                                                                disabled={true}
                                                                value={Number(tableMeta.rowData[8]).toFixed(1)}
                                                            />
                                                        }
                                                    />
                                                </div>
                                        }
                                    </div>
                                    <div className="col-3">
                                        {tableMeta.rowData[0] === 4 ?
                                            null
                                            : tableMeta.rowData[0] === 1 ?
                                                null :
                                                <div style={{ flex: 1 }}>
                                                    <FormControlLabel
                                                        style={{ margin: 0 }}
                                                        value={value}
                                                        control={
                                                            <NumberFormat
                                                                thousandSeparator={true}
                                                                style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                                type="text"
                                                                placeholder=""
                                                                disabled={true}
                                                                value={Number(tableMeta.rowData[9]).toFixed(1)}
                                                            />
                                                        }
                                                    />
                                                </div>
                                        }
                                    </div>
                                    <div className="col-4">
                                        {tableMeta.rowData[0] === 4 ?
                                            null
                                            : tableMeta.rowData[0] === 1 ?
                                                null :
                                                <div style={{ flex: 1 }}>
                                                    <FormControlLabel
                                                        style={{ margin: 0 }}
                                                        value={value}
                                                        control={
                                                            <NumberFormat
                                                                thousandSeparator={true}
                                                                style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                                type="text"
                                                                placeholder=""
                                                                disabled={true}
                                                                value={Number(tableMeta.rowData[10]).toFixed(1)}
                                                            />
                                                        }
                                                    />
                                                </div>
                                        }
                                    </div>
                                </div>
                                <div className="grid grid-4x content-center">
                                    <div className="col-1">
                                        {tableMeta.rowData[0] === 4 ?
                                            null
                                            : tableMeta.rowData[0] === 1 ?
                                                null :
                                                <div style={{ flex: 1 }}>
                                                    <FormControlLabel
                                                        style={{ margin: 0 }}
                                                        value={value}
                                                        control={
                                                            <NumberFormat
                                                                thousandSeparator={true}
                                                                style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                                type="text"
                                                                placeholder=""
                                                                disabled={true}
                                                                value={Number(tableMeta.rowData[11]).toFixed(1)}
                                                            />
                                                        }
                                                    />
                                                </div>
                                        }
                                    </div>
                                    <div className="col-2">
                                        {tableMeta.rowData[0] === 4 ?
                                            null
                                            : tableMeta.rowData[0] === 1 ?
                                                null :
                                                <div style={{ flex: 1 }}>
                                                    <FormControlLabel
                                                        style={{ margin: 0 }}
                                                        value={value}
                                                        control={
                                                            <NumberFormat
                                                                thousandSeparator={true}
                                                                style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                                type="text"
                                                                placeholder=""
                                                                disabled={true}
                                                                value={Number(tableMeta.rowData[12]).toFixed(1)}
                                                            />
                                                        }
                                                    />
                                                </div>
                                        }
                                    </div>
                                    <div className="col-3">
                                        {tableMeta.rowData[0] === 4 ?
                                            null
                                            : tableMeta.rowData[0] === 1 ?
                                                null :
                                                <div style={{ flex: 1 }}>
                                                    <FormControlLabel
                                                        style={{ margin: 0 }}
                                                        value={value}
                                                        control={
                                                            <NumberFormat
                                                                thousandSeparator={true}
                                                                style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                                type="text"
                                                                placeholder=""
                                                                disabled={true}
                                                                value={Number(tableMeta.rowData[13]).toFixed(1)}
                                                            />
                                                        }
                                                    />
                                                </div>
                                        }
                                    </div>
                                    <div className="col-4">
                                        {tableMeta.rowData[0] === 4 ?
                                            null
                                            : tableMeta.rowData[0] === 1 ?
                                                null :
                                                <div style={{ flex: 1 }}>
                                                    <FormControlLabel
                                                        style={{ margin: 0 }}
                                                        value={value}
                                                        control={
                                                            <NumberFormat
                                                                thousandSeparator={true}
                                                                style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                                type="text"
                                                                placeholder=""
                                                                disabled={true}
                                                                value={Number(tableMeta.rowData[14]).toFixed(1)}
                                                            />
                                                        }
                                                    />
                                                </div>
                                        }
                                    </div>
                                </div>
                                <div className="grid grid-4x content-center">
                                    <div className="col-1">
                                        {tableMeta.rowData[0] === 4 ?
                                            null
                                            : tableMeta.rowData[0] === 1 ?
                                                null :
                                                <div style={{ flex: 1 }}>
                                                    <FormControlLabel
                                                        style={{ margin: 0 }}
                                                        value={value}
                                                        control={
                                                            <NumberFormat
                                                                thousandSeparator={true}
                                                                style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                                type="text"
                                                                placeholder=""
                                                                disabled={true}
                                                                value={Number(tableMeta.rowData[15]).toFixed(1)}
                                                            />
                                                        }
                                                    />
                                                </div>
                                        }
                                    </div>
                                    <div className="col-2">
                                        {tableMeta.rowData[0] === 4 ?
                                            null
                                            : tableMeta.rowData[0] === 1 ?
                                                null :
                                                <div style={{ flex: 1 }}>
                                                    <FormControlLabel
                                                        style={{ margin: 0 }}
                                                        value={value}
                                                        control={
                                                            <NumberFormat
                                                                thousandSeparator={true}
                                                                style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                                type="text"
                                                                placeholder=""
                                                                disabled={true}
                                                                value={Number(tableMeta.rowData[16]).toFixed(1)}
                                                            />
                                                        }
                                                    />
                                                </div>
                                        }
                                    </div>
                                    <div className="col-3">
                                        {tableMeta.rowData[0] === 4 ?
                                            null
                                            : tableMeta.rowData[0] === 1 ?
                                                null :
                                                <div style={{ flex: 1 }}>
                                                    <FormControlLabel
                                                        style={{ margin: 0 }}
                                                        value={value}
                                                        control={
                                                            <NumberFormat
                                                                thousandSeparator={true}
                                                                style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                                type="text"
                                                                placeholder=""
                                                                disabled={true}
                                                                value={Number(tableMeta.rowData[17]).toFixed(1)}
                                                            />
                                                        }
                                                    />
                                                </div>
                                        }
                                    </div>
                                    <div className="col-4">
                                        {tableMeta.rowData[0] === 4 ?
                                            null
                                            : tableMeta.rowData[0] === 1 ?
                                                null :
                                                <div style={{ flex: 1 }}>
                                                    <FormControlLabel
                                                        style={{ margin: 0 }}
                                                        value={value}
                                                        control={
                                                            <NumberFormat
                                                                thousandSeparator={true}
                                                                style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                                type="text"
                                                                placeholder=""
                                                                disabled={true}
                                                                value={Number(tableMeta.rowData[18]).toFixed(1)}
                                                            />
                                                        }
                                                    />
                                                </div>
                                        }
                                    </div>
                                </div>
                            </div>
                        </div>
                    )
                }
            }
        }, {
            name: "",
            options: {
                display: false
            }
        }, {
            name: "",
            options: {
                display: false
            }
        }, {
            name: "",
            options: {
                display: false
            }
        }, {
            name: "",
            options: {
                display: false
            }
        }, {
            name: "",
            options: {
                display: false
            }
        }, {
            name: "",
            options: {
                display: false
            }
        }, {
            name: "",
            options: {
                display: false
            }
        }, {
            name: "",
            options: {
                display: false
            }
        }, {
            name: "",
            options: {
                display: false
            }
        }, {
            name: "",
            options: {
                display: false
            }
        }, {
            name: `${Number(this.props.periode) + 1}`,
            options: {
                customHeadRender: (columnMeta) => (
                    <th style={{ ...style2, color: '#fff', backgroundColor: '#07a7d0', top: 0, zIndex: 102, fontSize: 13, fontWeight: 1, width: 150, borderRight: "1px solid rgb(255, 255, 255)", padding: 0 }} >
                        {/* <TableCell style={{ ...style2, top: 0, zIndex: 99, backgroundColor: '#1c71b8', width: 96 }}>
                            <Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography>
                        </TableCell> */}
                        <div style={{ borderBottom: "1px #fff solid", backgroundColor: '#1c71b8', textAlign: 'center', fontSize: 12, fontWeight: 'bold', padding: 5 }}>{columnMeta.name}</div>
                        <div className="grid grid-1x" style={{ ...style2, color: '#fff', fontSize: 12, fontWeight: 'bold', position: "sticky" }}>
                            <div className="column-1" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, backgroundColor: '#07a7d0' }}>
                                <span>{"ForeCast"}</span>
                            </div>
                        </div>
                    </th>
                ),
                setCellProps: () => ({ style2 }),
                customBodyRender: (value, tableMeta, updateValue) => {
                    return (
                        <div style={{ textAlign: 'right' }}>
                            {tableMeta.rowData[0] === 4 ?
                                null
                                : tableMeta.rowData[0] === 1 ?
                                    null :
                                    <div style={{ flex: 1 }}>
                                        <FormControlLabel
                                            style={{ margin: 0 }}
                                            value={value}
                                            control={
                                                <NumberFormat
                                                    thousandSeparator={true}
                                                    style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                    type="text"
                                                    placeholder=""
                                                    disabled={true}
                                                    value={Number(tableMeta.rowData[20]).toFixed(1)}
                                                />
                                            }
                                        />
                                    </div>
                            }
                        </div>
                    )
                }
            }
        }, {
            name: `${Number(this.props.periode) + 2}`,
            options: {
                customHeadRender: (columnMeta) => (
                    <th style={{ ...style2, color: '#fff', backgroundColor: '#07a7d0', fontSize: 13, top: 0, zIndex: 102, fontWeight: 1, width: 150, borderRight: "1px solid rgb(255, 255, 255)", padding: 0 }} >
                        {/* <TableCell style={{ ...style2, top: 0, zIndex: 99, backgroundColor: '#1c71b8', width: 96 }}>
                            <Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography>
                        </TableCell> */}
                        <div style={{ borderBottom: "1px #fff solid", backgroundColor: '#1c71b8', textAlign: 'center', fontSize: 12, fontWeight: 'bold', padding: 5 }}>{columnMeta.name}</div>
                        <div className="grid grid-1x" style={{ ...style2, color: '#fff', fontSize: 12, fontWeight: 'bold', position: "sticky" }}>
                            <div className="column-1" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, backgroundColor: '#07a7d0' }}>
                                <span>{"ForeCast"}</span>
                            </div>
                        </div>
                    </th>
                ),
                setCellProps: () => ({ style2 }),
                customBodyRender: (value, tableMeta, updateValue) => {
                    return (
                        <div style={{ textAlign: 'right' }}>
                            {tableMeta.rowData[0] === 4 ?
                                null
                                : tableMeta.rowData[0] === 1 ?
                                    null :
                                    <div style={{ flex: 1 }}>
                                        <FormControlLabel
                                            style={{ margin: 0 }}
                                            value={value}
                                            control={
                                                <NumberFormat
                                                    thousandSeparator={true}
                                                    style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                    type="text"
                                                    placeholder=""
                                                    disabled={true}
                                                    value={Number(tableMeta.rowData[21]).toFixed(1)}
                                                />
                                            }
                                        />
                                    </div>
                            }
                        </div>
                    )
                }
            }
        }, {
            name: "",
            options: {
                display: false
            }
        }, {
            name: "",
            options: {
                display: false
            }
        }, {
            name: "",
            options: {
                display: false
            }
        }, {
            name: "",
            options: {
                display: false
            }
        }
        ]

        const columnDBPLDetail = [{
            name: "",
            options: {
                display: false
            }
        }, {
            name: "",
            options: {
                display: false
            }
        }, {
            name: "",
            options: {
                display: false
            }
        }, {
            name: "",
            options: {
                display: false
            }
        }, {
            name: "",
            options: {
                display: false
            }
        }, {
            name: "Account",
            options: {
                customHeadRender: (columnMeta) => (
                    <TableCell key={columnMeta.index} style={{ ...style, top: 0, zIndex: 103, backgroundColor: '#1c71b8', width: 300 }}>
                        <Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'left' }}>{columnMeta.name}</Typography>
                    </TableCell>
                ),
                setCellProps: () => ({ style }),
                customBodyRender: (val, tableMeta) => {
                    return (
                        <div style={{ width: 300 }}>
                            {
                                tableMeta.rowData[4] == 0 ?
                                    <span style={{ fontSize: 12, fontWeight: 'bold' }}>{String(tableMeta.rowData[0] === 4 ? "" : val).toUpperCase()}</span>
                                    :
                                    <div style={{ paddingLeft: 20 * Number(tableMeta.rowData[4]) }}>
                                        <span style={{ fontSize: 12 }}>{tableMeta.rowData[0] === 4 ? "" : val}</span>
                                    </div>
                            }
                        </div>
                    )
                }
            }
        }, {
            name: `MB ${this.props.periode}`,
            options: {
                customHeadRender: (columnMeta) => (
                    <th style={{ ...style2, color: '#fff', backgroundColor: '#07a7d0', top: 0, zIndex: 102, fontSize: 13, fontWeight: 1, width: 150, borderRight: "1px solid rgb(255, 255, 255)", padding: 0 }} >
                        {/* <TableCell style={{ ...style2, top: 0, zIndex: 99, backgroundColor: '#1c71b8', width: 96 }}>
                            <Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography>
                        </TableCell> */}
                        <div style={{ borderBottom: "1px #fff solid", backgroundColor: '#1c71b8', textAlign: 'center', fontSize: 12, fontWeight: 'bold', padding: 5 }}>{columnMeta.name}</div>
                        <div className="grid grid-3x" style={{ ...style2, color: '#fff', fontSize: 12, fontWeight: 'bold', position: "sticky" }}>
                            <div className="column-1 grid grid-4x" style={{ placeSelf: 'center', textAlign: 'center', backgroundColor: '#07a7d0' }}>
                                <div className="column-1" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#07a7d0' }}>
                                    <span>{"1"}</span>
                                </div>
                                <div className="column-2" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#07a7d0' }}>
                                    <span>{"2"}</span>
                                </div>
                                <div className="column-3" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#07a7d0' }}>
                                    <span>{"3"}</span>
                                </div>
                                <div className="column-4" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#07a7d0' }}>
                                    <span>{"4"}</span>
                                </div>
                            </div>
                            <div className="column-2 grid grid-4x" style={{ placeSelf: 'center', textAlign: 'center', backgroundColor: '#07a7d0' }}>
                                <div className="column-1" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#07a7d0' }}>
                                    <span>{"5"}</span>
                                </div>
                                <div className="column-2" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#07a7d0' }}>
                                    <span>{"6"}</span>
                                </div>
                                <div className="column-3" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#07a7d0' }}>
                                    <span>{"7"}</span>
                                </div>
                                <div className="column-4" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#07a7d0' }}>
                                    <span>{"8"}</span>
                                </div>

                            </div>
                            <div className="column-3 grid grid-4x" style={{ placeSelf: 'center', textAlign: 'center', backgroundColor: '#07a7d0' }}>
                                <div className="column-1" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#07a7d0' }}>
                                    <span>{"9"}</span>
                                </div>
                                <div className="column-2" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#07a7d0' }}>
                                    <span>{"10"}</span>
                                </div>
                                <div className="column-3" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#07a7d0' }}>
                                    <span>{"11"}</span>
                                </div>
                                <div className="column-4" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, backgroundColor: '#07a7d0' }}>
                                    <span>{"12"}</span>
                                </div>
                            </div>

                        </div>
                    </th>
                ),
                setCellProps: () => ({ style2 }),
                customBodyRender: (value, tableMeta, updateValue) => {
                    return (
                        <div>
                            <div className="grid grid-3x content-center">
                                <div className="grid grid-4x content-center">
                                    <div className="col-1">
                                        {tableMeta.rowData[0] === 4 ?
                                            null
                                            : tableMeta.rowData[0] === 1 ?
                                                null :
                                                <div style={{ flex: 1 }}>
                                                    <FormControlLabel
                                                        style={{ margin: 0 }}
                                                        value={value}
                                                        control={
                                                            <NumberFormat
                                                                thousandSeparator={true}
                                                                style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                                type="text"
                                                                placeholder=""
                                                                disabled={true}
                                                                value={Number(tableMeta.rowData[7]).toFixed(1)}
                                                            />
                                                        }
                                                    />
                                                </div>
                                        }
                                    </div>
                                    <div className="col-2">
                                        {tableMeta.rowData[0] === 4 ?
                                            null
                                            : tableMeta.rowData[0] === 1 ?
                                                null :
                                                <div style={{ flex: 1 }}>
                                                    <FormControlLabel
                                                        style={{ margin: 0 }}
                                                        value={value}
                                                        control={
                                                            <NumberFormat
                                                                thousandSeparator={true}
                                                                style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                                type="text"
                                                                placeholder=""
                                                                disabled={true}
                                                                value={Number(tableMeta.rowData[8]).toFixed(1)}
                                                            />
                                                        }
                                                    />
                                                </div>
                                        }
                                    </div>
                                    <div className="col-3">
                                        {tableMeta.rowData[0] === 4 ?
                                            null
                                            : tableMeta.rowData[0] === 1 ?
                                                null :
                                                <div style={{ flex: 1 }}>
                                                    <FormControlLabel
                                                        style={{ margin: 0 }}
                                                        value={value}
                                                        control={
                                                            <NumberFormat
                                                                thousandSeparator={true}
                                                                style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                                type="text"
                                                                placeholder=""
                                                                disabled={true}
                                                                value={Number(tableMeta.rowData[9]).toFixed(1)}
                                                            />
                                                        }
                                                    />
                                                </div>
                                        }
                                    </div>
                                    <div className="col-4">
                                        {tableMeta.rowData[0] === 4 ?
                                            null
                                            : tableMeta.rowData[0] === 1 ?
                                                null :
                                                <div style={{ flex: 1 }}>
                                                    <FormControlLabel
                                                        style={{ margin: 0 }}
                                                        value={value}
                                                        control={
                                                            <NumberFormat
                                                                thousandSeparator={true}
                                                                style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                                type="text"
                                                                placeholder=""
                                                                disabled={true}
                                                                value={Number(tableMeta.rowData[10]).toFixed(1)}
                                                            />
                                                        }
                                                    />
                                                </div>
                                        }
                                    </div>
                                </div>
                                <div className="grid grid-4x content-center">
                                    <div className="col-1">
                                        {tableMeta.rowData[0] === 4 ?
                                            null
                                            : tableMeta.rowData[0] === 1 ?
                                                null :
                                                <div style={{ flex: 1 }}>
                                                    <FormControlLabel
                                                        style={{ margin: 0 }}
                                                        value={value}
                                                        control={
                                                            <NumberFormat
                                                                thousandSeparator={true}
                                                                style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                                type="text"
                                                                placeholder=""
                                                                disabled={true}
                                                                value={Number(tableMeta.rowData[11]).toFixed(1)}
                                                            />
                                                        }
                                                    />
                                                </div>
                                        }
                                    </div>
                                    <div className="col-2">
                                        {tableMeta.rowData[0] === 4 ?
                                            null
                                            : tableMeta.rowData[0] === 1 ?
                                                null :
                                                <div style={{ flex: 1 }}>
                                                    <FormControlLabel
                                                        style={{ margin: 0 }}
                                                        value={value}
                                                        control={
                                                            <NumberFormat
                                                                thousandSeparator={true}
                                                                style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                                type="text"
                                                                placeholder=""
                                                                disabled={true}
                                                                value={Number(tableMeta.rowData[12]).toFixed(1)}
                                                            />
                                                        }
                                                    />
                                                </div>
                                        }
                                    </div>
                                    <div className="col-3">
                                        {tableMeta.rowData[0] === 4 ?
                                            null
                                            : tableMeta.rowData[0] === 1 ?
                                                null :
                                                <div style={{ flex: 1 }}>
                                                    <FormControlLabel
                                                        style={{ margin: 0 }}
                                                        value={value}
                                                        control={
                                                            <NumberFormat
                                                                thousandSeparator={true}
                                                                style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                                type="text"
                                                                placeholder=""
                                                                disabled={true}
                                                                value={Number(tableMeta.rowData[13]).toFixed(1)}
                                                            />
                                                        }
                                                    />
                                                </div>
                                        }
                                    </div>
                                    <div className="col-4">
                                        {tableMeta.rowData[0] === 4 ?
                                            null
                                            : tableMeta.rowData[0] === 1 ?
                                                null :
                                                <div style={{ flex: 1 }}>
                                                    <FormControlLabel
                                                        style={{ margin: 0 }}
                                                        value={value}
                                                        control={
                                                            <NumberFormat
                                                                thousandSeparator={true}
                                                                style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                                type="text"
                                                                placeholder=""
                                                                disabled={true}
                                                                value={Number(tableMeta.rowData[14]).toFixed(1)}
                                                            />
                                                        }
                                                    />
                                                </div>
                                        }
                                    </div>
                                </div>
                                <div className="grid grid-4x content-center">
                                    <div className="col-1">
                                        {tableMeta.rowData[0] === 4 ?
                                            null
                                            : tableMeta.rowData[0] === 1 ?
                                                null :
                                                <div style={{ flex: 1 }}>
                                                    <FormControlLabel
                                                        style={{ margin: 0 }}
                                                        value={value}
                                                        control={
                                                            <NumberFormat
                                                                thousandSeparator={true}
                                                                style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                                type="text"
                                                                placeholder=""
                                                                disabled={true}
                                                                value={Number(tableMeta.rowData[15]).toFixed(1)}
                                                            />
                                                        }
                                                    />
                                                </div>
                                        }
                                    </div>
                                    <div className="col-2">
                                        {tableMeta.rowData[0] === 4 ?
                                            null
                                            : tableMeta.rowData[0] === 1 ?
                                                null :
                                                <div style={{ flex: 1 }}>
                                                    <FormControlLabel
                                                        style={{ margin: 0 }}
                                                        value={value}
                                                        control={
                                                            <NumberFormat
                                                                thousandSeparator={true}
                                                                style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                                type="text"
                                                                placeholder=""
                                                                disabled={true}
                                                                value={Number(tableMeta.rowData[16]).toFixed(1)}
                                                            />
                                                        }
                                                    />
                                                </div>
                                        }
                                    </div>
                                    <div className="col-3">
                                        {tableMeta.rowData[0] === 4 ?
                                            null
                                            : tableMeta.rowData[0] === 1 ?
                                                null :
                                                <div style={{ flex: 1 }}>
                                                    <FormControlLabel
                                                        style={{ margin: 0 }}
                                                        value={value}
                                                        control={
                                                            <NumberFormat
                                                                thousandSeparator={true}
                                                                style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                                type="text"
                                                                placeholder=""
                                                                disabled={true}
                                                                value={Number(tableMeta.rowData[17]).toFixed(1)}
                                                            />
                                                        }
                                                    />
                                                </div>
                                        }
                                    </div>
                                    <div className="col-4">
                                        {tableMeta.rowData[0] === 4 ?
                                            null
                                            : tableMeta.rowData[0] === 1 ?
                                                null :
                                                <div style={{ flex: 1 }}>
                                                    <FormControlLabel
                                                        style={{ margin: 0 }}
                                                        value={value}
                                                        control={
                                                            <NumberFormat
                                                                thousandSeparator={true}
                                                                style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                                type="text"
                                                                placeholder=""
                                                                disabled={true}
                                                                value={Number(tableMeta.rowData[18]).toFixed(1)}
                                                            />
                                                        }
                                                    />
                                                </div>
                                        }
                                    </div>
                                </div>
                            </div>
                        </div>
                    )
                }
            }
        }, {
            name: "",
            options: {
                display: false
            }
        }, {
            name: "",
            options: {
                display: false
            }
        }, {
            name: "",
            options: {
                display: false
            }
        }, {
            name: "",
            options: {
                display: false
            }
        }, {
            name: "",
            options: {
                display: false
            }
        }, {
            name: "",
            options: {
                display: false
            }
        }, {
            name: "",
            options: {
                display: false
            }
        }, {
            name: "",
            options: {
                display: false
            }
        }, {
            name: "",
            options: {
                display: false
            }
        }, {
            name: "",
            options: {
                display: false
            }
        }, {
            name: `${Number(this.props.periode) + 1}`,
            options: {
                customHeadRender: (columnMeta) => (
                    <th style={{ ...style2, color: '#fff', backgroundColor: '#07a7d0', top: 0, zIndex: 102, fontSize: 13, fontWeight: 1, width: 150, borderRight: "1px solid rgb(255, 255, 255)", padding: 0 }} >
                        {/* <TableCell style={{ ...style2, top: 0, zIndex: 99, backgroundColor: '#1c71b8', width: 96 }}>
                            <Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography>
                        </TableCell> */}
                        <div style={{ borderBottom: "1px #fff solid", backgroundColor: '#1c71b8', textAlign: 'center', fontSize: 12, fontWeight: 'bold', padding: 5 }}>{columnMeta.name}</div>
                        <div className="grid grid-1x" style={{ ...style2, color: '#fff', fontSize: 12, fontWeight: 'bold', position: "sticky" }}>
                            <div className="column-1" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, backgroundColor: '#07a7d0' }}>
                                <span>{"ForeCast"}</span>
                            </div>
                        </div>
                    </th>
                ),
                setCellProps: () => ({ style2 }),
                customBodyRender: (value, tableMeta, updateValue) => {
                    return (
                        <div style={{ textAlign: 'right' }}>
                            {tableMeta.rowData[0] === 4 ?
                                null
                                : tableMeta.rowData[0] === 1 ?
                                    null :
                                    <div style={{ flex: 1 }}>
                                        <FormControlLabel
                                            style={{ margin: 0 }}
                                            value={value}
                                            control={
                                                <NumberFormat
                                                    thousandSeparator={true}
                                                    style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                    type="text"
                                                    placeholder=""
                                                    disabled={true}
                                                    value={Number(tableMeta.rowData[20]).toFixed(1)}
                                                />
                                            }
                                        />
                                    </div>
                            }
                        </div>
                    )
                }
            }
        }, {
            name: `${Number(this.props.periode) + 2}`,
            options: {
                customHeadRender: (columnMeta) => (
                    <th style={{ ...style2, color: '#fff', backgroundColor: '#07a7d0', fontSize: 13, top: 0, zIndex: 102, fontWeight: 1, width: 150, borderRight: "1px solid rgb(255, 255, 255)", padding: 0 }} >
                        {/* <TableCell style={{ ...style2, top: 0, zIndex: 99, backgroundColor: '#1c71b8', width: 96 }}>
                            <Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography>
                        </TableCell> */}
                        <div style={{ borderBottom: "1px #fff solid", backgroundColor: '#1c71b8', textAlign: 'center', fontSize: 12, fontWeight: 'bold', padding: 5 }}>{columnMeta.name}</div>
                        <div className="grid grid-1x" style={{ ...style2, color: '#fff', fontSize: 12, fontWeight: 'bold', position: "sticky" }}>
                            <div className="column-1" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, backgroundColor: '#07a7d0' }}>
                                <span>{"ForeCast"}</span>
                            </div>
                        </div>
                    </th>
                ),
                setCellProps: () => ({ style2 }),
                customBodyRender: (value, tableMeta, updateValue) => {
                    return (
                        <div style={{ textAlign: 'right' }}>
                            {tableMeta.rowData[0] === 4 ?
                                null
                                : tableMeta.rowData[0] === 1 ?
                                    null :
                                    <div style={{ flex: 1 }}>
                                        <FormControlLabel
                                            style={{ margin: 0 }}
                                            value={value}
                                            control={
                                                <NumberFormat
                                                    thousandSeparator={true}
                                                    style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                    type="text"
                                                    placeholder=""
                                                    disabled={true}
                                                    value={Number(tableMeta.rowData[21]).toFixed(1)}
                                                />
                                            }
                                        />
                                    </div>
                            }
                        </div>
                    )
                }
            }
        }, {
            name: "",
            options: {
                display: false
            }
        }, {
            name: "",
            options: {
                display: false
            }
        }, {
            name: "",
            options: {
                display: false
            }
        }, {
            name: "",
            options: {
                display: false
            }
        }
        ]

        const columnDBPL = [{
            name: "",
            options: {
                display: false
            }
        }, {
            name: "",
            options: {
                display: false
            }
        }, {
            name: "",
            options: {
                display: false
            }
        }, {
            name: "",
            options: {
                display: false
            }
        }, {
            name: "",
            options: {
                display: false
            }
        }, {
            name: "Account",
            options: {
                customHeadRender: (columnMeta) => (
                    <TableCell key={columnMeta.index} style={{ ...style, top: 0, zIndex: 103, backgroundColor: '#1c71b8', width: 300 }}>
                        <Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'left' }}>{columnMeta.name}</Typography>
                    </TableCell>
                ),
                setCellProps: () => ({ style }),
                customBodyRender: (val, tableMeta) => {
                    return (
                        <div style={{ width: 300 }}>
                            {
                                tableMeta.rowData[4] == 0 ?
                                    <span style={{ fontSize: 12, fontWeight: 'bold' }}>{String(tableMeta.rowData[0] === 4 ? "" : val).toUpperCase()}</span>
                                    :
                                    <div style={{ paddingLeft: 20 * Number(tableMeta.rowData[4]) }}>
                                        <span style={{ fontSize: 12 }}>{tableMeta.rowData[0] === 4 ? "" : val}</span>
                                    </div>
                            }
                        </div>
                    )
                }
            }
        }, {
            name: `MB ${this.props.periode}`,
            options: {
                customHeadRender: (columnMeta) => (
                    <th style={{ ...style2, color: '#fff', backgroundColor: '#07a7d0', top: 0, zIndex: 102, fontSize: 13, fontWeight: 1, width: 150, borderRight: "1px solid rgb(255, 255, 255)", padding: 0 }} >
                        {/* <TableCell style={{ ...style2, top: 0, zIndex: 99, backgroundColor: '#1c71b8', width: 96 }}>
                            <Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography>
                        </TableCell> */}
                        <div style={{ borderBottom: "1px #fff solid", backgroundColor: '#1c71b8', textAlign: 'center', fontSize: 12, fontWeight: 'bold', padding: 5 }}>{columnMeta.name}</div>
                        <div className="grid grid-3x" style={{ ...style2, color: '#fff', fontSize: 12, fontWeight: 'bold', position: "sticky" }}>
                            <div className="column-1 grid grid-4x" style={{ placeSelf: 'center', textAlign: 'center', backgroundColor: '#07a7d0' }}>
                                <div className="column-1" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#07a7d0' }}>
                                    <span>{"1"}</span>
                                </div>
                                <div className="column-2" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#07a7d0' }}>
                                    <span>{"2"}</span>
                                </div>
                                <div className="column-3" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#07a7d0' }}>
                                    <span>{"3"}</span>
                                </div>
                                <div className="column-4" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#07a7d0' }}>
                                    <span>{"4"}</span>
                                </div>
                            </div>
                            <div className="column-2 grid grid-4x" style={{ placeSelf: 'center', textAlign: 'center', backgroundColor: '#07a7d0' }}>
                                <div className="column-1" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#07a7d0' }}>
                                    <span>{"5"}</span>
                                </div>
                                <div className="column-2" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#07a7d0' }}>
                                    <span>{"6"}</span>
                                </div>
                                <div className="column-3" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#07a7d0' }}>
                                    <span>{"7"}</span>
                                </div>
                                <div className="column-4" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#07a7d0' }}>
                                    <span>{"8"}</span>
                                </div>

                            </div>
                            <div className="column-3 grid grid-4x" style={{ placeSelf: 'center', textAlign: 'center', backgroundColor: '#07a7d0' }}>
                                <div className="column-1" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#07a7d0' }}>
                                    <span>{"9"}</span>
                                </div>
                                <div className="column-2" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#07a7d0' }}>
                                    <span>{"10"}</span>
                                </div>
                                <div className="column-3" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#07a7d0' }}>
                                    <span>{"11"}</span>
                                </div>
                                <div className="column-4" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, backgroundColor: '#07a7d0' }}>
                                    <span>{"12"}</span>
                                </div>
                            </div>

                        </div>
                    </th>
                ),
                setCellProps: () => ({ style2 }),
                customBodyRender: (val, tableMeta, updateValue) => {
                    return (
                        <div>
                            <div className="grid grid-3x content-center">
                                <div className="grid grid-4x content-center">
                                    <div className="col-1">
                                        {tableMeta.rowData[0] === 3 ?
                                            null
                                            // <div style={{ flex: 1 }}>
                                            //     <FormControlLabel
                                            //         style={{ margin: 0 }}
                                            //         value={value}
                                            //         control={
                                            //             <NumberFormat
                                            //                 thousandSeparator={true}
                                            //                 style={{ color: "#5198ea", fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                            //                 type="text"
                                            //                 placeholder=""
                                            //                 disabled={true}
                                            //                 value={Number(tableMeta).toFixed(1)}
                                            //                 onBlur={(event) => {
                                            //                     handleChange(event.target.value, tableMeta)
                                            //                     console.log(dataTable2)
                                            //                 }}
                                            //             />
                                            //         }
                                            //     />
                                            // </div> 
                                            :
                                            // null
                                            tableMeta.rowData[0] === 5 ?
                                                <span style={{ fontSize: 12, textAlign: 'right' }}>
                                                    <NumberFormat
                                                        thousandSeparator={true}
                                                        style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                        type="text"
                                                        placeholder=""
                                                        disabled={true}
                                                        value={Number(handleValueFormulaDBPL(tableMeta.rowData[7], tableMeta, 7)).toFixed(1)}
                                                    />
                                                </span>
                                                :
                                                tableMeta.rowData[0] === 4 ?
                                                    null
                                                    :
                                                    tableMeta.rowData[0] === 6 ?
                                                        <NumberFormat
                                                            thousandSeparator={true}
                                                            style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                            type="text"
                                                            placeholder=""
                                                            disabled={true}
                                                            value={Number(handleValueFormulaDBPL(tableMeta.rowData[7], tableMeta, 7)).toFixed(1)}
                                                        />
                                                        :
                                                        tableMeta.rowData[0] === 1 ?
                                                            null
                                                            :
                                                            tableMeta.rowData[0] === 7 ?
                                                                <NumberFormat
                                                                    thousandSeparator={true}
                                                                    style={{
                                                                        fontSize: 12,
                                                                        textAlign: 'right',
                                                                        borderColor: 'transparent',
                                                                        margin: 0,
                                                                        width: 96,
                                                                        backgroundColor: 'transparent',
                                                                    }}
                                                                    type="text"
                                                                    placeholder=""
                                                                    disabled={true}
                                                                    value={Number(handleValueFormulaDBPL(tableMeta.rowData[7], tableMeta, 7)).toFixed(1)}
                                                                />
                                                                :
                                                                null
                                        }
                                    </div>
                                    <div className="col-2">
                                        {tableMeta.rowData[0] === 3 ?
                                            null
                                            // <div style={{ flex: 1 }}>
                                            //     <FormControlLabel
                                            //         style={{ margin: 0 }}
                                            //         value={value}
                                            //         control={
                                            //             <NumberFormat
                                            //                 thousandSeparator={true}
                                            //                 style={{ color: "#5198ea", fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                            //                 type="text"
                                            //                 placeholder=""
                                            //                 disabled={true}
                                            //                 value={Number(tableMeta).toFixed(1)}
                                            //                 onBlur={(event) => {
                                            //                     handleChange(event.target.value, tableMeta)
                                            //                     console.log(dataTable2)
                                            //                 }}
                                            //             />
                                            //         }
                                            //     />
                                            // </div> 
                                            :
                                            // null
                                            tableMeta.rowData[0] === 5 ?
                                                // null 
                                                <span style={{ fontSize: 12, textAlign: 'right' }}>
                                                    <NumberFormat
                                                        thousandSeparator={true}
                                                        style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                        type="text"
                                                        placeholder=""
                                                        disabled={true}
                                                        value={Number(handleValueFormulaDBPL(tableMeta.rowData[8], tableMeta, 8)).toFixed(1)}
                                                    />
                                                </span>
                                                :
                                                tableMeta.rowData[0] === 4 ?
                                                    null
                                                    :
                                                    tableMeta.rowData[0] === 6 ?
                                                        // null
                                                        <NumberFormat
                                                            thousandSeparator={true}
                                                            style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                            type="text"
                                                            placeholder=""
                                                            disabled={true}
                                                            value={Number(handleValueFormulaDBPL(tableMeta.rowData[8], tableMeta, 8)).toFixed(1)}
                                                        />
                                                        :
                                                        tableMeta.rowData[0] === 1 ?
                                                            null
                                                            :
                                                            tableMeta.rowData[0] === 7 ?
                                                                <NumberFormat
                                                                    thousandSeparator={true}
                                                                    style={{
                                                                        fontSize: 12,
                                                                        textAlign: 'right',
                                                                        borderColor: 'transparent',
                                                                        margin: 0,
                                                                        width: 96,
                                                                        backgroundColor: 'transparent',
                                                                    }}
                                                                    type="text"
                                                                    placeholder=""
                                                                    disabled={true}
                                                                    value={Number(handleValueFormulaDBPL(tableMeta.rowData[8], tableMeta, 8)).toFixed(1)}
                                                                />
                                                                :
                                                                null
                                        }
                                    </div>
                                    <div className="col-3">
                                        {tableMeta.rowData[0] === 3 ?
                                            null
                                            // <div style={{ flex: 1 }}>
                                            //     <FormControlLabel
                                            //         style={{ margin: 0 }}
                                            //         value={value}
                                            //         control={
                                            //             <NumberFormat
                                            //                 thousandSeparator={true}
                                            //                 style={{ color: "#5198ea", fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                            //                 type="text"
                                            //                 placeholder=""
                                            //                 disabled={true}
                                            //                 value={Number(tableMeta).toFixed(1)}
                                            //                 onBlur={(event) => {
                                            //                     handleChange(event.target.value, tableMeta)
                                            //                     console.log(dataTable2)
                                            //                 }}
                                            //             />
                                            //         }
                                            //     />
                                            // </div> 
                                            :
                                            // null
                                            tableMeta.rowData[0] === 5 ?
                                                // null 
                                                <span style={{ fontSize: 12, textAlign: 'right' }}>
                                                    <NumberFormat
                                                        thousandSeparator={true}
                                                        style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                        type="text"
                                                        placeholder=""
                                                        disabled={true}
                                                        value={Number(handleValueFormulaDBPL(tableMeta.rowData[9], tableMeta, 9)).toFixed(1)}
                                                    />
                                                </span>
                                                :
                                                tableMeta.rowData[0] === 4 ?
                                                    null
                                                    :
                                                    tableMeta.rowData[0] === 6 ?
                                                        // null
                                                        <NumberFormat
                                                            thousandSeparator={true}
                                                            style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                            type="text"
                                                            placeholder=""
                                                            disabled={true}
                                                            value={Number(handleValueFormulaDBPL(tableMeta.rowData[9], tableMeta, 9)).toFixed(1)}
                                                        />
                                                        :
                                                        tableMeta.rowData[0] === 1 ?
                                                            null
                                                            :
                                                            tableMeta.rowData[0] === 7 ?
                                                                <NumberFormat
                                                                    thousandSeparator={true}
                                                                    style={{
                                                                        fontSize: 12,
                                                                        textAlign: 'right',
                                                                        borderColor: 'transparent',
                                                                        margin: 0,
                                                                        width: 96,
                                                                        backgroundColor: 'transparent',
                                                                    }}
                                                                    type="text"
                                                                    placeholder=""
                                                                    disabled={true}
                                                                    value={Number(handleValueFormulaDBPL(tableMeta.rowData[9], tableMeta, 9)).toFixed(1)}
                                                                />
                                                                :
                                                                null
                                        }
                                    </div>
                                    <div className="col-4">
                                        {tableMeta.rowData[0] === 3 ?
                                            null
                                            // <div style={{ flex: 1 }}>
                                            //     <FormControlLabel
                                            //         style={{ margin: 0 }}
                                            //         value={value}
                                            //         control={
                                            //             <NumberFormat
                                            //                 thousandSeparator={true}
                                            //                 style={{ color: "#5198ea", fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                            //                 type="text"
                                            //                 placeholder=""
                                            //                 disabled={true}
                                            //                 value={Number(tableMeta).toFixed(1)}
                                            //                 onBlur={(event) => {
                                            //                     handleChange(event.target.value, tableMeta)
                                            //                     console.log(dataTable2)
                                            //                 }}
                                            //             />
                                            //         }
                                            //     />
                                            // </div> 
                                            :
                                            // null
                                            tableMeta.rowData[0] === 5 ?
                                                // null 
                                                <span style={{ fontSize: 12, textAlign: 'right' }}>
                                                    <NumberFormat
                                                        thousandSeparator={true}
                                                        style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                        type="text"
                                                        placeholder=""
                                                        disabled={true}
                                                        value={Number(handleValueFormulaDBPL(tableMeta.rowData[10], tableMeta, 10)).toFixed(1)}
                                                    />
                                                </span>
                                                :
                                                tableMeta.rowData[0] === 4 ?
                                                    null
                                                    :
                                                    tableMeta.rowData[0] === 6 ?
                                                        // null
                                                        <NumberFormat
                                                            thousandSeparator={true}
                                                            style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                            type="text"
                                                            placeholder=""
                                                            disabled={true}
                                                            value={Number(handleValueFormulaDBPL(tableMeta.rowData[10], tableMeta, 10)).toFixed(1)}
                                                        />
                                                        :
                                                        tableMeta.rowData[0] === 1 ?
                                                            // value === "" ?
                                                            //     null :
                                                            //     <NumberFormat
                                                            //         thousandSeparator={true}
                                                            //         style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                            //         type="text"
                                                            //         placeholder=""
                                                            //         disabled={true}
                                                            //         value={Number(value)}
                                                            //     />
                                                            null
                                                            :
                                                            tableMeta.rowData[0] === 7 ?
                                                                <NumberFormat
                                                                    thousandSeparator={true}
                                                                    style={{
                                                                        fontSize: 12,
                                                                        textAlign: 'right',
                                                                        borderColor: 'transparent',
                                                                        margin: 0,
                                                                        width: 96,
                                                                        backgroundColor: 'transparent',
                                                                    }}
                                                                    type="text"
                                                                    placeholder=""
                                                                    disabled={true}
                                                                    value={Number(handleValueFormulaDBPL(tableMeta.rowData[10], tableMeta, 10)).toFixed(1)}
                                                                />
                                                                :
                                                                null
                                        }
                                    </div>
                                </div>
                                <div className="grid grid-4x content-center">
                                    <div className="col-1">
                                        {tableMeta.rowData[0] === 3 ?
                                            null
                                            // <div style={{ flex: 1 }}>
                                            //     <FormControlLabel
                                            //         style={{ margin: 0 }}
                                            //         value={value}
                                            //         control={
                                            //             <NumberFormat
                                            //                 thousandSeparator={true}
                                            //                 style={{ color: "#5198ea", fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                            //                 type="text"
                                            //                 placeholder=""
                                            //                 disabled={true}
                                            //                 value={Number(tableMeta).toFixed(1)}
                                            //                 onBlur={(event) => {
                                            //                     handleChange(event.target.value, tableMeta)
                                            //                     console.log(dataTable2)
                                            //                 }}
                                            //             />
                                            //         }
                                            //     />
                                            // </div> 
                                            :
                                            // null
                                            tableMeta.rowData[0] === 5 ?
                                                // null 
                                                <span style={{ fontSize: 12, textAlign: 'right' }}>
                                                    <NumberFormat
                                                        thousandSeparator={true}
                                                        style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                        type="text"
                                                        placeholder=""
                                                        disabled={true}
                                                        value={Number(handleValueFormulaDBPL(tableMeta.rowData[11], tableMeta, 11)).toFixed(1)}
                                                    />
                                                </span>
                                                :
                                                tableMeta.rowData[0] === 4 ?
                                                    null
                                                    :
                                                    tableMeta.rowData[0] === 6 ?
                                                        // null
                                                        <NumberFormat
                                                            thousandSeparator={true}
                                                            style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                            type="text"
                                                            placeholder=""
                                                            disabled={true}
                                                            value={Number(handleValueFormulaDBPL(tableMeta.rowData[11], tableMeta, 11)).toFixed(1)}
                                                        />
                                                        :
                                                        tableMeta.rowData[0] === 1 ?
                                                            // value === "" ?
                                                            //     null :
                                                            //     <NumberFormat
                                                            //         thousandSeparator={true}
                                                            //         style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                            //         type="text"
                                                            //         placeholder=""
                                                            //         disabled={true}
                                                            //         value={Number(value)}
                                                            //     />
                                                            null
                                                            :
                                                            tableMeta.rowData[0] === 7 ?
                                                                <NumberFormat
                                                                    thousandSeparator={true}
                                                                    style={{
                                                                        fontSize: 12,
                                                                        textAlign: 'right',
                                                                        borderColor: 'transparent',
                                                                        margin: 0,
                                                                        width: 96,
                                                                        backgroundColor: 'transparent',
                                                                    }}
                                                                    type="text"
                                                                    placeholder=""
                                                                    disabled={true}
                                                                    value={Number(handleValueFormulaDBPL(tableMeta.rowData[11], tableMeta, 11)).toFixed(1)}
                                                                />
                                                                :
                                                                null
                                        }
                                    </div>
                                    <div className="col-2">
                                        {tableMeta.rowData[0] === 3 ?
                                            null
                                            // <div style={{ flex: 1 }}>
                                            //     <FormControlLabel
                                            //         style={{ margin: 0 }}
                                            //         value={value}
                                            //         control={
                                            //             <NumberFormat
                                            //                 thousandSeparator={true}
                                            //                 style={{ color: "#5198ea", fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                            //                 type="text"
                                            //                 placeholder=""
                                            //                 disabled={true}
                                            //                 value={Number(tableMeta).toFixed(1)}
                                            //                 onBlur={(event) => {
                                            //                     handleChange(event.target.value, tableMeta)
                                            //                     console.log(dataTable2)
                                            //                 }}
                                            //             />
                                            //         }
                                            //     />
                                            // </div> 
                                            :
                                            // null
                                            tableMeta.rowData[0] === 5 ?
                                                // null 
                                                <span style={{ fontSize: 12, textAlign: 'right' }}>
                                                    <NumberFormat
                                                        thousandSeparator={true}
                                                        style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                        type="text"
                                                        placeholder=""
                                                        disabled={true}
                                                        value={Number(handleValueFormulaDBPL(tableMeta.rowData[12], tableMeta, 12)).toFixed(1)}
                                                    />
                                                </span>
                                                :
                                                tableMeta.rowData[0] === 4 ?
                                                    null
                                                    :
                                                    tableMeta.rowData[0] === 6 ?
                                                        // null
                                                        <NumberFormat
                                                            thousandSeparator={true}
                                                            style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                            type="text"
                                                            placeholder=""
                                                            disabled={true}
                                                            value={Number(handleValueFormulaDBPL(tableMeta.rowData[12], tableMeta, 12)).toFixed(1)}
                                                        />
                                                        :
                                                        tableMeta.rowData[0] === 1 ?
                                                            // value === "" ?
                                                            //     null :
                                                            //     <NumberFormat
                                                            //         thousandSeparator={true}
                                                            //         style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                            //         type="text"
                                                            //         placeholder=""
                                                            //         disabled={true}
                                                            //         value={Number(value)}
                                                            //     />
                                                            null
                                                            :
                                                            tableMeta.rowData[0] === 7 ?
                                                                <NumberFormat
                                                                    thousandSeparator={true}
                                                                    style={{
                                                                        fontSize: 12,
                                                                        textAlign: 'right',
                                                                        borderColor: 'transparent',
                                                                        margin: 0,
                                                                        width: 96,
                                                                        backgroundColor: 'transparent',
                                                                    }}
                                                                    type="text"
                                                                    placeholder=""
                                                                    disabled={true}
                                                                    value={Number(handleValueFormulaDBPL(tableMeta.rowData[12], tableMeta, 12)).toFixed(1)}
                                                                />
                                                                :
                                                                null
                                        }
                                    </div>
                                    <div className="col-3">
                                        {tableMeta.rowData[0] === 3 ?
                                            null
                                            // <div style={{ flex: 1 }}>
                                            //     <FormControlLabel
                                            //         style={{ margin: 0 }}
                                            //         value={value}
                                            //         control={
                                            //             <NumberFormat
                                            //                 thousandSeparator={true}
                                            //                 style={{ color: "#5198ea", fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                            //                 type="text"
                                            //                 placeholder=""
                                            //                 disabled={true}
                                            //                 value={Number(tableMeta).toFixed(1)}
                                            //                 onBlur={(event) => {
                                            //                     handleChange(event.target.value, tableMeta)
                                            //                     console.log(dataTable2)
                                            //                 }}
                                            //             />
                                            //         }
                                            //     />
                                            // </div> 
                                            :
                                            // null
                                            tableMeta.rowData[0] === 5 ?
                                                // null 
                                                <span style={{ fontSize: 12, textAlign: 'right' }}>
                                                    <NumberFormat
                                                        thousandSeparator={true}
                                                        style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                        type="text"
                                                        placeholder=""
                                                        disabled={true}
                                                        value={Number(handleValueFormulaDBPL(tableMeta.rowData[13], tableMeta, 13)).toFixed(1)}
                                                    />
                                                </span>
                                                :
                                                tableMeta.rowData[0] === 4 ?
                                                    null
                                                    :
                                                    tableMeta.rowData[0] === 6 ?
                                                        // null
                                                        <NumberFormat
                                                            thousandSeparator={true}
                                                            style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                            type="text"
                                                            placeholder=""
                                                            disabled={true}
                                                            value={Number(handleValueFormulaDBPL(tableMeta.rowData[13], tableMeta, 13)).toFixed(1)}
                                                        />
                                                        :
                                                        tableMeta.rowData[0] === 1 ?
                                                            // value === "" ?
                                                            //     null :
                                                            //     <NumberFormat
                                                            //         thousandSeparator={true}
                                                            //         style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                            //         type="text"
                                                            //         placeholder=""
                                                            //         disabled={true}
                                                            //         value={Number(value)}
                                                            //     />
                                                            null
                                                            :
                                                            tableMeta.rowData[0] === 7 ?
                                                                <NumberFormat
                                                                    thousandSeparator={true}
                                                                    style={{
                                                                        fontSize: 12,
                                                                        textAlign: 'right',
                                                                        borderColor: 'transparent',
                                                                        margin: 0,
                                                                        width: 96,
                                                                        backgroundColor: 'transparent',
                                                                    }}
                                                                    type="text"
                                                                    placeholder=""
                                                                    disabled={true}
                                                                    value={Number(handleValueFormulaDBPL(tableMeta.rowData[13], tableMeta, 13)).toFixed(1)}
                                                                />
                                                                :
                                                                null
                                        }
                                    </div>
                                    <div className="col-4">
                                        {tableMeta.rowData[0] === 3 ?
                                            null
                                            // <div style={{ flex: 1 }}>
                                            //     <FormControlLabel
                                            //         style={{ margin: 0 }}
                                            //         value={value}
                                            //         control={
                                            //             <NumberFormat
                                            //                 thousandSeparator={true}
                                            //                 style={{ color: "#5198ea", fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                            //                 type="text"
                                            //                 placeholder=""
                                            //                 disabled={true}
                                            //                 value={Number(tableMeta).toFixed(1)}
                                            //                 onBlur={(event) => {
                                            //                     handleChange(event.target.value, tableMeta)
                                            //                     console.log(dataTable2)
                                            //                 }}
                                            //             />
                                            //         }
                                            //     />
                                            // </div> 
                                            :
                                            // null
                                            tableMeta.rowData[0] === 5 ?
                                                // null 
                                                <span style={{ fontSize: 12, textAlign: 'right' }}>
                                                    <NumberFormat
                                                        thousandSeparator={true}
                                                        style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                        type="text"
                                                        placeholder=""
                                                        disabled={true}
                                                        value={Number(handleValueFormulaDBPL(tableMeta.rowData[14], tableMeta, 14)).toFixed(1)}
                                                    />
                                                </span>
                                                :
                                                tableMeta.rowData[0] === 4 ?
                                                    null
                                                    :
                                                    tableMeta.rowData[0] === 6 ?
                                                        // null
                                                        <NumberFormat
                                                            thousandSeparator={true}
                                                            style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                            type="text"
                                                            placeholder=""
                                                            disabled={true}
                                                            value={Number(handleValueFormulaDBPL(tableMeta.rowData[14], tableMeta, 14)).toFixed(1)}
                                                        />
                                                        :
                                                        tableMeta.rowData[0] === 1 ?
                                                            // value === "" ?
                                                            //     null :
                                                            //     <NumberFormat
                                                            //         thousandSeparator={true}
                                                            //         style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                            //         type="text"
                                                            //         placeholder=""
                                                            //         disabled={true}
                                                            //         value={Number(value)}
                                                            //     />
                                                            null
                                                            :
                                                            tableMeta.rowData[0] === 7 ?
                                                                <NumberFormat
                                                                    thousandSeparator={true}
                                                                    style={{
                                                                        fontSize: 12,
                                                                        textAlign: 'right',
                                                                        borderColor: 'transparent',
                                                                        margin: 0,
                                                                        width: 96,
                                                                        backgroundColor: 'transparent',
                                                                    }}
                                                                    type="text"
                                                                    placeholder=""
                                                                    disabled={true}
                                                                    value={Number(handleValueFormulaDBPL(tableMeta.rowData[14], tableMeta, 14)).toFixed(1)}
                                                                />
                                                                :
                                                                null
                                        }
                                    </div>
                                </div>
                                <div className="grid grid-4x content-center">
                                    <div className="col-1">
                                        {tableMeta.rowData[0] === 3 ?
                                            null
                                            // <div style={{ flex: 1 }}>
                                            //     <FormControlLabel
                                            //         style={{ margin: 0 }}
                                            //         value={value}
                                            //         control={
                                            //             <NumberFormat
                                            //                 thousandSeparator={true}
                                            //                 style={{ color: "#5198ea", fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                            //                 type="text"
                                            //                 placeholder=""
                                            //                 disabled={true}
                                            //                 value={Number(tableMeta).toFixed(1)}
                                            //                 onBlur={(event) => {
                                            //                     handleChange(event.target.value, tableMeta)
                                            //                     console.log(dataTable2)
                                            //                 }}
                                            //             />
                                            //         }
                                            //     />
                                            // </div> 
                                            :
                                            // null
                                            tableMeta.rowData[0] === 5 ?
                                                // null 
                                                <span style={{ fontSize: 12, textAlign: 'right' }}>
                                                    <NumberFormat
                                                        thousandSeparator={true}
                                                        style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                        type="text"
                                                        placeholder=""
                                                        disabled={true}
                                                        value={Number(handleValueFormulaDBPL(tableMeta.rowData[15], tableMeta, 15)).toFixed(1)}
                                                    />
                                                </span>
                                                :
                                                tableMeta.rowData[0] === 4 ?
                                                    null
                                                    :
                                                    tableMeta.rowData[0] === 6 ?
                                                        // null
                                                        <NumberFormat
                                                            thousandSeparator={true}
                                                            style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                            type="text"
                                                            placeholder=""
                                                            disabled={true}
                                                            value={Number(handleValueFormulaDBPL(tableMeta.rowData[15], tableMeta, 15)).toFixed(1)}
                                                        />
                                                        :
                                                        tableMeta.rowData[0] === 1 ?
                                                            // value === "" ?
                                                            //     null :
                                                            //     <NumberFormat
                                                            //         thousandSeparator={true}
                                                            //         style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                            //         type="text"
                                                            //         placeholder=""
                                                            //         disabled={true}
                                                            //         value={Number(value)}
                                                            //     />
                                                            null
                                                            :
                                                            tableMeta.rowData[0] === 7 ?
                                                                <NumberFormat
                                                                    thousandSeparator={true}
                                                                    style={{
                                                                        fontSize: 12,
                                                                        textAlign: 'right',
                                                                        borderColor: 'transparent',
                                                                        margin: 0,
                                                                        width: 96,
                                                                        backgroundColor: 'transparent',
                                                                    }}
                                                                    type="text"
                                                                    placeholder=""
                                                                    disabled={true}
                                                                    value={Number(handleValueFormulaDBPL(tableMeta.rowData[15], tableMeta, 15)).toFixed(1)}
                                                                />
                                                                :
                                                                null
                                        }
                                    </div>
                                    <div className="col-2">
                                        {tableMeta.rowData[0] === 3 ?
                                            null
                                            // <div style={{ flex: 1 }}>
                                            //     <FormControlLabel
                                            //         style={{ margin: 0 }}
                                            //         value={value}
                                            //         control={
                                            //             <NumberFormat
                                            //                 thousandSeparator={true}
                                            //                 style={{ color: "#5198ea", fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                            //                 type="text"
                                            //                 placeholder=""
                                            //                 disabled={true}
                                            //                 value={Number(tableMeta).toFixed(1)}
                                            //                 onBlur={(event) => {
                                            //                     handleChange(event.target.value, tableMeta)
                                            //                     console.log(dataTable2)
                                            //                 }}
                                            //             />
                                            //         }
                                            //     />
                                            // </div> 
                                            :
                                            // null
                                            tableMeta.rowData[0] === 5 ?
                                                // null 
                                                <span style={{ fontSize: 12, textAlign: 'right' }}>
                                                    <NumberFormat
                                                        thousandSeparator={true}
                                                        style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                        type="text"
                                                        placeholder=""
                                                        disabled={true}
                                                        value={Number(handleValueFormulaDBPL(tableMeta.rowData[16], tableMeta, 16)).toFixed(1)}
                                                    />
                                                </span>
                                                :
                                                tableMeta.rowData[0] === 4 ?
                                                    null
                                                    :
                                                    tableMeta.rowData[0] === 6 ?
                                                        // null
                                                        <NumberFormat
                                                            thousandSeparator={true}
                                                            style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                            type="text"
                                                            placeholder=""
                                                            disabled={true}
                                                            value={Number(handleValueFormulaDBPL(tableMeta.rowData[16], tableMeta, 16)).toFixed(1)}
                                                        />
                                                        :
                                                        tableMeta.rowData[0] === 1 ?
                                                            // value === "" ?
                                                            //     null :
                                                            //     <NumberFormat
                                                            //         thousandSeparator={true}
                                                            //         style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                            //         type="text"
                                                            //         placeholder=""
                                                            //         disabled={true}
                                                            //         value={Number(value)}
                                                            //     />
                                                            null
                                                            :
                                                            tableMeta.rowData[0] === 7 ?
                                                                <NumberFormat
                                                                    thousandSeparator={true}
                                                                    style={{
                                                                        fontSize: 12,
                                                                        textAlign: 'right',
                                                                        borderColor: 'transparent',
                                                                        margin: 0,
                                                                        width: 96,
                                                                        backgroundColor: 'transparent',
                                                                    }}
                                                                    type="text"
                                                                    placeholder=""
                                                                    disabled={true}
                                                                    value={Number(handleValueFormulaDBPL(tableMeta.rowData[16], tableMeta, 16)).toFixed(1)}
                                                                />
                                                                :
                                                                null
                                        }
                                    </div>
                                    <div className="col-3">
                                        {tableMeta.rowData[0] === 3 ?
                                            null
                                            // <div style={{ flex: 1 }}>
                                            //     <FormControlLabel
                                            //         style={{ margin: 0 }}
                                            //         value={value}
                                            //         control={
                                            //             <NumberFormat
                                            //                 thousandSeparator={true}
                                            //                 style={{ color: "#5198ea", fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                            //                 type="text"
                                            //                 placeholder=""
                                            //                 disabled={true}
                                            //                 value={Number(tableMeta).toFixed(1)}
                                            //                 onBlur={(event) => {
                                            //                     handleChange(event.target.value, tableMeta)
                                            //                     console.log(dataTable2)
                                            //                 }}
                                            //             />
                                            //         }
                                            //     />
                                            // </div> 
                                            :
                                            // null
                                            tableMeta.rowData[0] === 5 ?
                                                // null 
                                                <span style={{ fontSize: 12, textAlign: 'right' }}>
                                                    <NumberFormat
                                                        thousandSeparator={true}
                                                        style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                        type="text"
                                                        placeholder=""
                                                        disabled={true}
                                                        value={Number(handleValueFormulaDBPL(tableMeta.rowData[17], tableMeta, 17)).toFixed(1)}
                                                    />
                                                </span>
                                                :
                                                tableMeta.rowData[0] === 4 ?
                                                    null
                                                    :
                                                    tableMeta.rowData[0] === 6 ?
                                                        // null
                                                        <NumberFormat
                                                            thousandSeparator={true}
                                                            style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                            type="text"
                                                            placeholder=""
                                                            disabled={true}
                                                            value={Number(handleValueFormulaDBPL(tableMeta.rowData[17], tableMeta, 17)).toFixed(1)}
                                                        />
                                                        :
                                                        tableMeta.rowData[0] === 1 ?
                                                            // value === "" ?
                                                            //     null :
                                                            //     <NumberFormat
                                                            //         thousandSeparator={true}
                                                            //         style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                            //         type="text"
                                                            //         placeholder=""
                                                            //         disabled={true}
                                                            //         value={Number(value)}
                                                            //     />
                                                            null
                                                            :
                                                            tableMeta.rowData[0] === 7 ?
                                                                <NumberFormat
                                                                    thousandSeparator={true}
                                                                    style={{
                                                                        fontSize: 12,
                                                                        textAlign: 'right',
                                                                        borderColor: 'transparent',
                                                                        margin: 0,
                                                                        width: 96,
                                                                        backgroundColor: 'transparent',
                                                                    }}
                                                                    type="text"
                                                                    placeholder=""
                                                                    disabled={true}
                                                                    value={Number(handleValueFormulaDBPL(tableMeta.rowData[17], tableMeta, 17)).toFixed(1)}
                                                                />
                                                                :
                                                                null
                                        }
                                    </div>
                                    <div className="col-4">
                                        {tableMeta.rowData[0] === 3 ?
                                            null
                                            // <div style={{ flex: 1 }}>
                                            //     <FormControlLabel
                                            //         style={{ margin: 0 }}
                                            //         value={value}
                                            //         control={
                                            //             <NumberFormat
                                            //                 thousandSeparator={true}
                                            //                 style={{ color: "#5198ea", fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                            //                 type="text"
                                            //                 placeholder=""
                                            //                 disabled={true}
                                            //                 value={Number(tableMeta).toFixed(1)}
                                            //                 onBlur={(event) => {
                                            //                     handleChange(event.target.value, tableMeta)
                                            //                     console.log(dataTable2)
                                            //                 }}
                                            //             />
                                            //         }
                                            //     />
                                            // </div> 
                                            :
                                            // null
                                            tableMeta.rowData[0] === 5 ?
                                                // null 
                                                <span style={{ fontSize: 12, textAlign: 'right' }}>
                                                    <NumberFormat
                                                        thousandSeparator={true}
                                                        style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                        type="text"
                                                        placeholder=""
                                                        disabled={true}
                                                        value={Number(handleValueFormulaDBPL(tableMeta.rowData[18], tableMeta, 18)).toFixed(1)}
                                                    />
                                                </span>
                                                :
                                                tableMeta.rowData[0] === 4 ?
                                                    null
                                                    :
                                                    tableMeta.rowData[0] === 6 ?
                                                        // null
                                                        <NumberFormat
                                                            thousandSeparator={true}
                                                            style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                            type="text"
                                                            placeholder=""
                                                            disabled={true}
                                                            value={Number(handleValueFormulaDBPL(tableMeta.rowData[18], tableMeta, 18)).toFixed(1)}
                                                        />
                                                        :
                                                        tableMeta.rowData[0] === 1 ?
                                                            // value === "" ?
                                                            //     null :
                                                            //     <NumberFormat
                                                            //         thousandSeparator={true}
                                                            //         style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                            //         type="text"
                                                            //         placeholder=""
                                                            //         disabled={true}
                                                            //         value={Number(value)}
                                                            //     />
                                                            null
                                                            :
                                                            tableMeta.rowData[0] === 7 ?
                                                                <NumberFormat
                                                                    thousandSeparator={true}
                                                                    style={{
                                                                        fontSize: 12,
                                                                        textAlign: 'right',
                                                                        borderColor: 'transparent',
                                                                        margin: 0,
                                                                        width: 96,
                                                                        backgroundColor: 'transparent',
                                                                    }}
                                                                    type="text"
                                                                    placeholder=""
                                                                    disabled={true}
                                                                    value={Number(handleValueFormulaDBPL(tableMeta.rowData[18], tableMeta, 18)).toFixed(1)}
                                                                />
                                                                :
                                                                null
                                        }
                                    </div>
                                </div>
                            </div>
                        </div>
                    )
                }
            }
        }, {
            name: "",
            options: {
                display: false
            }
        }, {
            name: "",
            options: {
                display: false
            }
        }, {
            name: "",
            options: {
                display: false
            }
        }, {
            name: "",
            options: {
                display: false
            }
        }, {
            name: "",
            options: {
                display: false
            }
        }, {
            name: "",
            options: {
                display: false
            }
        }, {
            name: "",
            options: {
                display: false
            }
        }, {
            name: "",
            options: {
                display: false
            }
        }, {
            name: "",
            options: {
                display: false
            }
        }, {
            name: "",
            options: {
                display: false
            }
        }, {
            name: "",
            options: {
                display: false
            }
        }, {
            name: "",
            options: {
                display: false
            }
        }, {
            name: "",
            options: {
                display: false
            }
        }, {
            name: `${Number(this.props.periode) + 1}`,
            options: {
                customHeadRender: (columnMeta) => (
                    <th style={{ ...style2, color: '#fff', backgroundColor: '#07a7d0', top: 0, zIndex: 102, fontSize: 13, fontWeight: 1, width: 150, borderRight: "1px solid rgb(255, 255, 255)", padding: 0 }} >
                        {/* <TableCell style={{ ...style2, top: 0, zIndex: 99, backgroundColor: '#1c71b8', width: 96 }}>
                            <Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography>
                        </TableCell> */}
                        <div style={{ borderBottom: "1px #fff solid", backgroundColor: '#1c71b8', textAlign: 'center', fontSize: 12, fontWeight: 'bold', padding: 5 }}>{columnMeta.name}</div>
                        <div className="grid grid-1x" style={{ ...style2, color: '#fff', fontSize: 12, fontWeight: 'bold', position: "sticky" }}>
                            <div className="column-1" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, backgroundColor: '#07a7d0' }}>
                                <span>{"ForeCast"}</span>
                            </div>
                        </div>
                    </th>
                ),
                setCellProps: () => ({ style2 }),
                customBodyRender: (value, tableMeta, updateValue) => {
                    return (
                        <div style={{ textAlign: 'right' }}>
                            {tableMeta.rowData[0] === 4 || tableMeta.rowData[0] === 1 ?
                                null
                                :
                                <div style={{ flex: 1 }}>
                                    <FormControlLabel
                                        style={{ margin: 0 }}
                                        value={value}
                                        control={
                                            <NumberFormat
                                                thousandSeparator={true}
                                                style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                type="text"
                                                placeholder=""
                                                disabled={true}
                                                value={Number(handleForecastDBPL(tableMeta, `${Number(this.props.periode) + 1}`, 20)).toFixed(1)}
                                            />
                                        }
                                    />
                                </div>}
                        </div>
                    )
                }
            }
        },
        {
            name: `${Number(this.props.periode) + 2}`,
            options: {
                customHeadRender: (columnMeta) => (
                    <th style={{ ...style2, color: '#fff', backgroundColor: '#07a7d0', fontSize: 13, top: 0, zIndex: 102, fontWeight: 1, width: 150, borderRight: "1px solid rgb(255, 255, 255)", padding: 0 }} >
                        {/* <TableCell style={{ ...style2, top: 0, zIndex: 99, backgroundColor: '#1c71b8', width: 96 }}>
                            <Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography>
                        </TableCell> */}
                        <div style={{ borderBottom: "1px #fff solid", backgroundColor: '#1c71b8', textAlign: 'center', fontSize: 12, fontWeight: 'bold', padding: 5 }}>{columnMeta.name}</div>
                        <div className="grid grid-1x" style={{ ...style2, color: '#fff', fontSize: 12, fontWeight: 'bold', position: "sticky" }}>
                            <div className="column-1" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, backgroundColor: '#07a7d0' }}>
                                <span>{"ForeCast"}</span>
                            </div>
                        </div>
                    </th>
                ),
                setCellProps: () => ({ style2 }),
                customBodyRender: (value, tableMeta, updateValue) => {
                    return (
                        <div style={{ textAlign: 'right' }}>
                            {tableMeta.rowData[0] === 4 || tableMeta.rowData[0] === 1 ?
                                null
                                :
                                <div style={{ flex: 1 }}>
                                    <FormControlLabel
                                        style={{ margin: 0 }}
                                        value={value}
                                        control={
                                            <NumberFormat
                                                thousandSeparator={true}
                                                style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                type="text"
                                                placeholder=""
                                                disabled={true}
                                                value={Number(handleForecastDBPL(tableMeta, `${Number(this.props.periode) + 2}`, 21)).toFixed(1)}
                                            />
                                        }
                                    />
                                </div>}
                        </div>
                    )
                }
            }
        }, {
            name: "",
            options: {
                display: false
            }
        }, {
            name: "",
            options: {
                display: false
            }
        }, {
            name: "",
            options: {
                display: false
            }
        }, {
            name: "",
            options: {
                display: false
            }
        }
        ]

        const columnDBFR = [{
            name: "",
            options: {
                display: false
            }
        }, {
            name: "",
            options: {
                display: false
            }
        }, {
            name: "",
            options: {
                display: false
            }
        }, {
            name: "",
            options: {
                display: false
            }
        }, {
            name: "",
            options: {
                display: false
            }
        }, {
            name: "Account",
            options: {
                customHeadRender: (columnMeta) => (
                    <TableCell key={columnMeta.index} style={{ ...style, top: 0, zIndex: 103, backgroundColor: '#1c71b8' }}>
                        <Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'left' }}>{columnMeta.name}</Typography>
                    </TableCell>
                ),
                setCellProps: () => ({ style }),
                customBodyRender: (val, tableMeta) => {
                    return (
                        <div style={{ width: 300 }}>
                            {
                                tableMeta.rowData[4] == 0 ?
                                    <span style={{ fontSize: 12, fontWeight: 'bold' }}>{String(tableMeta.rowData[0] === 4 ? "" : val).toUpperCase()}</span>
                                    :
                                    <div style={{ paddingLeft: 20 * Number(tableMeta.rowData[4]) }}>
                                        <span style={{ fontSize: 12 }}>{tableMeta.rowData[0] === 4 ? "" : val}</span>
                                    </div>
                            }
                        </div>
                    )
                }
            }
        }, {
            name: "Unit",
            options: {
                customHeadRender: (columnMeta) => (
                    <TableCell style={{ ...style2, top: 0, zIndex: 99, backgroundColor: '#1c71b8', borderRight: '1px solid #fff', borderLeft: '1px solid #fff' }}>
                        <Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography>
                    </TableCell>
                ),
                setCellProps: () => ({ style2 }),
                customBodyRender: (value, tableMeta, updateValue) => {
                    return (
                        <div style={{ width: 90, textAlign: 'center' }}>
                            {tableMeta.rowData[0] === 1 || tableMeta.rowData[0] === 4 ?
                                null :
                                <div>
                                    <span style={{ fontSize: 12 }}>{tableMeta.rowData[0] === 4 ? "" : value}</span>
                                </div>
                            }
                        </div>
                    )
                }
            }
        }, {
            name: `MB ${this.props.periode}`,
            options: {
                customHeadRender: (columnMeta) => (
                    <th style={{ ...style2, color: '#fff', backgroundColor: '#07a7d0', top: 0, zIndex: 102, fontSize: 13, fontWeight: 1, width: 150, borderRight: "1px solid rgb(255, 255, 255)", padding: 0 }} >
                        {/* <TableCell style={{ ...style2, top: 0, zIndex: 99, backgroundColor: '#1c71b8', width: 96 }}>
                            <Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography>
                        </TableCell> */}
                        <div style={{ borderBottom: "1px #fff solid", backgroundColor: '#1c71b8', textAlign: 'center', fontSize: 12, fontWeight: 'bold', padding: 5 }}>{columnMeta.name}</div>
                        <div className="grid grid-3x" style={{ ...style2, color: '#fff', fontSize: 12, fontWeight: 'bold', position: "sticky" }}>
                            <div className="column-1 grid grid-4x" style={{ placeSelf: 'center', textAlign: 'center', backgroundColor: '#07a7d0' }}>
                                <div className="column-1" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#07a7d0' }}>
                                    <span>{"1"}</span>
                                </div>
                                <div className="column-2" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#07a7d0' }}>
                                    <span>{"2"}</span>
                                </div>
                                <div className="column-3" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#07a7d0' }}>
                                    <span>{"3"}</span>
                                </div>
                                <div className="column-4" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#07a7d0' }}>
                                    <span>{"4"}</span>
                                </div>
                            </div>
                            <div className="column-2 grid grid-4x" style={{ placeSelf: 'center', textAlign: 'center', backgroundColor: '#07a7d0' }}>
                                <div className="column-1" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#07a7d0' }}>
                                    <span>{"5"}</span>
                                </div>
                                <div className="column-2" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#07a7d0' }}>
                                    <span>{"6"}</span>
                                </div>
                                <div className="column-3" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#07a7d0' }}>
                                    <span>{"7"}</span>
                                </div>
                                <div className="column-4" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#07a7d0' }}>
                                    <span>{"8"}</span>
                                </div>

                            </div>
                            <div className="column-3 grid grid-4x" style={{ placeSelf: 'center', textAlign: 'center', backgroundColor: '#07a7d0' }}>
                                <div className="column-1" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#07a7d0' }}>
                                    <span>{"9"}</span>
                                </div>
                                <div className="column-2" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#07a7d0' }}>
                                    <span>{"10"}</span>
                                </div>
                                <div className="column-3" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#07a7d0' }}>
                                    <span>{"11"}</span>
                                </div>
                                <div className="column-4" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, backgroundColor: '#07a7d0' }}>
                                    <span>{"12"}</span>
                                </div>
                            </div>

                        </div>
                    </th>
                ),
                setCellProps: () => ({ style2 }),
                customBodyRender: (value, tableMeta, updateValue) => {
                    return (
                        <div>
                            <div className="grid grid-3x content-center">
                                <div className="grid grid-4x content-center">
                                    <div className="col-1">
                                        {
                                            tableMeta.rowData[5] === "Return on Invested Capital - YTD (ROIC)" ?
                                                <div style={{ flex: 1 }}>
                                                    <FormControlLabel
                                                        style={{ margin: 0 }}
                                                        value={value}
                                                        control={
                                                            <NumberFormat
                                                                thousandSeparator={true}
                                                                style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 90, backgroundColor: 'transparent' }}
                                                                type="text"
                                                                placeholder=""
                                                                disabled={true}
                                                                value={handleFormulaRatio(tableMeta.rowData[8], tableMeta, 1)}
                                                            />
                                                        }
                                                    />
                                                </div> :
                                                tableMeta.rowData[0] === 4 ?
                                                    null
                                                    : tableMeta.rowData[0] === 1 ?
                                                        null :
                                                        <div style={{ flex: 1 }}>
                                                            <FormControlLabel
                                                                style={{ margin: 0 }}
                                                                value={value}
                                                                control={
                                                                    <NumberFormat
                                                                        thousandSeparator={true}
                                                                        style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 90, backgroundColor: 'transparent' }}
                                                                        type="text"
                                                                        placeholder=""
                                                                        disabled={true}
                                                                        value={Number(tableMeta.rowData[8]).toFixed(2)}
                                                                    />
                                                                }
                                                            />
                                                        </div>
                                        }
                                    </div>
                                    <div className="col-2">
                                        {
                                            tableMeta.rowData[5] === "Return on Invested Capital - YTD (ROIC)" ?
                                                <div style={{ flex: 1 }}>
                                                    <FormControlLabel
                                                        style={{ margin: 0 }}
                                                        value={value}
                                                        control={
                                                            <NumberFormat
                                                                thousandSeparator={true}
                                                                style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 90, backgroundColor: 'transparent' }}
                                                                type="text"
                                                                placeholder=""
                                                                disabled={true}
                                                                value={handleFormulaRatio(tableMeta.rowData[9], tableMeta, 2)}
                                                            />
                                                        }
                                                    />
                                                </div> :
                                                tableMeta.rowData[0] === 4 ?
                                                    null
                                                    : tableMeta.rowData[0] === 1 ?
                                                        null :
                                                        <div style={{ flex: 1 }}>
                                                            <FormControlLabel
                                                                style={{ margin: 0 }}
                                                                value={value}
                                                                control={
                                                                    <NumberFormat
                                                                        thousandSeparator={true}
                                                                        style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                                        type="text"
                                                                        placeholder=""
                                                                        disabled={true}
                                                                        value={Number(tableMeta.rowData[9]).toFixed(2)}
                                                                    />
                                                                }
                                                            />
                                                        </div>
                                        }
                                    </div>
                                    <div className="col-3">
                                        {
                                            tableMeta.rowData[5] === "Return on Invested Capital - YTD (ROIC)" ?
                                                <div style={{ flex: 1 }}>
                                                    <FormControlLabel
                                                        style={{ margin: 0 }}
                                                        value={value}
                                                        control={
                                                            <NumberFormat
                                                                thousandSeparator={true}
                                                                style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 90, backgroundColor: 'transparent' }}
                                                                type="text"
                                                                placeholder=""
                                                                disabled={true}
                                                                value={handleFormulaRatio(tableMeta.rowData[10], tableMeta, 3)}
                                                            />
                                                        }
                                                    />
                                                </div> :
                                                tableMeta.rowData[0] === 4 ?
                                                    null
                                                    : tableMeta.rowData[0] === 1 ?
                                                        null :
                                                        <div style={{ flex: 1 }}>
                                                            <FormControlLabel
                                                                style={{ margin: 0 }}
                                                                value={value}
                                                                control={
                                                                    <NumberFormat
                                                                        thousandSeparator={true}
                                                                        style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                                        type="text"
                                                                        placeholder=""
                                                                        disabled={true}
                                                                        value={Number(tableMeta.rowData[10]).toFixed(2)}
                                                                    />
                                                                }
                                                            />
                                                        </div>
                                        }
                                    </div>
                                    <div className="col-4">
                                        {
                                            tableMeta.rowData[5] === "Return on Invested Capital - YTD (ROIC)" ?
                                                <div style={{ flex: 1 }}>
                                                    <FormControlLabel
                                                        style={{ margin: 0 }}
                                                        value={value}
                                                        control={
                                                            <NumberFormat
                                                                thousandSeparator={true}
                                                                style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 90, backgroundColor: 'transparent' }}
                                                                type="text"
                                                                placeholder=""
                                                                disabled={true}
                                                                value={handleFormulaRatio(tableMeta.rowData[11], tableMeta, 4)}
                                                            />
                                                        }
                                                    />
                                                </div> :
                                                tableMeta.rowData[0] === 4 ?
                                                    null
                                                    : tableMeta.rowData[0] === 1 ?
                                                        null :
                                                        <div style={{ flex: 1 }}>
                                                            <FormControlLabel
                                                                style={{ margin: 0 }}
                                                                value={value}
                                                                control={
                                                                    <NumberFormat
                                                                        thousandSeparator={true}
                                                                        style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                                        type="text"
                                                                        placeholder=""
                                                                        disabled={true}
                                                                        value={Number(tableMeta.rowData[11]).toFixed(2)}
                                                                    />
                                                                }
                                                            />
                                                        </div>
                                        }
                                    </div>
                                </div>
                                <div className="grid grid-4x content-center">
                                    <div className="col-1">
                                        {
                                            tableMeta.rowData[5] === "Return on Invested Capital - YTD (ROIC)" ?
                                                <div style={{ flex: 1 }}>
                                                    <FormControlLabel
                                                        style={{ margin: 0 }}
                                                        value={value}
                                                        control={
                                                            <NumberFormat
                                                                thousandSeparator={true}
                                                                style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 90, backgroundColor: 'transparent' }}
                                                                type="text"
                                                                placeholder=""
                                                                disabled={true}
                                                                value={handleFormulaRatio(tableMeta.rowData[12], tableMeta, 5)}
                                                            />
                                                        }
                                                    />
                                                </div> :
                                                tableMeta.rowData[0] === 4 ?
                                                    null
                                                    : tableMeta.rowData[0] === 1 ?
                                                        null :
                                                        <div style={{ flex: 1 }}>
                                                            <FormControlLabel
                                                                style={{ margin: 0 }}
                                                                value={value}
                                                                control={
                                                                    <NumberFormat
                                                                        thousandSeparator={true}
                                                                        style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                                        type="text"
                                                                        placeholder=""
                                                                        disabled={true}
                                                                        value={Number(tableMeta.rowData[12]).toFixed(2)}
                                                                    />
                                                                }
                                                            />
                                                        </div>
                                        }
                                    </div>
                                    <div className="col-2">
                                        {
                                            tableMeta.rowData[5] === "Return on Invested Capital - YTD (ROIC)" ?
                                                <div style={{ flex: 1 }}>
                                                    <FormControlLabel
                                                        style={{ margin: 0 }}
                                                        value={value}
                                                        control={
                                                            <NumberFormat
                                                                thousandSeparator={true}
                                                                style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 90, backgroundColor: 'transparent' }}
                                                                type="text"
                                                                placeholder=""
                                                                disabled={true}
                                                                value={handleFormulaRatio(tableMeta.rowData[13], tableMeta, 6)}
                                                            />
                                                        }
                                                    />
                                                </div> :
                                                tableMeta.rowData[0] === 4 ?
                                                    null
                                                    : tableMeta.rowData[0] === 1 ?
                                                        null :
                                                        <div style={{ flex: 1 }}>
                                                            <FormControlLabel
                                                                style={{ margin: 0 }}
                                                                value={value}
                                                                control={
                                                                    <NumberFormat
                                                                        thousandSeparator={true}
                                                                        style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                                        type="text"
                                                                        placeholder=""
                                                                        disabled={true}
                                                                        value={Number(tableMeta.rowData[13]).toFixed(2)}
                                                                    />
                                                                }
                                                            />
                                                        </div>
                                        }
                                    </div>
                                    <div className="col-3">
                                        {
                                            tableMeta.rowData[5] === "Return on Invested Capital - YTD (ROIC)" ?
                                                <div style={{ flex: 1 }}>
                                                    <FormControlLabel
                                                        style={{ margin: 0 }}
                                                        value={value}
                                                        control={
                                                            <NumberFormat
                                                                thousandSeparator={true}
                                                                style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 90, backgroundColor: 'transparent' }}
                                                                type="text"
                                                                placeholder=""
                                                                disabled={true}
                                                                value={handleFormulaRatio(tableMeta.rowData[14], tableMeta, 7)}
                                                            />
                                                        }
                                                    />
                                                </div> :
                                                tableMeta.rowData[0] === 4 ?
                                                    null
                                                    : tableMeta.rowData[0] === 1 ?
                                                        null :
                                                        <div style={{ flex: 1 }}>
                                                            <FormControlLabel
                                                                style={{ margin: 0 }}
                                                                value={value}
                                                                control={
                                                                    <NumberFormat
                                                                        thousandSeparator={true}
                                                                        style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                                        type="text"
                                                                        placeholder=""
                                                                        disabled={true}
                                                                        value={Number(tableMeta.rowData[14]).toFixed(2)}
                                                                    />
                                                                }
                                                            />
                                                        </div>
                                        }
                                    </div>
                                    <div className="col-4">
                                        {
                                            tableMeta.rowData[5] === "Return on Invested Capital - YTD (ROIC)" ?
                                                <div style={{ flex: 1 }}>
                                                    <FormControlLabel
                                                        style={{ margin: 0 }}
                                                        value={value}
                                                        control={
                                                            <NumberFormat
                                                                thousandSeparator={true}
                                                                style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 90, backgroundColor: 'transparent' }}
                                                                type="text"
                                                                placeholder=""
                                                                disabled={true}
                                                                value={handleFormulaRatio(tableMeta.rowData[15], tableMeta, 8)}
                                                            />
                                                        }
                                                    />
                                                </div> :
                                                tableMeta.rowData[0] === 4 ?
                                                    null
                                                    : tableMeta.rowData[0] === 1 ?
                                                        null :
                                                        <div style={{ flex: 1 }}>
                                                            <FormControlLabel
                                                                style={{ margin: 0 }}
                                                                value={value}
                                                                control={
                                                                    <NumberFormat
                                                                        thousandSeparator={true}
                                                                        style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                                        type="text"
                                                                        placeholder=""
                                                                        disabled={true}
                                                                        value={Number(tableMeta.rowData[15]).toFixed(2)}
                                                                    />
                                                                }
                                                            />
                                                        </div>
                                        }
                                    </div>
                                </div>
                                <div className="grid grid-4x content-center">
                                    <div className="col-1">
                                        {
                                            tableMeta.rowData[5] === "Return on Invested Capital - YTD (ROIC)" ?
                                                <div style={{ flex: 1 }}>
                                                    <FormControlLabel
                                                        style={{ margin: 0 }}
                                                        value={value}
                                                        control={
                                                            <NumberFormat
                                                                thousandSeparator={true}
                                                                style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 90, backgroundColor: 'transparent' }}
                                                                type="text"
                                                                placeholder=""
                                                                disabled={true}
                                                                value={handleFormulaRatio(tableMeta.rowData[16], tableMeta, 9)}
                                                            />
                                                        }
                                                    />
                                                </div> :
                                                tableMeta.rowData[0] === 4 ?
                                                    null
                                                    : tableMeta.rowData[0] === 1 ?
                                                        null :
                                                        <div style={{ flex: 1 }}>
                                                            <FormControlLabel
                                                                style={{ margin: 0 }}
                                                                value={value}
                                                                control={
                                                                    <NumberFormat
                                                                        thousandSeparator={true}
                                                                        style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                                        type="text"
                                                                        placeholder=""
                                                                        disabled={true}
                                                                        value={Number(tableMeta.rowData[16]).toFixed(2)}
                                                                    />
                                                                }
                                                            />
                                                        </div>
                                        }
                                    </div>
                                    <div className="col-2">
                                        {
                                            tableMeta.rowData[5] === "Return on Invested Capital - YTD (ROIC)" ?
                                                <div style={{ flex: 1 }}>
                                                    <FormControlLabel
                                                        style={{ margin: 0 }}
                                                        value={value}
                                                        control={
                                                            <NumberFormat
                                                                thousandSeparator={true}
                                                                style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 90, backgroundColor: 'transparent' }}
                                                                type="text"
                                                                placeholder=""
                                                                disabled={true}
                                                                value={handleFormulaRatio(tableMeta.rowData[17], tableMeta, 10)}
                                                            />
                                                        }
                                                    />
                                                </div> :
                                                tableMeta.rowData[0] === 4 ?
                                                    null
                                                    : tableMeta.rowData[0] === 1 ?
                                                        null :
                                                        <div style={{ flex: 1 }}>
                                                            <FormControlLabel
                                                                style={{ margin: 0 }}
                                                                value={value}
                                                                control={
                                                                    <NumberFormat
                                                                        thousandSeparator={true}
                                                                        style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                                        type="text"
                                                                        placeholder=""
                                                                        disabled={true}
                                                                        value={Number(tableMeta.rowData[17]).toFixed(2)}
                                                                    />
                                                                }
                                                            />
                                                        </div>
                                        }
                                    </div>
                                    <div className="col-3">
                                        {
                                            tableMeta.rowData[5] === "Return on Invested Capital - YTD (ROIC)" ?
                                                <div style={{ flex: 1 }}>
                                                    <FormControlLabel
                                                        style={{ margin: 0 }}
                                                        value={value}
                                                        control={
                                                            <NumberFormat
                                                                thousandSeparator={true}
                                                                style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 90, backgroundColor: 'transparent' }}
                                                                type="text"
                                                                placeholder=""
                                                                disabled={true}
                                                                value={handleFormulaRatio(tableMeta.rowData[18], tableMeta, 11)}
                                                            />
                                                        }
                                                    />
                                                </div> :
                                                tableMeta.rowData[0] === 4 ?
                                                    null
                                                    : tableMeta.rowData[0] === 1 ?
                                                        null :
                                                        <div style={{ flex: 1 }}>
                                                            <FormControlLabel
                                                                style={{ margin: 0 }}
                                                                value={value}
                                                                control={
                                                                    <NumberFormat
                                                                        thousandSeparator={true}
                                                                        style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                                        type="text"
                                                                        placeholder=""
                                                                        disabled={true}
                                                                        value={Number(tableMeta.rowData[18]).toFixed(2)}
                                                                    />
                                                                }
                                                            />
                                                        </div>
                                        }
                                    </div>
                                    <div className="col-4">
                                        {
                                            tableMeta.rowData[5] === "Return on Invested Capital - YTD (ROIC)" ?
                                                <div style={{ flex: 1 }}>
                                                    <FormControlLabel
                                                        style={{ margin: 0 }}
                                                        value={value}
                                                        control={
                                                            <NumberFormat
                                                                thousandSeparator={true}
                                                                style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 90, backgroundColor: 'transparent' }}
                                                                type="text"
                                                                placeholder=""
                                                                disabled={true}
                                                                value={handleFormulaRatio(tableMeta.rowData[19], tableMeta, 12)}
                                                            />
                                                        }
                                                    />
                                                </div> :
                                                tableMeta.rowData[0] === 4 ?
                                                    null
                                                    : tableMeta.rowData[0] === 1 ?
                                                        null :
                                                        <div style={{ flex: 1 }}>
                                                            <FormControlLabel
                                                                style={{ margin: 0 }}
                                                                value={value}
                                                                control={
                                                                    <NumberFormat
                                                                        thousandSeparator={true}
                                                                        style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                                        type="text"
                                                                        placeholder=""
                                                                        disabled={true}
                                                                        value={Number(tableMeta.rowData[19]).toFixed(2)}
                                                                    />
                                                                }
                                                            />
                                                        </div>
                                        }
                                    </div>
                                </div>
                            </div>
                        </div>
                    )
                }
            }
        }, {
            name: "",
            options: {
                display: false
            }
        }, {
            name: "",
            options: {
                display: false
            }
        }, {
            name: "",
            options: {
                display: false
            }
        }, {
            name: "",
            options: {
                display: false
            }
        }, {
            name: "",
            options: {
                display: false
            }
        }, {
            name: "",
            options: {
                display: false
            }
        }, {
            name: "",
            options: {
                display: false
            }
        }, {
            name: "",
            options: {
                display: false
            }
        }, {
            name: "",
            options: {
                display: false
            }
        }, {
            name: "",
            options: {
                display: false
            }
        }, {
            name: `${Number(this.props.periode) + 1}`,
            options: {
                customHeadRender: (columnMeta) => (
                    <th style={{ ...style2, color: '#fff', backgroundColor: '#07a7d0', top: 0, zIndex: 102, fontSize: 13, fontWeight: 1, width: 150, borderRight: "1px solid rgb(255, 255, 255)", padding: 0 }} >
                        {/* <TableCell style={{ ...style2, top: 0, zIndex: 99, backgroundColor: '#1c71b8', width: 96 }}>
                            <Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography>
                        </TableCell> */}
                        <div style={{ borderBottom: "1px #fff solid", backgroundColor: '#1c71b8', textAlign: 'center', fontSize: 12, fontWeight: 'bold', padding: 5 }}>{columnMeta.name}</div>
                        <div className="grid grid-1x" style={{ ...style2, color: '#fff', fontSize: 12, fontWeight: 'bold', position: "sticky" }}>
                            <div className="column-1" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, backgroundColor: '#07a7d0' }}>
                                <span>{"ForeCast"}</span>
                            </div>
                        </div>
                    </th>
                ),
                setCellProps: () => ({ style2 }),
                customBodyRender: (value, tableMeta, updateValue) => {
                    return (
                        <div style={{ textAlign: 'right' }}>
                            {
                                tableMeta.rowData[5] === "Return on Invested Capital - YTD (ROIC)" ?
                                    <div style={{ flex: 1 }}>
                                        <FormControlLabel
                                            style={{ margin: 0 }}
                                            value={value}
                                            control={
                                                <NumberFormat
                                                    thousandSeparator={true}
                                                    style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 90, backgroundColor: 'transparent' }}
                                                    type="text"
                                                    placeholder=""
                                                    disabled={true}
                                                    value={handleFormulaRatio(tableMeta.rowData[20], tableMeta, 13)}
                                                />
                                            }
                                        />
                                    </div> :
                                    tableMeta.rowData[0] === 4 ?
                                        null
                                        : tableMeta.rowData[0] === 1 ?
                                            null :
                                            <div style={{ flex: 1 }}>
                                                <FormControlLabel
                                                    style={{ margin: 0 }}
                                                    value={value}
                                                    control={
                                                        <NumberFormat
                                                            thousandSeparator={true}
                                                            style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                            type="text"
                                                            placeholder=""
                                                            disabled={true}
                                                            value={Number(tableMeta.rowData[20]).toFixed(2)}
                                                        />
                                                    }
                                                />
                                            </div>
                            }
                        </div>
                    )
                }
            }
        }, {
            name: `${Number(this.props.periode) + 2}`,
            options: {
                customHeadRender: (columnMeta) => (
                    <th style={{ ...style2, color: '#fff', backgroundColor: '#07a7d0', fontSize: 13, top: 0, zIndex: 102, fontWeight: 1, width: 150, borderRight: "1px solid rgb(255, 255, 255)", padding: 0 }} >
                        {/* <TableCell style={{ ...style2, top: 0, zIndex: 99, backgroundColor: '#1c71b8', width: 96 }}>
                            <Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography>
                        </TableCell> */}
                        <div style={{ borderBottom: "1px #fff solid", backgroundColor: '#1c71b8', textAlign: 'center', fontSize: 12, fontWeight: 'bold', padding: 5 }}>{columnMeta.name}</div>
                        <div className="grid grid-1x" style={{ ...style2, color: '#fff', fontSize: 12, fontWeight: 'bold', position: "sticky" }}>
                            <div className="column-1" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, backgroundColor: '#07a7d0' }}>
                                <span>{"ForeCast"}</span>
                            </div>
                        </div>
                    </th>
                ),
                setCellProps: () => ({ style2 }),
                customBodyRender: (value, tableMeta, updateValue) => {
                    return (
                        <div style={{ textAlign: 'right' }}>
                            {
                                tableMeta.rowData[5] === "Return on Invested Capital - YTD (ROIC)" ?
                                    <div style={{ flex: 1 }}>
                                        <FormControlLabel
                                            style={{ margin: 0 }}
                                            value={value}
                                            control={
                                                <NumberFormat
                                                    thousandSeparator={true}
                                                    style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 90, backgroundColor: 'transparent' }}
                                                    type="text"
                                                    placeholder=""
                                                    disabled={true}
                                                    value={handleFormulaRatio(tableMeta.rowData[21], tableMeta, 14)}
                                                />
                                            }
                                        />
                                    </div> :
                                    tableMeta.rowData[0] === 4 ?
                                        null
                                        : tableMeta.rowData[0] === 1 ?
                                            null :
                                            <div style={{ flex: 1 }}>
                                                <FormControlLabel
                                                    style={{ margin: 0 }}
                                                    value={value}
                                                    control={
                                                        <NumberFormat
                                                            thousandSeparator={true}
                                                            style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                            type="text"
                                                            placeholder=""
                                                            disabled={true}
                                                            value={Number(tableMeta.rowData[21]).toFixed(2)}
                                                        />
                                                    }
                                                />
                                            </div>
                            }
                        </div>
                    )
                }
            }
        }, {
            name: "",
            options: {
                display: false
            }
        }, {
            name: "",
            options: {
                display: false
            }
        }, {
            name: "",
            options: {
                display: false
            }
        }, {
            name: "",
            options: {
                display: false
            }
        }
        ]

        const columns = []

        return (
            <div>
                <div style={{ padding: '0px 20px 20px 20px', width: this.props.width - (this.props.open === true ? 350 : 100) }}>
                    <MuiThemeProvider theme={getMuiTheme()}>
                        <MUIDataTable
                            data={dataTable2}
                            columns={this.props.type === 2 ? columnDBBS : this.props.type === 1 ? columnDBPLDetail : this.props.type === 3 ? columnDBPL : this.props.type === 4 ? columnDBFR : columns}
                            options={options}
                        />
                    </MuiThemeProvider>
                </div>
            </div>
        )
    }
}
