import React, { Component } from 'react';
import { Programa, SimpleTable, Select, TextArea, Button } from 'argous/dist/components';
import { serverAction } from 'argous/dist/utils/api'
import passFields from 'argous/dist/fieldsRedux/passFields';
import { setField } from 'argous/dist/fieldsRedux';
import Input from 'argous/dist/components/Input';
import GraficoPizzaAnaliseFeedBack from './GraficoPizzaAnaliseFeedBack';

class RelatorioAnaliseFeedback extends Component {

    pgCode = 'AnaliseFeebackAD'

    state = {
        modalDadosFeedback: false,
        quantidadeF: 0,
        quantidadeI: 0,
        quantidadeN: 0,
        quantidadeTotal: 0,
        appearing: true,
        arr: [],
        cdCiclo: '1',
        filtro: {},
        mostraIndicadores: true,
        mostraGrid: true,
        mostraGrafico: false,
        mostraRelatorio: false,
        mostraQuestoes: false,
        mostraPlanoDesenvolvimento: false
    }

    indicadores = [{
        id: 'F',
        tipo: 'Finalizado'
    }, {
        id: 'I',
        tipo: 'Iniciado'
    }, {
        id: 'N',
        tipo: 'Não Iniciado'
    }]

    visualizaFeedback = (obj) => {
        console.log("Visualizando", obj)
        serverAction('buscaAvaliacaoDeFeedback', obj).then(res => {
            console.log("Visualizando", res)
        })
    }

    executaFiltroPesquisa = (obj) => {
        console.log('Executando executaFiltroPesquisa', obj)

        var filtro = {
            cdCiclo: this.state.cdCiclo,
            cdH: this.state.cdH,
            cdC: this.state.cdC,
            cdS: this.state.cdS,
        }

        if (obj !== undefined && obj !== '') {
            console.log("ADICIONANDO AO FILTRO")
            filtro = {
                cdCiclo: this.state.cdCiclo,
                cdH: this.state.cdH,
                cdC: this.state.cdC,
                cdS: this.state.cdS,
                nmF: obj
            }
        }

        console.log("filtro ", filtro)

        serverAction('buscaAvaliacoesDeFeedback', filtro).then(res => {
            console.log('chamada', res)
            if (res.status) {
                setField("listaCargos", res.cargos)
                setField("listaHierarquias", res.hierarquias)
                setField("listaCiclos", res.ciclos)
                setField("listaCiclosSelecionado", 1)
                setField("itensFB", res.itens)
                setField('listaQuantidades', this.indicadores)
                setField('quantidades', res.quantidades)
                if (res.quantidades !== undefined) {
                    var qtN = 0;
                    var qtI = 0;
                    var qtF = 0;
                    var qtTotal = 0;
                    var arr = []
                    for (var i = 0; i < res.quantidades.length; i++) {
                        arr[i] = res.quantidades[i].tpStatus

                        if (res.quantidades[i].tpStatus === 'F') {
                            qtF = res.quantidades[i].quantidade;
                        } else if (res.quantidades[i].tpStatus === 'I') {
                            qtI = res.quantidades[i].quantidade;
                        } else if (res.quantidades[i].tpStatus === 'N') {
                            qtN = res.quantidades[i].quantidade;
                        }
                    }

                    qtTotal = (qtN + qtF + qtI)

                    this.setState({
                        quantidadeF: qtF,
                        quantidadeI: qtI,
                        quantidadeN: qtN,
                        quantidadeTotal: qtTotal,
                        arr: arr
                    })
                }
            }
        })

    }

