<visualizza-componente>
    <section class="content">
        <div class="row">
            <div class="col-md-6"> 
                <div class="box no-border">
                    <div class="box-header bg-red with-icon">
                        <div class="pull-left">
                            <span class="fa-stack fa-2x">
                                <i class="fas fa-circle fa-stack-2x background"></i>
                                <i class="fas fa-list-ol fa-stack-1x"></i>
                            </span>
                        </div>
                        <h3 if="{ opts.tipo == 'componente' }" class="box-title">Elenco dei componenti</h3>
                        <p if="{ opts.tipo == 'componente' }">Gestisci i componenti gi&agrave; inseriti</p>
                        <h3 if="{ opts.tipo == 'lavorazione' }" class="box-title">Elenco delle lavorazioni</h3>
                        <p if="{ opts.tipo == 'lavorazione' }">Gestisci le lavorazioni</p>
                        <h3 if="{ opts.tipo == 'finito' }" class="box-title">Elenco dei prodotti assemblati</h3>
                        <p if="{ opts.tipo == 'finito' }">Gestisci i prodotti assemblati</p>
                    </div>
                    <div class="box-body">
                        <mc_table classname="componente" target="_self" thead="{ JSON.stringify(thead) }"></mc_table>
                    </div>
                    <div class="box-footer">
                        <button type="button" class="btn btn-sm btn-primary btn-flat" onclick="{
                                    nuovo
                                }"><i class="fas fa-plus"></i> Nuovo</button>
                        <button type="button" class="btn btn-sm btn-default btn-flat pull-right" onclick="{
                                    exportcsv
                                }"><i class="fas fa-file-download"></i> Esporta</button>
                    </div>
                    <!-- /.box-body -->
                </div>
                <!-- /.box -->
            </div>        
            <div class="col-md-6">
                <div class="box no-border">
                    <div class="box-header bg-red with-icon">
                        <div class="pull-left">
                            <span class="fa-stack fa-2x">
                                <i class="fas fa-circle fa-stack-2x background"></i>
                                <i class="fas fa-plus fa-stack-1x"></i>
                            </span>
                        </div>
                        <h3 if="{ opts.tipo == 'componente' }" class="box-title">{ object ? object.get('descrizione') : 'Nuovo componente' }</h3>
                        <p if="{ opts.tipo == 'componente' }">{ object ? 'Modifica i dati del componente' : 'Inserisci il nuovo componente' }</p>
                        <h3 if="{ opts.tipo == 'lavorazione' }" class="box-title">{ object ? object.get('descrizione') : 'Nuova lavorazione' }</h3>
                        <p if="{ opts.tipo == 'lavorazione' }">{ object ? 'Modifica la lavorazione' : 'Inserisci una nuova lavorazione' }</p>
                        <h3 if="{ opts.tipo == 'finito' }" class="box-title">{ object ? object.get('descrizione') : 'Nuovo prodotto assemblato' }</h3>
                        <p if="{ opts.tipo == 'finito' }">{ object ? 'Modifica il prodotto assemblato' : 'Inserisci un nuovo prodotto assemblato' }</p>
                    </div>
                    <form id="form_componente" role="form" onsubmit="{
                                saveComponente
                            }">
                        <div class="box-body">
                            <div class="form-group">
                                <input class="form-control" type="text" placeholder="Codice univoco" name="codice" title="Codice" value="{ object ? object.get('codice') : '' }">
                            </div>
                            <div class="form-group">
                                <input class="form-control" type="text" placeholder="Nome" name="descrizione" title="Nome" value="{ object ? object.get('descrizione') : '' }">
                            </div>
                            <div class="row">
                                <div if="{ opts.tipo == 'componente' }" class="col-sm-6">
                                    <div class="form-group"> 
                                        <select id="famiglia" class="form-control select2">
                                            <option></option>
                                            <option each="{ f in famiglie }" if="{ f.get('tipo') == opts.tipo }" value="{ f.id }" selected="{ object && object.get('famiglia') && object.get('famiglia').id == f.id }">{ f.get('descrizione') }</option>
                                        </select>
                                    </div>
                                </div>
                                <div if="{ opts.tipo == 'componente' || opts.tipo == 'finito' }" class="col-sm-6">
                                    <div if="{ object }" class="form-group"> 
                                        <select id="linea" class="form-control select2" multiple>
                                            <option></option>
                                            <option each="{ l in linee }" value="{ l.id }" selected="{ object && object.get('linea') && object.get('linea').id == l.id }">{ l.get('descrizione') }</option>
                                        </select> 
                                    </div>
                                </div>
                                <div if="{ opts.tipo == 'finito' }" class="col-sm-6">
                                    <div if="{ object }" class="form-group"> 
                                        <select id="modello" class="form-control select2">
                                            <option value="">Seleziona il modello...</option>
                                            <option each="{ m in modelli }" value="{ m }" selected="{ object && object.get('modello') == m }">{ m }</option>
                                        </select> 
                                    </div>
                                </div>
                            </div>
                            <div if="{ opts.tipo == 'componente' || opts.tipo == 'finito' }" class="form-group">
                                <input class="form-control" type="number" placeholder="Soglia minima a magazzino per alert" name="soglia" title="Soglia minima a magazzino per alert" value="{ object ? object.get('soglia') : '' }">
                            </div>
                            <virtual if="{ opts.tipo == 'finito' }">
                                <hr />
                                <h5>Campi per generazione etichette</h5>
                                <div class="form-group">
                                    <input class="form-control" type="text" placeholder="Base per seriale (es. ACS21007)" name="baseseriale" title="Base per seriale" value="{ object ? object.get('baseseriale') : '' }">
                                </div>
                                <div class="form-group">
                                    <input class="form-control" type="text" placeholder="Codice a barre" name="codicebarre" title="Codice a barre" value="{ object ? object.get('codicebarre') : '' }">
                                </div>
                                <div class="form-group">
                                    <input class="form-control" type="text" placeholder="Nome per etichetta" name="nomeetichetta" title="Nome per etichetta" value="{ object ? object.get('nomeetichetta') : '' }">
                                </div>
                                <div class="form-group">
                                    <input class="form-control" type="text" placeholder="Altezza per etichetta" name="altezzaetichetta" title="Altezza per etichetta" value="{ object ? object.get('altezzaetichetta') : '' }">
                                </div>
                            </virtual>
                        </div>
                        <div class="box-footer">
                            <input type="hidden" name="id" value="{ object ? object.id : '' }">
                            <button type="submit" class="btn btn-sm btn-primary btn-flat pull-right" id="salva" 
                                    data-saving-text="<i class='fa fa-spinner fa-spin'></i> Salvataggio in corso" 
                                    data-error-text="<i class='fa fa-ban'></i> Errore nel salvataggio" 
                                    data-saved-text="<i class='fa fa-check'></i> Salvato"><i class='fas fa-save'></i> Salva</button>                        
                        </div>
                    </form>
                </div>
                <div if="{ object && opts.tipo == 'componente' }" class="box no-border">
                    <div class="box-header bg-red with-icon">
                        <div class="pull-left">
                            <span class="fa-stack fa-2x">
                                <i class="fas fa-circle fa-stack-2x background"></i>
                                <i class="fas fa-plus fa-stack-1x"></i>
                            </span>
                        </div>
                        <h4 class="box-title">Specifica eventuali lavorazioni</h4>
                    </div>
                    <div class="box-body">
                        <h5 class="text-red" style="font-size: 11px;">Seleziona il componente di partenza</h5>
                        <div class="row form-group row-componente" data-tipo="componente" data-id="{ getComponente('componente') }">
                            <div class="col-sm-9">
                                <select class="form-control select2 select-componente" data-tipo="componente" disabled="{ hasComponente('componente') }">
                                    <option></option>
                                    <optgroup each="{ f in famiglie }" label="{ f.get('descrizione') }">
                                        <option each="{ c in objects }" if="{ c.get('tipo') == 'componente' && c.id != object.id && c.get('famiglia') && c.get('famiglia').id == f.id }" value="{ c.id }" selected="{ componenteSelected(c.id, 'componente') }">{ c.get('codice') } { c.get('descrizione') }</option>
                                    </optgroup>
                                </select>
                                <input class="form-control" type="hidden" name="quantita" value="1" />
                                <input class="form-control" type="hidden" name="tipo" value="componente" />
                            </div>
                            <div class="col-sm-3 text-right">
                                <div class="btn-group">
                                    <input type="button" title="Salva" value="&#xf0c7;" class="btn btn-flat btn-sm btn-success fa-input" disabled="{ hasComponente('componente') }" onclick="{
                                                salvacomponente.bind(this, getComponente('componente'))
                                            }">
                                    <input type="button" title="Elimina" value="&#xf2ed;" class="btn btn-flat btn-sm btn-danger fa-input" disabled="{ !hasComponente('componente') }" onclick="{
                                                eliminacomponente.bind(this, getComponente('componente'))
                                            }">
                                </div>
                            </div>
                        </div>
                        <h5 class="text-red" style="font-size: 11px;">Seleziona la lavorazione</h5>
                        <div class="row form-group row-componente" data-tipo="lavorazione" data-id="{ getComponente('lavorazione') }">
                            <div class="col-sm-9">
                                <select class="form-control select2 select-componente" data-tipo="lavorazione" disabled="{ hasComponente('lavorazione') }">
                                    <option></option>
                                    <option each="{ c in objects }" if="{ c.get('tipo') == 'lavorazione' }" value="{ c.id }" selected="{ componenteSelected(c.id, 'lavorazione') }">{ c.get('codice') } { c.get('descrizione') }</option>
                                </select>
                                <input class="form-control" type="hidden" name="quantita" value="0" />
                                <input class="form-control" type="hidden" name="tipo" value="lavorazione" />
                            </div>
                            <div class="col-sm-3 text-right">
                                <div class="btn-group">
                                    <input type="button" title="Salva" value="&#xf0c7;" class="btn btn-flat btn-sm btn-success fa-input" disabled="{ hasComponente('lavorazione') }" onclick="{
                                                salvacomponente.bind(this, getComponente('lavorazione'))
                                            }">
                                    <input type="button" title="Elimina" value="&#xf2ed;" class="btn btn-flat btn-sm btn-danger fa-input" disabled="{ !hasComponente('lavorazione') }" onclick="{
                                                eliminacomponente.bind(this, getComponente('lavorazione'))
                                            }">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div if="{ object && opts.tipo == 'finito' }" class="box no-border">
                    <div class="box-header bg-red with-icon">
                        <div class="pull-left">
                            <span class="fa-stack fa-2x">
                                <i class="fas fa-circle fa-stack-2x background"></i>
                                <i class="fas fa-plus fa-stack-1x"></i>
                            </span>
                        </div>
                        <h4 class="box-title">Inserisci i componenti del prodotto</h4>
                    </div>
                    <div class="box-body">
                        <div id="nuovo-componente" class="row form-group row-componente">
                            <div class="col-sm-6">
                                <select class="form-control select2 select-componente" data-tipo="componente">
                                    <option></option>
                                    <optgroup each="{ f in famiglie }" label="{ f.get('descrizione') }">
                                        <option each="{ c in objects }" if="{ (c.get('tipo') == 'componente' && c.get('famiglia') && c.get('famiglia').id == f.id) }" value="{ c.id }">{ c.get('codice') } { c.get('descrizione') }</option>
                                    </optgroup>
                                    <optgroup label="Senza famiglia">
                                        <option each="{ c in objects }" if="{ c.get('tipo') == 'componente' && !c.get('famiglia') }" value="{ c.id }">{ c.get('codice') } { c.get('descrizione') }</option>
                                    </optgroup>
                                    <optgroup label="Prodotti finiti">
                                        <option each="{ c in objects }" if="{ c.get('tipo') == 'finito' }" value="{ c.id }">{ c.get('codice') } { c.get('descrizione') }</option>
                                    </optgroup>
                                </select> 
                            </div>
                            <div class="col-sm-3">
                                <input class="form-control" type="number" name="quantita" placeholder="Qta" />
                                <input class="form-control" type="hidden" name="tipo" value="componente" />
                            </div>
                            <div class="col-sm-3 text-right">
                                <div class="btn-group">
                                    <input type="button" title="Salva" value="&#xf0c7;" class="btn btn-flat btn-sm btn-success fa-input" onclick="{
                                                salvacomponente.bind(this, null)
                                            }">
                                    <a title="Elimina" class="btn btn-flat btn-sm btn-danger" disabled><i class="fas fa-times"></i></a>
                                </div>
                            </div>
                        </div>
                        <div each="{ cmp in object.get('componenti') }" class="row form-group row-componente" data-id="{ cmp.id }">
                            <div class="col-sm-6">
                                <select data-id="componente" class="form-control select2 select-componente" data-tipo="componente">
                                    <option></option>
                                    <optgroup each="{ f in famiglie }" label="{ f.get('descrizione') }">
                                        <option each="{ c in objects }" if="{ (c.get('tipo') == 'componente' && c.get('famiglia') && c.get('famiglia').id == f.id) }" value="{ c.id }" selected="{ cmp.figlio == c.id }">{ c.get('codice') } { c.get('descrizione') }</option>
                                    </optgroup>
                                    <optgroup label="Senza famiglia">
                                        <option each="{ c in objects }" if="{ c.get('tipo') == 'componente' && !c.get('famiglia') }" value="{ c.id }" selected="{ cmp.figlio == c.id }">{ c.get('codice') } { c.get('descrizione') }</option>
                                    </optgroup>
                                    <optgroup label="Prodotti finiti">
                                        <option each="{ c in objects }" if="{ c.get('tipo') == 'finito' }" value="{ c.id }" selected="{ cmp.figlio == c.id }">{ c.get('codice') } { c.get('descrizione') }</option>
                                    </optgroup>
                                </select> 
                            </div>
                            <div class="col-sm-3">
                                <input class="form-control" type="number" name="quantita" placeholder="Qta" value="{ cmp.quantita }" />
                                <input class="form-control" type="hidden" name="tipo" value="componente" />
                            </div>
                            <div class="col-sm-3 text-right">
                                <div class="btn-group">
                                    <input type="button" title="Salva" value="&#xf0c7;" class="btn btn-flat btn-sm btn-success fa-input" onclick="{
                                                salvacomponente.bind(this, cmp.id)
                                            }">
                                    <input type="button" title="Elimina" value="&#xf2ed;" class="btn btn-flat btn-sm btn-danger fa-input" onclick="{
                                                eliminacomponente.bind(this, cmp.id)
                                            }">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div if="{ object && opts.tipo == 'componente' }" class="box no-border">
                    <div class="box-header bg-red with-icon">
                        <div class="pull-left">
                            <span class="fa-stack fa-2x">
                                <i class="fas fa-circle fa-stack-2x background"></i>
                                <i class="fas fa-users-cog fa-stack-1x"></i>
                            </span>
                        </div>
                        <h4 class="box-title">Specifica i fornitori</h4>
                    </div>
                    <div class="box-body">
                        <div each="{ cf in object.get('fornitori') }" class="row form-group row-fornitore">
                            <div class="col-sm-4">
                                <select class="form-control select2 select-fornitore">
                                    <option></option>
                                    <option each="{ f in fornitori }" value="{ f.id }" selected="{ cf.fornitore == f.id }">{ f.get('ragioneSociale') }</option>
                                </select>
                            </div>
                            <div class="col-sm-3">
                                <input class="form-control" type="number" name="costoUnitario" value="{ cf.costoUnitario }" placeholder="Costo unitario" />
                                <input type="hidden" name="componente" value="{ object.id }" />
                            </div>
                            <div class="col-sm-2">
                                <div class="checkbox">
                                    <label>
                                        <input type="checkbox" name="primario" checked="{ cf.primario }"> Principale
                                    </label>
                                </div>
                            </div>
                            <div class="col-sm-3 text-right">
                                <div class="btn-group">
                                    <input type="button" title="Salva" value="&#xf0c7;" class="btn btn-flat btn-sm btn-success fa-input" data-id="{ cf.id }" onclick="{
                                                salvafornitore.bind(this, cf.id)
                                            }">
                                    <input type="button" title="Elimina" value="&#xf2ed;" class="btn btn-flat btn-sm btn-danger fa-input" onclick="{
                                                eliminafornitore.bind(this, cf.id)
                                            }">
                                </div>
                            </div>
                        </div>
                        <div id="nuovo-fornitore" class="row form-group row-fornitore row-new">
                            <div class="col-sm-4">
                                <select class="form-control select2 select-fornitore">
                                    <option></option>
                                    <option each="{ f in fornitori }" value="{ f.id }">{ f.get('ragioneSociale') }</option>
                                </select>
                            </div>
                            <div class="col-sm-3">
                                <input class="form-control" type="number" name="costoUnitario" placeholder="Costo unitario" />
                                <input type="hidden" name="componente" value="{ object.id }" />
                            </div>
                            <div class="col-sm-2">
                                <div class="checkbox">
                                    <label>
                                        <input type="checkbox" name="primario"> Principale
                                    </label>
                                </div>
                            </div>
                            <div class="col-sm-3 text-right">
                                <div class="btn-group">
                                    <input type="button" title="Salva" value="&#xf0c7;" class="btn btn-flat btn-sm btn-success fa-input" onclick="{
                                                salvafornitore.bind(this, null)
                                            }">
                                    <input type="button" title="Elimina" value="&#xf2ed;" class="btn btn-flat btn-sm btn-danger fa-input" disabled>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <div if="{ oToDelete }" class="modal modal-danger fade" id="modal" data-backdrop="static">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">Attenzione</h4>
                </div>
                <div class="modal-body">
                    <p if="{ opts.tipo == 'componente' }">Confermare la cancellazione del componente { oToDelete.get('descrizione') }?</p>
                    <p if="{ opts.tipo == 'lavorazione' }">Confermare la cancellazione della lavorazione { oToDelete.get('descrizione') }?</p>
                    <p if="{ opts.tipo == 'finito' }">Confermare la cancellazione del prodotto { oToDelete.get('descrizione') }?</p>
                    <small>L'azione &egrave; irreversibile.</small>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-flat btn-outline pull-left" data-dismiss="modal">Chiudi</button>
                    <button type="button" class="btn btn-flat btn-outline" data-dismiss="modal" onclick="{
                                cancella
                            }">Cancella</button>
                </div>
            </div>
        </div>
    </div>

    <div if="{ oToDelete }" class="modal modal-danger fade" id="modal-error" data-backdrop="static">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">Errore</h4>
                </div>
                <div class="modal-body">
                    <p if="{ opts.tipo == 'componente' }">Errore durante la cancellazione del componente { oToDelete.get('descrizione') }.</p>
                    <p if="{ opts.tipo == 'lavorazione' }">Errore durante la cancellazione della lavorazione { oToDelete.get('descrizione') }.</p>
                    <p if="{ opts.tipo == 'finito' }">Errore durante la cancellazione del prodotto { oToDelete.get('descrizione') }.</p>
                    <p>{ errore }</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-flat btn-outline pull-left" data-dismiss="modal">Chiudi</button>
                </div>
            </div>
        </div>
    </div>

    <div class="modal modal-danger fade" id="modal-codiceerror" data-backdrop="static">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">Attenzione</h4>
                </div>
                <div class="modal-body">
                    Codice del componente gi&agrave; presente in archivio.
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-flat btn-outline pull-left" data-dismiss="modal">Chiudi</button>
                </div>
            </div>
        </div>
    </div>

    <style>
    </style>

    <script>
        var tag = this;
        tag.errore = null;
        tag.oToDelete = null;
        tag.objects = [];
        tag.thead = [
            {
                sort: true,
                key: "codice",
                label: "Codice"
            },
            {
                sort: true,
                key: "descrizione",
                label: "Nome"
            }];
        if (opts.tipo === 'componente') {
            tag.thead.push({
                sort: true,
                key: "famiglia",
                label: "Famiglia"
            });
        }
        if (opts.tipo === 'finito') {
            tag.thead.push({
                sort: true,
                key: "codicebarre",
                label: "Codice a barre"
            });
            tag.thead.push({
                sort: true,
                key: "modello",
                label: "Modello"
            });
        }
        tag.thead.push({
            sort: false,
            key: "buttons",
            label: ""
        });
        tag.objects_table = [];
        tag.object = null;
        tag.table = null;
        tag.famiglie = [];
        tag.linee = [];
        tag.modelli = [];
        tag.fornitori = [];

        tag.on('mount', function () {
            RiotBus.getInstance().on('componente::saved', tag.saved);
            RiotBus.getInstance().on('componente::saved::error', tag.savedError);
            RiotBus.getInstance().on('componente::response::componente', tag.response);
            RiotBus.getInstance().on('componente::response::lavorazione', tag.response);
            RiotBus.getInstance().on('componente::response::finito', tag.response);
            RiotBus.getInstance().on('componente::deleted', tag.deleted);
            RiotBus.getInstance().on('componente::deleted::error', tag.deletedError);
            RiotBus.getInstance().on('componente::added', tag.ccAdded);
            RiotBus.getInstance().on('componente::removed', tag.ccRemoved);
            RiotBus.getInstance().on('famiglia::response', tag.famigliaResponse);
            RiotBus.getInstance().on('linea::response', tag.lineaResponse);
            RiotBus.getInstance().on('linea::componente::added', tag.lineaAdded);
            RiotBus.getInstance().on('linea::componente::removed', tag.lineaRemoved);
            RiotBus.getInstance().on('fornitore::response', tag.fornitoreResponse);
            RiotBus.getInstance().on('fornitore::componente::added', tag.fornitoreAdded);
            RiotBus.getInstance().on('fornitore::componente::saved', tag.fornitoreSaved);
            RiotBus.getInstance().on('fornitore::componente::removed', tag.fornitoreRemoved);
            RiotBus.getInstance().trigger('componente::request', opts.tipo);
            RiotBus.getInstance().trigger('famiglia::request');
            RiotBus.getInstance().trigger('linea::request');
            RiotBus.getInstance().trigger('fornitore::request');


            /*
             $('body').on('click', '#tbl_componente [data-action="modifica"]', function () {
             tag.nuovo();
             const id = $(this).data("id");
             for (let i = 0; i < tag.objects.length; i++) {
             if (tag.objects[i].id === id) {
             tag.object = tag.objects[i];
             tag.update();
             initLinea();
             initComponenti();
             initFornitori();
             break;
             }
             }
             });
             */
            $('body').on('click', '#tbl_componente [data-action="eliminaModal"]', function () {
                const id = $(this).data("id");
                tag.oToDelete = null;
                for (let i = 0; i < tag.objects.length; i++) {
                    if (tag.objects[i].id === id) {
                        tag.oToDelete = tag.objects[i];
                        break;
                    }
                }
                tag.update();
                $("#modal").modal("show");
            });
        });

        function initLinea() {
            var $linea = $('#linea');
            if (!($linea.hasClass("select2-hidden-accessible"))) {
                $linea.select2({
                    placeholder: "Seleziona le linee..."
                });
                $linea.on('select2:selecting', function (e) {
                    e.preventDefault();
                    var id = e.params.args.data.id;
                    RiotBus.getInstance().trigger('linea::componente::add', tag.object.id, id);
                    $("#linea").select2("close");
                });
                $linea.on('select2:unselecting', function (e) {
                    e.preventDefault();
                    var id = e.params.args.data.id;
                    RiotBus.getInstance().trigger('linea::componente::remove', tag.object.id, id);
                });
            }
            tag.modelli = [];
            if (tag.object.get("linea")) {
                for (var i = 0; i < tag.object.get("linea").length; i++) {
                    for (var j = 0; j < tag.linee.length; j++) {
                        var l = tag.object.get("linea")[i];
                        if (l.id === tag.linee[j].id) {
                            tag.modelli = tag.modelli.concat(tag.linee[j].get("modelli"));
                        }
                    }
                }
            }
            tag.update();
        }

        function initComponenti() {
            var $componenti = $('.select-componente');
            $componenti.each(function () {
                var $c = $(this);
                var tipo = $c.data("tipo");
                if (!$c.hasClass("select2-hidden-accessible")) {
                    $c.select2({
                        placeholder: "Seleziona " + tipo + "..."
                    });
                }
            });
            $componenti.trigger("change");
            tag.selectoptions(tag.object, "linea");
        }

        function initFornitori() {
            var $fornitori = $('.select-fornitore');
            $fornitori.each(function () {
                var $f = $(this);
                if (!$f.hasClass("select2-hidden-accessible")) {
                    $f.select2({
                        placeholder: "Seleziona fornitore"
                    });
                }
            });
            $fornitori.trigger("change");
            tag.selectoptions(tag.object, "fornitore");
        }

        tag.on('unmount', function () {
            //$('body').off('click', '#tbl_componente [data-action="modifica"]');
            //$('body').off('click', '#tbl_componente [data-action="eliminaModal"]');
            RiotBus.getInstance().off('componente::saved', tag.saved);
            RiotBus.getInstance().off('componente::saved::error', tag.savedError);
            RiotBus.getInstance().off('componente::response::componente', tag.response);
            RiotBus.getInstance().off('componente::response::lavorazione', tag.response);
            RiotBus.getInstance().off('componente::response::finito', tag.response);
            RiotBus.getInstance().off('componente::deleted', tag.deleted);
            RiotBus.getInstance().off('componente::deleted::error', tag.deletedError);
            RiotBus.getInstance().off('componente::added', tag.ccAdded);
            RiotBus.getInstance().off('componente::removed', tag.ccRemoved);
            RiotBus.getInstance().off('fornitore::response', tag.fornitoreResponse);
            RiotBus.getInstance().off('famiglia::response', tag.famigliaResponse);
            RiotBus.getInstance().off('linea::response', tag.lineaResponse);
            RiotBus.getInstance().off('linea::componente::added', tag.lineaAdded);
            RiotBus.getInstance().off('linea::componente::removed', tag.lineaRemoved);
            RiotBus.getInstance().off('fornitore::response', tag.fornitoreResponse);
            RiotBus.getInstance().off('fornitore::componente::added', tag.fornitoreAdded);
            RiotBus.getInstance().off('fornitore::componente::saved', tag.fornitoreSaved);
            RiotBus.getInstance().off('fornitore::componente::removed', tag.fornitoreRemoved);
        });

        tag.toTableObjects = function () {
            tag.objects_table = [];
            for (let i = 0; i < tag.objects.length; i++) {
                let o = tag.objects[i];
                if (o.get("tipo") === opts.tipo) {
                    tag.objects_table.push({
                        id: o.id,
                        codice: {
                            value: o.get('codice') ? o.get('codice') : ''
                        },
                        descrizione: {
                            value: o.get('descrizione') ? o.get('descrizione') : ''
                        },
                        famiglia: {
                            value: o.get('famiglia') ? o.get('famiglia').get("descrizione") : ''
                        },
                        codicebarre: {
                            value: o.get('codicebarre') ? o.get('codicebarre') : ''
                        },
                        modello: {
                            value: o.get('modello') ? o.get('modello') : ''
                        }
                    });
                }
            }
        };

        tag.modifica = function (id) {
            for (let i = 0; i < tag.objects.length; i++) {
                if (tag.objects[i].id === id) {
                    tag.object = tag.objects[i];
                    tag.update();
                    initLinea();
                    initComponenti();
                    initFornitori();
                    break;
                }
            }
        };

        tag.response = function (results) {
            tag.objects = results;
            tag.toTableObjects();
            tag.update();
            const $table = $('#tbl_componente');
            $(".loading").fadeOut('normal', function () {
                $table.fadeIn();
                if (tag.object) {
                    $("#" + tag.object.id + " [data-action='modifica']").click();
                }
            });
        };

        tag.nuovo = function () {
            tag.object = null;
            tag.update();
            $('#form_componente [name]').each(function () {
                this.value = '';
                this.checked = false;
            });
            $(".select2").val(null).trigger("change");
        };

        tag.salvacomponente = function (id, e) {
            var $row = $(e.target).closest(".row-componente");
            var componente = $row.find(".select-componente").val();
            var qta = $row.find("[name='quantita']").val();
            var tipo = $row.find("[name='tipo']").val();
            if (qta) {
                qta = parseInt(qta);
            } else {
                qta = 0;
            }
            var data = {
                id: id,
                quantita: qta,
                tipo: tipo,
                figlio: componente,
                padre: tag.object.id
            };
            RiotBus.getInstance().trigger('componente::add', data);
        };

        tag.eliminacomponente = function (id) {
            RiotBus.getInstance().trigger('componente::remove', id);
        };

        tag.salvafornitore = function (id, e) {
            $.blockUI();
            const $row = $(e.target).closest(".row-fornitore");
            const fornitore = $row.find(".select-fornitore").val();
            const componente = $row.find("[name='componente']").val();
            const primario = $row.find("[name='primario']").is(":checked");
            let costo = $row.find("[name='costoUnitario']").val();
            if (costo) {
                costo = parseFloat(costo);
            } else {
                costo = 0;
            }
            const data = {
                id: id,
                fornitore: fornitore,
                componente: componente,
                costo: costo,
                primario: primario
            };
            RiotBus.getInstance().trigger('fornitore::componente::add', data);
        };

        tag.eliminafornitore = function (id) {
            $.blockUI();
            RiotBus.getInstance().trigger('fornitore::componente::remove', id);
        };

        tag.saveComponente = function (e) {
            $.blockUI();
            e.preventDefault();
            $("#salva").button('saving');
            const data = {};
            data.id = $("#form_componente [name='id']").val();
            data.codice = $("#form_componente [name='codice']").val();
            data.descrizione = $("#form_componente [name='descrizione']").val();
            if ($("#famiglia").length > 0 && $("#famiglia").val()) {
                data.famiglia = $("#famiglia").val();
            } else {
                data.famiglia = null;
            }
            if ($("#modello").length > 0 && $("#modello").val()) {
                data.modello = $("#modello").val();
            } else {
                data.modello = null;
            }
            data.tipo = opts.tipo;
            if ("finito" === opts.tipo || "componente" === opts.tipo) {
                data.soglia = $("#form_componente [name='soglia']").val();
            }
            if ("finito" === opts.tipo) {
                data.baseseriale = $("#form_componente [name='baseseriale']").val();
                data.codicebarre = $("#form_componente [name='codicebarre']").val();
                data.nomeetichetta = $("#form_componente [name='nomeetichetta']").val();
                data.altezzaetichetta = $("#form_componente [name='altezzaetichetta']").val();
            }
            RiotBus.getInstance().trigger('componente::save', data);
        };

        tag.saved = function (o) {
            tag.object = o;
            let found = false;
            let index = 0;
            for (index = 0; index < tag.objects.length; index++) {
                if (tag.objects[index].id === o.id) {
                    tag.objects.splice(index, 1);
                    found = true;
                    break;
                }
            }
            if (found) {
                tag.objects[index] = o;
            } else {
                tag.objects.push(o);
            }
            tag.toTableObjects();
            $.unblockUI();
            $("#salva").button('reset');
            tag.update();
            initLinea();
            initComponenti();
            initFornitori();
        };

        tag.savedError = function () {
            $.unblockUI();
            $("#modal-codiceerror").modal("show");
            $("#salva").button('reset');
        };

        tag.deleted = function (o) {
            for (let index = 0; index < tag.objects.length; index++) {
                if (tag.objects[index].id === o.id) {
                    tag.objects.splice(index, 1);
                    break;
                }
            }
            tag.toTableObjects();
            tag.nuovo();
        };

        tag.ccAdded = function (cc) {
            switch (opts.tipo) {
                case "finito":
                    $("#nuovo-componente").find(".select-componente").val(null).trigger("change");
                    $("#nuovo-componente").find("[name='quantita']").val(null);
                    var componenti = tag.object.get("componenti") ? tag.object.get("componenti") : [];
                    var found = false;
                    for (var i = 0; i < componenti.length; i++) {
                        var c = componenti[i];
                        if (c.id === cc.id) {
                            c.figlio = cc.get("figlio").id;
                            c.quantita = cc.get("quantita");
                            c.tipo = cc.get("tipo");
                            found = true;
                        }
                    }
                    if (!found) {
                        componenti.push({
                            id: cc.id,
                            figlio: cc.get("figlio").id,
                            quantita: cc.get("quantita"),
                            tipo: cc.get("tipo")
                        });
                    }
                    tag.object.set("componenti", componenti);
                    tag.update();
                    var $c = $('.row-componente[data-id="' + cc.id + '"] .select-componente');
                    if (!$c.hasClass("select2-hidden-accessible")) {
                        $c.select2({
                            placeholder: "Seleziona componente o gruppo..."
                        });
                    }
                    break;
                case "componente":
                    var componenti = tag.object.get("componenti") ? tag.object.get("componenti") : [];
                    var found = false;
                    for (var i = 0; i < componenti.length; i++) {
                        var c = componenti[i];
                        if (c.id === cc.id) {
                            c.figlio = cc.get("figlio").id;
                            c.quantita = cc.get("quantita");
                            c.tipo = cc.get("tipo");
                            found = true;
                        }
                    }
                    if (!found) {
                        componenti.push({
                            id: cc.id,
                            figlio: cc.get("figlio").id,
                            quantita: cc.get("quantita"),
                            tipo: cc.get("tipo")
                        });
                    }
                    tag.object.set("componenti", componenti);
                    tag.update();
                    break;
            }
        };

        tag.ccRemoved = function (cc) {
            var componenti = tag.object.get("componenti") ? tag.object.get("componenti") : [];
            var index = -1;
            for (var i = 0; i < componenti.length; i++) {
                if (componenti[i].id === cc.id) {
                    index = i;
                    break;
                }
            }
            if (index > -1) {
                componenti.splice(index, 1);
            }
            tag.object.set("componenti", componenti);
            tag.update();
            $(".select2").trigger("change");
        };

        tag.famigliaResponse = function (results) {
            tag.famiglie = results;
            tag.update();
            var $famiglia = $('#famiglia');
            var placeholder = null;
            switch (opts.tipo) {
                case "componente":
                    placeholder = "Seleziona il reparto...";
                    break;
                case "gruppo":
                    placeholder = "Seleziona il gruppo...";
                    break;
            }
            $famiglia.select2({
                placeholder: placeholder
            });
        };

        tag.lineaResponse = function (results) {
            tag.linee = results;
            tag.update();
        };

        tag.fornitoreResponse = function (results) {
            tag.fornitori = results;
            tag.update();
        };

        tag.lineaAdded = function (cl) {
            for (var i = 0; i < tag.linee.length; i++) {
                if (tag.linee[i].id === cl.get("linea").id) {
                    tag.object.addUnique("linea", tag.linee[i]);
                    break;
                }
            }
            tag.update();
            tag.selectoptions(tag.object, "linea");
        };

        tag.lineaRemoved = function (cl) {
            $("#linea").select2("close");
            var linee = tag.object.get("linea");
            var index = -1;
            for (var i = 0; i < linee.length; i++) {
                if (linee[i].id === cl.get("linea").id) {
                    index = i;
                }
            }
            if (index > -1) {
                linee.splice(index, 1);
            }
            tag.object.set("linea", linee);
            tag.update();
            tag.selectoptions(tag.object, "linea");
        };

        tag.fornitoreSaved = function (cf) {
            let fornitori = tag.object.get("fornitori");
            for (let i = 0; i < fornitori.length; i++) {
                if (fornitori[i].id === cf.id) {
                    const f = fornitori[i];
                    f.fornitore = cf.get("fornitore").id;
                    f.costoUnitario = cf.get("costoUnitario");
                    tag.object.set("fornitori", fornitori);
                    break;
                }
            }
            $.unblockUI();
        };

        tag.fornitoreAdded = function (cf) {
            const fornitori = tag.object.get("fornitori") ? tag.object.get("fornitori") : [];
            for (let i = 0; i < tag.fornitori.length; i++) {
                if (tag.fornitori[i].id === cf.get("fornitore").id) {
                    const data = {
                        id: cf.id,
                        componente: tag.object.id,
                        fornitore: cf.get("fornitore").id,
                        costoUnitario: cf.get("costoUnitario")
                    };
                    fornitori.push(data);
                    break;
                }
            }
            tag.object.set("fornitori", fornitori);
            tag.update();
            initFornitori();
            $("#nuovo-fornitore select").val("").trigger("change");
            $("#nuovo-fornitore [name='costoUnitario']").val("");
            $.unblockUI();
        };

        tag.fornitoreRemoved = function (cf) {
            let fornitori = tag.object.get("fornitori");
            var index = -1;
            for (var i = 0; i < fornitori.length; i++) {
                if (fornitori[i].id === cf.id) {
                    index = i;
                    break;
                }
            }
            if (index > -1) {
                fornitori.splice(index, 1);
            }
            tag.object.set("fornitori", fornitori);
            tag.update();
            $.unblockUI();
        };

        tag.getComponente = function (tipo) {
            var id = null;
            var componenti = tag.object.get("componenti") ? tag.object.get("componenti") : [];
            for (var i = 0; i < componenti.length; i++) {
                var c = componenti[i];
                if (c.tipo === tipo) {
                    id = c.id;
                    break;
                }
            }
            return id;
        };

        tag.hasComponente = function (tipo) {
            var found = false;
            var componenti = tag.object.get("componenti") ? tag.object.get("componenti") : [];
            for (var i = 0; i < componenti.length; i++) {
                var c = componenti[i];
                if (c.tipo === tipo) {
                    found = true;
                    break;
                }
            }
            return found;
        };

        tag.componenteSelected = function (id, tipo) {
            let selected = false;
            const componenti = tag.object.get("componenti") ? tag.object.get("componenti") : [];
            for (let i = 0; i < componenti.length; i++) {
                let c = componenti[i];
                if (c.tipo === tipo && c.figlio === id) {
                    selected = true;
                    break;
                }
            }
            return selected;
        };

        tag.exportcsv = function () {
            const rows = [];
            for (let i = 0; i < tag.objects.length; i++) {
                if (opts.tipo === tag.objects[i].get("tipo")) {
                    var componente = tag.objects[i];
                    switch (opts.tipo) {
                        case "componente":
                            rows.push(['"' + componente.id + '"', '"' + componente.get("codice") + '"', '"' + componente.get("descrizione") + '"', '"' + (componente.get("famiglia") ? componente.get("famiglia").get("descrizione") : "") + '"', '"' + (componente.get("soglia") ? componente.get("soglia") : "") + '"']);
                            break;
                        case "finito":
                            rows.push(['"' + componente.id + '"', '"' + componente.get("codice") + '"', '"' + componente.get("descrizione") + '"', '"' + (componente.get("modello") ? componente.get("modello") : "") + '"', '"' + (componente.get("soglia") ? componente.get("soglia") : "") + '"']);
                            break;
                    }
                }
            }
            const csvContent = "data:text/csv;charset=utf-8," + rows.map(e => e.join(",")).join("\n");
            const encodedUri = encodeURI(csvContent);
            const link = document.createElement("a");
            link.setAttribute("href", encodedUri);
            link.setAttribute("download", opts.tipo + ".csv");
            document.body.appendChild(link);
            link.click();
        };

    </script>
</visualizza-componente>
