import React, { Fragment, memo, useState } from 'react';
//Componentes
import Botones from '../../../components/UI/botonera/headerBotones.js';
import CajaTexto from '../../../components/UI/cajaTexto/cajaTexto.jsx';
import CajaTextoBusqueda from '../../../components/UI/cajaTexto/cajaTextoBusqueda.jsx';
import ListaDatos from '../../../components/UI/listaDatosBusqueda/index.jsx'
const asociarCentroCostoInt = (props) => {
    return (
        <Fragment>
            <div className="col-md-12">
                <div className='row'>
                    <div className="col-md-6">
                        <h1>{props.Titulo}</h1>
                    </div>
                    <div className="col-md-6 text-right">
                        <div className="acciones">
                            <Botones
                                botones={props.botones}
                            />
                        </div>
                    </div>
                </div>
                <div className="content">
                    <div className="content-box box-primary">
                        <div className='row'>
                            <div className="col-md-12">
                                <div className='row'>
                                    <CajaTexto col="12" id="Cuenta" type="text" label={props.Datos.Cuenta.attributes.label} value={props.Datos.Cuenta.value} attributes={props.Datos.Cuenta.attributes} onChangeInput={props.onChangeInput} />
                                </div>
                                <div className='row'>
                                    <CajaTextoBusqueda col="4" id="CentroCosto" type="text" label={props.Datos.CentroCosto.attributes.label} value={props.Datos.CentroCosto.value} attributes={props.Datos.CentroCosto.attributes} onChangeInput={props.onChangeInputCC} onClick={() => props.handleModalTree()} onKeyPress={props.onKeyPressCC} onBlur={props.onBlurCC} />
                                    <CajaTexto col="8" id="CentroCostoNombre" type="text" label={props.Datos.CentroCostoNombre.attributes.label} value={props.Datos.CentroCostoNombre.value} attributes={props.Datos.CentroCostoNombre.attributes} onChangeInput={props.onChangeInput} />
                                </div>
                            </div>

                        </div>
                        {!props.EsPadre ?
                            (<div className='rom'>
                                <div className="content">                                    
                                        <div className="row">
                                            <div className='col-xs-12'>
                                                <div id="master-tabla" className="table-responsive  col-xs-12 col-sm-12 col-md-12 col-lg-12">
                                                    <ListaDatos
                                                        id={'llave'}
                                                        datos={props.listCatalogoXCC}
                                                        columnas={props.columnasTablaCCC}
                                                        striped={false}
                                                        hover={true}
                                                        condensed={false}
                                                        selectRow={props.selectRowTabla}
                                                        onDoubleClick={()=>{}}
                                                        borrar={props.borrando}
                                                        verLHOC={false}
                                                    />
                                                </div>
                                            </div>
                                        </div>                                    
                                </div>
                            </div>)
                        :
                        (<div></div>)}
                    </div>
                </div>
            </div>

        </Fragment>
    );
};
export default memo(asociarCentroCostoInt);