    executaFiltroCiclo = (obj) => {
        console.log('Executando executaFiltroCiclo', obj)
        var filtro = {
            cdH: this.state.cdH,
            cdC: this.state.cdC,
            cdS: this.state.cdS,
        }
        if (obj !== 'Selecionar') {
            filtro = {
                cdCiclo: obj,
                cdH: this.state.cdH,
                cdC: this.state.cdC,
                cdS: this.state.cdS,
            }
        }

        serverAction('buscaAvaliacoesDeFeedback', filtro).then(res => {
            console.log('chamada', res)
            if (res.status) {
                setField("listaCargos", res.cargos)
                setField("listaHierarquias", res.hierarquias)
                setField("listaCiclos", res.ciclos)
                setField("listaCiclosSelecionado", 1)
                setField("itensFB", res.itens)
                setField('listaQuantidades', this.indicadores)
                setField('quantidades', res.quantidades)
                if (res.quantidades !== undefined) {
                    var qtN = 0;
                    var qtI = 0;
                    var qtF = 0;
                    var qtTotal = 0;
                    var arr = []
                    for (var i = 0; i < res.quantidades.length; i++) {
                        arr[i] = res.quantidades[i].tpStatus

                        if (res.quantidades[i].tpStatus === 'F') {
                            qtF = res.quantidades[i].quantidade;
                        } else if (res.quantidades[i].tpStatus === 'I') {
                            qtI = res.quantidades[i].quantidade;
                        } else if (res.quantidades[i].tpStatus === 'N') {
                            qtN = res.quantidades[i].quantidade;
                        }
                    }

                    qtTotal = (qtN + qtF + qtI)

                    this.setState({
                        quantidadeF: qtF,
                        quantidadeI: qtI,
                        quantidadeN: qtN,
                        quantidadeTotal: qtTotal,
                        arr: arr
                    })
                }
            }
        })
    }

    executaFiltroCargo = (obj) => {
        console.log('Executando executaFiltroCargo', obj)
        var filtro = {
            cdCiclo: this.state.cdCiclo,
            cdH: this.state.cdH,
            cdS: this.state.cdS,
        }
        if (obj !== 'Selecionar') {
            filtro = {
                cdCiclo: this.state.cdCiclo,
                cdH: this.state.cdH,
                cdC: obj,
                cdS: this.state.cdS,
            }
            this.setState({
                cdC: obj
            })
        } else {
            delete this.state.cdC
        }



        serverAction('buscaAvaliacoesDeFeedback', filtro).then(res => {
            console.log('chamada', res)
            if (res.status) {
                setField("listaCargos", res.cargos)
                setField("listaHierarquias", res.hierarquias)
                setField("listaCiclos", res.ciclos)
                setField("listaCiclosSelecionado", 1)
                setField("itensFB", res.itens)
                setField('listaQuantidades', this.indicadores)
                setField('quantidades', res.quantidades)
                if (res.quantidades !== undefined) {
                    var qtN = 0;
                    var qtI = 0;
                    var qtF = 0;
                    var qtTotal = 0;
                    var arr = []
                    for (var i = 0; i < res.quantidades.length; i++) {
                        arr[i] = res.quantidades[i].tpStatus

                        if (res.quantidades[i].tpStatus === 'F') {
                            qtF = res.quantidades[i].quantidade;
                        } else if (res.quantidades[i].tpStatus === 'I') {
                            qtI = res.quantidades[i].quantidade;
                        } else if (res.quantidades[i].tpStatus === 'N') {
                            qtN = res.quantidades[i].quantidade;
                        }
                    }

                    qtTotal = (qtN + qtF + qtI)

                    this.setState({
                        quantidadeF: qtF,
                        quantidadeI: qtI,
                        quantidadeN: qtN,
                        quantidadeTotal: qtTotal,
                        arr: arr
                    })
                }
            }
        })
    }

