@extends('Template.adminlte')

@section('main-title')
    {{ 'Visación de Solicitudes' }}
@endsection

@section('main-navigation')
    <li class="">Jefe Macro Zona</li>
    <li class="active">Visación</li>
@endsection

@push('styles')
    <style>

        .chart-container {
            height: 600px;
        }

        @media screen and (min-width: 1200px) {
            .chart-container {
              height: 800px;
            }
        }

        .mt-5 {
            margin-top: 2rem;
        }

        .div-error{
            display: flex;
            justify-content: center;
        }

        .text-error{
            color: red !important;
            font-weight: bold;
        }       
    </style>
@endpush()

@section('main-content')
    <div class="box" id="app">
        <div class="box-body">
            <div class="x_title">
                <div class="col-md-12 col-sm-12">
                    <div class="text-right">
                        <button class="btn btn-primary btn_activo" @click="refrescarDatos();">
                            <i class="fas fa-sync"></i> Actualizar
                        </button>

                        <button class="btn btn-primary btn_activo" id="btn_filtrar_datos">
                            <i class="fas fa-search"></i> Filtrar Datos
                        </button>
                    </div>
                </div>
            </div>

            <div class="x_content">
                <div class="col-md-12 col-sm-12 mt-3">
                    <!-- Filtro -->
                    <div class="col-md-12 col-sm-12">
                        <div class="collapse" id="filtrar_datos">
                            <div class="card">
                                <div class="card-header bg--primary">
                                    <div class="col-md-12 col-sm-12 text-center">
                                        <h5>Filtro de busqueda</h5>
                                    </div>
                                </div>
                                <div class="card-body">

                                    <div class="row ml-2 mr-2">
                                        <div class="col-md-12 col-sm-12"> </div>
                                        <!-- Tipo -->
                                        <div class="col-md-4 col-sm-6">
                                            <div class="form-group">
                                                <label class="form-control-label" for="text-input">
                                                    Tipo Solicitud :
                                                </label>
                                                <multiselect
                                                    :show-labels="false" 
                                                    :searchable="true" 
                                                    v-model="fl_tipo" 
                                                    :options="arr_tipos" 
                                                    :multiple="false" 
                                                    :showNoOptions="false" 
                                                    placeholder="Tipo Solicitud" 
                                                    label="label" track-by="label">
                                                        <span slot="noResult">No se han encontrado resultados</span>
                                                </multiselect>
                                            </div>
                                        </div>

                                        <!-- Prioridad -->
                                        <div class="col-md-4 col-sm-6">
                                            <div class="form-group">
                                                <label class="form-control-label" for="text-input">
                                                    Prioridad :
                                                </label>
                                                <multiselect 
                                                    :show-labels="false"
                                                    :searchable="true"
                                                    v-model="fl_prioridad"
                                                    :options="arr_prioridad"
                                                    :multiple="false"
                                                    :showNoOptions=false
                                                    placeholder="Prioridad"
                                                    label="label" track-by="label">
                                                        <span slot="noResult">No se han encontrado resultados</span>
                                                </multiselect>
                                            </div>
                                        </div>

                                        <!-- N° Ticket -->
                                        <div class="col-md-4 col-sm-6">
                                            <div class="form-group">
                                                <label class="form-control-label" for="text-input">
                                                    N° Ticket :
                                                </label>
                                                <multiselect 
                                                    :show-labels="false"
                                                    :searchable="true"
                                                    v-model="fl_ticket"
                                                    :options="arr_ticket"
                                                    :multiple="false"
                                                    :showNoOptions=false
                                                    placeholder="N° Ticket"
                                                    label="label" track-by="label">
                                                        <span slot="noResult">No se han encontrado resultados</span>
                                                </multiselect>
                                            </div>
                                        </div>

                                        <!-- Unidad Vecinal -->
                                        <div class="col-md-4 col-sm-6">
                                            <div class="form-group">
                                                <label class="form-control-label" for="text-input">
                                                    Unidad Vecinal :
                                                </label>
                                                <multiselect 
                                                    :show-labels="false"
                                                    :searchable="true"
                                                    v-model="fl_unidadvecinal"
                                                    :options="arr_unidadvecinal"
                                                    :multiple="false"
                                                    :showNoOptions=false
                                                    placeholder="Unidad Vecinal"
                                                    label="label" track-by="label">
                                                        <span slot="noResult">No se han encontrado resultados</span>
                                                </multiselect>
                                            </div>
                                        </div>

                                        <!-- Dirección Municipal -->
                                        <div class="col-md-4 col-sm-6">
                                            <div class="form-group">
                                                <label class="form-control-label" for="text-input">
                                                    Dirección Municipal :
                                                </label>
                                                <multiselect 
                                                    :show-labels="false"
                                                    :searchable="true"
                                                    v-model="fl_direccion"
                                                    :options="arr_dir_municipal"
                                                    :multiple="false"
                                                    :showNoOptions=false
                                                    placeholder="Dirección Municipal"
                                                    label="label" track-by="label">
                                                        <span slot="noResult">No se han encontrado resultados</span>
                                                </multiselect>
                                            </div>
                                        </div>

                                        <!-- Persona -->
                                        <div class="col-md-4 col-sm-6">
                                            <div class="form-group">
                                                <label class="form-control-label" for="text-input">
                                                    Persona :
                                                </label>
                                                <multiselect
                                                    :show-labels="false"
                                                    :searchable="true"
                                                    v-model="fl_persona"
                                                    :options="arr_persona"
                                                    :multiple="false"
                                                    :showNoOptions=false
                                                    placeholder="Persona"
                                                    label="label" track-by="label">
                                                        <span slot="noResult">No se han encontrado resultados</span>
                                                </multiselect>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="card-footer">
                                    <div style="float: right;">
                                        <button @click="limpiarFiltros()" type="button" class="btn btn-warning btn-sm btn_activo" style="color: white;">
                                            <i class="fas fa-undo"></i> Quitar Filtros
                                        </button>&nbsp;
                                        <button @click="filtrarDatos()" type="button" class="btn btn-primary btn-sm btn_activo"><i class="fas fa-search"></i>
                                            Filtrar Búsqueda
                                        </button>

                                        <button class="btn btn-secondary btn-sm btn_activo" id="close_filtrar_datos">
                                            Cerrar Filtro
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-md-4 mt-2 mb-4">
                        <div class="fom-group">
                            <label >Estados :</label>
                            <select @change="cargarDatos()"  v-model="fl_mostrar" class="form-control tp_editar">
                                <option v-for="item in arr_mostrar" :value="item.value" v-text="item.label"></option>
                            </select>
                        </div>
                    </div>

                    <!-- Tabla -->
                    <div class="ml-1 mr-1 mt-5 table-responsive">
                        <table class="table table-bordered table-striped table-sm">
                            <thead>
                                <th colspan="12" class="bg--primary">
                                    <h6 class="text-center">
                                        Listado de Solicitudes
                                    </h6>
                                </th>
                            </thead>
                            <thead>
                                <th style="min-width:50px; text-align:center;"> # </th>
                                <th style="min-width:100px; text-align:center;">Opciones</th>
                                <th style="min-width:100px; text-align:center;">Ticket</th>
                                <th style="min-width:200px; text-align:center;">Fecha Ingreso</th>
                                <th style="min-width:200px; text-align:center;">Tipo Solicitud</th>
                                <th style="min-width:200px; text-align:center;">Dirección</th>
                                <th style="min-width:200px; text-align:center;">Prioridad</th>
                                <th style="min-width:200px; text-align:center;">Solicitante</th>
                                <th style="min-width:200px; text-align:center;">Ubicacion</th>                               
                                <th style="min-width:200px; text-align:center;">Tiempo Tramitado</th>
                                <th style="min-width:200px; text-align:center;">Estado Solicitud</th>
                            </thead>
                            <tbody>
                                <template v-if="arr_index.length">
                                    <tr v-for="(datos, index) in arr_index" :key="datos.id">
                                        <td style="text-align:center;">
                                            @{{ (index + 1) }}
                                        </td>
                                        <td style="text-align:center;">
                                                                                    
                                            <button v-if="datos.id_estado == 2" @click="abrirModal('solicitud', 'informacion', datos)" 
                                                class="btn  bg-primary btn-sm btn_activo">
                                                <i class="fa fa-search" aria-hidden="true"></i>
                                            </button>

                                            <button v-if="datos.id_estado == 3 || datos.id_estado == 1 " @click="abrirModal('solicitud', 'informacion', datos)" 
                                                class="btn  bg-warning btn-sm btn_activo">
                                                <i class="fa fa-pencil" aria-hidden="true"></i>
                                            </button>

                                            <button v-if="datos.id_estado == 4" @click="abrirModal('solicitud', 'informacion', datos)" 
                                                class="btn  bg-danger btn-sm btn_activo">
                                                <i style="color:white" class="fa fa-times" aria-hidden="true"></i>
                                            </button>

                                            <button v-if="datos.id_estado == 8 || datos.id_estado == 9 || datos.id_estado == 10 || 
                                                datos.id_estado == 11 || datos.id_estado == 12" @click="abrirModal('solicitud', 'informacion', datos)" 
                                                class="btn  bg-success btn-sm btn_activo">
                                                <i style="color:white" class="fa fa-check" aria-hidden="true"></i>
                                            </button>
                                        </td>
                                        <td style="text-align:center;">
                                            @{{ datos.nr_ticket }}
                                        </td>
                                        <td style="text-align:center;">
                                            @{{ datos.fc_ingreso | formatDate }}
                                        </td>
                                        <td style="text-align:center;">
                                            @{{ datos.tipo.nm_tipo }}
                                        </td>
                                        <td style="text-align:center;">
                                            @{{ datos.nm_ubicacion }}
                                        </td>
                                        <td style="text-align:center; color: black;" :style="{'background-color':datos.prioridad.color_prioridad}">
                                            @{{ datos.prioridad.nm_prioridad }}
                                        </td>
                                        <td style="text-align:center;">
                                            @{{ datos.vecino.nm_vecino + ' ' + datos.vecino.ap_paterno }}
                                        </td>
                                        <td style="text-align:center;">
                                            @{{ datos.nm_ubicacion }}
                                        </td>                                      
                                        <td style="text-align:center;">
                                            @{{ datos.tiempo_tramitado }}
                                        </td>
                                        <td style="text-align:center;">
                                            @{{ datos.nm_estado }}
                                        </td>
                                    </tr>
                                </template>
                                <template v-else>
                                    <tr>
                                        <td colspan="12">
                                            <h5 class="text-center">
                                                No hay datos para listar
                                            </h5>
                                        </td>
                                    </tr>
                                </template>
                            </tbody>
                        </table>
                    </div>

                    <!-- Paginacion -->
                    <div class="col-md-12 col-sm-12 mt-2">
                        <nav>
                            <ul class="pagination">
                                <li class="page-item" v-if="pagination.current_page > 1">
                                    <a class="page-link" href="#" @click.prevent="cambiarPagina(pagination.current_page - 1)">Ant</a>
                                </li>
                                <li class="page-item" v-for="page in pagesNumber" :key="page" :class="[page == isActivedPagination ? 'active' : '']">
                                    <a class="page-link" href="#" @click.prevent="cambiarPagina(page, 1)" v-text="page"></a>
                                </li>
                                <li class="page-item" v-if="pagination.current_page < pagination.last_page">
                                    <a class="page-link" href="#" @click.prevent="cambiarPagina(pagination.current_page + 1)">Sig</a>
                                </li>
                            </ul>
                        </nav>
                    </div>
                </div>
            </div>
        </div>

        <!-- - - - - - - - - - - - - - - - - - - - -  Inicio de Modal - - - - - - - - - - - - - - - - - - - - -->
            <!-- Modal Principal -->
            <div id="modal_principal" class="modal scroll_modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
                <!-- Inicio - Informacion Solicitud -->
                <div class="modal-dialog modal-xl" role="document">
                    <div class="modal-content">
                        <div class="modal-header bg--primary">
                            <h5 class="modal-title">
                                <strong class="text-center" style="color:white">@{{ titulo_principal }}</strong>
                            </h5>
                            <button type="button"  @click="cerrarModal('informacion');" class="close btn_activo" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>

                        <div class="modal-body lg_modal_body">
                            <ul class="nav nav-tabs nav-fill" id="nav-tab" role="tablist">
                                <li class="nav-item active">
                                    <a   class="nav-link active" id="info_solicitud-tab" data-toggle="tab" href="#info_solicitud" role="tab" aria-controls="info_solicitud" aria-selected="false">
                                        <i class="far fa-list-alt"></i> Información Solicitud
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" id="hito_solicitud-tab" data-toggle="tab" href="#hito_solicitud" role="tab" 
                                        aria-controls="hito_solicitud" aria-selected="false" v-if="tp_municipal == 1">
                                        <i class="fa fa-clock-o" aria-hidden="true"></i>
                                        Historial Solicitud
                                    </a>
                                </li>
                                <div class="text-right mb-1">
                                    <button class="btn btn--primary btn_activo" @click="cargarHistorial(id_consulta)">
                                        <i class="fas fa-sync"></i> Actualizar
                                    </button>
                                </div>
                            </ul>

                            <div class="tab-content">
                                <div class="tab-pane active" id="info_solicitud" role="tabpanel">
                                    <div class="row-flow">
                                        <!-- Datos usuarios -->
                                        <div class="card mt-4">
                                            <div class="card-header bg--primary" style="color:white">
                                                <h4 class="text-center">Datos Vecino</h4>
                                            </div>
                                            <div class="card-body">
                                                <div class="row">
                                                    <!-- Rut Vecino -->
                                                    <div class="col-md-3 col-sm-6">
                                                        <div class="form-group">
                                                            <label>Rut Vecino</label>
                                                            <input disabled="true" @change="getVecino()" type="text" class="form-control tp_bloquear" v-model="rut_vecino" >
                                                            <small v-if="validationErrors.rut_vecino" v-text="validationErrors.rut_vecino[0]"></small>
                                                        </div>
                                                    </div>
                                                    <!-- Nombre -->
                                                    <div class="col-md-3 col-sm-6">
                                                        <div class="form-group">
                                                            <label>Nombre</label>
                                                            <input type="text" maxlength="50" class="form-control tp_bloquear" v-model="nm_vecino" >
                                                            <small v-if="validationErrors.nm_vecino" v-text="validationErrors.nm_vecino[0]"></small>
                                                        </div>
                                                    </div>
                                                    <!-- Ap Paterno -->
                                                    <div class="col-md-3 col-sm-6">
                                                        <div class="form-group">
                                                            <label>Apellido Paterno</label>
                                                            <input type="text" maxlength="50" class="form-control tp_bloquear" v-model="ap_paterno" >
                                                            <small v-if="validationErrors.ap_paterno" v-text="validationErrors.ap_paterno[0]"></small>
                                                        </div>
                                                    </div>
                                                    <!-- Ap Materno -->
                                                    <div class="col-md-3 col-sm-6">
                                                        <div class="form-group">
                                                            <label>Apellido Materno</label>
                                                            <input type="text" maxlength="50" class="form-control tp_bloquear" v-model="ap_materno" >
                                                            <small v-if="validationErrors.ap_materno" v-text="validationErrors.ap_materno[0]"></small>
                                                        </div>
                                                    </div>
                                                    <!-- Telefono -->                                                    
                                                    <div class="col-md-3" >
                                                        <div class="form-group">
                                                            <label>Telefono</label>
                                                            <div class=" input-group mb-3">
                                                              <div class="input-group-prepend">
                                                                
                                                                <div class="input-group-text">
                                                                 <select v-model="pre_fijo" class="tp_bloquear">
                                                                     <option value="+569">+569</option>
                                                                     <option value="+562">+562</option>
                                                                 </select>
                                                                </div>
                                                              </div>
                                                              <input v-model="nr_telefono" type="text" maxlength="8" type="text" class="form-control tp_bloquear">
                                                               <small v-if="validationErrors.nr_telefono" v-text="validationErrors.nr_telefono[0]"></small>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <!-- Mail -->
                                                    <div class="col-md-3 col-sm-6">
                                                        <div class="form-group">
                                                            <label>Mail</label>
                                                            <input type="text" maxlength="50" class="form-control tp_bloquear" v-model="mail_vecino">
                                                            <small v-if="validationErrors.nm_mail" v-text="validationErrors.nm_mail[0]"></small>
                                                        </div>
                                                    </div>
                                                    <!-- Direccion Vecino -->
                                                    <div class="col-md-4 ">
                                                        <div class="form-group">
                                                            <label>Dirección del Vecino</label>
                                                            <multiselect 
                                                                :disabled="true"
                                                                :show-labels="false"
                                                                :searchable="true"
                                                                v-model="arr_ubicacion_vecino"
                                                                :options="arr_calles_vecino"
                                                                :multiple="false"
                                                                :showNoOptions =false
                                                                placeholder="Ingresar Ubicacion"
                                                                @search-change="indexDireccionesVecino"
                                                                label="label" track-by="label">
                                                                    <span slot="noResult">No se han encontrado resultados</span>
                                                            </multiselect>
                                                            <small v-if="validationErrors.nm_direccion_vecino" v-text="validationErrors.nm_direccion_vecino[0]"></small>
                                                        </div>
                                                    </div>
                                                    <!-- Clasificacion de ubicacion vecino -->
                                                    <div class="col-md-2 col-sm-6">
                                                        <div class="form-group">
                                                            <label>Casa/Depto/Oficina</label>
                                                            <select disabled="true" v-model="tp_direccion" class="form-control tp_bloquear">
                                                                <option value="1">Casa</option>
                                                                <option value="2">Depto</option>
                                                                <option value="3">Oficina</option>
                                                            </select>
                                                            <small v-if="validationErrors.nm_mail" v-text="validationErrors.nm_mail[0]"></small>
                                                        </div>
                                                    </div>
                                                    <!-- Aclaratoria -->
                                                    <div class="col-md-4 col-sm-6">
                                                        <div class="form-group">
                                                            <label>Aclaratoria</label>
                                                            <input type="text" maxlength="50" class="form-control tp_bloquear" v-model="str_aclaratoria">
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        <!-- Datos Solicitud -->
                                        <div class="card mt-4">
                                            <div class="card-header bg--primary" style="color:white">
                                                <h4 class="text-center">Datos Solicitud  </h4>
                                            </div>
                                            <div class="card-body">
                                                <div class="row">
                                                    <!-- Contexto Municipal -->
                                                    <div class="col-md-2 col-sm-6">
                                                        <div class="form-group">
                                                            <label>Contexto Municipal :</label>
                                                            <select @change="changeContexto()" class="form-control tp_editar" v-model="tp_municipal">
                                                                <option value="1">SI</option>
                                                                <option value="0">NO</option>
                                                            </select>
                                                            <small v-if="validationErrors.tp_municipal" v-text="validationErrors.tp_municipal[0]"></small>
                                                        </div>
                                                    </div>
                                                    <!-- Tipo Solicitud -->
                                                    <div class="col-md-4 col-sm-6">
                                                        <div class="form-group">
                                                            <label>Tipo Solicitud</label>
                                                            <multiselect 
                                                                :show-labels="false"
                                                                :searchable="true"
                                                                v-model="nr_tipo"
                                                                :options="arr_tipos"
                                                                :multiple="false"
                                                                :showNoOptions ="false" 
                                                                @select="asyncSugerencia" 
                                                                placeholder="Seleccionar Tipo de Solicitud"
                                                                label="label"                                                                 
                                                                track-by="label">
                                                                <span slot="noResult">No se han encontrado resultados</span>
                                                            </multiselect>
                                                            <small v-if="validationErrors.nr_tipo" v-text="validationErrors.nr_tipo[0]"></small>
                                                        </div>
                                                    </div>
                                                    <!-- tipo aclaracion direccion -->
                                                    <div class="col-md-2 col-sm-6">
                                                        <div class="form-group">
                                                            <label >Frente/Altura</label>
                                                            <select disabled="true" class="form-control" v-model="nr_tp_direccion_solicitud">
                                                               <option value="1">Frente</option>
                                                               <option value="3">Altura</option>
                                                            </select>
                                                            <small v-if="validationErrors.nr_tp_direccion_solicitud" v-text="validationErrors.nr_tp_direccion_solicitud[0]"></small>
                                                        </div>
                                                    </div>
                                                    <!-- Ubicacion problema -->
                                                    <div class="col-md-4" v-if="nr_tp_direccion_solicitud == 1 || nr_tp_direccion_solicitud == 3">
                                                        <div class="form-group">
                                                            <label>Ubicación Problema :</label>
                                                            <multiselect 
                                                                :disabled="true" 
                                                                :show-labels="false"
                                                                :searchable="true"
                                                                v-model="arr_direccion_solicitud"
                                                                :options="arr_calles_solicitud"
                                                                :multiple="false"
                                                                :showNoOptions =false
                                                                placeholder="Seleccionar Ubicación"
                                                                label="label" 
                                                                @search-change="indexDireccionesSolicitud"
                                                                track-by="label">
                                                                    <span slot="noResult">No se han encontrado resultados</span>
                                                            </multiselect>
                                                            <small v-if="validationErrors.arr_direccion_solicitud" v-text="validationErrors.arr_direccion_solicitud[0]"></small>

                                                        </div>
                                                    </div>
                                                    <!-- Calles -->
                                                    <div class="col-md-6" v-else>
                                                        <label for="">Ingresar Calles</label>
                                                        <div class="input-group">
                                                          <div class="input-group-prepend">
                                                            <span class="input-group-text">Intersecciones</span>
                                                          </div>
                                                            <select :disabled="true" v-model="dir_1" class="form-control buscador">
                                                                <option v-text="calle.label" :value="calle.label" v-for="calle in arr_data_default.calles"></option>
                                                             
                                                            </select>
                                                            <select :disabled="true" v-model="dir_2" class="form-control buscador">
                                                                <option v-text="calle.label" :value="calle.label" v-for="calle in arr_data_default.calles"></option>
                                                            </select>
                                                        </div>
                                                        <small v-if="validationErrors.nm_direccion_solicitud" v-text="validationErrors.nm_direccion_solicitud[0]"></small>
                                                    </div>
                                                    <!-- Prioridad -->
                                                    <div class="col-md-2 col-sm-6">
                                                        <div class="form-group">
                                                            <label >Prioridad</label>
                                                            <select v-model="nr_prioridad" id="prioridad" class="form-control">
                                                                <option v-for="nodo in arr_prioridad" :value="nodo.value" v-text="nodo.label">
                                                                    
                                                                </option>
                                                            </select>
                                                            <small v-if="validationErrors.nr_prioridad" v-text="validationErrors.nr_prioridad[0]"></small>
                                                        </div>
                                                    </div>
                                                    <!-- Direccion Municipal -->
                                                    <div class="col-md-4 col-sm-6">
                                                        <div class="form-group">
                                                            <label >Dirección Municipal :</label>
                                                            <select v-model="nr_dir_municipal" id="dir_municipal" class="form-control">
                                                                <option v-for="nodo in arr_dir_municipal" :value="nodo.value" v-text="nodo.label"></option>
                                                            </select>
                                                            <small v-if="validationErrors.nr_dir_municipal" v-text="validationErrors.nr_dir_municipal[0]"></small>
                                                        </div>
                                                    </div>
                                                    <!-- Descripcion Solicitud -->
                                                    <div class="col-md-8">
                                                        <div class="form-group">
                                                            <label>Descripción Solicitud :</label>
                                                            <textarea maxlength="2000" rows="2" v-model="str_observacion" class="form-control tp_editar"></textarea>
                                                            <small class="form-text text-muted" id="str_observacion"  v-if="str_observacion" 
                                                                v-text="'Disponible '+(2000-str_observacion.trim().length)+' caracteres'"></small>
                                                            <small v-if="validationErrors.str_observacion" v-text="validationErrors.str_observacion[0]"></small>
                                                        </div>
                                                    </div>
                                                    <!-- Tabla de Archivos Adjuntos -->
                                                    <div class="table-responsive">
                                                        <table  class="table table-bordered table-striped table-sm" style="width: 100%">
                                                            <thead>
                                                                <tr class="bg--primary">
                                                                    <th class="text-center" colspan="4">Documentos Adjuntos
                                                                        <button disabled @click="abrirModal('archivo','anexar')" class="btn btn-primary btn-sm btn_activo">
                                                                            <i class="fas fa-plus"></i>
                                                                        </button>
                                                                    </th>
                                                                </tr>
                                                                <tr v-if="arr_archivo.length || ( solicitud_actual.archivos && solicitud_actual.archivos.length)">
                                                                    <th>Nombre</th>
                                                                    <th>Descripción</th>
                                                                    <th>Opción</th>
                                                                </tr>
                                                            </thead>
                                                            <tbody>
                                                                <template v-if="arr_archivo.length">
                                                                    <tr>
                                                                        <th class="text-center bg--primary" colspan="4" style="color:white">Archivos por Cargar</th>
                                                                    </tr>
                                                                    <tr v-for="(archivo, index) in arr_archivo" :key="index">
                                                                        <td>@{{ archivo.file.name }}</td>
                                                                        <td>@{{ archivo.descripcion }}</td>
                                                                        <td class="text-center">
                                                                            <button type="button" class="btn btn-sm btn-danger" title="Quitar Documento" @click="quitarAdjunto('archivo', index);">
                                                                                <i class="fas fa-times-circle"></i> Quitar
                                                                            </button>
                                                                        </td>
                                                                    </tr>
                                                                </template>
                                                                <template class="mt-5" v-if="solicitud_actual.archivos && solicitud_actual.archivos.length">
                                                                    <tr>
                                                                        <th class="text-center bg-success" colspan="3" style="color:white">Archivos Cargados</th>
                                                                    </tr>
                                                                    <tr>
                                                                        <th>Archivo</th>
                                                                        <th>Descripción</th>
                                                                        <th>Opción</th>
                                                                    </tr>
                                                                    <tr v-for="archivo in solicitud_actual.archivos" >
                                                                        <td>
                                                                            <a target=_blank :href="'/files/get/?ruta='+archivo.str_archivo">@{{ archivo.nm_archivo }}</a>
                                                                        </td>
                                                                        <td>@{{ archivo.str_observacion }}</td>
                                                                        <td class="text-center">
                                                                            <button disabled @click="deleteFiles(archivo.str_archivo,archivo.nm_archivo)" type="button" class="btn btn-sm btn-danger" title="Quitar Documento">
                                                                                <i class="fas fa-times-circle"></i> Eliminar
                                                                            </button>
                                                                        </td>
                                                                    </tr>
                                                                </template>

                                                                <template v-if="!solicitud_actual.archivos && !arr_archivo.length">
                                                                    <td colspan="3">
                                                                        <div class="empty" empty-text="No hay archivos adjuntos para listar"></div>
                                                                    </td>
                                                                </template>
                                                            </tbody>
                                                        </table>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="tab-pane" id="hito_solicitud" role="tabpanel">
                                    <div class="form-group mt-3">
                                            <ul style="list-style-type: none;" class="timeline">
                                                <li v-for="(hito, index) in arr_historial" :key="hito.id">
                                                    <div class="row">
                                                        <div class="form-group col-md-12 col-sm-12" style="padding-left:30px;">
                                                            <!-- Titulo Hito -->
                                                            <div class="row" style="padding-left: 20px;">
                                                                <div class="col-md-10 col-sm-9">
                                                                    <a href="#" vi>
                                                                        <template v-if="hito.id_estado == 1">
                                                                            @{{ (index+1) + '.- ' + 'Funcionario Municipal - ' + hito.nm_autor }}
                                                                        </template>
                                                                        <template v-if="hito.id_estado == 2 || hito.id_estado == 3 || hito.id_estado == 4">
                                                                            @{{ (index+1) + '.- ' + 'Jefe Macro Zona' }}
                                                                        </template>
                                                                        <template v-if="hito.id_estado == 5 || hito.id_estado == 6 || hito.id_estado == 7">
                                                                            @{{ (index+1) + '.- ' + 'Jefe Territorial' }}
                                                                        </template>
                                                                        <template v-if="hito.id_estado == 8 || hito.id_estado == 9 || hito.id_estado == 10 || hito.id_estado == 11">
                                                                            @{{ (index+1) + '.- ' + hito.unidad_destino[0]['nm_direccion'] }}
                                                                        </template>
                                                                        <template v-if="hito.id_estado == 12 || hito.id_estado == 13">
                                                                            @{{ (index+1) + '.- ' + 'Unidad Territorial - ' }}
                                                                        </template>
                                                                    </a>
                                                                </div>
                                                                <div class="col-md-2 col-sm-3">
                                                                    <a href="#"> 
                                                                        @{{'Duración ' + hito.fc_diferencia + ' días'}}
                                                                    </a>
                                                                </div>
                                                            </div>

                                                            <!-- Detalle Hito -->
                                                            <div class="col-md-12 col-sm-12">
                                                                <p style="margin-bottom: 0px">
                                                                    <strong>Fecha Inicio :</strong><span v-if="hito.fc_inicio">@{{ hito.fc_inicio }}</span><br>
                                                                    <strong>Fecha Término :</strong><span v-if="hito.fc_termino">@{{ hito.fc_termino }}</span><br>
                                                                    <span v-if="hito.str_observacion">
                                                                        <strong>Observación :</strong> @{{ hito.str_observacion.trim() }} <br>
                                                                    </span>
                                                                    <template v-if="hito.visador.length">
                                                                        <div v-for="(visador, indice) in hito.visador" :key="indice">
                                                                            <span v-if="visador.nm_visador">
                                                                                <strong>Visador : </strong> @{{ visador.nm_visador }} <br>
                                                                            </span>
                                                                            <span v-if="visador.str_observacion">
                                                                                <strong>Obs. Visado</strong> @{{ visador.str_observacion }} <br>
                                                                            </span>
                                                                        </div>
                                                                    </template>
                                                                    <template v-if="hito.id_estado == 9">
                                                                        <span v-if="hito.unidad_destino.length">
                                                                            <strong>Unidad Destino : </strong> @{{ hito.unidad_destino[0]['nm_direccion'] }} <br>
                                                                        </span>                                                                        
                                                                    </template>
                                                                </p>                                                                
                                                            </div>

                                                            <!-- Acciones -->
                                                            <template v-if="hito.id_estado == 2 && hito.id_accion == 2">  <!-- En espera de visacion -->
                                                                <div class="row col-md-4 col-sm-6">
                                                                    <button type="button" class="btn btn-sm btn-warning" 
                                                                        @click="abrirModal('historial', 'validacion',hito)">
                                                                            <i class="fas fa-check-square"></i> Visar Solicitud
                                                                    </button>
                                                                </div>
                                                            </template>
                                                            
                                                            <!-- Tablas Observaciones y Encargados -->
                                                            <template v-if="(hito.id_estado == 8 || hito.id_estado == 9 || hito.id_estado == 10)">
                                                                <div class="row col-md-4 col-sm-6">
                                                                    <button  class="btn btn-primary ml-2 mt-2" id="btn_ver_observaciones"
                                                                        @click="mostrarObservaciones()">
                                                                        <i class="fas fa-comments"></i> Ver Observaciones
                                                                    </button>
                                                                </div>

                                                                <!-- Tabla de Encargados y Observaciones -->
                                                                <template v-if="hito.encargado.length">
                                                                    <!-- Tabla de encargados -->
                                                                    <div class="table-responsive pr-5">
                                                                        <table class="table table-bordered table-striped table-sm mr-5 mt-2 ">
                                                                            <thead class="bg--primary">
                                                                                <tr class="bg-info">
                                                                                    <th colspan="5" class="text-center">Lista de Funcionarios</th>
                                                                                </tr>
                                                                                <tr>
                                                                                    <th style="min-width:100px; text-align:center;">#</th>
                                                                                    <th style="min-width:100px; text-align:center;">Fecha Asignado</th>
                                                                                    <th style="min-width:100px; text-align:center;">Nombre</th>
                                                                                    <th style="min-width:100px; text-align:center;">Contestado</th>
                                                                                    <th style="min-width:100px; text-align:center;">Fecha Contestado</th>
                                                                                </tr>
                                                                            </thead>
                                                                            <tbody>
                                                                                <template v-if="hito.encargado.length">
                                                                                    <tr v-for="(funcionario, index) in hito.encargado" :key="funcionario.id">
                                                                                        <td class="text-center">@{{ (index + 1) }}</td>
                                                                                        <td class="text-center">@{{ funcionario.fc_asignado }}</td>
                                                                                        <td class="text-center">@{{ funcionario.nm_encargado }}</td>
                                                                                        <td class="text-center">
                                                                                            <template v-if="funcionario.tp_validado == 1">
                                                                                                <button class="btn btn-sm btn-success">
                                                                                                    <i class="fas fa-check"></i>
                                                                                                </button>
                                                                                            </template>
                                                                                            <template v-else>
                                                                                                <button class="btn btn-sm btn-danger">
                                                                                                    <i class="fas fa-ban"></i>
                                                                                                </button>
                                                                                            </template>
                                                                                        </td>
                                                                                        <td class="text-center">@{{ funcionario.fc_validado }}</td>
                                                                                    </tr>
                                                                                </template>
                                                                                <template v-else>
                                                                                    <td colspan="5">
                                                                                        <div class="empty" empty-text="No hay datos para listar"></div>
                                                                                    </td>
                                                                                </template>
                                                                            </tbody>
                                                                        </table>
                                                                    </div>

                                                                    <!-- Listado de Observaciones -->
                                                                    <div class="col-md-12 col-sm-12">
                                                                        <div class="collapse" id="ver_observaciones">
                                                                            <div class="col-md-12 col-sm-12 mt-1">
                                                                                <div class="col-md-12 col-sm-12">
                                                                                    <div class="bg-info text-center">
                                                                                        <h5 style="color:white">Observaciones</h5>
                                                                                    </div>
                                                                                </div>
                                                                                <div class="row">
                                                                                    <template v-if="hito.observaciones.length">
                                                                                        <ul class=" list-style-type: none col-md-12 col-sm-12 ml-3">
                                                                                            <li style="list-style-type: none" v-for="obs in hito.observaciones" :key="obs.id"
                                                                                                style="margin-bottom:5px; margin-top:5px;">
                                                                                                <div class="row">
                                                                                                    <div class="timeline-arrow"></div>
                                                                                                    <div class="col-md-11 col-sm-11 ml-4">
                                                                                                        <a class="row" href="#" vi>
                                                                                                            <div class="col-md-6 col-sm-6">
                                                                                                                <template v-if="obs.tp_observacion == 1">
                                                                                                                    @{{ 'Respuesta de Cierre - ' + obs.nm_autor  }}
                                                                                                                </template>
                                                                                                                <template v-if="obs.tp_observacion == 2">
                                                                                                                    @{{ 'Respuesta - ' + obs.nm_autor  }}
                                                                                                                </template>
                                                                                                                <template v-if="obs.tp_observacion == 3">
                                                                                                                    @{{ 'Observación - ' + obs.nm_autor  }}
                                                                                                                </template>
                                                                                                            </div>
                                                                                                            <div class="col-md-6 col-sm-6 text-right">
                                                                                                                <i class="far fa-calendar"></i>
                                                                                                                @{{ obs.fc_observacion }}
                                                                                                            </div>
                                                                                                        </a>
                                                                                                    </div>
                                                                                                    <div class="row col-md-12 col-sm-12">
                                                                                                        <div class="col-md-9 col-sm-9 ml-4">
                                                                                                            <p class="text-small mt-1 font-weight-light"
                                                                                                            style="margin-bottom:0px; margin-top:2px;">
                                                                                                                @{{ obs.str_observacion }}
                                                                                                            </p>
                                                                                                        </div>
                                                                                                    </div>
                                                                                                    <div class="col-md-11 col-sm-11 ml-3">
                                                                                                        <hr class="my-2">
                                                                                                    </div>
                                                                                                </div>
                                                                                            </li>
                                                                                        </ul>
                                                                                    </template>
                                                                                    <template v-else>
                                                                                        <div class="col-md-12 col-sm-12 text-center">
                                                                                            <label class="form-control-label" for="input-text">
                                                                                                No hay observaciones disponibles
                                                                                            </label>
                                                                                        </div>
                                                                                    </template>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </template>
                                                            </template>
                                                        </div>
                                                    </div>
                                                </li>
                                            </ul>
                                    </div>
                                </div>
                            </div>                                    
                        </div>

                        <div class="modal-footer">
                            <button  v-if="nr_estado == 3 || nr_estado == 1" type="button" class="btn btn-warning btn_activo" @click="ensamblarDatos('actualizar',1)">
                                <i class="fas fa-pen"></i> Actualizar
                            </button>
                            <button type="button" class="btn btn-secondary btn_activo" @click="cerrarModal('informacion');">Cerrar</button>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Modal Validacion -->
            <div id="modal_validacion" class="modal scroll_modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
                <!-- Validacion -->
                <div class="modal-dialog modal-xl" role="document" v-if="accion_validacion == 1">
                    <div class="modal-content">
                        <div class="modal-header bg--primary">
                            <h5 class="modal-title">
                                <strong class="text-center" style="color:white">@{{ titulo_validacion }}</strong>
                            </h5>
                            <button type="button"  @click="cerrarModal('validacion');" class="close btn_activo" data-dismiss="modal" aria-label="Close">
                              <span aria-hidden="true">&times;</span>
                            </button>
                        </div>

                        <div class="modal-body">
                            <div class="row-flow">
                                <h5>
                                   <span>@{{ mensaje_validacion }}</span>
                                </h5>

                                <template >
                                    <div class="col-md-12 col-sm-12">
                                        <textarea maxlength="200" rows="2" v-model="str_obs_validacion" placeholder="Ingresar observación de la validación" class="form-control"></textarea>
                                        <small class="form-text text-muted" id="str_obervacion"  v-if="str_obs_validacion" 
                                            v-text="'Disponible '+(200-str_obs_validacion.trim().length)+' caracteres'"></small>
                                    </div>
                                </template>                                    
                            </div>
                        </div>

                        <div class="modal-footer">                            
                            <template v-if="boton_validacion == 1">
                                <button type="button" id="btnVisar" class="btn btn-primary btn_activo" @click="visar('visar')">
                                    <i class="fas fa-thumbs-up"></i> Visar
                                </button>
                                <template v-if="tp_rechazar == 0">
                                    <button type="button" id="btnRechazar" class="btn btn-primary btn_activo" @click="visar('rechazar')">
                                        <i class="fas fa-thumbs-down"></i> Rechazar
                                    </button>
                                </template>
                                
                            </template>
                            <button type="button" class="btn btn-secondary btn_activo" @click="cerrarModal('validacion');">Cerrar</button>
                        </div>
                    </div>
                </div>
            </div>

           <!-- Modal Adjunto -->
            <div class="modal" tabindex="-1" role="dialog" id="modal_adjunto">
                <!-- Aduntar Archivos -->
                <div class="modal-dialog modal-lg" role="document" v-if="accion_adjunto == 1">
                    <div class="modal-content">
                        <div class="modal-header bg--primary">
                            <h5 class="modal-title" v-text="titulo_adjunto"></h5>
                            <button type="button" class="close btn_activo" @click="cerrarModal('archivo')" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body">
                            <div class="form-group">
                                <input accept=".jpeg,.jpg,.png,.doc,.docx,.xls,.xlsx,.ppt,.pptx,.pdf,.dwg,.dgn,.rar,.zip" class="tp_editar" 
                                    type="file" id="file_adjunto" @change="validarAdjunto('documento','')">
                            </div>
                            <div class="form-group">
                                <textarea maxlength="200" rows="3" v-model="file_observacion" class="form-control tp_editar" placeholder="Descripción del archivo"></textarea>
                                <small id="cant_caracteres" class="form-text text-muted" v-text="'Disponible '+(200-file_observacion.trim().length)+' caracteres'" v-if="file_observacion"></small>
                            </div>
                            <template v-if="file_error">
                                <div class="text-center text-error">
                                    <div v-for="error in arr_error" :key="error" v-text="error"></div>
                                </div>
                            </template>
                        </div>
                        <div class="modal-footer">
                            <button @click="cerrarModal('archivo')" type="button" class="btn btn-light btn_activo">Cerrar</button>
                            <button type="button" class="btn btn-primary btn_activo" @click="validarAdjunto(tp_adjunto, 'save')">Subir</button>
                        </div>
                    </div>
                </div>
                <!-- Revisar Archivos -->
            </div>

            <!-- Modal Mensaje -->
            <div id="modal_mensaje" class="modal scroll_modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
                <div class="modal-dialog modal-lg" role="document" v-if="accion_mensaje == 1">
                    <div class="modal-content">
                        <div class="modal-header">
                            <div class="col-md-11 col-sm-11 ml-3 text-center">
                                <h4 class="modal-title" v-text="titulo_mensaje"></h4>
                            </div>
                            <button type="button"  @click="cerrarModal('mensaje')" class="close btn_activo" aria-label="Close">
                                <span aria-hidden="true">×</span>
                            </button>
                        </div>
                        <div class="modal-body" id="msj_error">
                            <!-- Mensaje de Alertas -->
                            <div class="col-md-12 col-sm-12 text-center">
                                <div class="row-fluid m-5">
                                    <div v-show="tp_error" class="form-group row div-error">
                                        <div class="text-center text-error">
                                            <div v-for="error in arr_error" :key="error" v-text="error">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary btn_activo"  @click="cerrarModal('mensaje')">
                                Cerrar
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        <!-- - - - - - - - - - - - - - - - - - - - - Termino de Modal - - - - - - - - - - - - - - - - - - - - -->        
    </div>

    <script type="text/javascript">
        Vue.component('vue-multiselect', window.VueMultiselect.default);

        var app = new Vue({
            el: '#app',
            data: {
                modal_principal             :   0,
                modal_adjunto               :   0,
                modal_validacion            :   0,
                modal_mensaje               :   0,
                accion_principal            :   0,
                accion_adjunto              :   0,
                accion_validacion           :   0,
                accion_mensaje              :   0,
                boton_principal             :   0,
                boton_adjunto               :   0,
                boton_validacion            :   0,
                boton_mensaje               :   0,
                titulo_principal            :   '',
                titulo_adjunto              :   '',
                titulo_validacion           :   '',
                titulo_mensaje              :   '',
                mensaje_validacion          :   '',
                tp_modal                    :   0,
                //-------------------------------------
                arr_valida                  :   [],
                arr_error                   :   [],
                tp_error                    :   [],
                //-------------------------------------
                file_error                  :   0,
                //-------------------------------------
                pagination                  : {
                    'total' : 0,
                    'current_page' : 0,
                    'per_page' : 0,
                    'last_page' : 0,
                    'from' : 0,
                    'to' : 0,
                },
                //-------------------------------------
                offset                      :   3,
                //-------------------------------------
                arr_archivo                 :   [],
                arr_files                   :   [],
                arr_files_obs               :   [],
                file_observacion            :   '',
                //-------------------------------------
                arr_mostrar                 :   [
                    {
                        'value'     :   0,
                        'label'     :   'Todos',
                    },
                    {
                        'value'     :   1,
                        'label'     :   'Pendientes',
                    },
                    {
                        'value'     :   13,
                        'label'     :   'NO Municipal',
                    },
                    {
                        'value'     :   4,
                        'label'     :   'Rechazadas',
                    },
                    {
                        'value'     :   8,
                        'label'     :   'Despachado',
                    },
                    {
                        'value'     :   12,
                        'label'     :   'Finalizado',
                    },
                ],
                fl_mostrar                  :   1,
                //-------------------------------------
                fl_tipo                     :   [],
                fl_prioridad                :   [],
                fl_funcionario              :   [],
                fl_persona                  :   [],
                fl_direccion                :   [],
                fl_unidadvecinal            :   [],
                fl_ticket                   :   [],
                //-------------------------------------
                arr_info                    :   [],
                //-------------------------------------
                arr_index                   :   [],
                arr_historial               :   [],
                arr_tipos                   :   [],
                arr_prioridad               :   [],
                arr_solicitante             :   [],
                arr_dir_municipal           :   [],
                arr_ubicacion               :   [],
                arr_estado                  :   [],
                arr_carga_data              :   [],
                arr_unidadvecinal           :   [],
                arr_ticket                  :   [],
                arr_persona                 :   [],
                //-------------------------------------
                tp_rechazar                 :   0,
                nr_id_historia              :   0,
                nr_id_direccion             :   0,
                str_obs_validacion          :   '', 
                //-------------------------------------
                arr_calles_vecino           :   [],
                arr_calles_solicitud        :   [],
                //-------------------------------------
                tp_municipal                :   1 ,
                nr_tipo                     :   [],
                nr_prioridad                :   1,
                arr_data_default            :   [],
                dir_1                       :   0,
                dir_2                       :   0,
                arr_direccion_solicitud     :   [],
                nr_tp_direccion_solicitud   :   1,
                nr_dir_municipal            :   2,
                str_observacion             :   '',
                id_consulta                 :   1,
                tp_visado                   :   1,
                nr_estado                   :   1,
                nr_id_autor                 :   0,
                //-------------------------------------
                rut_vecino                  :   '',
                nm_vecino                   :   '',
                ap_paterno                  :   '',
                ap_materno                  :   '',
                str_vecino                  :   '',
                nm_direccion                :   '',
                nr_direccion                :   0,
                pre_fijo                    :   '+569',
                nr_telefono                 :   '',
                mail_vecino                 :   '',
                nr_afectado                 :   1,
                tp_vecino                   :   0,
                arr_ubicacion_vecino        :   [],
                tp_direccion                :   1,
                str_aclaratoria             :   '',
                //-----------------------------------
                validationErrors            :   [],
                nr_dir_disabled             :   0,
                solicitud_actual            :   [],
                //-----------------------------------
            },

            components: {
                //-------------------------------------------------------------------------------------------
                Multiselect: window.VueMultiselect.default,
                //-------------------------------------------------------------------------------------------
            },

            filters:{
                resumir: function ($texto, $limite=90, $final=' ...->')
                {
                    var largo = $texto.toString().length;
                    if(largo > $limite){
                        for (var i = 0; i < largo; i++) {
                            if($texto[i] == ' ' && i >= $limite){
                                $texto = $texto.substring(0,i);
                                $texto = $texto + $final;
                                return $texto;
                            }
                        }                    
                    }
                    return $texto;
                },

                formatDate: function (fecha)
                {
                    if(fecha)
                    {
                        return moment(String(fecha)).format('DD-MM-YYYY')
                    }
                },

                formatDateTime: function (fecha)
                {
                    if(fecha)
                    {
                        return moment(String(fecha)).format('DD-MM-YYYY HH:mm')
                    }
                },
            },

            computed:{
                //-------------------------------------------------------------------------------------------
                isActivedPagination: function()
                {
                    return this.pagination.current_page;
                },
                //-------------------------------------------------------------------------------------------
                pagesNumber: function()
                {
                    if(!this.pagination.to) {
                        return [];
                    }

                    var from = this.pagination.current_page - this.offset;
                    if(from < 1) {
                        from = 1;
                    }

                    var to = from + (this.offset * 2);
                    if(to >= this.pagination.last_page){
                        to = this.pagination.last_page;
                    }

                    var pagesArray = [];
                    while(from <= to) {
                        pagesArray.push(from);
                        from++;
                    }
                    return pagesArray;
                },
                //-------------------------------------------------------------------------------------------
            },

            methods: {
                //-------------------------------------------------------------------------------------------
                refrescarDatos()
                {
                    let me  =   this;

                    me.cargarDataDefault();
                    me.cargarDatos();                    
                },
                //-------------------------------------------------------------------------------------------
                asyncSugerencia(item) // Sugerir Direccion
                {
                    let me  =   this;

                    if(Object.keys(item).length > 0)
                    {
                        var tipos   = me.arr_tipos
                        var index   = tipos.map(function (nodo) { return nodo.value; }).indexOf(item.value);
                        console.log(index);

                        me.nr_dir_municipal = tipos[index].id_direccion
                    }
                },
                //-------------------------------------------------------------------------------------------
                getVecino()
                {
                    let me      = this;
                    var ruta    = '/get/vecino/'+me.rut_vecino
                    axios.get(ruta).then(function (response)
                    {
                        var respuesta           = response.data.vecino;

                        if(!respuesta)
                            return
                       
                        me.nm_vecino                    = respuesta.nm_vecino;
                        me.ap_paterno                   = respuesta.ap_paterno;
                        me.ap_materno                   = respuesta.ap_materno;
                        me.mail_vecino                  = respuesta.nm_mail;
                        me.tp_direccion                 = respuesta.tp_direccion;
                        me.str_aclaratoria              = respuesta.str_aclaratoria;
                        me.nr_telefono                  = respuesta.nr_telefono.slice(-8);
                        me.pre_fijo                     = respuesta.nr_telefono.slice(0,4);
                      
                        me.arr_ubicacion_vecino.label    =   respuesta.nm_direccion;
                        me.arr_ubicacion_vecino.value    =   respuesta.nr_direccion;

                    }).catch(function (error) {
                        console.log(error);
                    });
                },
                //-------------------------------------------------------------------------------------------
                mostrarObservaciones()
                {
                    let me  =   this;

                    $("#ver_observaciones").slideToggle(500, function () {
                            // ---------------------------
                    });
                },
                //-------------------------------------------------------------------------------------------
                getValue(data)
                {
                    var valor   =   0;

                    if (!(typeof data === "undefined") && !(data === null))
                    {
                        valor   =   data.value;
                    }

                    return valor;
                },
                //-------------------------------------------------------------------------------------------
                getLabel(data)
                {
                    var valor   =   '';

                    if (!(typeof data === "undefined") && !(data === null))
                    {
                        valor   =   data.label;
                    }

                    return valor;
                },
                //-------------------------------------------------------------------------------------------
                cambiarPagina(page)
                {
                    let me = this;
                    //Actualiza la página actual
                    me.pagination.current_page = page;
                    //Envia la petición para visualizar la data de esa página
                    me.cargarDatos(page);
                },
                //-------------------------------------------------------------------------------------------
                changeContexto()
                {
                    let me = this;
                    if(me.tp_municipal == 0)
                        {
                            me.nr_dir_municipal = 0;
                            me.nr_dir_disabled = 1;
                        }
                    else
                        me.nr_dir_disabled = 0;
                },
                //-------------------------------------------------------------------------------------------
                getInfo(id_solicitud)
                {
                    let me          = this;
                    var ruta        = '/solicitud/get?id_solicitud='+id_solicitud;

                    axios.get(ruta).then(function (response)
                    {
                        var respuesta                   =   response.data.solicitud.archivos;
                        me.solicitud_actual.archivos    =   respuesta;
                    }).catch(function (error) {
                        console.log(error);
                    });
                },
                //-------------------------------------------------------------------------------------------
                deleteFiles(ruta_file,nm_archivo)
                {
                    let me          = this;
                    var ruta        = '/files/delete';

                    axios.post(ruta,{
                        'ruta'          : ruta_file,
                        'id_consulta'   : me.id_consulta,
                        'nm_archivo'    : nm_archivo
                    }).then(function (response)
                    {
                        var respuesta       =   response.data;
                        me.getInfo(me.id_consulta)

                    }).catch(function (error) {
                        console.log(error);
                    });
                },                
                //-------------------------------------------------------------------------------------------
                quitarAdjunto(modelo, index)
                {
                    let me          =   this;
                    me.arr_error    =   [];

                    switch(modelo)
                    {
                        case 'archivo':
                        {
                            me.arr_files.splice(index, 1);
                            me.arr_archivo.splice(index, 1);
                            me.arr_files_obs.splice(index, 1);

                            break;
                        }
                    }
                },
                //-------------------------------------------------------------------------------------------
                descartarAdjunto()
                {
                    let me              =   this;
                    var file_adjunto    =   '';

                    file_adjunto        =   document.querySelector("#file_adjunto");

                    if(file_adjunto)
                        document.querySelector("#file_adjunto").value = "";
                },
                //-------------------------------------------------------------------------------------------
                validarAdjunto(tipo, accion)
                {
                    let me              =   this;
                    var extension       =   '';
                    var fileSize        =   0;
                    var file_adjunto    =   '';
                    var file_value      =   '';
                    var max             =   3;
                    var error           =   0;
                    me.arr_error        =   [];

                    switch(tipo)
                    {
                        case "documento":
                        {
                            file_adjunto    =   document.querySelector("#file_adjunto");
                            file_value      =   file_adjunto.value;
                            var tipo_ext    =   ['.jpeg','.jpg','.png','.doc','.docx','.xls','.xlsx',
                                                '.ppt','.pptx','.msg','.pdf','.dwg','.dgn','.rar','.zip'];

                            if(file_value != "")
                            {
                                var fileSize  = file_adjunto.files[0].size;
                                extension = (file_value.substring(file_value.lastIndexOf("."))).toLowerCase();

                                if(fileSize > 20971520 ) 
                                    me.arr_error.push("El archivo adjunto NO debe superar los 20 MB");

                                if(!tipo_ext.includes(extension))
                                    me.arr_error.push("El archivo seleccionado No es adminido");

                                if(me.arr_archivo.length == max)
                                    me.arr_error.push("Solo se pueden adjuntar "+max+" archivos maximo");
                            }

                            if(me.arr_error.length)
                                me.descartarAdjunto();

                            if(accion == "save" && me.arr_error.length == 0 && file_value != "")
                            {
                                me.arr_files.push(file_adjunto.files[0]);
                                me.arr_files_obs.push(me.file_observacion);
                                me.arr_archivo.push({'file':file_adjunto.files[0], 'descripcion':me.file_observacion});                                
                                $('#modal_adjunto').modal('hide');
                                me.descartarAdjunto();
                                me.limpiarDatos('archivo');
                            }

                            break;
                        }
                    }

                    if(me.arr_error.length) 
                    {
                        error   =   1;
                        me.file_error   =   1;
                    }

                    return error;
                },                
                //-------------------------------------------------------------------------------------------
                indexDireccionesSolicitud(query)
                {
                    let me          = this;
                    var ruta        = '/direccion/index';

                    if(query.length >= 3) 
                        me.callDirecciones(query,2);
                },
                //-------------------------------------------------------------------------------------------
                indexDireccionesVecino(query)
                {
                    let me          = this;
                    var ruta        = '/direccion/index';

                    if(query.length >= 3) 
                        me.callDirecciones(query,1);
                },
                //-------------------------------------------------------------------------------------------
                filtrarDatos()
                {
                    let me  =   this;
                    me.cargarDatos();
                },
                //-------------------------------------------------------------------------------------------
                limpiarFiltros()
                {
                    let me  =   this;

                    me.fl_tipo          =   [];
                    me.fl_prioridad     =   [];
                    me.fl_funcionario   =   [];
                    me.fl_persona       =   [];
                    me.fl_direccion     =   [];
                    me.fl_unidadvecinal =   [];
                    me.fl_ticket        =   [];

                    me.cargarDatos();
                },
                //-------------------------------------------------------------------------------------------
                getRut(data)
                {
                    var valor   =   '';

                    if (!(typeof data == "undefined") && !(data == null))
                    {
                        valor   =   data.nr_rut;
                    }

                    return valor;
                },
                //-------------------------------------------------------------------------------------------
                cargarDataDefault()
                {
                    let me      =   this;
                    var ruta    =   '/default/data';

                    axios.get(ruta,{                        
                    }).then(function (response)
                    {
                        var respuesta       =   response.data;
                        me.arr_carga_data   =   respuesta;
                        me.cargarTipoSolicitud();
                        me.cargarPrioridad();
                        me.cargarUbicacion();
                        me.cargarDireccionMunicipal();
                        me.cargarUnidadVecinal();
                        me.cargarVecinos();
                        me.cargarTicket();
                    }).catch(function (error) {
                        console.log(error);
                    });
                },
                //-------------------------------------------------------------------------------------------
                cargarTipoSolicitud()
                {
                    let me  =   this;
                    me.arr_tipos     =   [];
                    me.arr_tipos     =   me.arr_carga_data.arr_tipos;
                },
                //-------------------------------------------------------------------------------------------
                cargarPrioridad()
                {
                    let me  =   this;
                    me.arr_prioridad    =   [];
                    me.arr_prioridad    =   me.arr_carga_data.arr_prioridad;
                },
                //-------------------------------------------------------------------------------------------
                cargarUbicacion()
                {
                    let me  =   this;
                    me.arr_ubicacion    =   [];
                    me.arr_ubicacion    =   me.arr_carga_data.arr_ubicaciones;
                },
                //-------------------------------------------------------------------------------------------
                cargarDireccionMunicipal()
                {
                    let me  =   this;
                    me.arr_dir_municipal    =   [];
                    me.arr_dir_municipal    =   me.arr_carga_data.arr_direcciones;
                },
                //-------------------------------------------------------------------------------------------
                cargarUnidadVecinal()
                {
                    let me  =   this;
                    me.arr_unidadvecinal    =   [];
                    me.arr_unidadvecinal    =   me.arr_carga_data.arr_unidadvecinal;
                },
                //-------------------------------------------------------------------------------------------
                cargarVecinos()
                {
                    let me  =   this;
                    me.arr_persona    =   [];
                    me.arr_persona    =   me.arr_carga_data.arr_vecinos;
                },
                //-------------------------------------------------------------------------------------------
                cargarTicket()
                {
                    let me  =   this;
                    me.arr_ticket    =   [];
                    me.arr_ticket    =   me.arr_carga_data.arr_ticket;
                },
                //-------------------------------------------------------------------------------------------
                callDirecciones(query, tp_opcion = 1)
                {
                    let me          = this;
                    var ruta        = '/direccion/index';
                    var respuesta   = [];

                    axios.post(ruta,{'nm_direccion':   query,
                    }).then(function (response)
                    {
                        var respuesta   =   response.data;

                        if(tp_opcion == 1)
                            me.arr_calles_vecino = respuesta.result;
                        
                        if(tp_opcion == 2)
                            me.arr_calles_solicitud = respuesta.result;

                    }).catch(function (error) {
                        console.log(error);
                    });
                },
                //-------------------------------------------------------------------------------------------
                indexDireccionesSolicitud(query)
                {
                    let me          = this;
                    var ruta        = '/direccion/index';

                    if(query.length >= 3) 
                        me.callDirecciones(query,2);
                },
                //-------------------------------------------------------------------------------------------
                indexDireccionesVecino(query)
                {
                    let me          = this;
                    var ruta        = '/direccion/index';

                    if(query.length >= 3) 
                        me.callDirecciones(query,1);
                },                
                //-------------------------------------------------------------------------------------------
                cargarHistorial(id_consulta)
                {
                    let me      = this;
                    var ruta    = '/territorial/solicitud/jmt/historial';

                    axios.post(ruta,{
                        'id_solicitud'  :   id_consulta,
                    }).then(function (response) 
                    {
                        var respuesta       =   response.data;
                        me.arr_historial    =   respuesta.arr_historial;
                        console.log(me.arr_historial);
                    }).catch(function (error) 
                    {
                        console.log(error)
                    });     
                },
                //-------------------------------------------------------------------------------------------
                cargarDatos(page)
                {
                    let me      =   this;
                    var ruta    =   '/territorial/visacion/jmt/inicio';

                    axios.get(ruta, {params:{
                            'page'              :   page,
                            'fl_mostrar'        :   me.fl_mostrar,
                            'fl_tipo'           :   me.getValue(me.fl_tipo),
                            'fl_prioridad'      :   me.getValue(me.fl_prioridad),
                            'fl_persona'        :   me.getValue(me.fl_persona),
                            'fl_direccion'      :   me.getValue(me.fl_direccion),
                            'fl_unidadvecinal'  :   me.getValue(me.fl_unidadvecinal),
                            'fl_ticket'         :   me.getValue(me.fl_ticket),
                    }}).then(function (response)
                    {
                        var respuesta   =   response.data;
                        me.arr_index    =   respuesta.info.data;
                        me.pagination   =   respuesta.pagination;
                        me.rows         =   respuesta.info.data;
                    }).catch(function (error) {
                        console.log(error);
                    });
                },
                //-------------------------------------------------------------------------------------------
                validarDatos(accion)
                {
                    let me          =   this;
                    var error       =   0;
                    me.arr_error    =   [];

                    switch(accion)
                    {
                        case 'visar':
                        {
                            if(me.id_consulta == 0)
                                me.arr_error.push('No se encuentra el ID de la Solicitud');

                            if(me.nr_id_historia == 0)
                                me.arr_error.push('No se encuentra el ID Historia');

                            break;
                        }
                        case 'rechazar':
                        {
                            if(me.id_consulta == 0)
                                me.arr_error.push('No se encuentra el ID de la Solicitud');

                            if(me.nr_id_historia == 0)
                                me.arr_error.push('No se encuentra el ID Historia');

                            if(me.str_obs_validacion.trim().length < 5)
                                me.arr_error.push('La observación debe ser superior a 5 caracteres');

                            break;
                        }
                    }

                    if(me.arr_error.length)
                    {
                        error   =   1;
                    }

                    return error;
                },
                //-------------------------------------------------------------------------------------------
                visar(accion)
                {
                    let me          =   this;
                    var ruta        =   '';
                    var titulo      =   '';
                    var tiempo      =   0;
                    var error       =   0;
                    me.tp_error     =   0;
                    var formData    =   new FormData();
                    var fc_format   =   'YYYY-MM-DD';

                    switch(accion)
                    {
                        case 'visar':
                        {
                            titulo      =   'Visando Solicitud';
                            tiempo      =   3000;
                            error       =   me.validarDatos(accion);

                            if(error == 1)
                            {
                                me.tp_error     =   1;
                                me.abrirModal('mensaje','alerta');
                            }
                            else
                            {
                                //------------------------------------
                                ruta    =   '/territorial/visacion/jmt/visar';
                                me.zonaDeEspera(titulo, tiempo);
                                //------------------------------------
                                formData.append('id_solicitud', me.id_consulta);
                                formData.append('id_historia', me.nr_id_historia);
                                formData.append('nr_prioridad', me.nr_prioridad);
                                formData.append('nr_id_direccion', me.nr_id_direccion);
                                formData.append('str_observacion', me.str_obs_validacion);
                                //------------------------------------
                                me.cerrarModal('validacion');
                                //------------------------------------
                                me.registrarDatos(ruta, formData);
                                //------------------------------------
                            }

                            break;
                        }
                        case 'rechazar':
                        {
                            titulo      =   'Rechazar Solicitud';
                            tiempo      =   3000;
                            error       =   me.validarDatos(accion);

                            if(error == 1)
                            {
                                me.tp_error     =   1;
                                me.abrirModal('mensaje','alerta');
                            }
                            else
                            {
                                //------------------------------------
                                ruta    =   '/territorial/visacion/jmt/rechazar';
                                me.zonaDeEspera(titulo, tiempo);
                                //------------------------------------
                                formData.append('id_solicitud', me.id_consulta);
                                formData.append('id_historia', me.nr_id_historia);
                                formData.append('str_observacion', me.str_obs_validacion);
                                //------------------------------------
                                me.cerrarModal('validacion');
                                //------------------------------------
                                me.registrarDatos(ruta, formData);
                                //------------------------------------
                            }

                            break;
                        }
                    }
                },
                //-------------------------------------------------------------------------------------------
                ensamblarDatos(accion, tp_consulta)
                {
                    let me              =   this;
                    var ruta            =   '';
                    var titulo          =   '';
                    var tiempo          =   0;
                    var error           =   0;
                    var formData        =   new FormData();
                    var fc_format       =   'YYYY-MM-DD';
                    var dir_vecino      = '';
                    var dir_solicitud   = '';
                    var nr_dir_solicitud   = '';
                    var nr_dir_vecino      = '';
                    me.tp_error         =   0;
                    me.arr_valida       =   [];                   
                    titulo              =   'Registrando de Solicitud';
                    tiempo              =   3000;
                    //------------------------------------
                    ruta    =   '/territorial/solicitud/jmt/actualizar';
                    //------------------------------------
                    /*
                    if(me.nr_tp_direccion_solicitud == 2)
                        {
                            dir_solicitud       = me.dir_1+' && '+me.dir_2;
                            nr_dir_solicitud    = 1
                        }


                    if(me.arr_direccion_solicitud.label && me.nr_tp_direccion_solicitud != 2)
                    {
                        dir_solicitud   =   me.arr_direccion_solicitud.label;
                        nr_dir_solicitud   =   me.arr_direccion_solicitud.value;
                    }

                    if(me.arr_ubicacion_vecino.label)
                    {
                        dir_vecino      =   me.arr_ubicacion_vecino.label;
                        nr_dir_vecino   =   me.arr_ubicacion_vecino.value;
                    }
                    */
                    // Datos de Solicitud
                    formData.append('tp_consulta', tp_consulta);
                    formData.append('tp_update', 2);
                    formData.append('id_consulta', me.id_consulta);
                    formData.append('nr_tipo', me.getValue(me.nr_tipo));
                    formData.append('nm_tipo', me.getLabel(me.nr_tipo));
                    formData.append('nr_prioridad', me.nr_prioridad);
                    // ubicacion del problema
                    formData.append('arr_direccion_solicitud[]', JSON.stringify(me.arr_direccion_solicitud));
                    formData.append('str_observacion', me.str_observacion);
                    formData.append('fc_ingreso', me.fc_ingreso);
                    formData.append('tp_municipal', me.tp_municipal);
                    formData.append('nr_dir_municipal', me.nr_dir_municipal);
                    formData.append('tp_direccion_solicitud', me.nr_tp_direccion_solicitud);
                    //------------------------------------
                    // Datos de Vecino
                    formData.append('rut_vecino', me.rut_vecino.trim());
                    formData.append('nm_vecino', me.nm_vecino);
                    formData.append('ap_paterno', me.ap_paterno);
                    formData.append('ap_materno', me.ap_materno);
                    formData.append('nm_mail', me.mail_vecino);
                    formData.append('pre_fijo', me.pre_fijo);
                    formData.append('nr_telefono', me.nr_telefono);
                    formData.append('arr_ubicacion_vecino[]', JSON.stringify(me.arr_ubicacion_vecino));
                    formData.append('tp_direccion', me.tp_direccion);
                    formData.append('str_aclaratoria', me.str_aclaratoria);
                    formData.append('nr_id_autor', me.nr_id_autor);
                    //------------------------------------
                    if(me.arr_files.length != 0)
                    {
                        for (var i = 0; i < me.arr_files.length; i++) 
                        {
                            formData.append('arr_archivo[]', me.arr_files[i]);
                        }
                        for (var i = 0; i < me.arr_files_obs.length; i++) 
                        {
                            formData.append('arr_observacion[]', me.arr_files_obs[i]);
                        }
                    }
                    //------------------------------------
                    me.registrarDatos(ruta, formData);
                    //------------------------------------
                },
                //-------------------------------------------------------------------------------------------
                registrarDatos(ruta, formData)
                {
                    let me              =       this;
                    var tp_icon         =       '';
                    var titulo          =       '';
                    var mensaje         =       '';
                    var error           =       '';
                    me.validationErrors =       [];

                    axios.post(ruta, formData, {
                        headers: {'Content-Type': 'multipart/form-data'}
                    }).then(function (response) 
                    {
                        var result  =   response.data;
                       
                        tp_icon     =   result.tp_icon;
                        titulo      =   result.title;
                        mensaje     =   result.msj;
                        error       =   result.error;

                        me.desplegarVentana(tp_icon, titulo, mensaje);

                        //Limpiar Modelos
                        if(error == 0)
                            {
                                me.limpiarDatos('registrar')
                                $('#modal_principal').modal('hide');
                                me.refrescarDatos();
                            }

                    })
                    .catch(function (error) 
                    {
                        // Faltan campos por llenar
                        if (error.response.status == 422)
                        {
                            me.validationErrors = error.response.data.errors;
                        }
                        /*// Formato de Archivo Incorrecto
                        if (error.response.status == 413)
                        {
                            //------------------------------
                        }*/
                    });
                },
                //-------------------------------------------------------------------------------------------
                abrirModal(modelo, accion, data = [])
                {
                    let me      =       this;

                    switch(modelo)
                    {
                        case 'solicitud':
                        {
                            me.tp_modal     =   1;

                            switch(accion)
                            {
                                case 'informacion':
                                {
                                    me.arr_historial                =   [];
                                    console.log(data);
                                    me.solicitud_actual             =   data;
                                    me.id_consulta                  =   data.id;
                                    me.cargarHistorial(me.id_consulta);
                                    me.rut_vecino                   =   data.vecino.nr_rut;
                                    me.nm_vecino                    =   data.vecino.nm_vecino;
                                    me.ap_paterno                   =   data.vecino.ap_paterno;
                                    me.ap_materno                   =   data.vecino.ap_materno;
                                    me.nr_telefono                  =   data.vecino.nr_telefono;
                                    me.pre_fijo                     =   data.vecino.nr_prefijo;
                                    me.mail_vecino                  =   data.vecino.nm_mail;
                                    me.str_aclaratoria              =   data.vecino.str_aclaratoria;                                    
                                    me.tp_municipal                 =   data.tp_municipal;                                    
                                    me.nr_estado                    =   data.id_estado;
                                    me.nr_tp_direccion_solicitud    =   data.tp_direccion;                                    
                                    me.str_observacion              =   data.str_observacion; 
                                    me.nr_id_autor                  =   data.id_autor;
                                    me.tp_visado                    =   data.tp_visado;

                                    /*
                                    if(me.nr_tp_direccion_solicitud == 2)
                                    {
                                        var intersecciones = data.nm_ubicacion;
                                        console.log(intersecciones)                                        

                                        if(intersecciones.length)
                                        {
                                            me.dir_1 = intersecciones.split('con')[0].trim();
                                            me.dir_2 = intersecciones.split('con')[1].trim();
                                        }                                        
                                    }else
                                    {
                                         me.arr_direccion_solicitud = {
                                                label : data.nm_ubicacion,
                                                value : data.nr_ubicacion,
                                            }
                                    }
                                    */

                                    me.nr_tipo                  =   {
                                        value : data.id_tipo,
                                        label : data.nm_tipo,
                                    };

                                    me.nr_prioridad             =    data.prioridad.id;
                                    me.nr_dir_municipal         =    data.id_direccion_destino;



                                    me.arr_direccion_solicitud  =    {
                                        value               : data.id_ubicacion,
                                        label               : data.nm_ubicacion,
                                        nr_calle            : data.nr_direccion,
                                        nm_calle            : data.nm_direccion,
                                        str_latitud         : data.str_latitud,
                                        str_longitud        : data.str_longitud,
                                        cod_territorial     : data.cod_territorio,
                                        cod_unidadvecinal   : data.cod_unidadvecinal,
                                        id_macroterritorio  : data.id_macroterritorio,
                                    }

                                    me.arr_ubicacion_vecino     =    {
                                        value               : data.vecino.id_ubicacion,
                                        label               : data.vecino.nm_ubicacion,
                                        nr_calle            : data.vecino.nr_calle,
                                        nm_calle            : data.vecino.nm_calle,
                                        str_latitud         : data.vecino.str_latitud,
                                        str_longitud        : data.vecino.str_longitud,
                                        cod_territorial     : data.vecino.id_macroterritorio,
                                        cod_unidadvecinal   : data.vecino.id_unidadvecinal,
                                    }

                                    me.titulo_principal     =   'Actualizar Solicitud';
                                    me.boton_principal      =   2;
                                    me.arr_archivo          =   [];
                                    me.changeContexto();
                                    
                                    $('#modal_principal').modal('show');

                                    break;
                                }
                            }

                            break;
                        }
                        case 'historial':
                        {
                            me.tp_modal     =   2;

                            switch(accion)
                            {
                                case 'validacion':
                                {
                                    me.limpiarDatos(accion);
                                    me.modal_validacion      =   1;
                                    me.accion_validacion     =   1;
                                    me.boton_validacion      =   1;
                                    me.titulo_validacion     =   'Visar Solicitud';
                                    me.mensaje_validacion    =   '¿ Desea realmente visar esta solicitud ?';
                                    me.id_consulta           =   data.id_solicitud;
                                    me.nr_id_historia        =   data.id;
                                    me.nr_id_direccion       =   data.id_direccion_destino;
                                    me.tp_rechazar           =   0;
                                    me.nr_prioridad          =   {
                                        value : data.id_prioridad_solicitud,
                                        label : data.nm_prioridad_solicitud,
                                    }
                                    $('#modal_validacion').modal('show');

                                    break;
                                }
                            }

                            break;
                        }
                        case 'archivo':
                        {
                            me.tp_modal     =   3;

                            switch(accion)
                            {
                                case 'anexar':
                                {
                                    me.accion_adjunto       =   1;
                                    me.titulo_adjunto       =   'Adjuntar Documentos';
                                    me.tp_adjunto           =   'documento';
                                    me.limpiarDatos(modelo);
                                    $('#modal_adjunto').modal('show');

                                    if(data.nr_prioridad)
                                        me.nr_prioridad = data.nr_prioridad

                                    if(data.nr_afectado)
                                    me.nr_afectado  = data.nr_afectado

                                    break;
                                }
                                case 'revisar':
                                {
                                    //me.limpiarDatos(accion);
                                    /*me.modal_adjunto        =   1;
                                    me.accion_adjunto       =   2;
                                    me.titulo_adjunto       =   'Revisar Documentos';
                                    me.tp_adjunto           =   'archivos';*/
                                    me.arr_archivo          =   data.archivos;
                                    $('#listado_adjuntos').modal('show');

                                    break;
                                }
                            }

                            break;
                        }
                        case 'mensaje':
                        {
                            me.tp_modal     =   4;

                            switch(accion)
                            {
                                case 'alerta':
                                {
                                    me.modal_mensaje    =   1;
                                    me.accion_mensaje   =   1;
                                    me.titulo_mensaje   =   'Validación Solicitud';
                                    $('#modal_mensaje').modal('show');

                                    break;
                                }
                            }

                            break;
                        }
                    }
                },
                //-------------------------------------------------------------------------------------------
                cerrarModal(modelo)
                {
                    let me  =   this;

                    switch(modelo)
                    {
                        case 'informacion':
                        {
                            me.modal_principal        =   0;
                            me.accion_principal       =   0;
                            me.boton_principal        =   0;
                            me.titulo_principal       =   '';
                            $('#modal_principal').modal('hide');

                            break;
                        }
                        case 'validacion':
                        {
                            me.modal_validacion        =   0;
                            me.accion_validacion       =   0;
                            me.boton_validacion        =   0;
                            me.titulo_validacion       =   '';
                            $('#modal_validacion').modal('hide');

                            break;
                        }
                        case 'archivo':
                        {
                            me.modal_adjunto        =   0;
                            me.accion_adjunto       =   0;
                            me.boton_adjunto        =   0;
                            me.titulo_adjunto       =   '';
                            $('#modal_adjunto').modal('hide');

                            break;
                        }
                        case 'mensaje':
                        {
                            me.modal_mensaje    =   1;
                            me.accion_mensaje   =   1;
                            me.titulo_mensaje   =   '';
                            $('#modal_mensaje').modal('hide');

                            break;
                        }
                    }
                },
                //-------------------------------------------------------------------------------------------
                limpiarDatos(accion)
                {
                    let me  =   this;

                    switch(accion)
                    {
                        case 'informacion':
                        {
                            me.arr_info             =   [];

                            break;
                        }
                        case 'anexar':
                        {
                            me.arr_files            =   '';
                            me.arr_files_obs        =   '';
                            me.file_observacion     =   '';

                            break;
                        }
                        case 'revisar':
                        {
                            me.arr_archivo  =   [];

                            break;
                        }
                    }
                },
                //-------------------------------------------------------------------------------------------
                zonaDeEspera(titulo, tiempo)
                {
                    Swal.fire({
                        title : '<h5>'+titulo+'</h5>',
                        html: '<strong> </strong>',
                        showConfirmButton: false,
                        timer: tiempo,
                        onBeforOpen: () => {
                            Swal.showLoading()
                        },
                    }).then((result) => {
                        if(result.dismiss == Swal.DismissReason.timer)
                        {
                            //----------------------------------------
                        }
                    });
                },
                //-------------------------------------------------------------------------------------------
                desplegarVentana(tp_icon, titulo, mensaje)
                {
                    let me          =   this;
                    var tp_btn      =   true;

                    /*
                        icon list
                        - success 
                        - error 
                        - warning 
                        - info 
                        - question
                    */

                    Swal.fire({
                        type: tp_icon,
                        title: titulo,
                        text: mensaje,
                        showConfirmButton: tp_btn
                    });
                },
                //-------------------------------------------------------------------------------------------
            },

            mounted() {
                let me = this;
                me.cargarDatos();
                me.cargarDataDefault();
                $('.tp_bloquear').prop('disabled',true);
                //$('select').not('.tp_editar').not('#dir_municipal').not('#prioridad').attr('disabled',true);
                //$('textarea').not('.tp_editar').attr('disabled',true);
                $('button').not('.btn_activo').attr('disabled',true);
            }
        });
    </script>

    <script type="text/javascript">
        //-----------------------------------------------------------------
        $(document).ready(function(){
            /*----- Inicio - Filtrar -----*/
            $("#btn_filtrar_datos").click(function () {
                $content = $("#filtrar_datos");
                $content.slideToggle(500, function () {
                    // ---------------------------                    
                });
            });

            $("#close_filtrar_datos").click(function () {
                $content = $("#filtrar_datos");
                $content.slideToggle(500, function () {
                    // ---------------------------                    
                });
            });
            /*----- Inicio - Modal -----*/            
        });
        //-----------------------------------------------------------------
        function justNumbers(e)
        {
            var keynum = window.event ? window.event.keyCode : e.which;
            if (keynum == 8)
                return true;

            return /\d/.test(String.fromCharCode(keynum));
        }
        //-----------------------------------------------------------------
    </script>
@endsection