import React, { Fragment, memo, useEffect, useRef, useState } from 'react';
import { useHistory, withRouter } from 'react-router-dom';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faReply, faSave } from '@fortawesome/free-solid-svg-icons';
import MantCentroUtilidadInt from './mantCentroUtilidadInt.jsx';
import { SiteRutas } from '../../../request/RutasConfig.jsx';
//Invocaciones datos
import {
    TipoAsiento_Consulta_Request, CentrosUtilidad_Guardar_Request, CentrosUtilidad_Modificar_Request,
    CentrosUtilidad_Consulta_Request, CentrosCostos_Listar_Porcentaje_Request, DetalleCentroUtilidad_Listar_Request
} from "../../../request/MantenimientosRequest.jsx"
import { Catalogo_Lista_Tipos_Request } from "../../../request/ServicioRequest.jsx";
import { useSessionStorage } from '../../../components/Util/Hooks/useSessionStorage.jsx';
//utilitarios
import { Notificacion } from '../../../components/Util/Notificacion/Notificacion.jsx';
import ModalSpinner from '../../../components/UI/modalSpinner/modalSpinner.jsx';
import { datosArbol, datosArbolCheck } from '../../../components/Util/Util.jsx';
import Swal from 'sweetalert2';

//Seguridad
import Session from '../../../components/Util/session/index.jsx';
import Config from '../../../components/Util/constantes.js';
import { Obtener_MenuOpciones_Lista_Request, Obtener_MenuNombre_Request } from "../../../request/MenuRequest.jsx"
import ModalSeguridad from "../../Seguridad/ModalSeguridad.jsx";
import optSeg from '../../../components/Util/seg-menu-opciones.js';