    executaFiltroHierarquia = (obj) => {
        console.log('Executando executaFiltroHierarquia', obj)
        var filtro = {
            cdCiclo: this.state.cdCiclo,
            cdC: this.state.cdC,
            cdS: this.state.cdS,
        }
        if (obj !== 'Selecionar') {
            filtro = {
                cdCiclo: this.state.cdCiclo,
                cdH: obj,
                cdC: this.state.cdC,
                cdS: this.state.cdS,
            }
            this.setState({
                cdH: obj
            })
        } else {
            delete this.state.cdH
        }

        serverAction('buscaAvaliacoesDeFeedback', filtro).then(res => {
            console.log('chamada', res)
            if (res.status) {
                setField("listaCargos", res.cargos)
                setField("listaHierarquias", res.hierarquias)
                setField("listaCiclos", res.ciclos)
                setField("listaCiclosSelecionado", 1)
                setField("itensFB", res.itens)
                setField('listaQuantidades', this.indicadores)
                setField('quantidades', res.quantidades)
                if (res.quantidades !== undefined) {
                    var qtN = 0;
                    var qtI = 0;
                    var qtF = 0;
                    var qtTotal = 0;
                    var arr = []
                    for (var i = 0; i < res.quantidades.length; i++) {
                        arr[i] = res.quantidades[i].tpStatus

                        if (res.quantidades[i].tpStatus === 'F') {
                            qtF = res.quantidades[i].quantidade;
                        } else if (res.quantidades[i].tpStatus === 'I') {
                            qtI = res.quantidades[i].quantidade;
                        } else if (res.quantidades[i].tpStatus === 'N') {
                            qtN = res.quantidades[i].quantidade;
                        }
                    }

                    qtTotal = (qtN + qtF + qtI)

                    this.setState({
                        quantidadeF: qtF,
                        quantidadeI: qtI,
                        quantidadeN: qtN,
                        quantidadeTotal: qtTotal,
                        arr: arr
                    })
                }
            }
        })
    }

    executaFiltroStatus = (obj) => {
        console.log('Executando executaFiltroStatus', obj)
        var filtro = {
            cdCiclo: this.state.cdCiclo,
            cdH: this.state.cdH,
            cdC: this.state.cdC,
        }
        if (obj !== 'Selecionar') {
            console.log("DIFERENTE DE SELECIONAR ", obj)
            filtro = {
                cdCiclo: this.state.cdCiclo,
                cdH: this.state.cdH,
                cdC: this.state.cdC,
                cdS: obj,
            }
            this.setState({
                cdS: obj
            })
        } else {
            delete this.state.cdS
        }


        serverAction('buscaAvaliacoesDeFeedback', filtro).then(res => {
            console.log('chamada', res)
            if (res.status) {
                setField("listaCargos", res.cargos)
                setField("listaHierarquias", res.hierarquias)
                setField("listaCiclos", res.ciclos)
                setField("listaCiclosSelecionado", 1)
                setField("itensFB", res.itens)
                setField('listaQuantidades', this.indicadores)
                setField('quantidades', res.quantidades)
                if (res.quantidades !== undefined) {
                    var qtN = 0;
                    var qtI = 0;
                    var qtF = 0;
                    var qtTotal = 0;
                    var arr = []
                    for (var i = 0; i < res.quantidades.length; i++) {
                        arr[i] = res.quantidades[i].tpStatus

                        if (res.quantidades[i].tpStatus === 'F') {
                            qtF = res.quantidades[i].quantidade;
                        } else if (res.quantidades[i].tpStatus === 'I') {
                            qtI = res.quantidades[i].quantidade;
                        } else if (res.quantidades[i].tpStatus === 'N') {
                            qtN = res.quantidades[i].quantidade;
                        }
                    }

                    qtTotal = (qtN + qtF + qtI)

                    this.setState({
                        quantidadeF: qtF,
                        quantidadeI: qtI,
                        quantidadeN: qtN,
                        quantidadeTotal: qtTotal,
                        arr: arr
                    })
                }
            }
        })
    }

    init = () => {


        //{cdCiclo:'', cdH: '', cdC: '', cdS: '', nmF:''}
        const filtro = {
            cdFiltro: '1'
        }
        console.log('Filtro', filtro)
        serverAction('buscaAvaliacoesDeFeedback', this.state.filtro).then(res => {
            console.log('chamada', res)
            if (res.status) {
                setField("listaCargos", res.cargos)
                setField("listaHierarquias", res.hierarquias)
                setField("listaCiclos", res.ciclos)
                setField("listaCiclosSelecionado", 1)
                setField("itensFB", res.itens)
                setField('listaQuantidades', this.indicadores)
                setField('quantidades', res.quantidades)
                if (res.quantidades !== undefined) {
                    var qtN = 0;
                    var qtI = 0;
                    var qtF = 0;
                    var qtTotal = 0;
                    var arr = []
                    for (var i = 0; i < res.quantidades.length; i++) {
                        if (res.quantidades[i].tpStatus === 'F') {
                            arr[i] = 'Finalizado'
                            qtF = res.quantidades[i].quantidade;

                        } else if (res.quantidades[i].tpStatus === 'I') {
                            arr[i] = 'Iniciado'
                            qtI = res.quantidades[i].quantidade;

                        } else if (res.quantidades[i].tpStatus === 'N') {
                            arr[i] = 'Não Iniciado'
                            qtN = res.quantidades[i].quantidade;
                        }
                    }

                    qtTotal = (qtN + qtF + qtI)

                    this.setState({
                        quantidadeF: qtF,
                        quantidadeI: qtI,
                        quantidadeN: qtN,
                        quantidadeTotal: qtTotal,
                        arr: arr
                    })
                }
            }
        })
    }