export function mantCentroUtilidad(props) {
    let historyMenu = useHistory();
    const [token, setToken] = useSessionStorage('tokenCON', '');
    const [empresa, setEmpresa] = useSessionStorage('empresaCON', 0);
    const [usuario, setUsuario] = useSessionStorage('usuarioCON');
    const [empresaNombreCON, setEmpresaNombreCON] = useSessionStorage('empresaNombreCON', 'ND')
    const mounted = useRef();
    const [codigo, setCodigo] = useState('');
    const [id, setId] = useState('');

    const [spinnerModal, setSpinnerModal] = useState(undefined);
    const [spinnerLabel, setSpinnerLabel] = useState('');
    const [spinnerTipo, setSpinnerTipo] = useState(1);
    const botones = [

        {
            name: "btnHomeC",
            clase: "btn btn-sm pull-right flipInX animated",
            evento: () => volverAtras(),
            leyenda: "",
            iclase: faReply,
            tooltip: "Volver"
        },
        {
            name: "btnGuardar",
            clase: "btn btn-sm pull-right flipInX animated",
            evento: () => ingresarDatos(),
            leyenda: "",
            iclase: faSave,
            tooltip: "Guardar"
        }
    ]

    const listaCampos = {
        Numero: { value: 0, attributes: { readOnly: true, focus: false, label: "Número", hidden: "unset" }, },
        Nombre: { value: "", attributes: { readOnly: false, focus: false, label: "Nombre", hidden: "unset", maxLength: "50" }, },
        Titulo: { value: "", attributes: { readOnly: false, focus: false, label: 'Título Asiento Contable', hidden: "unset", maxLength: "80" } },
        Descripcion: { value: "", attributes: { readOnly: false, focus: false, label: 'Descripción', hidden: "unset", maxLength: "255" } },
        DivCC: { value: '', attributes: { readOnly: true, focus: false, label: '', hidden: 'unset' } },
    }

    const listaMod = {
        "ID": "",
        "Empresa": "",
        "Numero": "",
        "Nombre": "",
        "Titulo": "",
        "Descripcion": "",
        "Fecha_Actualizacion": "",
        "Usuario_Modifica": "",
        "Usuario_Fecha_Actualiza": "",
    }
    const [datos, setDatos] = useState(listaCampos);
    const [listaModel, setListaModel] = useState(listaMod);
    //Centros de costo
    const columnasCC = [
        {
            dataField: 'ID',
            text: 'Número',
            csvText: 'Numero',
            sort: true,
        },
        {
            dataField: 'Nombre',
            text: 'Nombre',
            csvText: 'Nombre',
            sort: true,
        },
        {
            dataField: 'Porcentaje', text: 'Porcentaje', hidden: false, sort: true, editable: true, align: 'right', validator: (newValue, row, column) => {
                if (isNaN(newValue)) {
                    return {
                        valid: false,
                        message: 'Debe ingresar un dato válido'
                    };
                }
                let isValid = true;
                isValid = newValue.match(/^((100(\.0{1,2})?)|(\d{1,2}?))$/) == null ? false : true;
                if (isValid == false) {
                    return {
                        valid: false,
                        message: 'Debe ingresar un dato válido'
                    };
                }
                //cambio de datos en la lista 
                let _listaCC = [...selectCC];
                if (_listaCC.includes(row.ID)) {
                    let _listaCCRow = [...selectCCRow];
                    _listaCCRow = _listaCCRow.filter(x => x.ID != row.ID);
                    _listaCCRow.push({ ID: row.ID, Porcentaje: newValue });
                    setSelectCCRow(_listaCCRow);
                }
                return true;
            }
        },
    ];
    const [selectCC, setSelectCC] = useState([]);
    const selectRowCC = { mode: 'checkbox', bgColor: '#d73220', clickToSelect: true, hideSelectColumn: false, selected: selectCC, onSelect: (row, isSelect) => onRowSelectCC(row, isSelect), onSelectAll: (isSelect, rows) => handleOnSelectAllCC(isSelect, rows), style: { color: '#ffffff' }, clickToEdit: true, };
    const cellEditCC = { mode: 'dbclick', blurToSave: true, autoSelectText: true };
    const [listaDatosCC, setListaDatosCC] = useState([]);

    const [selectCCRow, setSelectCCRow] = useState([]);
    const [selectCuenta, setSelectCuenta] = useState([]);

    //arbol
    const [listCuentasCont, setListCuentasCont] = useState([]);
    const [listChecked, setListChecked] = useState([]);
    const [listExpanded, setListExpanded] = useState(["0"]);
    const [listCuentas, setListCuentas] = useState([]);
    const [filterText, setFilterText] = useState('');
    const [filteredNodes, setFilteredNodes] = useState([]);

    //Seguridad
    const [usuarioS, setUsuarioS] = useSessionStorage('UsuarioSCON');
    const [menuId, setMenuId] = useState(0);
    const [menuOpciones, setMenuOpciones] = useState([]);
    const [showModalSeguridad, setShowModalSeguridad] = useState(false);
    const [opcionValidar, setOpcionValidar] = useState(0);
    const [opcionValidarNombre, setOpcionValidarNombre] = useState('');

    const spinnerModalMostrar = (pSpinnerModal, pSpinnerLabel, pSpinnerTipo) => {
        setSpinnerModal(pSpinnerModal);
        setSpinnerLabel(pSpinnerLabel);
        setSpinnerTipo(pSpinnerTipo);
    }



    const volverAtras = () => {
        historyMenu.push(SiteRutas.CentrosUtilidad);
    }

    const cargarDatos = async () => {
        let spinnerLabel = 'Cargando datos...';
        spinnerModalMostrar(true, spinnerLabel, 3)
        setSelectCCRow([]);
        setSelectCuenta([]);
        let _id = (props.match.params.id == '0') ? '' : props.match.params.id;
        await cargaCC((_id.length > 0) ? _id : 0);
        const _ListCuentasCont = await carga_ListTree();
        setListCuentasCont(_ListCuentasCont);
        setFilteredNodes(_ListCuentasCont);
        if (_id.length > 0) {
            await cargaCentroUtilidad(_id);
            await cargaDetalleCentroUtilidad(_id);
        } else {
            setSelectCC([]);
            setDatos(listaCampos);
            setCodigo(_id);
        }

        setId(_id);

        const _MenuNomb = await cargarMenuNombre(Config.Modulo, optSeg.TMenuSistema.CentrosdeUtilidad.value);
        let _menuId = 0;

        if (_MenuNomb.ID != undefined) {
            _menuId = _MenuNomb.ID;
        }
        const _UsuarioS = usuarioS;
        let _menuOpciones = null;

        if (_menuId > 0) {
            _menuOpciones = await cargarMenuOpciones(Config.Modulo, _UsuarioS, _menuId);
        }
        setMenuId(_menuId), setMenuOpciones(_menuOpciones)

        spinnerModalMostrar(false, '', 3)
    }

    const cargaCentroUtilidad = async (pCC) => {


        const response = await CentrosUtilidad_Consulta_Request(token, empresa, pCC);
        if (response.Exitoso) {
            const _datos = asociarDatos(response.Datos);
            setDatos(_datos);
            setCodigo(pCC);
        }
        else {
            Notificacion.error(response.Mensaje);
            spinnerModalMostrar(false, '', 3)
            volverAtras();
        }


    }

    const asociarDatos = (pDatos) => {
        let _Campos = { ...datos };
        _Campos.Numero.value = pDatos.Numero;
        _Campos.Nombre.value = pDatos.Nombre;
        _Campos.Titulo.value = pDatos.Titulo;
        _Campos.Descripcion.value = pDatos.Descripcion;
        return _Campos;
    }

    const cargaDetalleCentroUtilidad = async (pCC) => {


        const response = await DetalleCentroUtilidad_Listar_Request(token, pCC, 0);
        if (response.Exitoso) {
            asociarDatosDetalle(response.Datos);
        }
        else {
            Notificacion.error(response.Mensaje);
            spinnerModalMostrar(false, '', 3)
            //volverAtras();
        }


    }
    const asociarDatosDetalle = (pDatos) => {
        let _SelectCC = [];
        let _SelectCCRow = [];
        let _SelectCuenta = [];//tipo
        let _ListChecked = [];
        pDatos.filter(y => y.TipoRef == Config.tr_Cuenta).map((x) => {
            _SelectCuenta.push({ ID: x.Referencia, Porcentaje: x.Porcentaje });
            _ListChecked.push(x.Referencia);
        })

        pDatos.filter(y => y.TipoRef == Config.tr_CentroCos).map((x) => {
            _SelectCCRow.push({ ID: x.Referencia, Porcentaje: x.Porcentaje });
            _SelectCC.push(x.Referencia);
        })


        setSelectCC(_SelectCC);
        setSelectCCRow(_SelectCCRow);
        setSelectCuenta(_SelectCuenta);
        setListChecked(_ListChecked);
    }

    useEffect(() => {

        if (!mounted.current) {
            const carga = async () => {
                await cargarDatos()
            }
            carga();
            mounted.current = true;
        }

    }, [])


    const cargaCC = async (pCUtil) => {
        let arrayDatos = [];

        const responseCentrosCosto = await CentrosCostos_Listar_Porcentaje_Request(token, empresa, 0, pCUtil);

        if (responseCentrosCosto.Exitoso) {

            if (responseCentrosCosto.Datos.length > 1) {
                arrayDatos = responseCentrosCosto.Datos;
            } else {

                if (responseCentrosCosto.Datos[0].ID > 0 && responseCentrosCosto.Datos[0].Empresa > 0) {
                    arrayDatos = responseCentrosCosto.Datos;
                }

            }

        } else {
            Notificacion.error("Sucedió un error al consultar los centros de costo.");
            volverAtras();
            return;
        }

        setListaDatosCC(arrayDatos);
    }

    const onRowSelectCC = (row, isSelect) => {
        let _listaCC = [...selectCC];
        let _listaCCRow = [...selectCCRow];
        if (isSelect) {
            if (!_listaCC.includes(row.ID)) {
                _listaCC.push(row.ID);
                _listaCCRow.push({ ID: row.ID, Porcentaje: row.Porcentaje });
            }
        } else {
            _listaCC = _listaCC.filter(x => x !== row.ID);
            _listaCCRow = _listaCCRow.filter(x => x.ID != row.ID);
        }

        setSelectCC(_listaCC);
        setSelectCCRow(_listaCCRow);

        return true;
    }
    const handleOnSelectAllCC = (isSelect, rows) => {

        if (isSelect) {
            let _CC = [];
            setSelectCC(rows.map(r => r.ID));
            rows.map(x => {
                _CC.push({ ID: x.ID, Porcentaje: x.Porcentaje });
            })
            setSelectCCRow(_CC);
            return rows.map(x => x.ID);
        } else {
            setSelectCC([]);
            setSelectCCRow([]);
            return [];
        }
    }
    //procesar datos
    const ingresarDatos = async () => {
        if (validarDatos()) {
            const _id = id;
            const optSegopt = optSeg.TOpciones_Menu;
            const _value = (_id > 0) ? optSegopt.Editar.value : optSegopt.Nuevo.value;
            let validar = validarMenuOpcion(_value);
            if (!validar) {
                await ingresarDatosSel();
            }
        }

    }

    const ingresarDatosSel = async () => {
        if (validarDatos()) {
            let spinnerLabel = id.length > 0 ? 'Actualizando datos' : 'Ingresando datos';
            spinnerModalMostrar(true, spinnerLabel, 3)
            const _data = llenarListaDatos();
            const _CentroCostos = llenarListaCentroCostos();
            const _CuentasContables = llenarListaCuentasC();
            let resultado = '';

            if (codigo.length > 0) {
                resultado = await CentrosUtilidad_Modificar_Request(token, JSON.stringify(_data), JSON.stringify(_CentroCostos), JSON.stringify(_CuentasContables));
            }
            else {
                resultado = await CentrosUtilidad_Guardar_Request(token, JSON.stringify(_data), JSON.stringify(_CentroCostos), JSON.stringify(_CuentasContables));
            };
            spinnerModalMostrar(false, '', 3)
            if (resultado.Exitoso == true) {
                Notificacion.success('Se actualizó la información con éxito.');
            }
            else {
                if (isNaN(resultado.Mensaje.trim())) {
                    Notificacion.error(`Error: ${resultado.Mensaje}`);
                }
                else {
                    Notificacion.success('Se almacenó la información con éxito.');
                }
            }
            volverAtras();
        }
    }

    const llenarListaDatos = () => {
        let _Campos = datos;
        let _Datos = listaModel;
        _Datos.ID = _Campos.Numero.value;
        _Datos.Numero = _Campos.Numero.value;
        _Datos.Empresa = empresa;
        _Datos.Nombre = _Campos.Nombre.value;
        _Datos.Titulo = _Campos.Titulo.value;
        _Datos.Descripcion = _Campos.Descripcion.value;
        _Datos.Usuario_Modifica = usuario;

        return _Datos;
    }

    const llenarListaCentroCostos = () => {
        let _CC = [];
        selectCCRow.map(x => {

            _CC.push(`${x.ID},${x.Porcentaje}`);
        })

        return _CC;
    }

    const llenarListaCuentasC = () => {
        let _CC = [];
        selectCuenta.map(x => {

            _CC.push(`${x.ID},${x.Porcentaje}`);
        })

        return _CC;
    }

    const onChangeInput = (e) => {
        const name = e.target.name;
        const value = e.target.value;
        let newAttributes = datos[name].attributes;
        // newAttributes.focus = true; //Se asigna foco al componente
        const Datos = Object.assign({}, datos, { [name]: { value: value, attributes: newAttributes } })
        setDatos(Datos);
    }


    const validarDatos = () => {


        if (datos.Nombre.value.toString().trim() === "") {
            Notificacion.warning("Debe ingresar un nombre.");
            return;
        }

        if (datos.Titulo.value.toString().trim() === "") {
            Notificacion.warning("Debe ingresar un título para el asiento contable.");
            return;
        }

        if (selectCuenta.length == 0) {
            Notificacion.warning("Debe seleccionar al menos una cuenta contable.");
            return;
        }

        if (selectCCRow.length == 0) {
            Notificacion.warning("Debe seleccionar al menos un centro de costo.");
            return;
        }


        return true;
    };

    //Arbol cuentas

    const carga_ListTree = async () => {

        const response = await Catalogo_Lista_Tipos_Request(token, empresa, `${Config.TcIngresos},${Config.TcEgresos},${Config.TcCostos}`);
        let _lista = [];
        if (response.Exitoso) {
            const _listCuentas = response.Datos;
            const _listCuentasCont = llenadoListaArbol(_listCuentas);
            setListCuentas(_listCuentas);
            _lista = datosArbolCheck(_listCuentasCont, false);
        }
        else {
            Notificacion.error(response.Mensaje);
            await volverAtras();
        }

        return _lista;

    }

    const llenadoListaArbol = (pLista) => {
        let _Datos = [];
        const _Lista = pLista;
        const _Empresa = empresaNombreCON;
        let _lstaExpanded = [0];
        //(item.Padres.length > 0 ? parseInt(item.Padres.substring(item.Padres.length - 6, item.Padres.length)) :  0);
        _Datos.push({ "title": _Empresa, "subtitle": "", "padre": -1, "value": 0, "disabled": "true" });

        _Lista.map(function (item, index) {
            _Datos.push({ "title": item.Cuenta + " " + item.Nombre, "subtitle": "", "padre": (item.Padres.length > 0 ? parseInt(item.Padres.substring(item.Padres.length - 6, item.Padres.length)) : 0), "value": item.ID });
            _lstaExpanded.push(item.ID);
        });
        setListExpanded(_lstaExpanded);
        return _Datos;
    }

    const handleCheck = (pCheck, targetNode) => {

        setListChecked(pCheck);
        let _SelectCuenta = [...selectCuenta];
        let _Porc = 100;
        if (targetNode.checked) {

            Swal.fire({
                title: 'Porcentaje de la cuentas',
                html: `<h4>${targetNode.label}</h4>`,
                input: 'text',
                inputAttributes: {
                    autocapitalize: 'off',
                    maxLength: "3",
                    textAlign: 'right',
                },
                showCancelButton: true,
                confirmButtonText: 'Aceptar',
                showLoaderOnConfirm: true,
                preConfirm: (texto) => {
                    //texto = document.querySelector('#swal-input1').value;
                    if (texto.trim().length === 0) {
                        Swal.showValidationMessage(
                            `Debe ingresar un comentario de inactivación`
                        );
                    }
                    if (isNaN(texto)) {
                        Swal.showValidationMessage(
                            'Debe ingresar un dato válido'
                        );
                    }
                    let isValid = true;
                    isValid = texto.match(/^((100(\.0{1,2})?)|(\d{1,2}?))$/) == null ? false : true;
                    if (isValid == false) {
                        Swal.showValidationMessage(
                            'Debe ingresar un dato válido'
                        );
                    }

                    return texto;
                },
            }).then((result) => {
                if (result.isConfirmed) {
                    _SelectCuenta.push({ ID: targetNode.value, Porcentaje: result.value });

                } else {
                    _SelectCuenta.push({ ID: targetNode.value, Porcentaje: _Porc });
                }
                setSelectCuenta(_SelectCuenta);
            })


        } else {
            _SelectCuenta = selectCuenta.filter(x => x.ID != targetNode.value);
            setSelectCuenta(_SelectCuenta);
        }


    }

    const handelExp = (pCheck) => {
        setListExpanded(pCheck);
    }

    const handleOnClick = async (node) => {

        const _CK = listChecked.includes(node.value.toString().trim());
        if (_CK) {
            Swal.fire({
                title: 'Porcentaje de la cuentas',
                html: `<h4>${node.label}</h4>`,
                input: 'text',
                inputAttributes: {
                    autocapitalize: 'off',
                    maxLength: "3",
                    textAlign: 'right',
                },
                showCancelButton: true,
                confirmButtonText: 'Aceptar',
                showLoaderOnConfirm: true,
                preConfirm: (texto) => {
                    //texto = document.querySelector('#swal-input1').value;
                    if (texto.trim().length === 0) {
                        Swal.showValidationMessage(
                            `Debe ingresar un comentario de inactivación`
                        );
                    }
                    if (isNaN(texto)) {
                        Swal.showValidationMessage(
                            'Debe ingresar un dato válido'
                        );
                    }
                    let isValid = true;
                    isValid = texto.match(/^((100(\.0{1,2})?)|(\d{1,2}?))$/) == null ? false : true;
                    if (isValid == false) {
                        Swal.showValidationMessage(
                            'Debe ingresar un dato válido'
                        );
                    }

                    return texto;
                },
            }).then((result) => {
                if (result.isConfirmed) {
                    ActualizaPorcentaje(node.value, result.value);
                }
            })

        }

    }


    const ActualizaPorcentaje = (pId, pPorcentaje) => {

        let _SelectCuenta = [...selectCuenta];
        _SelectCuenta = selectCuenta.filter(x => x.ID != pId);
        _SelectCuenta.push({ ID: pId, Porcentaje: pPorcentaje });

        setSelectCuenta(_SelectCuenta);
    }

    const onFilterChange = (e) => {
        let _FilterTex = { ...filterText };
        _FilterTex = e.target.value;
        if (!_FilterTex) {
            setFilteredNodes(listCuentasCont);
            setFilterText(_FilterTex);
            return;
        }
        setFilteredNodes(listCuentasCont.reduce(filterNodes, []));
        setFilterText(_FilterTex);
        //filterTree();
    }

    const filterTree = () => {
        // const { filterText } = this.state;

        // Reset nodes back to unfiltered state
        if (!filterText) {
            setFilteredNodes(listCuentasCont);
            return;
        }

        setFilteredNodes(listCuentasCont.reduce(filterNodes, []));
    }

    const filterNodes = (filtered, node) => {
        //const { filterText } = this.state;
        const children = (node.children || []).reduce(filterNodes, []);

        if (
            // Node's label matches the search string
            node.label.toLocaleLowerCase().indexOf(filterText.toLocaleLowerCase()) > -1 ||
            // Or a children has a matching node
            children.length
        ) {
            filtered.push({ ...node, children });
        }

        return filtered;
    }




    //Seguridad
    const cargarMenuOpciones = async (pModuloId, pUsuarioId, pMenuId) => {
        try {

            let listMO = await Obtener_MenuOpciones_Lista_Request(token, pModuloId, pUsuarioId, pMenuId);
            if (listMO.Exitoso === false) {
                return null;
            }
            return listMO.Datos;
        }
        catch (err) {
            Notificacion.error(`Error: cargarMenuOpciones.`);
        }
    }

    const cargarMenuNombre = async (pModulo, pMenuNombre) => {
        try {
            let listMON = await Obtener_MenuNombre_Request(token, pModulo, pMenuNombre);
            if (listMON.Exitoso == false) {
                return null;
            }
            return listMON.Datos;
        }
        catch (err) {
            Notificacion.error(`Error: cargarMenuNombre.`);
        }
    }

    const validarMenuOpcion = (pOpcion) => {
        let validar = false;
        let _menuOpciones = menuOpciones;
        const optSegopt = optSeg.TOpciones_Menu;
        let resultado = _menuOpciones.filter((item) => item.Opcion_Nombre == pOpcion);
        if (resultado.length > 0) {
            if (resultado[0].Opcion_Validar) {
                setShowModalSeguridad(true); setOpcionValidar(resultado[0].Opcion_Id); setOpcionValidarNombre(pOpcion);
                validar = true;
            }
        } else {
            setShowModalSeguridad(true); setOpcionValidar(resultado[0].Opcion_Id); setOpcionValidarNombre(pOpcion);
            validar = true;
            //Notificacion.error('No existe opción en la seguridad');
        }
        return validar;
    };

    const handleCerrarModal = () => setShowModalSeguridad(false);

    const handleRadioButton = (e, id) => {
        const name = id;
        const valor = e.target.value;
        const _Datos = { ...datos };
        _Datos.Mensual.value = valor;
        setDatos(_Datos);

        if (name == "selectedMensual") {
            setSelectedMensual(valor);
        }
    };

    const onActionResultModal = (pValido) => {
        if (pValido) {
            let _OpcionNom = opcionValidarNombre;
            setShowModalSeguridad(false); setOpcionValidar(0); setOpcionValidarNombre('');
            const _optSegopt = optSeg.TOpciones_Menu;
            switch (_OpcionNom) {
                case _optSegopt.Nuevo.value:
                    ingresarDatosSel();
                    break;
                case _optSegopt.Editar.value:
                    ingresarDatosSel();
                    break;
                default:
                    break;
            }
        }
    }

    return (
        <Fragment>
            <MantCentroUtilidadInt
                botones={botones}
                Titulo={'Centro de Utilidad'}
                Datos={datos}
                onChangeInput={onChangeInput}
                titulo={"Centros de Costos"}
                selectRow={selectRowCC}
                cellEditCC={cellEditCC}
                columnas={columnasCC}
                listaDatos={listaDatosCC}
                rowEvents={() => { }}
                //listCuentasCont = {listCuentasCont}
                listCuentasCont={filteredNodes}
                listChecked={listChecked}
                listExpanded={listExpanded}
                handleCheck={handleCheck}
                handelExp={handelExp}
                onFilterChange={onFilterChange}
                filterText={filterText}
                handleOnClick={handleOnClick}

            />
            <ModalSpinner
                selectedModal={spinnerModal}
                contentLabel={'spinnerModalProgress'}
                label={spinnerLabel}
                tipoSpinner={spinnerTipo}
            />
            <ModalSeguridad
                //token={this.props.token}
                modalTitle={'Requiere Permisos'}
                menuId={menuId}
                opcionId={opcionValidar}
                show={showModalSeguridad}
                onActionResult={onActionResultModal}
                onHide={handleCerrarModal}
            />
        </Fragment>
    );
};
export default withRouter(memo(mantCentroUtilidad));