    render() {
        const { modalDadosFeedback, modalTelaGrafico, modalRelatorio, modalQuestoes, modalPlanoDesenvolvimento, quantidadeF, quantidadeI, quantidadeN, quantidadeTotal, arr } = this.state

        const data = {
            datasets: [{
                data: [quantidadeN, quantidadeF, quantidadeI],
                backgroundColor: ['#F6F612', '#F33493', '#3C96F0'],
                hoverBorderColor: '#BBB3B3',
                hoverBorderWidth: 3,
            }],
            labels: arr
        }

        return (

            <Programa programDidMount={this.init} code={this.pgCode} >
                <div>
                    <div className='row'>
                        <button className="btn btn-dark glyphicon glyphicon-eye-open navbar-right" style={{ marginRight: '20px' }}
                            onClick={() => this.setState({ mostraIndicadores: !this.state.mostraIndicadores })}>
                        </button>
                    </div>
                    {this.state.mostraIndicadores &&
                        <div className='row'>
                            <div className='col-lg-6 col-md-6 col-sm-6 col-xs-6'>

                                <div className='row'>
                                    <div className='col-lg-6 col-md-6 col-sm-6 col-xs-6'>
                                        <label>Ciclo de Avaliação:</label>
                                        <Select field='cdCiclo'
                                            optionsField='listaCiclos'
                                            optionsValue='chave'
                                            optionsLabel='descricao'
                                            onChange={obj => this.executaFiltroCiclo(obj)}>
                                            <option label='Selecionar'>Selecionar</option>
                                        </Select>
                                        <br />
                                    </div>

                                    <div className='col-lg-6 col-md-6 col-sm-6 col-xs-6'>
                                        <label>Hierarquia:</label>
                                        <Select field='cdH'
                                            optionsField='listaHierarquias'
                                            optionsLabel='descricao'
                                            optionsValue='chave'
                                            onChange={obj => this.executaFiltroHierarquia(obj)}>
                                            <option label='Selecionar'>Selecionar</option>
                                        </Select>
                                        <br />
                                    </div>
                                </div>

                                <div className='row'>
                                    <div className='col-lg-6 col-md-6 col-sm-6 col-xs-6'>
                                        <label>Cargo</label>
                                        <Select field='cdC'
                                            optionsField='listaCargos'
                                            optionsLabel='descricao'
                                            optionsValue='chave'
                                            onChange={obj => this.executaFiltroCargo(obj)}>
                                            <option label='Selecionar'>Selecionar</option>
                                        </Select>
                                        <br />
                                    </div>

                                    <div className='col-lg-6 col-md-6 col-sm-6 col-xs-6'>
                                        <label>Status Feedback:</label>
                                        <Select field='cdS'
                                            optionsField='listaQuantidades'
                                            optionsLabel='tipo'
                                            optionsValue='id'
                                            onChange={obj => this.executaFiltroStatus(obj)}>
                                            <option label='Selecionar'>Selecionar</option>
                                        </Select>
                                        <br />
                                    </div>
                                </div>
                            </div>

                            <div className='col-lg-1 col-md-1 col-sm-1 col-xs-1'></div>

                            <div className='col-lg-2 col-md-2 col-sm-2 col-xs-2'>Indicadores:
                                <br />
                                <br />
                                <label>Total de Feedbacks :</label> {quantidadeTotal} <br />
                                <label>Não-Iniciados : </label>{quantidadeN}<br />
                                <label>Iniciados :</label>{quantidadeI}<br />
                                <label>Finalizados :</label>{quantidadeF}<br />
                            </div>

                            <div className='col-lg-3 col-md-3 col-sm-3 col-xs-3'>
                                <GraficoPizzaAnaliseFeedBack data={data} />
                            </div>
                        </div>
                    }
                </div>

                <div className='row'>
                    <div className='col-lg-12 col-md-12 col-sm-12 col-xs-12'>
                        <label><br /></label>
                        <Input field='ds_descricao' onBlur={e => this.executaFiltroPesquisa(e.target.value)} placeholder='Pesquise por funcionário, área ou cargo' />
                        <br />
                    </div>
                </div>

                <div className='row'>
                    <button className="btn btn-dark glyphicon glyphicon-eye-open navbar-right" style={{ marginRight: '20px' }}
                        onClick={() => this.setState({ mostraGrid: !this.state.mostraGrid })}>
                    </button>
                </div>

                <div className="row">
                    {!modalDadosFeedback && this.state.mostraGrid &&
                        <div className="col-lg-12 col-md-12 col-sm-12 col-sx-12 padding-bottom-md">
                            <SimpleTable
                                field='itensFB'
                                head={['FUNCIONÁRIO', 'ÁREA', 'CARGO', 'CICLO']}
                                alias={['ds_nome', 'ds_cc', 'ds_cargo', 'ds_ciclo']}
                                rows={25}
                                onClick={obj =>
                                    this.visualizaFeedback(obj)
                                }>
                            </SimpleTable>
                        </div>
                    }
                </div>

                {/* <div className='row'>
                    <label>GRÁFICO</label>
                    <button className="btn btn-dark glyphicon glyphicon-eye-open navbar-right" style={{ marginRight: '20px' }}
                        onClick={() => this.setState({ mostraGrafico: !this.state.mostraGrafico })}>
                    </button>
                </div>
                <div className="row">
                    {!modalTelaGrafico && this.state.mostraGrafico &&
                        <div className="col-lg-12 col-md-12 col-sm-12 col-sx-12 padding-bottom-md">

                        </div>
                    }
                </div>
                <br /> */}


                {/* <div className='row'>
                    <label>RELATÓRIO</label>
                    <button className="btn btn-dark glyphicon glyphicon-eye-open navbar-right" style={{ marginRight: '20px' }}
                        onClick={() => this.setState({ mostraRelatorio: !this.state.mostraRelatorio })}>
                    </button>
                </div>
                <br />

                <div className="row">
                    {!modalRelatorio && this.state.mostraRelatorio &&
                        <div className="col-lg-12 col-md-12 col-sm-12 col-sx-12 padding-bottom-md">
                            <SimpleTable
                                field=''
                                head={['Comportamento', 'Feedback', 'Auto Avaliação', 'Superior']}
                                alias={['', '', '', '']}
                                rows={25}
                                onClick={obj =>
                                    this.visualizaFeedback(obj)
                                }>
                            </SimpleTable>
                        </div>
                    }
                </div>
                <br /> */}


                {/* <div className='row'>
                    <label>QUESTÕES DO FEEDBACK</label>
                    <button className="btn btn-dark glyphicon glyphicon-eye-open navbar-right" style={{ marginRight: '20px' }}
                        onClick={() => this.setState({ mostraQuestoes: !this.state.mostraQuestoes })}>
                    </button>
                </div>

                <div className='row'>
                    {!modalQuestoes && this.state.mostraQuestoes &&
                        <div className="row">
                            <br />
                            <div className="col-lg-12 col-md-12 col-sm-12 col-sx-12 padding-bottom-md">
                                <div className='col-lg-2 col-md-2 col-sm-2 col-xs-2'>
                                    <label for="primeira">Quais foram as principais contribuições do avaliado no período?</label>
                                </div>
                                <div className="col-lg-10 col-md-10 col-sm-10 col-sx-10 ">
                                    <TextArea field="primeira"></TextArea>
                                </div>
                            </div>

                            <div className="col-lg-12 col-md-12 col-sm-12 col-sx-12 padding-bottom-md">
                                <div className='col-lg-2 col-md-2 col-sm-2 col-xs-2'>
                                    <label for="segunda">Quais os pontos fortes de destaque do avaliado?</label>
                                </div>
                                <div className="col-lg-10 col-md-10 col-sm-10 col-sx-10 ">
                                    <TextArea field="segunda"></TextArea>
                                </div>
                            </div>
                            <br />

                            <div className="col-lg-12 col-md-12 col-sm-12 col-sx-12 padding-bottom-md">
                                <div className='col-lg-2 col-md-2 col-sm-2 col-xs-2'>
                                    <label for="terceira">Quais as dificuldades e os aspectos de melhoria avaliado?</label>
                                </div>
                                <div className="col-lg-10 col-md-10 col-sm-10 col-sx-10 ">
                                    <TextArea field="terceira"></TextArea>
                                </div>
                            </div>
                            <div className="col-lg-12 col-md-12 col-sm-12 col-sx-12 padding-bottom-md">
                                <button className='btn btn-primary' onClick={this.cadastraNovoGrupo}>Salvar</button>
                            </div>
                        </div>
                    }
                </div>
                <br /> */}




                {/* <div className='row'>
                    <label>PLANO DE DESENVOLVIMENTO</label>
                    <button className="btn btn-dark glyphicon glyphicon-eye-open navbar-right" style={{ marginRight: '20px' }}
                        onClick={() => this.setState({ mostraPlanoDesenvolvimento: !this.state.mostraPlanoDesenvolvimento })}>
                    </button>
                </div>
                <br />

                <div className="row">
                    {!modalPlanoDesenvolvimento && this.state.mostraPlanoDesenvolvimento &&
                        <div className="col-lg-12 col-md-12 col-sm-12 col-sx-12 padding-bottom-md">
                            <br />
                            <SimpleTable
                                field=''
                                head={['Ação', 'Início', 'Fim', 'Descrição']}
                                alias={['', '', '', '']}
                                rows={25}
                                onClick={obj =>
                                    this.visualizaFeedback(obj)
                                }>
                            </SimpleTable>
                        </div>
                    } */}
                <div class="accordion" id="accordionExample">


                    <div class="card">
                        <div class="card-header" id="headingOne">
                            <h5 class="mb-0">
                                <button class="btn btn-link" type="button" width="100" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne"
                                    onClick={() => this.setState({ mostraGrafico: !this.state.mostraGrafico })}>
                                    GRÁFICO
                                    </button>
                            </h5>
                        </div>
                        <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
                            <div class="card-body">
                                <div className="row">
                                    {!modalRelatorio && this.state.mostraGrafico &&
                                        <div className="row">
                                            {!modalTelaGrafico && this.state.mostraGrafico &&
                                                <div className="col-lg-12 col-md-12 col-sm-12 col-sx-12 padding-bottom-md">

                                                </div>
                                            }
                                        </div>
                                    }
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="card">
                        <div class="card-header" id="headingTwo">
                            <h5 class="mb-0">
                                <button class="collapse show" type="button" width="100" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne"
                                    onClick={() => this.setState({ mostraRelatorio: !this.state.mostraRelatorio })}>
                                    RELATÓRIO
                                    </button>
                            </h5>
                        </div>
                        <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
                            <div class="card-body">
                                <div className="row">
                                    {!modalRelatorio && this.state.mostraRelatorio &&
                                        <div className="col-lg-12 col-md-12 col-sm-12 col-sx-12 padding-bottom-md">
                                            <SimpleTable
                                                field=''
                                                head={['Comportamento', 'Feedback', 'Auto Avaliação', 'Superior']}
                                                alias={['', '', '', '']}
                                                rows={25}
                                                onClick={obj =>
                                                    this.visualizaFeedback(obj)
                                                }>
                                            </SimpleTable>
                                        </div>
                                    }
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="card">
                        <div class="card-header" id="headingThree">
                            <h5 class="mb-0">
                                <button class="collapse show" type="button" width="100" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne"
                                    onClick={() => this.setState({ mostraQuestoes: !this.state.mostraQuestoes })}>
                                    QUESTÕES DO FEEDBACK
                                    </button>
                            </h5>
                        </div>
                        <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
                            <div class="card-body">
                                <div className='row'>
                                    {!modalQuestoes && this.state.mostraQuestoes &&
                                        <div className="row">
                                            <br />
                                            <div className="col-lg-12 col-md-12 col-sm-12 col-sx-12 padding-bottom-md">
                                                <div className='col-lg-2 col-md-2 col-sm-2 col-xs-2'>
                                                    <label for="primeira">Quais foram as principais contribuições do avaliado no período?</label>
                                                </div>
                                                <div className="col-lg-10 col-md-10 col-sm-10 col-sx-10 ">
                                                    <TextArea field="primeira"></TextArea>
                                                </div>
                                            </div>

                                            <div className="col-lg-12 col-md-12 col-sm-12 col-sx-12 padding-bottom-md">
                                                <div className='col-lg-2 col-md-2 col-sm-2 col-xs-2'>
                                                    <label for="segunda">Quais os pontos fortes de destaque do avaliado?</label>
                                                </div>
                                                <div className="col-lg-10 col-md-10 col-sm-10 col-sx-10 ">
                                                    <TextArea field="segunda"></TextArea>
                                                </div>
                                            </div>
                                            <br />

                                            <div className="col-lg-12 col-md-12 col-sm-12 col-sx-12 padding-bottom-md">
                                                <div className='col-lg-2 col-md-2 col-sm-2 col-xs-2'>
                                                    <label for="terceira">Quais as dificuldades e os aspectos de melhoria avaliado?</label>
                                                </div>
                                                <div className="col-lg-10 col-md-10 col-sm-10 col-sx-10 ">
                                                    <TextArea field="terceira"></TextArea>
                                                </div>
                                            </div>
                                            <div className="col-lg-12 col-md-12 col-sm-12 col-sx-12 padding-bottom-md">
                                                <button className='btn btn-primary' onClick={this.cadastraNovoGrupo}>Salvar</button>
                                            </div>
                                        </div>
                                    }
                                </div>
                            </div>
                        </div>
                    </div>

                    <div className="card">
                        <div className="card-header" id="headingFor">
                            <h5 className="mb-0">
                                <button className="collapse show" type="button" width="100" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne"
                                    onClick={() => this.setState({ mostraPlanoDesenvolvimento: !this.state.mostraPlanoDesenvolvimento })}>
                                    PLANO DE DESENVOLVIMENTO
                                    </button>
                            </h5>
                        </div>
                        <div id="collapseOne" className="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
                            <div class="card-body">
                                <div className="row">
                                    {!modalPlanoDesenvolvimento && this.state.mostraPlanoDesenvolvimento &&
                                        <div className="col-lg-12 col-md-12 col-sm-12 col-sx-12 padding-bottom-md">
                                            <br />
                                            <SimpleTable
                                                field=''
                                                head={['Ação', 'Início', 'Fim', 'Descrição']}
                                                alias={['', '', '', '']}
                                                rows={25}
                                                onClick={obj =>
                                                    this.visualizaFeedback(obj)
                                                }>
                                            </SimpleTable>
                                        </div>
                                    }
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                {/* </div> */}
            </Programa>
        )
    }
}
export default passFields(RelatorioAnaliseFeedback);