@extends('template.home')

@section('body')
<div class="page-content">
    <div class="container-fluid" id="app">
        <div class="row">
            <div class="col-12">
                <div class="page-title-box d-sm-flex align-items-center justify-content-between">
                    <h4 class="mb-sm-0 font-size-18">Bandeja de Solicitudes</h4>
                    <div class="page-title-right">
                        <ol class="breadcrumb m-0">
                            <li class="breadcrumb-item"><a href="javascript: void(0);">Solicitudes</a></li>
                            <li class="breadcrumb-item active">Bandeja de Solicitudes</li>
                        </ol>
                    </div>
                </div>

                <!-- Filtros Especificos -->
                <div class="row mb-3 not-print">
                    <div class="col-lg-3 col-md-6 col-sm-6" style="text-align:left;">
                        <!-- Filtro por Estado -->
                        <div class="row">
                            <div class="col-md-3">
                                <label class="form-control-label">
                                        Filtro por Estado
                                </label>
                            </div>
                            <div class="col-md-8">
                                <select @change="cargarDatos()"  v-model="fl_mostrar" class="form-control estados">
                                    <option v-for="item in arr_mostrar" :value="item.value" v-text="item.label"></option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-3 col-md-6 col-sm-6" style="text-align: left;">
                        <div class="col-md-12">
                            <div class="row">
                                <div class="col-md-4">
                                    <label class="form-control-label">
                                        Filtro por Rango de Fechas
                                    </label>
                                </div>
                                <div class="col-md-8">
                                    <div class="input-group">
                                        <input type="text" class="form-control" name="fc_desde" id="fc_desde" placeholder="Desde" />
                                        <input type="text" class="form-control" name="fc_hasta" id="fc_hasta" placeholder="Hasta" />
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-4 col-md-6 col-sm-6" style="text-align:right;">
                        <div class="row">
                            <div class="col-md-2">
                                <label class="form-control-label">
                                    Ordenar Por
                                </label>
                            </div>
                            <div class="col-md-9">
                                <div class="input-group">
                                <select v-model="tp_criterio" @change="cargarDatos()" class="form-control">
                                    <option value="id">Ticket</option>
                                    <option value="id_macroterritorio">Macrozona</option>
                                    <option value="id_unidadvecinal">Unidad Vecinal</option>
                                    <option value="nm_direccion">Dirección Municipal</option>
                                    <option value="nm_depto">Depto. Municipal</option>
                                    <option value="nm_estado">Estado</option>
                                    <option value="created_at">Fecha Ingreso</option>
                                </select>
                                <select v-model="tp_orden" @change="cargarDatos()" class="form-control">
                                    <option value="ASC">Ascendente</option>
                                    <option value="DESC">Descendente</option>
                                </select>
                            </div>
                            </div>                                
                        </div>                            
                    </div>
                    <div class="col-lg-2 col-md-6 col-sm-6" style="text-align:right">
                        <button id="btn_actualizar" 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>

                <!-- Filtro Generales - Tabla de Datos - Paginacion -->
                <div class="row">
                    <!-- Filtro de Datos -->
                    <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 style="color:white;">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>
                                        <!-- Dirección Municipal -->
                                        <div class="col-md-4 col-sm-6 mt-2">
                                            <div class="form-group">
                                                <label class="form-control-label">
                                                    Dirección Municipal :
                                                </label>
                                                <multiselect 
                                                    :show-labels="false"
                                                    :searchable="true"
                                                    v-model="fl_direccion"
                                                    :options="arr_direccion" 
                                                    @select="asyncDeptos" 
                                                    :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>
                                        <!-- Depto Municipal -->
                                        <div class="col-md-4 col-sm-6 mt-2">
                                            <div class="form-group">
                                                <label class="form-control-label">
                                                    Depto Municipal :
                                                </label>
                                                <multiselect 
                                                    :show-labels="false"
                                                    :searchable="true"
                                                    v-model="fl_depto"
                                                    :options="arr_depto" 
                                                    @select="asyncServicios" 
                                                    :multiple="false"
                                                    :showNoOptions=false
                                                    placeholder="Depto Municipal"
                                                    label="label" track-by="label">
                                                        <span slot="noResult">No se han encontrado resultados</span>
                                                </multiselect>
                                            </div>
                                        </div>
                                        <!-- Servicio -->
                                        <div class="col-md-4 col-sm-6 mt-2">
                                            <div class="form-group">
                                                <label class="form-control-label">
                                                    Servicio :
                                                </label>
                                                <multiselect
                                                    :show-labels="false" 
                                                    :searchable="true" 
                                                    v-model="fl_servicio" 
                                                    :options="arr_servicio" 
                                                    :multiple="false" 
                                                    :showNoOptions="false" 
                                                    placeholder="Servicio" 
                                                    label="label" track-by="label">
                                                        <span slot="noResult">No se han encontrado resultados</span>
                                                </multiselect>
                                            </div>
                                        </div>
                                        <!-- Macrozona -->
                                        <div class="col-md-4 col-sm-6 mt-2">
                                            <div class="form-group">
                                                <label class="form-control-label">
                                                    Macrozona :
                                                </label>
                                                <multiselect 
                                                    :show-labels="false"
                                                    :searchable="true"
                                                    v-model="fl_macrozona"
                                                    :options="arr_macrozona"
                                                    :multiple="false"
                                                    :showNoOptions=false
                                                    placeholder="Unidad Vecinal"
                                                    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 mt-2">
                                            <div class="form-group">
                                                <label class="form-control-label">
                                                    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>
                                        <!-- Tipo Ingreso -->
                                        <div class="col-md-2 col-sm-6 mt-2">
                                            <div class="form-group">
                                                <label class="form-control-label">
                                                    Tipo Ingreso :
                                                </label>
                                                <multiselect 
                                                    :show-labels="false"
                                                    :searchable="true"
                                                    v-model="fl_ingreso"
                                                    :options="arr_ingreso" 
                                                    :multiple="false"
                                                    :showNoOptions=false
                                                    placeholder="Tipo Ingreso"
                                                    label="label" track-by="label">
                                                        <span slot="noResult">No se han encontrado resultados</span>
                                                </multiselect>
                                            </div>
                                        </div>
                                        <!-- Ticket -->
                                        <div class="col-md-2 col-sm-6 mt-2">
                                            <div class="form-group">
                                                <label class="form-control-label">
                                                    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>
                                        <!-- Solicitante -->
                                        <div class="col-md-4 col-sm-6 mt-2">
                                            <div class="form-group">
                                                <label class="form-control-label">
                                                    Solicitante :
                                                </label>
                                                <multiselect
                                                    :show-labels="false"
                                                    :searchable="true"
                                                    v-model="fl_persona"
                                                    :options="arr_persona"
                                                    :multiple="false"
                                                    :showNoOptions=false
                                                    placeholder="Solicitante"
                                                    label="label" track-by="label">
                                                        <span slot="noResult">No se han encontrado resultados</span>
                                                </multiselect>
                                            </div>
                                        </div>
                                        <!-- Motivo -->
                                        <div class="col-md-4 col-sm-6 mt-2">
                                            <div class="form-group">
                                                <label class="form-control-label">
                                                    Tipo Requerimiento :
                                                </label>
                                                <multiselect
                                                    :show-labels="false"
                                                    :searchable="true"
                                                    v-model="fl_motivo"
                                                    :options="arr_motivo"
                                                    :multiple="false"
                                                    :showNoOptions=false
                                                    placeholder="Tipo Requerimiento"
                                                    label="label" track-by="label">
                                                        <span slot="noResult">No se han encontrado resultados</span>
                                                </multiselect>
                                            </div>
                                        </div>
                                        <!-- Ubicación del Problema -->
                                        <div class="col-md-4 col-sm-6 mt-2">
                                            <div class="form-group">
                                                <label class="form-control-label">
                                                    Dirección del Requerimiento :
                                                </label>
                                                <multiselect
                                                    :show-labels="false"
                                                    :searchable="true"
                                                    v-model="fl_ubicacion"
                                                    :options="arr_ubicaciones"
                                                    :multiple="false"
                                                    :showNoOptions=false
                                                    placeholder="Dirección del Requerimiento"
                                                    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>

                    <!-- Tabla de Datos -->
                    <div class="responsive-table">
                        <table  class="table table-bordered border-info table-striped table-sm table-hover bl-1">
                            <thead class="bg-primary">
                                <th colspan="15" >
                                    <h6 class="text-center" style="color:white" >
                                        Listado de Solicitudes
                                    </h6>
                                </th>
                            </thead>
                            <thead class="bg-primary"  style="color:white">
                                <th class="text-center"> # </th>
                                <th class="text-center not-print" style="min-width:100px;">Opciones</th>
                                <th class="text-center">Ticket</th>
                                <th class="text-center">Tipo de Requerimiento</th>
                                <th class="text-center" :class="{'not-print':arr_usuario.id_rol != 7}">Dirección Municipal</th>
                                <th class="text-center">Servicio</th>
                                <th class="text-center">Tipo Ingreso</th>
                                <th class="text-center">Macrozona</th>
                                <th class="text-center">Unidad Vecinal</th>
                                <th class="text-center">Ubicación</th>
                                <th class="text-center">Tiempo Tramitado</th>
                                <th class="text-center">Tiene Publicación Parcial</th>
                                <th class="text-center">Estado</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 class="not-print" style="text-align:center;">
                                            <div class="dropdown">
                                                <button class="btn btn-secondary" type="button" id="menu_opcion" data-bs-toggle="dropdown" aria-expanded="false">
                                                    Opción <i class="mdi mdi-chevron-down"></i>
                                                </button>
                                                <div class="dropdown-menu" aria-labelledby="menu_opcion">
                                                    <!-- Revisar Solicitud -->
                                                    <a href="#" class="dropdown-item" 
                                                        @click="abrirModal('solicitud', 'historial', datos)">
                                                            <i class="fas fa-history" style="color: blue;"></i>
                                                            Revisar Solicitud
                                                    </a>
                                                    <!-- Actualizar Solicitud -->
                                                    <a href="#" class="dropdown-item" v-if="datos.id_estado != 6" 
                                                        @click="abrirModal('solicitud', 'actualizar', datos)">
                                                            <i class="fas fa-edit" style="color: green;"></i>
                                                            Actualizar Solicitud
                                                    </a>
                                                </div>
                                            </div>
                                        </td>
                                        <td style="text-align:center;">
                                            @{{ datos.nr_ticket }}
                                        </td>
                                        <td style="text-align:center;">
                                            @{{ datos.nm_motivo }}
                                        </td>
                                        <td :class="{'not-print':arr_usuario.id_rol != 7}" style="text-align:left; color: black;">
                                            @{{ datos.nm_direccion_destino }}
                                        </td>
                                        <td style="text-align:left;">
                                            @{{ datos.nm_tipo }}
                                        </td>
                                        <td style="text-align:left;">
                                            @{{ datos.nm_ingreso }}
                                        </td>
                                        <td  style="text-align:center; color: black;">
                                            @{{ datos.cod_territorio }}
                                        </td>                                        
                                        <td style="text-align:center;">
                                            @{{ datos.nm_unidadvecinal }}
                                        </td>
                                        <td style="text-align:left;">
                                            @{{ datos.nm_ubicacion }}
                                        </td>
                                        <td style="text-align:center;">
                                            @{{ datos.tiempo_tramitado }}
                                        </td>
                                        <td style="text-align: center;">
                                            @{{ datos.tiene_pp }}
                                        </td>
                                        <td style="text-align:center;" :style="{'background-color':datos.nm_color}">
                                            <span style="font-weight: bold !important;">@{{ datos.nm_estado }}</span>
                                        </td>
                                    </tr>
                                </template>
                                <template v-else>
                                    <tr>
                                        <td colspan="15">
                                            <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">
                        <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>

        <!-- Modal Historial -->
        <div class="modal" tabindex="-1" id="modal_historial">
            <div class="modal-dialog modal-dialog-scrollable modal-xl">
                <div class="modal-content">
                  <div class="modal-header bg-primary">
                    <h5 class="modal-title text-white" id="title_mdoal">@{{ titulo_modal }}
                        <template v-if="nr_ticket">@{{ ' - #' + nr_ticket }}</template> 
                        <template v-if="nr_ticket">@{{ ' - Estado Actual : ' + nm_estado }}</template>
                    </h5>
                    <button type="button" class="btn-close" @click="cerrarModal('historial')" aria-label="Close"></button>
                  </div>
                  <div class="modal-body">
                        <ul class="verti-timeline list-unstyled">
                            <li :class="{'active':index == arr_historial.length -1}" class="event-list" v-for="(hist, index) in arr_historial">
                                <div class="event-timeline-dot">
                                    <i v-if="index == arr_historial.length -1" class="bx bx-right-arrow-circle bx-fade-right"></i>
                                    <i v-else class="bx bx-right-arrow-circle"></i>
                                </div>
                                <!-- Ingresada -->
                                <div class="d-flex" v-if="index == 0">
                                    <div class="flex-shrink-0 me-3">
                                        <i  class="bx bx-save h2 text-primary"></i>
                                    </div>
                                    <div class="flex-grow-1">
                                        <div>
                                            <!-- Datos de Cabecera -->
                                            <span style="float: right;">Duración @{{hist.fc_diferencia}} Días</span>
                                            <h5 > Solicitud ingresada a las @{{hist.fc_inicio}}</h5>
                                            <p class="text-muted">Solicitud 
                                                <strong>#@{{hist.nr_ticket}}</strong> 
                                                <span v-if="arr_solicitud.solicitud">clonada por </span>
                                                <span v-else>ingresada por </span>
                                                <strong>@{{hist.nm_autor}}</strong>
                                            </p>

                                            <!-- Solicitud Origen -->
                                            <div v-if="arr_solicitud.solicitud" class="row mt-2">
                                                <div class="col-lg-8 col-md-12 col-sm-12 pt-2 rounded-3" style="background-color: beige;">
                                                    <h5>
                                                        <i class="fas fa-exclamation-triangle" style="color:goldenrod;"></i>
                                                        - Solicitud Clonada
                                                    </h5>
                                                    <p class="ps-5">
                                                        <strong>Ticket Original: </strong> @{{arr_solicitud.solicitud.nr_ticket }} <br>
                                                        <strong>Servicio Origen:</strong>  @{{ arr_solicitud.solicitud.nm_tipo }} <br>
                                                        <strong>Depto. Origen:</strong>  @{{ arr_solicitud.solicitud.nm_depto }} <br>
                                                        <strong>Dirección Origen:</strong>  @{{ arr_solicitud.solicitud.nm_direccion }} <br>
                                                        <template v-if="arr_solicitud.str_clonado_html">
                                                            <strong>Descripción:</strong> 
                                                            <span v-html="arr_solicitud.str_clonado_html"></span>
                                                        </template>
                                                    </p>
                                                </div>
                                            </div>

                                            <!-- Datos de Vecino -->
                                            <div v-if="arr_solicitud.vecino" class="mt-2">
                                                <h5>- Vecino Asociado</h5>
                                                <p>
                                                    <strong>Nombre: </strong> @{{arr_solicitud.vecino.nmc_vecino }} <br>
                                                    <strong>Rut:</strong>  @{{ arr_solicitud.vecino.nr_rut }} <br>
                                                    <strong>Domicilio:</strong> 
                                                        <a target="_blank" :href="'https://maps.google.com/?q='+arr_solicitud.vecino.nm_ubicacion+'&z=15&t=m'">
                                                            @{{ arr_solicitud.vecino.nm_ubicacion }}
                                                        </a> <br>
                                                    <strong>Correo:</strong>  @{{ arr_solicitud.vecino.nm_mail }}<br>
                                                    <strong>Télefono:</strong> @{{ arr_solicitud.vecino.nr_prefijo + arr_solicitud.vecino.nr_telefono }}
                                                </p>
                                            </div>

                                            <!-- Datos de la Solicitud -->
                                            <div class="mt-2" v-if="arr_solicitud.derivacion.length">
                                                <h5>- Datos de la Solicitud</h5>
                                                <ul class="verti-timeline list-unstyled">
                                                    <li class="event-list mb-1 pb-0" v-for="(derivar, indice) in arr_solicitud.derivacion">
                                                        <div class="event-timeline-dot">
                                                            <i v-if="(indice == (arr_solicitud.derivacion.length -1))" class="bx bx-right-arrow-circle bx-fade-right"></i>
                                                            <i v-else class="bx bx-right-arrow-circle"></i>
                                                        </div>
                                                        <!-- <hr class="mt-1 mb-1" style="border-top: 3px dashed black;" v-if="indice == 0">-->
                                                        <div class="d-flex" v-if="indice == 0">
                                                            <div class="flex-shrink-0 me-3">
                                                                <i class="bx bx-show-alt h2 text-primary" v-if="(indice == (arr_solicitud.derivacion.length -1))"></i>
                                                                <i class="bx bx-show-alt h2 text-secundary" v-else></i>
                                                            </div>
                                                            <div class="flex-grow-1">
                                                                <div>
                                                                    <h5 class="text-primary" v-if="(indice == (arr_solicitud.derivacion.length -1))"> - Solicitud Inicial</h5>
                                                                    <h5 class="text-secundary" v-else> - Solicitud Inicial</h5>
                                                                    <strong>Servicio : </strong> @{{ derivar.nm_tipo }} <br>
                                                                    <strong>Dirección : </strong> @{{ derivar.nm_direccion }} <br>
                                                                    <strong>Depto. : </strong> @{{ derivar.nm_depto }} <br>
                                                                    <strong>Fecha Ingreso : </strong> @{{ derivar.fc_inicio | formatDateTime }}
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="d-flex" v-else>
                                                            <div class="flex-shrink-0 me-3">
                                                                <i class="bx bx-show-alt h2 text-primary" v-if="(indice == (arr_solicitud.derivacion.length -1))"></i>
                                                                <i class="bx bx-show-alt h2 text-secundary" v-else></i>
                                                            </div>
                                                            <div class="flex-grow-1">
                                                                <div>
                                                                    <h5 class="text-primary" v-if="(indice == (arr_solicitud.derivacion.length -1))"> - Solicitud Derivada</h5>
                                                                    <h5 class="text-secundary" v-else> - Solicitud Derivada</h5>
                                                                    <strong>Servicio : </strong> @{{ derivar.nm_tipo }} <br>
                                                                    <strong>Dirección : </strong> @{{ derivar.nm_direccion }} <br>
                                                                    <strong>Depto. : </strong> @{{ derivar.nm_depto }} <br>
                                                                    <strong>Fecha Derivación : </strong> @{{ derivar.fc_inicio | formatDateTime }}
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <!--<hr class="mt-1 mb-1" style="border-top: 3px dashed black;">-->
                                                    </li>
                                                </ul>
                                                <div class="col-12 mt-2">
                                                    <h5>- Descripción de la Solicitud</h5>
                                                    <strong>Ubicación : </strong>
                                                        <a target="_blank" :href="'https://maps.google.com/?q='+arr_solicitud.nm_ubicacion+', San Miguel&z=15&t=m'">
                                                            @{{ arr_solicitud.nm_ubicacion }}
                                                        </a> <br>
                                                    <template v-if="arr_solicitud.str_aclaratoria">
                                                        <strong>Aclaratoria : </strong> @{{ arr_solicitud.str_aclaratoria }} <br>
                                                    </template>
                                                    <strong>Descripción : </strong> <span v-html="hist.str_solicitud_html" class="mb-0 pb-0"></span>
                                                </div>
                                            </div>

                                            <!-- Tabla de archivos -->
                                            <div v-if="arr_solicitud.archivos.length" class="table-responsive">
                                                <table class="table table-sm table-bordered">
                                                    <thead class="bg-primary">
                                                        <th colspan="3" class="text-center text-white"> Archivos Adjuntos</th>
                                                    </thead>
                                                    <thead>
                                                        <th>Opción</th>
                                                        <th>Nombre</th>
                                                        <th>Descripción</th>
                                                    </thead>
                                                    <tbody>
                                                        <tr v-for="(item,index) in arr_solicitud.archivos">
                                                            <td>
                                                                <a target="_blank" :href="'/files/get?ruta='+item.str_archivo" 
                                                                    class="btn btn-md btn-success btn-sm" style="margin-left: 5px;">
                                                                        <i  class="bx bxs-download"></i>
                                                                </a>
                                                            </td>
                                                            <td>@{{item.nm_archivo}}</td>
                                                            <td>@{{item.str_observacion}}</td>
                                                        </tr>
                                                    </tbody>
                                                </table>                                               
                                            </div>

                                            <!-- Registro de Observacion -->
                                            <div class="form-group mt-1 not-print" v-if="nr_estado == 1">
                                                <label> Observación : </label>
                                                <div id="txt_visado"></div>
                                                <small class="form-text text-muted">
                                                    <span>Cantidad maxima de caracteres a utilizar 2000</span>
                                                </small> 
                                                <small class="text-error text-danger" v-if="arr_form.str_visado"  v-text="arr_form.str_visado"></small>
                                            </div>

                                            <!-- Botones -->
                                            <div v-if="nr_estado == 1" class="mt-1 not-print" style="float: right;">
                                                <button v-if="btn_aprobar == 0" class="btn btn-sm btn-warning btn_aprobar" 
                                                    @click="abrirModal('solicitud','aprobar',arr_solicitud)">
                                                    Aprobar <i class="bx bx-check-double"></i> 
                                                </button>
                                                <button v-else class="btn btn-sm btn-warning">
                                                    Aprobando <i class="bx bx-loader-circle"></i> 
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <!-- Por Asignar -->
                                <div class="d-flex" v-if="hist.id_estado == 2">
                                    <div class="flex-shrink-0 me-3">
                                        <i  class="bx bx-search h2 text-primary"></i>
                                    </div>
                                    <div class="flex-grow-1">
                                        <div>
                                            <!-- Datos de Cabecera -->
                                            <span style="float: right;">Duración @{{hist.fc_diferencia}} Días</span>
                                            <span>Estado :  <strong v-text="hist.nm_estado"></strong></span> 
                                            <p class="text-muted mb-0">Solicitud 
                                                <strong>#@{{hist.nr_ticket}}</strong> ingresada por 
                                                <strong>@{{hist.nm_autor}}</strong>
                                            </p>
                                            <strong>Observación Visado :</strong> <span v-html="hist.str_observacion_html"></span>
                                        </div>
                                    </div>
                                </div>

                                <template v-if="hist.id_estado == 3">
                                    <div class="page-break-after"></div>    
                                </template>

                                <!-- Revisión -->
                                <div class="d-flex" v-if="hist.id_estado == 3">
                                    <div class="flex-shrink-0 me-3">
                                        <i  class="bx bx-search h2 text-primary"></i>
                                    </div>
                                    <div class="flex-grow-1">
                                        <div>
                                            <!-- Datos de Cabecera -->
                                            <span style="float: right;">Duración @{{hist.fc_diferencia}} Días</span>
                                            <span>Estado :  <strong v-text="hist.nm_estado"></strong></span> 
                                            <p class="text-muted mb-0">Solicitud 
                                                <strong>#@{{hist.nr_ticket}}</strong> ingresada por 
                                                <strong>@{{hist.nm_autor}}</strong>
                                            </p>
                                            <strong>Observación Asignación :</strong> <span v-html="hist.str_observacion_html"></span>
                                            <button type="button" @click="abrirModal('archivo', 'examinar', arr_solicitud)" 
                                                class="btn btn-primary btn-sm" title="Revisar Adjuntos" v-if="arr_solicitud.archivos_asignacion.length">
                                                    <i class="fas fa-paperclip"></i>
                                            </button>

                                            <!-- Tabla de Encargados -->
                                            <div class="col-lg-12 col-md-12 col-sm-12 table-responsive mt-2" v-if="arr_asignados.length && (index == arr_historial.length -1)">
                                                <table class="table table-bordered table-striped table-sm">
                                                    <thead>
                                                        <tr class="bg-primary">
                                                            <th colspan="5" class="text-center" style="color: white;">Lista de Funcionarios</th>
                                                        </tr>
                                                        <tr>
                                                            <th style="min-width:100px; text-align:center;">#</th>
                                                            <th style="min-width:150px; text-align:center;">Dirección</th>
                                                            <th style="min-width:200px; text-align:center;">Departamento</th>
                                                            <th style="min-width:100px; text-align:center;">Nombre</th>
                                                        </tr>
                                                    </thead>
                                                    <tbody>
                                                        <template v-if="arr_asignados.length">
                                                            <tr v-for="(asignado, index) in arr_asignados" :key="asignado.value">
                                                                <td class="text-center">@{{ (index + 1) }}</td>
                                                                <td class="text-center">@{{ asignado.nm_direccion }}</td>
                                                                <td class="text-center">@{{ asignado.nm_depto }}</td>
                                                                <td class="text-center">@{{ asignado.nm_funcionario }}</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>

                                            <!-- Tabla de Respuestas -->
                                            <div class="col-md-12 mt-2" v-if="arr_respuestas.length">
                                                <h6> Gestión Interna</h6>
                                                <ul class="timeline col-md-12 col-sm-12 ml-3">
                                                    <li class="mt-0 pt-0 mb-0 pb-0" v-for="(item,index) in arr_respuestas" :key="item.id">
                                                        <div class="timeline-arrow"></div>
                                                        <a class="d-block mb-0" href="#" vi>
                                                            <div class="row">
                                                                <div class="col-lg-8 col-md-6 order-md-first order-last">
                                                                    @{{ item.nm_respuesta + ' - ' + item.usuario | capitalize }} 
                                                                    <button type="button" @click="abrirModal('archivo', 'revisar', item)" 
                                                                        class="btn btn-primary btn-sm" title="Revisar Adjuntos" v-if="item.archivos.length">
                                                                        <i class="fas fa-paperclip"></i>
                                                                    </button>
                                                                </div>
                                                                <div class="col-lg-4 col-md-6 text-right">
                                                                    <i class="far fa-calendar"></i> 
                                                                    @{{ item.fc_ingreso | formatDateTime }}
                                                                </div>
                                                            </div>
                                                        </a>
                                                        <div class="not-print">
                                                            <p class="text-small font-weight-light mb-0">
                                                                <template v-if="getCantidadCaracteres(item.str_observacion) < 300">
                                                                    <span v-html="item.str_observacion_html"></span>
                                                                </template>
                                                                <template v-else>
                                                                    <template v-if="(tp_visualizar.tp_resumir == 0 || tp_visualizar.tp_resumir == 1) && tp_visualizar.nr_index != index">
                                                                            @{{ item.str_observacion | resumir }} 
                                                                            <a href="#" class="link-primary" style="float: right;" @click="setResumir(0, index)"> VER</a>
                                                                    </template>
                                                                    <template v-else>
                                                                        <span v-html="item.str_observacion_html"></span>
                                                                        <a href="#" class="link-primary" style="float: right;" @click="setResumir(1, null)"> ACOTAR</a>
                                                                    </template>
                                                                </template>
                                                            </p>
                                                        </div>
                                                        <div class="to-print-respuesta">
                                                            <p class="text-small font-weight-light mb-0" class="to-print-respuesta" style="display: none;">
                                                                <span v-html="item.str_observacion_html"></span>
                                                            </p>
                                                        </div>
                                                        <hr class="mt-1 mb-1">
                                                    </li>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <!-- Publicada -->
                                <div class="d-flex"  v-if="hist.id_estado == 5">
                                    <div class="flex-shrink-0 me-3">
                                        <i  class="bx bx-check-shield h2 text-primary"></i>
                                    </div>
                                    <div class="flex-grow-1">
                                        <span style="float: right;">Duración @{{hist.fc_diferencia}} Días</span>
                                        <h5 > Solicitud publicada a las @{{hist.fc_inicio}}</h5>
                                        <span>Estado :  <strong v-text="hist.nm_estado"></strong></span>
                                        <p class="text-muted mb-0">Solicitud <strong>#@{{hist.nr_ticket}}</strong> publicada por <strong>@{{hist.nm_autor}}</strong></p>
                                        <strong>Publicación :</strong>
                                        <div class="not-print">
                                            <template v-if="getCantidadCaracteres(hist.str_observacion) < 300">
                                                <span v-html="hist.str_observacion_html"></span>
                                            </template>
                                            <template v-else>
                                                <template v-if="tp_resumir_publicacion == 1">
                                                    @{{ hist.str_observacion | resumir }} 
                                                    <a href="#" class="link-primary" style="float: right;" @click="tp_resumir_publicacion = 0"> VER</a>
                                                </template>
                                                <template v-else>
                                                    <span v-html="hist.str_observacion_html"></span>
                                                    <a href="#" class="link-primary" style="float: right;" @click="tp_resumir_publicacion = 1"> ACOTAR</a>
                                                </template>
                                            </template>
                                        </div>
                                        <div class="to-print-respuesta" style="display: none;">
                                            <span v-html="hist.str_observacion_html"></span>
                                        </div>
                                        <div class="mt-2" v-if="(index == arr_historial.length -1) && hist.tp_feedback_vecino == 1">
                                            <h5>- Feedback Vecino</h5>
                                            <strong>Fecha Feedback :</strong> 
                                                <span v-if="hist.fc_feedback_vecino" v-text="hist.fc_feedback_vecino"></span> <br>
                                            <strong>Nivel Satisfacción :</strong> 
                                                <span v-if="hist.tp_satisfaccion_vecino > 0" v-text="arr_satisfaccion[hist.tp_satisfaccion_vecino].label"></span><br>
                                            <strong>Comentario Feedback :</strong> 
                                            <span v-text="hist.str_feedback_vecino"></span>
                                        </div>
                                    </div>
                                </div>

                                <!-- Finalizada -->
                                <div class="d-flex"  v-if="hist.id_estado == 6">
                                    <div class="flex-shrink-0 me-3">
                                        <i  class="bx bx-user-check h2 text-primary"></i>
                                    </div>
                                    <div class="flex-grow-1">
                                        <span style="float: right;">Duración @{{hist.fc_diferencia}} Días</span>
                                        <h5> Solicitud finalizada a las @{{hist.fc_inicio}}</h5>
                                        <span>Estado :  <strong v-text="hist.nm_estado"></strong></span>
                                        <p class="text-muted mb-0">Solicitud <strong>#@{{hist.nr_ticket}}</strong> finalizada por <strong>@{{hist.nm_autor}}</strong></p>
                                    </div>
                                </div>

                                <!-- Rechazada -->
                                <div class="d-flex" v-if="hist.id_estado == 7">
                                    <div class="flex-shrink-0 me-3">
                                        <i  class="bx bx-trash-alt h2 text-primary"></i>
                                    </div>
                                    <div class="flex-grow-1">
                                        <div>
                                            <span style="float: right;">Duración @{{hist.fc_diferencia}} Días</span>
                                            <span>Estado :  <strong v-text="hist.nm_estado"></strong></span>                                             
                                            <h5 v-if="hist.id_estado == 1"> Solicitud Anulada a las @{{hist.fc_inicio}}</h5>
                                            <p class="text-muted mb-0">Solicitud <strong>#@{{hist.nr_ticket}}</strong> Anulada por <strong>@{{hist.nm_autor}}</strong></p>
                                            <strong v-if="hist.str_observacion">Observación :</strong> <span v-html="hist.str_observacion_html"></span>
                                        </div>
                                    </div>
                                </div>

                                <!-- Derivado a Funcionario -->
                                <div class="d-flex" v-if="hist.id_estado == 8">
                                    <div class="flex-shrink-0 me-3">
                                        <i  class="bx bx-save h2 text-primary"></i>
                                    </div>
                                    <div class="flex-grow-1">
                                        <div>
                                            <!-- Datos de Cabecera -->
                                            <span style="float: right;">Duración @{{hist.fc_diferencia}} Días</span>
                                            <h5 > Solicitud derivada a las @{{hist.fc_inicio}}</h5>
                                            <span>Estado :  <strong v-text="hist.nm_estado"></strong></span>
                                            <p class="text-muted mb-0">Solicitud 
                                                <strong>#@{{hist.nr_ticket}}</strong> derivada por 
                                                <strong>@{{hist.nm_autor}}</strong>
                                            </p>
                                            <strong v-if="hist.str_observacion">Observación :</strong> <span v-html="hist.str_observacion_html"></span>
                                            
                                            <!-- Datos de Solicitud -->
                                            <div class="mt-2">
                                                <h5>- Datos Solicitud</h5>
                                                <p>
                                                    <strong>Servicio : </strong> @{{hist.nm_tipo}} <br>
                                                    <template v-if="hist.servicio">
                                                        <strong>Dirección : </strong> @{{ hist.servicio.nm_direccion }} <br>
                                                        <strong>Depto. : </strong> @{{ hist.servicio.nm_depto }} <br>
                                                    </template>
                                                    <strong>Dirección</strong> : 
                                                        <a target="_blank" :href="'https://maps.google.com/?q='+arr_solicitud.nm_ubicacion+', San Miguel&z=15&t=m'">
                                                            @{{ arr_solicitud.nm_ubicacion }}
                                                        </a> <br>
                                                    <strong>Descripción</strong> : @{{hist.str_sol_observacion}} <br>
                                                </p>
                                            </div>

                                            <!-- Tabla de Encargados -->
                                            <div class="col-lg-12 col-md-12 col-sm-12 table-responsive mt-2" v-if="arr_asignados.length && (index == arr_historial.length -1)">
                                                <table class="table table-bordered table-striped table-sm">
                                                    <thead>
                                                        <tr class="bg-primary">
                                                            <th colspan="5" class="text-center" style="color: white;">Lista de Funcionarios</th>
                                                        </tr>
                                                        <tr>
                                                            <th style="min-width:100px; text-align:center;">#</th>
                                                            <th style="min-width:150px; text-align:center;">Dirección</th>
                                                            <th style="min-width:200px; text-align:center;">Departamento</th>
                                                            <th style="min-width:100px; text-align:center;">Nombre</th>
                                                        </tr>
                                                    </thead>
                                                    <tbody>
                                                        <template v-if="arr_asignados.length">
                                                            <tr v-for="(asignado, index) in arr_asignados" :key="asignado.value">
                                                                <td class="text-center">@{{ (index + 1) }}</td>
                                                                <td class="text-center">@{{ asignado.nm_direccion }}</td>
                                                                <td class="text-center">@{{ asignado.nm_depto }}</td>
                                                                <td class="text-center">@{{ asignado.nm_funcionario }}</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>

                                            <!-- Tabla de Observaciones -->
                                            <div class="col-md-12 mt-2" v-if="arr_respuestas.length">
                                                <h6> Gestión Interna</h6>
                                                <ul class="timeline col-md-12 col-sm-12 ml-3">
                                                    <li class="mt-0 pt-0 mb-0 pb-0" v-for="(item,index) in arr_respuestas" :key="item.id">
                                                        <div class="timeline-arrow"></div>
                                                        <a class="d-block mb-0" href="#" vi>
                                                            <div class="row">
                                                                <div class="col-lg-8 col-md-6 order-md-first order-last">
                                                                    @{{ item.nm_respuesta + ' - ' + item.usuario | capitalize }} 
                                                                    <button type="button" @click="abrirModal('archivo', 'revisar', item)" 
                                                                        class="btn btn-primary btn-sm" title="Revisar Adjuntos" v-if="item.archivos.length">
                                                                        <i class="fas fa-paperclip"></i>
                                                                    </button>
                                                                </div>
                                                                <div class="col-lg-4 col-md-6 text-right">
                                                                    <i class="far fa-calendar"></i> 
                                                                    @{{ item.fc_ingreso | formatDateTime }}
                                                                </div>
                                                            </div>
                                                        </a>
                                                        <div class="not-print">
                                                            <p class="text-small font-weight-light mb-0">
                                                                <template v-if="getCantidadCaracteres(item.str_observacion) < 300">
                                                                    <span v-html="item.str_observacion_html"></span>
                                                                </template>
                                                                <template v-else>
                                                                    <template v-if="(tp_visualizar.tp_resumir == 0 || tp_visualizar.tp_resumir == 1) && tp_visualizar.nr_index != index">
                                                                            @{{ item.str_observacion | resumir }} 
                                                                            <a href="#" class="link-primary" style="float: right;" @click="setResumir(0, index)"> VER</a>
                                                                    </template>
                                                                    <template v-else>
                                                                        <span v-html="item.str_observacion_html"></span>
                                                                        <a href="#" class="link-primary" style="float: right;" @click="setResumir(1, null)"> ACOTAR</a>
                                                                    </template>
                                                                </template>
                                                            </p>
                                                        </div>
                                                        <div class="to-print-respuesta">
                                                            <p class="text-small font-weight-light mb-0" class="to-print-respuesta" style="display: none;">
                                                                <span v-html="item.str_observacion_html"></span>
                                                            </p>
                                                        </div>
                                                        <hr class="mt-1 mb-1">
                                                    </li>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <!-- Derivado a Macrozona-->
                                <div class="d-flex" v-if="hist.id_estado == 9">
                                    <div class="flex-shrink-0 me-3">
                                        <i  class="bx bx-save h2 text-primary"></i>
                                    </div>
                                    <div class="flex-grow-1">
                                        <div>
                                            <!-- Datos de Cabecera -->
                                            <span style="float: right;">Duración @{{hist.fc_diferencia}} Días</span>
                                            <h5 > Solicitud derivada a las @{{hist.fc_inicio}}</h5>
                                            <span>Estado :  <strong v-text="hist.nm_estado"></strong></span>
                                            <p class="text-muted mb-0">Solicitud 
                                                <strong>#@{{hist.nr_ticket}}</strong> derivada por 
                                                <strong>@{{hist.nm_autor}}</strong>
                                            </p>
                                            <strong v-if="hist.str_observacion">Observación :</strong> <span v-html="hist.str_observacion_html"></span>
                                            
                                            <!-- Datos de Solicitud -->
                                            <div class="mt-2">
                                                <h5>- Datos Solicitud</h5>
                                                <p>
                                                    <strong>Servicio : </strong> @{{hist.nm_tipo}} <br>
                                                    <template v-if="hist.servicio">
                                                        <strong>Dirección : </strong> @{{ hist.servicio.nm_direccion }} <br>
                                                        <strong>Depto. : </strong> @{{ hist.servicio.nm_depto }} <br>
                                                    </template>   
                                                    <strong>Dirección</strong> : 
                                                        <a target="_blank" :href="'https://maps.google.com/?q='+arr_solicitud.nm_ubicacion+', San Miguel&z=15&t=m'">
                                                            @{{ arr_solicitud.nm_ubicacion }}
                                                        </a> <br>
                                                    <strong>Descripción</strong> : @{{hist.str_sol_observacion}} <br>
                                                </p>
                                            </div>

                                            <!-- Registro de Observacion -->
                                            <div class="form-group mt-1 not-print" v-if="nr_estado == 9 && (index == arr_historial.length -1)">
                                                <label> Observación : </label>
                                                <div id="txt_visado"></div>
                                                <small class="form-text text-muted">
                                                    <span>Cantidad maxima de caracteres a utilizar 2000</span>
                                                </small> 
                                                <small class="text-error text-danger" v-if="arr_form.str_visado"  v-text="arr_form.str_visado"></small>
                                            </div>

                                            <!-- Botones -->
                                            <div v-if="nr_estado == 9 && (index == arr_historial.length -1)" class="mt-1 not-print" style="float: right;">
                                                <button v-if="btn_aprobar == 0" class="btn btn-sm btn-warning btn_aprobar" 
                                                    @click="abrirModal('solicitud','aprobar',arr_solicitud)">
                                                    Aprobar <i class="bx bx-check-double"></i> 
                                                </button>
                                                <button v-else class="btn btn-sm btn-warning">
                                                    Aprobando <i class="bx bx-loader-circle"></i> 
                                                </button>
                                            </div>                                            
                                        </div>
                                    </div>
                                </div>

                                <!-- Derivado a Asignador-->
                                <div class="d-flex" v-if="hist.id_estado == 10">
                                    <div class="flex-shrink-0 me-3">
                                        <i  class="bx bx-save h2 text-primary"></i>
                                    </div>
                                    <div class="flex-grow-1">
                                        <div>
                                            <!-- Datos de Cabecera -->
                                            <span style="float: right;">Duración @{{hist.fc_diferencia}} Días</span>
                                            <h5 > Solicitud derivada a las @{{hist.fc_inicio}}</h5>
                                            <span>Estado :  <strong v-text="hist.nm_estado"></strong></span>
                                            <p class="text-muted mb-0">Solicitud 
                                                <strong>#@{{hist.nr_ticket}}</strong> derivada por 
                                                <strong>@{{hist.nm_autor}}</strong>
                                            </p>
                                            <strong v-if="hist.str_observacion">Observación :</strong> <span v-html="hist.str_observacion_html"></span>
                                            
                                            <!-- Datos de Solicitud -->
                                            <div class="mt-2">
                                                <h5>- Datos Solicitud</h5>
                                                <p>
                                                    <strong>Servicio : </strong> @{{hist.nm_tipo}} <br>
                                                    <template v-if="hist.servicio">
                                                        <strong>Dirección : </strong> @{{ hist.servicio.nm_direccion }} <br>
                                                        <strong>Depto. : </strong> @{{ hist.servicio.nm_depto }} <br>
                                                    </template>   
                                                    <strong>Dirección</strong> : 
                                                        <a target="_blank" :href="'https://maps.google.com/?q='+arr_solicitud.nm_ubicacion+', San Miguel&z=15&t=m'">
                                                            @{{ arr_solicitud.nm_ubicacion }}
                                                        </a> <br>
                                                    <strong>Descripción</strong> : @{{hist.str_sol_observacion}} <br>
                                                </p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </li>                            
                        </ul>
                  </div>
                  <div class="modal-footer">
                    <div class="col-md-12 col-sm-12 not-print">
                        <button type="button" class="btn btn-md btn-secondary col-lg-2 col-md-3 col-sm-4" style="float: left;" @click="imprimirContenido('modal_historial')">Imprimir</button>
                        <button type="button" class="btn btn-md btn-secondary col-lg-2 col-md-3 col-sm-4" style="float: left; margin-left: 5px;" @click="imprimirPDF(nr_solicitud)">PDF</button>
                        <button type="button" class="btn btn-md btn-secondary col-lg-2 col-md-3 col-sm-4" style="float: right;" @click="cerrarModal('historial')">Cerrar</button>
                    </div>
                  </div>
                </div>
            </div>
        </div>

        <!-- Modal Actualizar -->
        <div class="modal" tabindex="-1" id="modal_actualizar">
            <div class="modal-dialog modal-xl">
                <div class="modal-content">
                    <div class="modal-header bg-primary">
                        <h5 class="modal-title text-white">@{{ titulo_modal }}<template v-if="nr_ticket">@{{ ' - #' + nr_ticket }}</template></h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <div class="col-md-12 col-sm-12 mt-2">
                            <div class="row-flow">
                                <!-- Datos usuarios -->
                                <div class="card mt-2 border-info">
                                    <div class="card-header bg-primary border-info">
                                        <div class="form-check form-check-inline">
                                            <h4 class="form-check-label text-white" for="inlineCheckbox1">Datos Vecino</h4>
                                        </div>
                                        <div class="form-check form-check-inline form-radio-success">
                                            <input @change="noVecino()" :disabled="true" v-model="tp_vecino" class="form-check-input "  type="radio" value="1">
                                            <label class="form-check-label text-white">SI</label>
                                        </div>
                                        <div class="form-check form-check-inline form-radio-success">
                                            <input @change="noVecino()" :disabled="true" v-model="tp_vecino" class="form-check-input " type="radio" value="0" >
                                            <label class="form-check-label text-white">NO</label>
                                        </div>
                                    </div>

                                    <div class="card-body" v-if="tp_vecino == 1">
                                        <div class="row" >
                                            <!-- Rut Vecino -->
                                            <div class="col-md-3 col-sm-6 mb-2">
                                                <div class="form-group">
                                                    <label>Rut Vecino</label>
                                                    <input :disabled="true" type="text" class="form-control vecino tp_bloquear" v-model="rut_vecino">
                                                    <small class="text-error text-danger" v-if="arr_form.rut_vecino"  v-text="arr_form.rut_vecino"></small>
                                                </div>
                                            </div>
                                            <!-- Nombre -->
                                            <div class="col-md-3 col-sm-6 mb-2">
                                                <div class="form-group">
                                                    <label>Nombre</label>
                                                    <input type="text" maxlength="50" :disabled="true" class="form-control vecino tp_bloquear" v-model="nm_vecino">
                                                    <small class="text-error text-danger" v-if="arr_form.nm_vecino"  v-text="arr_form.nm_vecino"></small>
                                                </div>
                                            </div>
                                            <!-- Ap Paterno -->
                                            <div class="col-md-3 col-sm-6 mb-2">
                                                <div class="form-group">
                                                    <label>Apellido Paterno</label>
                                                    <input type="text" maxlength="50" :disabled="true" class="form-control vecino tp_bloquear" v-model="ap_paterno">
                                                    <small class="text-error text-danger" v-if="arr_form.ap_paterno"  v-text="arr_form.ap_paterno"></small>
                                                </div>
                                            </div>
                                            <!-- Ap Materno -->
                                            <div class="col-md-3 col-sm-6 mb-2">
                                                <div class="form-group">
                                                    <label>Apellido Materno</label>
                                                    <input type="text" maxlength="50" :disabled="true" class="form-control vecino tp_bloquear" v-model="ap_materno">
                                                    <small class="text-error text-danger" v-if="arr_form.ap_materno"  v-text="arr_form.ap_materno"></small>
                                                </div>
                                            </div>
                                            <!-- Telfono -->                                                    
                                            <div class="col-md-3 mb-2">
                                                <div class="form-group">
                                                    <label>Teléfono</label>
                                                    <div class=" input-group mb-3">
                                                    <div class="input-group-prepend">                                                        
                                                        <div class="input-group-text">
                                                        <select v-model="nr_prefijo" :disabled="true" class="vecino tp_bloquear">
                                                            <option value="+569">+569</option>
                                                            <option value="+562">+562</option>
                                                        </select>
                                                        </div>
                                                    </div>
                                                    <input v-model="nr_telefono" :disabled="true" type="text" maxlength="8" type="text" class="form-control vecino tp_bloquear" 
                                                            onkeypress="return justNumbers(event);">                                                    
                                                    </div>
                                                    <small class="text-error text-danger" v-if="arr_form.nr_telefono"  v-text="arr_form.nr_telefono"></small>
                                                </div>
                                            </div>
                                            <!-- Mail -->
                                            <div class="col-md-3 col-sm-6 mb-2">
                                                <div class="form-group">
                                                    <label>Mail</label>
                                                    <input type="text" maxlength="50" :disabled="true" class="form-control vecino tp_bloquear" v-model="mail_vecino">
                                                    <small class="text-error text-danger" v-if="arr_form.mail_vecino"  v-text="arr_form.mail_vecino"></small>
                                                </div>
                                            </div>
                                            <!-- Direccion Vecino -->
                                            <div class="col-md-4 mb-2">
                                                <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="asyncCallesVecino"
                                                        label="label" track-by="label">
                                                            <span slot="noResult">No se han encontrado resultados</span>
                                                    </multiselect>
                                                    <small class="text-error text-danger" v-if="arr_form.nm_ubicacion_vecino"  v-text="arr_form.nm_ubicacion_vecino"></small>
                                                </div>
                                            </div>
                                            <!-- Clasificacion de ubicacion vecino -->
                                            <div class="col-md-2 col-sm-6 mb-2">
                                                <div class="form-group">
                                                    <label>Casa/Depto/Oficina</label>
                                                    <select v-model="tp_ubicacion_vecino" :disabled="true" class="form-control vecino tp_bloquear">
                                                        <option value="1">Casa</option>
                                                        <option value="2">Depto</option>
                                                        <option value="3">Oficina</option>
                                                    </select>
                                                    <small class="text-error text-danger" v-if="arr_form.tp_ubicacion_vecino"  v-text="arr_form.tp_ubicacion_vecino"></small>
                                                </div>
                                            </div>
                                            <!-- Aclaratoria -->
                                            <div class="col-md-4 col-sm-6 mb-2">
                                                <div class="form-group">
                                                    <label>Aclaratoria</label>
                                                    <input type="text" :disabled="true" maxlength="50" class="form-control vecino tp_bloquear" v-model="str_aclara_vecino">
                                                </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" style="color:white">Datos Solicitud  </h4>
                                    </div>
                                    <div class="card-body">
                                        <div class="row">
                                            <!-- Motivo -->
                                            <div class="col-md-3 col-sm-6 mb-2">
                                                <div class="form-group">
                                                    <label>Tipo Requerimiento</label>
                                                    <multiselect 
                                                        :show-labels="false"
                                                        :searchable="true"
                                                        v-model="nr_motivo"
                                                        :options="arr_motivo"
                                                        :multiple="false"
                                                        :showNoOptions ="false" 
                                                        placeholder="Seleccione Tipo de Requerimiento"
                                                        label="label"                                                                 
                                                        track-by="label">
                                                        <span slot="noResult">No se han encontrado resultados</span>
                                                    </multiselect>
                                                     <small class="text-error text-danger" v-if="arr_form.nr_motivo"  v-text="arr_form.nr_motivo"></small>
                                                </div>
                                            </div>
                                            <!-- Importancia -->
                                            <div class="col-md-2 col-sm-6 mb-2">
                                                <div class="form-group">
                                                    <label>Importancia</label>
                                                    <select class="form-control" v-model="nr_prioridad">
                                                        <option v-for="nodo in arr_prioridad" :value="nodo.value" v-text="nodo.label"></option>
                                                    </select>
                                                     <small class="text-error text-danger" v-if="arr_form.nr_prioridad"  v-text="arr_form.nr_prioridad"></small>
                                                </div>
                                            </div>
                                            <!-- Direccion Municipal -->
                                            <div class="col-md-6 col-sm-6 mb-2">
                                                <div class="form-group">
                                                    <label>Dirección Municipal</label>
                                                    <multiselect 
                                                        :show-labels="false"
                                                        :searchable="true"
                                                        v-model="nr_direccion"
                                                        :options="arr_direccion"
                                                        :multiple="false"
                                                        :showNoOptions ="false" 
                                                        @select="asyncServiciosForDireccion" 
                                                        placeholder="Seleccionar Dirección Municipal" 
                                                        :disabled="true"
                                                        label="label"                                                                 
                                                        track-by="label">
                                                        <span slot="noResult">No se han encontrado resultados</span>
                                                    </multiselect>
                                                     <small class="text-error text-danger" v-if="arr_form.nr_direccion"  v-text="arr_form.nr_direccion"></small>
                                                </div>
                                            </div>
                                            <!-- Tipo Servicio -->
                                            <div class="col-md-6 col-sm-6 mb-2">
                                                <div class="form-group">
                                                    <label>Servicio</label>
                                                    <multiselect 
                                                        :show-labels="false"
                                                        :searchable="true"
                                                        v-model="nr_servicio"
                                                        :options="arr_servicio"
                                                        :multiple="false"
                                                        :showNoOptions ="false" 
                                                        placeholder="Seleccione Servicio" 
                                                        :disabled="true" 
                                                        label="label"                                                                 
                                                        track-by="label">
                                                        <span slot="noResult">No se han encontrado resultados</span>
                                                    </multiselect>
                                                     <small class="text-error text-danger" v-if="arr_form.nr_servicio"  v-text="arr_form.nr_servicio"></small>
                                                </div>
                                            </div>                                            
                                            <!-- Ubicacion problema -->
                                            <div class="col-md-4 col-sm-6 mb-2">
                                                <div class="form-group">
                                                    <label>Dirección del Requerimiento</label>
                                                    <multiselect 
                                                        :show-labels="false"
                                                        :searchable="true"
                                                        v-model="arr_direccion_solicitud"
                                                        :options="arr_calles_solicitud"
                                                        :multiple="false"
                                                        :showNoOptions =false
                                                        placeholder="Seleccione Dirección" 
                                                        :disabled="true"
                                                        label="label" 
                                                        @search-change="asyncCallesSolicitud"
                                                        track-by="label">
                                                            <span slot="noResult">No se han encontrado resultados</span>
                                                    </multiselect>
                                                     <small class="text-error text-danger" v-if="arr_form.nm_ubicacion_solicitud"  v-text="arr_form.nm_ubicacion_solicitud"></small>
                                                </div>
                                            </div>
                                             <!-- tipo aclaracion direccion -->
                                            <div class="col-md-2 col-sm-6 mb-2">
                                                <div class="form-group">
                                                    <label >Frente/Altura</label>
                                                    <select class="form-control" v-model="tp_ubicacion_solicitud" :disabled="true">
                                                        <option value="1">Frente</option>
                                                        <option value="3">Altura</option>
                                                    </select>
                                                     <small class="text-error text-danger" v-if="arr_form.tp_ubicacion_solicitud"  v-text="arr_form.tp_ubicacion_solicitud"></small>
                                                </div>
                                            </div>
                                            <!-- Aclaratoria -->
                                            <div class="col-md-6 col-sm-6 mb-2">
                                                <div class="form-group">
                                                    <label>Aclaratoria</label>
                                                    <input type="text" maxlength="50" class="form-control  vecino" v-model="str_aclara_solicitud" :disabled="true">
                                                </div>
                                            </div>
                                            <!-- Descripcion Solicitud -->
                                            <div class="col-md-12 col-sm-12 mb-2">
                                                <div class="form-group">
                                                    <label>Descripción Solicitud :</label>
                                                    <textarea maxlength="2000" rows="2" v-model="str_solicitud" class="form-control" :disabled="true"></textarea>
                                                    <small class="form-text text-muted" id="str_solicitud"  v-if="str_solicitud" 
                                                        v-text="'Disponible '+(2000-str_solicitud.trim().length)+' caracteres'"></small>
                                                     <small class="text-error text-danger" v-if="arr_form.str_solicitud"  v-text="arr_form.str_solicitud"></small>
                                                </div>
                                            </div>

                                            <!-- Tabla de Archivos Adjuntos -->
                                            <div class="table-responsive mt-2">
                                                <table  class="table table-bordered table-striped table-sm" style="width: 100%">
                                                    <thead>
                                                        <tr class="bg-primary">
                                                            <th class="text-center" style="color:white" colspan="4">Documentos Adjuntos 
                                                                <button @click="abrirModal('archivo','anexar')" class="btn btn-success btn-sm"> 
                                                                    <i class="fas fa-plus"></i>
                                                                </button>
                                                            </th>
                                                        </tr>
                                                        <tr class="bg-success">
                                                            <th class="text-center text-white" colspan="4" style="color:white">Archivos Cargados</th>
                                                        </tr>
                                                        <tr v-if="arr_archivo.length || ( arr_solicitud.archivos && arr_solicitud.archivos.length)">
                                                            <th>Nombre</th>
                                                            <th>Descripción</th>
                                                            <th>Opción</th>
                                                        </tr>
                                                    </thead>
                                                    <tbody>
                                                        <template v-if="arr_archivo.length">                                                            
                                                            <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 v-if="arr_solicitud.archivos && arr_solicitud.archivos.length">
                                                            <tr v-for="archivo in arr_solicitud.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 type="button" class="btn btn-sm btn-info" title="Descargar Documento">
                                                                        <a target=_blank :href="'/files/get/?ruta='+archivo.str_archivo" style="color: white;">
                                                                            <i class="fas fa-download"></i> Descargar
                                                                        </a>
                                                                    </button>
                                                                </td>
                                                            </tr>
                                                        </template>
                                                        <template v-if="!arr_solicitud.archivos && !arr_archivo.length">
                                                            <td colspan="4">
                                                                <div class="empty" empty-text="No hay archivos adjuntos para listar"></div>
                                                            </td>
                                                        </template>
                                                        <tr>
                                                            <td></td>
                                                            <td>
                                                                <strong style="float: right;">Tamaño Total MB (Máximo 20 MB)</strong>
                                                            </td>
                                                            <td v-text="totalizarCampo(arr_archivo,'sizeMB')"></td>
                                                        </tr>
                                                    </tbody>
                                                </table>

                                                <div v-if="totalizarCampo(arr_archivo,'sizeMB')>20" class="alert alert-danger text-center" role="alert">
                                                    El tamaño total de los adjuntos no puede superar los 20 MB
                                                </div>
                                            </div>

                                            <template>
                                                <button v-if="btn_envio == 0" type="button" :disabled="totalizarCampo(arr_archivo,'sizeMB')>20" 
                                                    class="btn btn-success btn waves-effect waves-light" @click="ensamblarDatos('actualizar')">
                                                    <i class="fas fa-save"></i> Actualizar
                                                </button>
                                                <button v-else type="button"  class="btn btn-success">
                                                    Actualizando <i  class="fas fa-spin fa-spinner"></i>
                                                </button>
                                            </template>
                                        </div>
                                    </div>                                    
                                </div>
                            </div>                          
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
                    </div>
                </div>
            </div>
        </div>

        <!-- Modal Derivar -->
        <div class="modal" tabindex="-1" id="modal_derivar">
            <div class="modal-dialog modal-lg" style="margin-top: 10%">
                <div class="modal-content" style="border-color: darkgray;">
                    <div class="modal-header bg-primary">
                        <h5 class="modal-title text-white">Derivar Solicitud</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <div class="col-md-12 col-sm-12 mt-2">
                            <div class="row-flow">
                                <!-- Direccion Municipal -->
                                <div class="col-md-12 col-sm-12">
                                    <div class="row form-group">
                                        <div class="col-lg-3 col-md-3 col-sm-4 mt-2 text-center">
                                            <label>Dirección Municipal</label>
                                        </div>
                                        <div class="col-lg-9 col-md-9 col-sm-8">
                                            <multiselect
                                                :show-labels="false"
                                                :searchable="true"
                                                v-model="nr_direccion"
                                                :options="arr_direccion_derivar" 
                                                @input="asyncDerivarDireccion" 
                                                :disabled="(arr_usuario.tp_derivar == 2)"
                                                :multiple="false"
                                                :showNoOptions ="false" 
                                                placeholder="Seleccione Dirección Municipal"
                                                label="label"                                                                 
                                                track-by="label">
                                                <span slot="noResult">No se han encontrado resultados</span>
                                            </multiselect>
                                            <small class="text-error text-danger" v-if="arr_valida.nr_direccion" v-text="arr_valida.nr_direccion[0]"></small>
                                            <small class="text-error text-danger" v-if="arr_form.nr_direccion"  v-text="arr_form.nr_direccion"></small>
                                        </div>
                                    </div>
                                </div>

                                <!-- Depto Municipal -->
                                <div class="col-md-12 col-sm-12">
                                    <div class="row form-group">
                                        <div class="col-lg-3 col-md-3 col-sm-4 mt-2 text-center">
                                            <label>Depto. Municipal</label>
                                        </div>
                                        <div class="col-lg-9 col-md-9 col-sm-8">
                                            <multiselect
                                                :show-labels="false"
                                                :searchable="true"
                                                v-model="nr_depto"
                                                :options="arr_depto_derivar"
                                                @input="asyncDerivarDeptos" 
                                                :multiple="false"
                                                :showNoOptions ="false" 
                                                placeholder="Seleccione Depto. Municipal"
                                                label="label"                                                                 
                                                track-by="label">
                                                <span slot="noResult">No se han encontrado resultados</span>
                                            </multiselect>
                                            <small class="text-error text-danger" v-if="arr_valida.nr_direccion" v-text="arr_valida.nr_direccion[0]"></small>
                                            <small class="text-error text-danger" v-if="arr_form.nr_direccion"  v-text="arr_form.nr_direccion"></small>
                                        </div>
                                    </div>
                                </div>

                                <!-- Tipo Servicio -->
                                <div class="col-md-12 col-sm-12">
                                    <div class="row form-group">
                                        <div class="col-lg-3 col-md-3 col-sm-4 mt-2 text-center">
                                            <label>Servicio</label>
                                        </div>
                                        <div class="col-lg-9 col-md-9 col-sm-8">
                                            <multiselect
                                                :show-labels="false"
                                                :searchable="true"
                                                v-model="nr_servicio"
                                                :options="arr_servicio_derivar"
                                                @input="asyncDerivarServicios"
                                                :multiple="false"
                                                :showNoOptions ="false" 
                                                placeholder="Seleccione Servicio"
                                                label="label"                                                                 
                                                track-by="label">
                                                <span slot="noResult">No se han encontrado resultados</span>
                                            </multiselect>
                                            <small class="text-error text-danger" v-if="arr_valida.nr_servicio" v-text="arr_valida.nr_servicio[0]"></small>
                                            <small class="text-error text-danger" v-if="arr_form.nr_servicio"  v-text="arr_form.nr_servicio"></small>
                                        </div>
                                    </div>
                                </div>

                                <!-- Descripcion Solicitud -->
                                <div class="col-md-12 mt-2">
                                    <div class="form-group">
                                        <!-- <label>Descripción Solicitud :</label> -->
                                        <div id="txt_derivar"></div>
                                        <small class="form-text text-muted">
                                            <span>Cantidad maxima de caracteres a utilizar 1000</span>
                                        </small>
                                        <small class="text-error text-danger" v-if="arr_valida.str_derivar" v-text="arr_valida.str_derivar[0]"></small>
                                        <small class="text-error text-danger" v-if="arr_form.str_derivar"  v-text="arr_form.str_derivar"></small>
                                    </div>
                                </div>

                                <div class="mt-1" style="float: right;">
                                    <button v-if="btn_derivar == 0" @click="ensamblarDatos('derivar')"  class="btn btn-sm btn-warning">
                                        Derivar <i class="bx bxs-send"></i> 
                                    </button>
                                    <button v-else class="btn btn-sm btn-warning">
                                        Derivando <i class="bx bx-loader-circle"></i> 
                                    </button>
                                </div>
                            </div>                          
                        </div>
                    </div>
                    <div class="modal-footer">                        
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
                    </div>
                </div>
            </div>
        </div>

        <!-- Modal Adjunto -->
        <div class="modal" tabindex="-1" id="modal_adjunto">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content">
                    <div class="modal-header bg-primary">
                        <h5 class="modal-title text-white">Ingresar Adjunto</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <div class="form-group">
                            <label>Seleccione Archivo</label>
                            <input class="form-control" accept=".jpeg,.jpg,.png,.doc,.docx,.xls,.xlsx,.ppt,.pptx,.pdf,.dwg,.dgn,.rar,.zip"
                                type="file" id="file_adjunto" >
                        </div>
                        <div class="form-group mt-2">
                            <label>Ingresar Descripcón</label>
                            <textarea maxlength="200" rows="3" v-model="str_archivo" class="form-control" placeholder="Descripción del archivo"></textarea>
                            <small id="cant_caracteres" class="form-text text-muted" v-if="str_archivo"
                                v-text="'Disponible '+(200-str_archivo.trim().length)+' caracteres'"></small>
                        </div>
                        <template v-if="arr_error.length">
                            <div class="text-center text-danger">
                                <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">Cerrar</button>
                        <button type="button" class="btn btn-primary" @click="validarAdjunto(tp_adjunto, 'save')">Subir</button>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Modal Archivos -->
        <div class="modal" tabindex="-1" id="modal_revisar">
            <div class="modal-dialog modal-lg" style="margin-top: 10%">
                <div class="modal-content" style="border-color: darkgray;">
                    <div class="modal-header bg-primary">
                        <h5 class="modal-title text-white" style="color: white;">Revisar Archivos</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <table class="table table-bordered table-striped table-sm">
                            <thead>
                                <tr class="bg-primary">
                                    <th colspan="4" class="text-center" style="color: white;">Archivos Adjuntos</th>    
                                </tr>
                                <tr>
                                    <th style="min-width:50px; text-align:center;">#</th>
                                    <th style="min-width:150px; text-align:center;">Nombre</th>
                                    <th style="min-width:300px; text-align:center;">Descripción</th>
                                    <th style="min-width:50px; text-align:center;">Archivo</th>
                                </tr>
                            </thead>
                            <tbody>
                                <template v-if="arr_adjuntos.length">
                                    <tr v-for="(adjunto, index) in arr_adjuntos" :key="adjunto.id">
                                        <td class="text-center">@{{ (index+1) }}</td>
                                        <td class="text-center">@{{ adjunto.nm_archivo }}</td>
                                        <td class="text-left">@{{ adjunto.str_observacion }}</td>
                                        <td class="text-center">
                                            <a :href="'/files/get?ruta='+adjunto.str_archivo" class="btn btn-primary btn-sm" title="Archivo Adjunto" v-if="adjunto.str_archivo">
                                                <template v-if="adjunto.ext_archivo == 'pdf'">
                                                    <i class="far fa-file-pdf"></i>
                                                </template>
                                                <template v-if="adjunto.ext_archivo == 'doc' || adjunto.ext_archivo == 'docx'">
                                                    <i class="far fa-file-word"></i>
                                                </template>
                                                <template v-if="adjunto.ext_archivo == 'ppt' || adjunto.ext_archivo == 'pptx'">
                                                    <i class="far fa-file-powerpoint"></i>
                                                </template>
                                                <template v-if="adjunto.ext_archivo == 'xls' || adjunto.ext_archivo == 'xlsx'">
                                                    <i class="far fa-file-excel"></i>
                                                </template>
                                                <template v-if="adjunto.ext_archivo == 'rar' || adjunto.ext_archivo == 'zip'">
                                                    <i class="far fa-file-archive"></i>
                                                </template>
                                                <template v-if="adjunto.ext_archivo == 'jpeg' || adjunto.ext_archivo == 'jpg' || adjunto.ext_archivo == 'png'">
                                                    <i class="far fa-file-image"></i>
                                                </template>
                                                <template v-if="adjunto.ext_archivo == 'dwg' || adjunto.ext_archivo == 'dgn'">
                                                    <i class="far fa-file-code"></i>
                                                </template>
                                            </a>
                                        </td>
                                    </tr>
                                </template>
                                <template v-else>
                                    <td colspan="4">
                                        <div class="empty" style="min-height:100px;" empty-text="No hay archivos para mostrar"></div>
                                    </td>
                                </template>
                            </tbody>
                        </table>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

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

        var app = new Vue({
            el: '#app',
            data: {
                //-------------------------------------
                tp_modal                    :   0,
                tp_accion                   :   0,
                tp_btn                      :   0,
                titulo_modal                :   '',
                btn_envio                   :   0,
                btn_aprobar                 :   0,
                btn_rechazar                :   0,
                btn_asignar                 :   0,
                btn_publicar                :   0,
                btn_responder               :   0,
                btn_informar                :   0,
                btn_derivar                 :   0,
                btn_expediente              :   0,
                btn_vb                      :   0,
                btn_clonar                  :   0,
                //-------------------------------------
                arr_valida                  :   [],
                arr_error                   :   [],
                arr_form                    :   {},
                str_msj                     :   '',
                //-------------------------------------
                pagination                  : {
                    'total' : 0,
                    'current_page' : 0,
                    'per_page' : 0,
                    'last_page' : 0,
                    'from' : 0,
                    'to' : 0,
                },
                //-------------------------------------
                offset                      :   3,
                //-------------------------------------
                fl_mostrar                  :   0,
                fl_direccion                :   [],
                fl_depto                    :   [],
                fl_servicio                 :   [],
                fl_macrozona                :   [],
                fl_unidadvecinal            :   [],
                fl_ticket                   :   [],
                fl_persona                  :   [],
                fl_motivo                   :   [],
                fl_ubicacion                :   [],
                fl_ingreso                  :   [],
                //-------------------------------------
                tp_criterio                 :   'created_at',
                tp_orden                    :   'DESC',
                //-------------------------------------
                arr_solicitud               :   [],
                arr_historial               :   [],
                arr_respuestas              :   [],
                arr_usuario                 :   [],
                arr_archivo                 :   [],
                //-------------------------------------
                arr_index                   :   [],
                arr_direccion               :   [],
                arr_depto                   :   [],
                arr_servicio                :   [],
                arr_ingreso                 :   [],
                arr_motivo                  :   [],
                arr_macrozona               :   [],
                arr_unidadvecinal           :   [],
                arr_ticket                  :   [],
                arr_prioridad               :   [],
                arr_funcionarios            :   [],
                arr_personal                :   [],
                arr_asignados               :   [],
                arr_persona                 :   [],
                arr_ubicaciones             :   [],
                //-------------------------------------
                nr_solicitud                :   0,
                nr_fuente                   :   0,
                nr_servicio                 :   {},
                nr_motivo                   :   {},
                nr_ticket                   :   '',
                nr_direccion                :   [],
                nr_depto                    :   [],
                nr_funcionario              :   [],
                nr_estado                   :   0,
                nm_estado                   :   '',
                tp_activo                   :   0,
                tp_visado                   :   0,
                str_visado                  :   '',
                tp_observacion              :   0,
                tp_respuesta                :   0,
                str_observacion             :   '',
                str_derivar                 :   '',
                //-------------------------------------
                tp_resumir_publicacion      :   1,
                //-------------------------------------
                tp_visualizar               :   {
                    tp_resumir : 1,
                    nr_index : null,
                },
                //-------------------------------------
                arr_mostrar                 :   [
                    {
                        'value'     :   0,
                        'label'     :   'Todos',
                    },
                    {
                        'value'     :   1,
                        'label'     :   'Ingresada',
                    },
                    {
                        'value'     :   2,
                        'label'     :   'Por Asignar',
                    }, 
                    {
                        'value'     :   3,
                        'label'     :   'En Gestión',
                    },
                    {
                        'value'     :   4,
                        'label'     :   'En Revisión',
                    },
                    {
                        'value'     :   5,
                        'label'     :   'Cerrado',
                    },
                    {
                        'value'     :   6,
                        'label'     :   'Terminado',
                    },
                    {
                        'value'     :   7,
                        'label'     :   'Anulada',
                    },
                ],
                fl_mostrar                  :   1,
                //-------------------------------------
                tp_recepcion                :   0,
                tp_satisfaccion             :   0,
                str_feedback                :   '',
                //-------------------------------------
                arr_recepcion               :   [
                    {
                        'value' : 0,
                        'label' : 'No Contactado',
                    },
                    {
                        'value' : 1,
                        'label' : 'Contactado',
                    },
                ],
                arr_satisfaccion            :   [
                    {
                        'value' : 0,
                        'label' : 'Seleccionar Nivel',
                    },
                    {
                        'value' : 1,
                        'label' : 'Muy satisfecho',
                    },
                    {
                        'value' : 2,
                        'label' : 'Satisfecho',
                    },
                    {
                        'value' : 3,
                        'label' : 'Normal',
                    },
                    {
                        'value' : 4,
                        'label' : 'Poco satisfecho',
                    },
                    {
                        'value' : 5,
                        'label' : 'Nada satisfecho',
                    }
                ],
                //-------------------------------------
                str_anular                  :   '',
                //-------------------------------------
                rut_vecino                  :   '',
                nm_vecino                   :   '',
                ap_paterno                  :   '',
                ap_materno                  :   '',
                nr_prefijo                  :   '+569',
                nr_telefono                 :   '',
                mail_vecino                 :   '',
                tp_ubicacion_vecino         :    1,
                str_aclara_vecino           :   '',
                arr_ubicacion_vecino        :   [],
                arr_calles_vecino           :   [],
                tp_vecino                   :   0,
                //-------------------------------------
                nr_dir_municipal            :   [],
                arr_direccion_solicitud     :   [],
                arr_calles_solicitud        :   [],
                nr_prioridad                :   2,
                tp_ubicacion_solicitud      :   1,
                str_aclara_solicitud        :   '',
                str_solicitud               :   '',
                tp_municipal                :   1,
                //-------------------------------------
                tp_derivar                  :   0,
                arr_direccion_derivar       :   [],
                arr_depto_derivar           :   [],
                arr_servicio_derivar        :   [],
                //-------------------------------------
                arr_files                   :   [],
                arr_str_archivo             :   [],
                str_archivo                 :   '',
                tp_adjunto                  :   '',
                tp_save_adjunto             :   0,
                arr_adjuntos                :   [],
                //-------------------------------------
                gpt_response                :   '',
                //-------------------------------------
            },

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

            filters:{
                resumir: function (texto, limite=300, final=' ...')
                {
                    let me  = this;
                    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')
                    }
                },

                capitalize: function (value = '') {
                    if (!value) return '';

                    value = value.toString();
                    var splitStr = value.toLowerCase().split(' ');

                    for (var i = 0; i < splitStr.length; i++) {
                        splitStr[i] = splitStr[i].charAt(0).toUpperCase() + splitStr[i].substring(1);
                    }

                    return splitStr.join(' ');
                },
            },

            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: {
                //-------------------------------------------------------------------------------------------
                existeTextArea(str_campo = '')
                {
                    let me  =   this;

                    if($('.tinymce'))
                    {
                        // console.log('Existe textArea : #'+str_campo);

                        activeTextArea();
                    }
                    else
                    {
                        // console.log('NO existe textArea : #'+str_campo);
                    }
                },
                //-------------------------------------------------------------------------------------------
                activeDatetimepicker()
                {
                    let fc_format1  =   'DD-MM-YYYY';
                    let fc_format2  =   'd-m-Y';
                    let fc_date     =   moment().locale('es').format(fc_format1);
                    let fc_desde    =   '';
                    let fc_hasta    =   '';
                    //-----------------------------------
                    fc_hasta = fc_date;
                    fc_desde = moment().subtract(90, 'days').format(fc_format1);
                    //-----------------------------------

                    // Configuración base para flatpickr
                    let baseConfig = {
                        dateFormat: fc_format2,
                        locale: 'es',  // Asegúrate de tener el locale de 'es' cargado si lo necesitas.
                        allowInput: true,  // Permite la entrada manual de la fecha
                    };

                    // Configuración para "Desde"
                    let desdeConfig = Object.assign({}, baseConfig, {
                        defaultDate: fc_desde,
                    });
                    flatpickr('#fc_desde', desdeConfig);

                    // Configuración para "Hasta"
                    let hastaConfig = Object.assign({}, baseConfig, {
                        defaultDate: fc_hasta,
                        maxDate: new Date(),  // Fecha máxima es la fecha actual
                    });
                    flatpickr('#fc_hasta', hastaConfig);
                },
                //-------------------------------------------------------------------------------------------
                abrirYImprimir() {
                    this.abrirModal('modal_historial'); 
                    this.$nextTick(() => {
                        setTimeout(() => {
                            this.imprimirContenido('modal_historial'); 
                        }, 500); 
                    });
                },
                //-------------------------------------------------------------------------------------------
                imprimirContenido(id) {
                    // Asegura que Vue termine de renderizar el DOM antes de continuar
                    this.$nextTick(() => {
                        // Ahora busca el modal completo
                        const modal = document.querySelector(`#${id}`);
                        if (!modal) {
                            console.warn(`No se encontró el modal con ID: ${id}`);
                            return;
                        }

                        // Clona el modal (header, body, footer)
                        const clonado = modal.cloneNode(true);
                        const wrapper = document.createElement('div');
                        wrapper.classList.add('print-area');
                        wrapper.appendChild(clonado);

                        // Imprimir
                        $(wrapper).printThis({
                            importCSS: true,
                            importStyle: true, 
                            loadCSS: ["/css/print.css"],
                            printContainer: false,
                            removeInline: true,
                            removeInlineSelector: "*",
                            formValues: true,
                            base: window.location.origin,
                            removeScripts: true,
                        });
                    });
                },
                //-------------------------------------------------------------------------------------------
                imprimirPDF(id_ticket)
                {
                    let me          =   this;
                    me.str_ruta     =   '#';
                    var ruta        =   `/pdf/solicitud/${id_ticket}`;

                    if(!id_ticket) {
                        me.desplegarVentana('warning','Exportar Información a PDF','No se ha podido encontrar el identificador del ticket');
                        return;
                    }

                    window.open(ruta, '_blank');
                },
                //-------------------------------------------------------------------------------------------
                getCantidadCaracteres(str_contenido = '')
                {
                    var cantidad    =   0;

                    if(!str_contenido)
                        return cantidad;

                    if(str_contenido.trim().length)
                        cantidad    =   str_contenido.trim().length;

                    return cantidad;
                },
                //-------------------------------------------------------------------------------------------
                setScrollTo(tag_id)
                {
                    // var container   =   $('.modal #historia_solicitud'); // $('html, body, .main-content');
                    // var scrollTo    =   $('#' + tag_id);

                    $("#" + tag_id).animate({
                        scrollTop: $(document).height()
                    }, 500);

                    // container.animate({scrollTop : $('#' + tag_id).offset().top +1000 }, 'slow');
                },
                //-------------------------------------------------------------------------------------------
                cambiarPagina(page)
                {
                    let me  =   this;
                    me.pagination.current_page = page;
                    me.cargarDatos(page);
                },
                //-------------------------------------------------------------------------------------------
                refrescarDatos()
                {
                    let me  =   this;
                    me.cargarDireccionesMunicipales();
                    me.cargarDatos();
                    me.cargarUsuario();
                    me.cargarPendientes();
                },
                //-------------------------------------------------------------------------------------------
                getLabel(data)
                {
                    var valor   =   '';

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

                    return valor;
                },
                //-------------------------------------------------------------------------------------------
                getValue(data)
                {
                    var valor   =   0;

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

                    return valor;
                },
                //-------------------------------------------------------------------------------------------
                noVecino(tp_vecino)
                {
                    let me = this;

                    if(tp_vecino == 0)
                    {
                       me.rut_vecino            =   '';
                       me.nm_vecino             =   '';
                       me.ap_paterno            =   '';
                       me.ap_materno            =   '';
                       me.nr_telefono           =   '';
                       me.mail_vecino           =   '';
                       me.tp_ubicacion_vecino   =    1;
                       me.str_aclara_vecino     =   '';
                       me.arr_ubicacion_vecino  =   [];
                       me.tp_vecino             =   tp_vecino;

                       $('.vecino').attr('disabled','True')
                    }

                    if(tp_vecino == 1)
                    {
                        me.tp_vecino             =   tp_vecino;
                    }
                },
                //-------------------------------------------------------------------------------------------
                totalizarCampo(arr, field) 
                {
                    let total = arr.reduce((a, b) => a + (Number(b[field]) || 0), 0);
                    return total.toFixed(2);
                },
                //-------------------------------------------------------------------------------------------
                filterEstados()
                {
                    let me  =   this;
                    var arr =   [];

                    if(me.arr_mostrar.length)
                    {
                        arr     =   me.arr_mostrar.filter( 
                                        event => (event.value != 7)
                                    );

                        me.arr_mostrar  =   arr;
                    }
                },
                //-------------------------------------------------------------------------------------------
                filterRespuestas(data = [])
                {
                    let me  =   this;
                    var arr =   [];

                    if(data.length)
                    {
                        arr     =   data.filter(
                                        event   =>  (event.tp_respuesta === 3 || event.tp_respuesta === 4) &&
                                                    event.tp_validado === 0
                                    );

                        if(arr.length)
                        {
                            me.tp_respuesta     =   arr[0].tp_respuesta;
                            me.str_observacion  =   arr[0].str_observacion_html;

                            setTimeout(function(){
                                if(me.tp_respuesta  ==  3)
                                {
                                    me.tp_observacion   =   5; // Rechazar Pre-Publicación Definitiva
                                    me.nr_fuente        =   arr[0].id;
                                    // $('.btn_publicar').attr('disabled',false);
                                    // $('.btn_informar').attr('disabled',true);
                                }
                                if(me.tp_respuesta == 4)
                                {
                                    me.tp_observacion   =   6; // Rechazar Pre-Publicación Parcial
                                    me.nr_fuente        =   arr[0].id;
                                    // $('.btn_publicar').attr('disabled',true);
                                    // $('.btn_informar').attr('disabled',false);
                                }
                            }, 1000);
                        }
                    }

                    return arr;
                },
                //-------------------------------------------------------------------------------------------
                setResumir(valor = 0, index = 0)
                {
                    let me  =   this;

                    me.tp_visualizar    =   {
                        tp_resumir : valor,
                        nr_index : index,
                    };
                },
                //-------------------------------------------------------------------------------------------
                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.str_archivo.trim() == '' )
                                     me.arr_error.push("Favor Ingresar Descripción de Adjunto.");
                            }


                            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_str_archivo.push(me.str_archivo);
                                me.arr_archivo.push({
                                    'file':file_adjunto.files[0], 
                                    'descripcion':me.str_archivo,
                                    'sizeMB':parseFloat((file_adjunto.files[0].size/1048576).toFixed(2)),
                                    'sizeKB':file_adjunto.files[0].size
                                });
                                $('#modal_adjunto').modal('hide');
                                me.descartarAdjunto();
                                me.limpiarDatos('archivo');
                            }


                            break;
                        }
                    }

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

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

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

                    if(file_adjunto)
                    {
                        document.querySelector("#file_adjunto").value = "";
                    }
                },
                //-------------------------------------------------------------------------------------------
                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_str_archivo.splice(index, 1);

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

                    switch(modelo)
                    {
                        case 'historial':
                        {
                            me.tp_derivar   =   0;

                            if(me.nr_estado == 1 || me.nr_estado == 9) // Visación
                            {
                                tinymce.remove('#str_visado');
                                $('str_visado').remove();
                            }

                            $('#modal_historial').modal('hide');
                            me.limpiarDatos(modelo);

                            break;
                        }
                        case 'archivo':
                        {
                            $('#modal_adjunto').modal('hide');
                            me.limpiarDatos(modelo);

                            break;
                        }
                    }
                },
                //-------------------------------------------------------------------------------------------
                cargarPendientes()
                {
                    let me          = this;
                    var ruta        = '/contador/solicitudes/pendientes';

                    axios.get(ruta).then(function (response)
                    {
                        var respuesta           =   response.data;
                        $('#pendientes_validacion').html(respuesta.nr_bandeja);
                    }).catch(function (error) {
                        console.log(error);
                    });
                },
                //-------------------------------------------------------------------------------------------
                asyncDeptos(item)
                {
                    let me  =   this;

                    if(item)
                    {
                        me.nr_direccion     =   item;
                        me.cargarDeptosMunicipales(0, me.getValue(me.nr_direccion));
                    }
                    else
                        me.arr_depto        =   [];
                },
                //-------------------------------------------------------------------------------------------
                asyncServicios(item)
                {
                    let me  =   this;

                    if(item)
                    {
                        me.fl_depto     =   item;
                        me.cargarServicios(me.getValue(me.fl_direccion), me.getValue(me.fl_depto));
                        me.fl_servicio  =   [];
                    }
                    else
                        me.fl_servicio  =   [];
                },
                //-------------------------------------------------------------------------------------------
                asyncDerivarDireccion(item)
                {
                    let me          =   this;
                    me.tp_derivar   =   1;

                    if(item)
                    {
                        me.nr_direccion         =   item;
                        me.nr_depto             =   null;
                        me.nr_servicio          =   null;
                        me.cargarDeptosMunicipales(0, me.getValue(me.nr_direccion));
                        me.cargarServicios(me.getValue(me.nr_direccion), 0); // Servicios de la Direccion
                    }
                    else
                    {
                        me.nr_direccion         =   null;
                        me.nr_depto             =   null;
                        me.nr_servicio          =   {
                                                        value         : 0,
                                                        label         : 'Seleccione Servicio',
                                                        id_direccion  : 0,
                                                        id_depto      : 0,
                                                    };
                        me.arr_servicio_derivar =   [];
                        me.arr_depto_derivar    =   me.arr_depto;
                        me.arr_servicio_derivar =   me.arr_servicio;
                    }
                },
                //-------------------------------------------------------------------------------------------
                asyncDerivarDeptos(item)
                {
                    let me          =   this;
                    me.tp_derivar   =   1;

                    if(item)
                    {
                        me.nr_direccion         =   me.arr_direccion.filter(info => info.value == item.id_direccion).find(info => info);
                        me.nr_depto             =   item;
                        me.nr_servicio          =   {
                                                        value         : 0,
                                                        label         : 'Seleccione Servicio',
                                                        id_direccion  : 0,
                                                        id_depto      : 0,
                                                    };
                        me.cargarServicios(me.getValue(me.nr_direccion), me.getValue(me.nr_depto));
                    }
                    else
                    {
                        if(me.getValue(me.nr_direccion) != 0)
                        {
                            me.nr_depto             =   null;
                            me.nr_servicio          =   {
                                                            value         : 0,
                                                            label         : 'Seleccione Servicio',
                                                            id_direccion  : 0,
                                                            id_depto      : 0,
                                                        };
                            me.cargarDeptosMunicipales(0, me.getValue(me.nr_direccion));
                            me.cargarServicios(me.getValue(me.nr_direccion), 0); // Servicios de la Direccion
                        }
                        else
                        {
                            me.nr_depto             =   null;
                            me.arr_depto_derivar    =   me.arr_depto;
                            me.arr_servicio_derivar =   me.arr_servicio;
                            me.nr_servicio          =   {
                                                            value         : 0,
                                                            label         : 'Seleccione Servicio',
                                                            id_direccion  : 0,
                                                            id_depto      : 0,
                                                        };
                        }
                    }
                },
                //------------------------------------------------------------------------------------------- 
                asyncDerivarServicios(item)
                {
                    let me          =   this;
                    me.tp_derivar   =   1;

                    if(item)
                    {
                        me.nr_direccion         =   me.arr_direccion.filter(info => info.value == item.id_direccion).find(info => info);
                        me.nr_depto             =   me.arr_depto.filter(info => info.value == item.id_depto).find(info => info);
                        me.nr_servicio          =   item;
                    }
                    else
                    {
                        me.nr_direccion         =   [];
                        me.nr_depto             =   [];
                        me.nr_servicio          =   {
                                                        value         : 0,
                                                        label         : 'Seleccione Servicio',
                                                        id_direccion  : 0,
                                                        id_depto      : 0,
                                                    };
                        me.arr_depto_derivar    =   me.arr_depto;
                        me.arr_servicio_derivar =   me.arr_servicio;
                    }
                },
                //-------------------------------------------------------------------------------------------
                asyncServiciosForDireccion(item)
                {
                    let me  =   this;

                    if(item)
                    {
                        me.nr_direccion     =   item;
                        me.cargarServicios(me.getValue(me.nr_direccion), 0);
                        me.nr_servicio  =   {
                                                value         : 0,
                                                label         : 'Seleccione Servicio',
                                                id_direccion  : 0,
                                                id_depto      : 0,
                                            };
                    }
                    else
                        me.nr_servicio  =   {
                                                value         : 0,
                                                label         : 'Seleccione Servicio',
                                                id_direccion  : 0,
                                                id_depto      : 0,
                                            };
                },
                //-------------------------------------------------------------------------------------------
                asyncFeedback()
                {
                    let me  =   this;

                    if(me.tp_recepcion == 0)
                        me.tp_satisfaccion = 0;
                },
                //-------------------------------------------------------------------------------------------
                asyncCallesSolicitud(query)
                {
                    let me          = this;
                    var ruta        = '/direccion/index';

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

                    if(query.length >= 3) 
                        me.cargarCalles(query,1);
                },
                //-------------------------------------------------------------------------------------------
                asyncDerivar()
                {
                    let me      =   this;
                    var ruta    =   '/derivar/servicio';
                    me.arr_servicio     =   [];

                    if(me.arr_usuario.id_direccion)
                    {
                        axios.post(ruta,{
                            'nr_direccion'      :   me.arr_usuario.id_direccion,
                        }).then(function (response)
                        {
                            var respuesta               =   response.data;
                            me.arr_direccion            =   respuesta.arr_direccion;
                            me.arr_depto                =   respuesta.arr_depto;
                            me.arr_servicio             =   respuesta.arr_servicio;
                            me.arr_direccion_derivar    =   respuesta.arr_direccion;
                            me.arr_depto_derivar        =   respuesta.arr_depto;
                            me.arr_servicio_derivar     =   respuesta.arr_servicio;

                            if(respuesta.dir_actual.length)
                                me.nr_direccion     =   respuesta.dir_actual[0];
                        })
                        .catch(function (error){
                            console.log(error);
                        });
                    }
                },
                //-------------------------------------------------------------------------------------------
                cargarCalles(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);
                    });
                },
                //-------------------------------------------------------------------------------------------
                cargarDireccionesMunicipales()
                {
                    let me      =   this;
                    var ruta    =   '/listado/direcciones_municipales';
                    me.arr_direccion            =   [];
                    me.arr_direccion_derivar    =   [];
                    
                    axios.get(ruta).then(function (response)
                    {
                        var respuesta       =   response.data;
                        me.arr_direccion    =   respuesta.direcciones;
                        me.arr_direccion_derivar    =   respuesta.direcciones;
                    })
                    .catch(function (error){
                        me.tp_derivar   =   0;
                        console.log(error);
                    });
                },
                //-------------------------------------------------------------------------------------------
                cargarDeptosMunicipales(tp_filtro = 0, nr_direccion)
                {
                    let me      =   this;
                    var ruta    =   '/listado/deptos_municipales';

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

                        if(tp_filtro == 0)
                        {
                            if(me.tp_derivar == 1)
                            {
                                me.arr_depto_derivar    =   [];
                                me.arr_depto_derivar    =   respuesta.deptos;
                            }
                            else
                            {
                                me.arr_depto            =   [];
                                me.arr_depto            =   respuesta.deptos;
                            }
                        }
                        else
                            me.fl_arr_deptos    =   respuesta.deptos;
                    }).catch(function (error) {
                        me.tp_derivar   =   0;
                        console.log(error);
                    });
                },
                //-------------------------------------------------------------------------------------------
                cargarServicios(nr_direccion = 0, nr_depto = 0)
                {
                    let me      =   this;
                    var ruta    =   '/listado/servicios';

                    axios.post(ruta,{
                        'nr_direccion'      :   nr_direccion,
                        'nr_depto'          :   nr_depto,
                    }).then(function (response)
                    {
                        var respuesta       =   response.data;
                        
                        if(me.tp_derivar == 1)
                        {
                            me.arr_servicio_derivar     =   [];
                            me.arr_servicio_derivar     =   respuesta;
                        }
                        else
                        {
                            me.arr_servicio             =   [];
                            me.arr_servicio             =   respuesta;
                        }
                    }).catch(function (error) {
                        me.tp_derivar   =   0;
                        console.log(error);
                    });
                },
                //-------------------------------------------------------------------------------------------
                cargarMotivo()
                {
                    let me      =   this;
                    var ruta    =   '/motivo/listado';
                    me.arr_motivo   =   [];

                    axios.get(ruta).then(function (response)
                    {
                        var respuesta   =   response.data;
                        me.arr_motivo   =   respuesta;
                    })
                    .catch(function (error){
                        console.log(error);
                    });
                },
                //-------------------------------------------------------------------------------------------
                cargarTipoIngreso()
                {
                    let me      =   this;
                    var ruta    =   '/tipo_ingreso/listado';
                    me.arr_ingreso  =   [];

                    axios.get(ruta).then(function (response)
                    {
                        var respuesta   =   response.data;
                        me.arr_ingreso  =   respuesta.ingresos;
                    })
                    .catch(function (error){
                        console.log(error);
                    });
                },
                //-------------------------------------------------------------------------------------------
                cargarPrioridad()
                {
                    let me      =   this;
                    var ruta    =   '/prioridad/listado';
                    me.arr_prioridad    =   [];

                    axios.get(ruta).then(function (response)
                    {
                        var respuesta       =   response.data;
                        me.arr_prioridad    =   respuesta;
                    })
                    .catch(function (error){
                        console.log(error);
                    });
                },
                //-------------------------------------------------------------------------------------------
                cargarMacrozona()
                {
                    let me      =   this;
                    var ruta    =   '/listado/macrozona';
                    me.arr_macrozona    =   [];

                    axios.get(ruta).then(function (response)
                    {
                        var respuesta       =   response.data;
                        me.arr_macrozona    =   respuesta.macrozona;
                    })
                    .catch(function (error){
                        console.log(error);
                    });
                },
                //-------------------------------------------------------------------------------------------
                cargarUnidadVecinal()
                {
                    let me      =   this;
                    var ruta    =   '/listar/unidadvecinales';
                    me.arr_unidadvecinal    =   [];

                    axios.get(ruta).then(function (response)
                    {
                        var respuesta           =   response.data;
                        me.arr_unidadvecinal    =   respuesta;
                    })
                    .catch(function (error){
                        console.log(error);
                    });
                },
                //-------------------------------------------------------------------------------------------
                cargarTicket()
                {
                    let me      =   this;
                    var ruta    =   '/listado/ticket';
                    me.arr_ticket    =   [];

                    axios.get(ruta).then(function (response)
                    {
                        var respuesta    =   response.data;
                        me.arr_ticket    =   respuesta.ticket;
                    })
                    .catch(function (error){
                        console.log(error);
                    });
                },
                //-------------------------------------------------------------------------------------------
                cargarUbicaciones()
                {
                    let me      =   this;
                    var ruta    =   '/listado/ubicaciones';
                    me.arr_ubicaciones      =   [];

                    axios.get(ruta).then(function (response)
                    {
                        var respuesta           =   response.data;
                        me.arr_ubicaciones      =   respuesta.ubicaciones;
                    })
                    .catch(function (error){
                        console.log(error);
                    });
                },
                //-------------------------------------------------------------------------------------------
                cargarPersonas()
                {
                    let me      =   this;
                    var ruta    =   '/listado/personas';
                    me.arr_persona      =   [];

                    axios.get(ruta).then(function (response)
                    {
                        var respuesta       =   response.data;
                        me.arr_persona      =   respuesta.personas;
                    })
                    .catch(function (error){
                        console.log(error);
                    });
                },
                //-------------------------------------------------------------------------------------------
                cargarUsuario()
                {
                    let me      =   this;
                    var ruta    =   '/info/usuario';
                    me.arr_usuario  =   [];

                    axios.get(ruta).then(function (response)
                    {
                        var respuesta     =   response.data;
                        me.arr_usuario    =   respuesta;

                        me.filterEstados();
                    })
                    .catch(function (error){
                        console.log(error);
                    });
                },
                //-------------------------------------------------------------------------------------------
                cargarFuncionariosAsignados(nr_servicio = 0)
                {
                    let me      =   this;
                    var ruta    =   '/listado/asignados';
                    me.arr_funcionarios     =   [];
                    me.arr_personal         =   [];

                    axios.post(ruta,{
                        'nr_servicio'       :   nr_servicio,
                    }).then(function (response)
                    {
                        var respuesta           =   response.data;
                        me.arr_funcionarios     =   respuesta.funcionarios;
                        me.arr_personal         =   respuesta.funcionarios;
                    }).catch(function (error) {
                        console.log(error);
                    });
                },
                //-------------------------------------------------------------------------------------------
                cargarHistorial(id_consulta)
                {
                    let me      = this;
                    var ruta    = '/historial/solicitud';
                    // me.arr_historial    =   [];

                    console.log('tp_accion:',me.tp_accion);
                    console.log('tp_btn:',me.tp_btn);

                    axios.post(ruta,{
                        'id_solicitud'  :   id_consulta,
                    }).then(function (response) 
                    {
                        var respuesta       =   response.data;
                        me.arr_historial    =   respuesta.arr_historial;
                        me.arr_respuestas   =   respuesta.respuestas;

                        if(me.tp_accion == 1 && me.tp_btn == 0) {
                            // actualizacion estado
                            me.nr_estado        =   me.arr_historial[me.arr_historial.length -1].id_estado;

                            me.$nextTick(() => 
                            {
                                $("#txt_visado").html('<textarea class="form-control tinymce" maxlength="2000" rows="2" id="str_visado" disabled="true"></textarea>');
                            });

                            me.existeTextArea();
                        }
                    }).catch(function (error)
                    {
                        console.log(error)
                    });     
                },
                //-------------------------------------------------------------------------------------------
                cargarDatos(page = 1)
                {
                    let me          =   this;
                    var ruta        =   '/solicitud/mz/inicio';

                    axios.post(ruta,{
                        'page'              :   page,
                        'tp_criterio'       :   me.tp_criterio,
                        'tp_orden'          :   me.tp_orden,
                        'fl_mostrar'        :   me.fl_mostrar,
                        'fc_desde'          :   document.querySelector('#fc_desde').value,
                        'fc_hasta'          :   document.querySelector('#fc_hasta').value,
                        'fl_direccion'      :   me.getValue(me.fl_direccion),
                        'fl_depto'          :   me.getValue(me.fl_depto),
                        'fl_servicio'       :   me.getValue(me.fl_servicio),                        
                        'fl_macrozona'      :   me.getValue(me.fl_macrozona),
                        'fl_unidadvecinal'  :   me.getValue(me.fl_unidadvecinal),
                        'fl_ingreso'        :   me.getValue(me.fl_ingreso),
                        'fl_ticket'         :   me.getValue(me.fl_ticket),
                        'fl_persona'        :   me.getValue(me.fl_persona),
                        'fl_motivo'         :   me.getValue(me.fl_motivo),
                        'fl_ubicacion'      :   me.getValue(me.fl_ubicacion),
                        'tp_validar'        :   0,
                        'propias'           :   0,
                    }).then(function (response)
                    {
                        var respuesta       =   response.data;
                        me.arr_index        =   respuesta.info.data ;
                        me.pagination       =   respuesta.pagination;
                        me.rows             =   respuesta.info.data;

                        $('#pendientes_mz').html(respuesta.nr_bandeja);
                        $('#propias_mz').html(respuesta.nr_propias);
                    }).catch(function (error) {
                        console.log(error);
                    });
                },
                //-------------------------------------------------------------------------------------------
                filtrarDatos()
                {
                    let me  =   this;
                    me.cargarDatos();
                },
                //-------------------------------------------------------------------------------------------
                limpiarFiltros()
                {
                    let me  =   this;

                    me.fl_direccion         =   [];
                    me.fl_depto             =   [];
                    me.fl_servicio          =   [];
                    me.fl_macrozona         =   [];
                    me.fl_unidadvecinal     =   [];
                    me.fl_ticket            =   [];
                    me.arr_depto            =   [];
                    me.arr_servicio         =   [];
                    me.fl_ubicacion         =   [];
                    me.fl_motivo            =   [];
                    me.fl_persona           =   [];

                    me.cargarDatos();
                },
                //-------------------------------------------------------------------------------------------
                limpiarDatos(modelo)
                {
                    let me  =   this;

                    switch(modelo)
                    {
                        case 'historial':
                        {
                            me.arr_form         =   {};
                            me.nr_funcionario   =   [];
                            me.str_visado       =   '';
                            me.str_observacion  =   '';
                            me.str_derivar      =   '';
                            me.str_feedback     =   '';
                            me.str_anular       =   '';
                            me.tp_visado        =   0;
                            me.tp_observacion   =   0;
                            me.btn_envio        =   0;
                            me.btn_aprobar      =   0;
                            me.btn_rechazar     =   0;
                            me.nr_solicitud     =   0;
                            me.btn_publicar     =   0;
                            me.btn_responder    =   0;
                            me.btn_informar     =   0;
                            me.btn_derivar      =   0;
                            me.btn_expediente   =   0;
                            me.btn_vb           =   0;
                            me.tp_recepcion     =   0;
                            me.tp_satisfaccion  =   0;                            

                            break;
                        }
                        case 'actualizar':
                        {
                            me.nr_solicitud         =   0;
                            me.nr_prioridad         =   2;
                            me.nr_motivo            =   {};
                            /*
                            me.nr_ticket            =   '';
                            me.rut_vecino           =   '';
                            me.nm_vecino            =   '';
                            me.ap_paterno           =   '';
                            me.ap_materno           =   '';
                            me.nr_prefijo           =   '+569';
                            me.nr_telefono          =   '';
                            me.mail_vecino          =   '';
                            me.str_aclara_vecino    =   '';
                            me.arr_ubicacion_vecino =   [];
                            me.nr_direccion         =   [];
                            me.nr_servicio          =   [];
                            me.arr_direccion_solicitud  =   [];
                            me.tp_municipal             =   0;
                            me.nr_prioridad             =   2;
                            me.nr_estado                =   0;
                            me.tp_ubicacion_solicitud   =   1;
                            me.str_solicitud            =   '';
                            me.str_aclara_solicitud     =   '';
                            */

                            break;
                        }
                        case 'archivo':
                        {
                            me.str_archivo      =   '';
                            me.arr_error        =   [];
                            me.arr_valida       =   [];
                            me.tp_error         =   0;                            
                            me.descartarAdjunto();

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

                            break;
                        }
                    }
                },
                //-------------------------------------------------------------------------------------------
                ensamblarDatos(accion)
                {
                    let me              =   this;
                    var ruta            =   '';
                    var titulo          =   '';
                    var tiempo          =   3000;
                    var error           =   0;                    
                    var formData        =   new FormData();
                    var fc_format       =   'YYYY-MM-DD';                                   
                    //----------------------------------------------------------------
                    switch(accion)
                    {
                        case 'solicitud':
                        {
                            titulo  =   'Registrar Solicitud';
                            tiempo  =   3000;
                            error   =   me.validarDatos(accion);

                            if(error == 1)
                                me.desplegarVentana('warning',titulo,'Favor revisar los campos requeridos');
                            else
                            {
                                //------------------------------------
                                // ruta    =   '/';                            
                                // me.zonaDeEspera(titulo, tiempo);
                                //------------------------------------
                                //formData.append('nm_direccion', me.getLabel(me.nr_direccion));
                                //------------------------------------
                                // me.registrarDatos(ruta, formData);
                                //------------------------------------
                            }

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

                            if(error == 1)
                                me.desplegarVentana('warning',titulo,'Favor revisar los campos requeridos');
                            else
                            {
                                //------------------------------------
                                me.btn_aprobar      =   1;
                                $('.btn_rechazar').attr('disabled',true);
                                //------------------------------------
                                ruta    =   '/macrozona/visacion';                            
                                me.zonaDeEspera(titulo, tiempo);
                                //------------------------------------
                                formData.append('nr_id', me.nr_solicitud);
                                formData.append('opcion', me.tp_visado);
                                formData.append('str_observacion', tinymce.get("str_visado").getContent({format: "text"}));
                                formData.append('str_observacion_html', tinymce.get("str_visado").getContent({format: "html"}));
                                //------------------------------------
                                me.registrarDatos(ruta, formData);
                                //------------------------------------
                            }

                            break;
                        }
                        case 'derivar':
                        {
                            titulo  =   'Derivar Solicitud';
                            tiempo  =   3000;
                            error   =   me.validarDatos(accion);
                            
                            if(error == 1)
                                me.desplegarVentana('warning',titulo,'Favor revisar los campos requeridos');
                            else
                            {
                                //------------------------------------
                                me.btn_derivar  =   1;
                                //------------------------------------
                                ruta    =   '/solicitud/derivar';                            
                                me.zonaDeEspera(titulo, tiempo);
                                //------------------------------------
                                formData.append('nr_solicitud', me.nr_solicitud);
                                formData.append('nr_servicio',  me.getValue(me.nr_servicio));
                                formData.append('nm_servicio', me.getLabel(me.nr_servicio));
                                formData.append('nr_direccion', me.nr_servicio.id_direccion);
                                formData.append('nr_depto', me.nr_servicio.id_depto);
                                formData.append('str_derivar', tinymce.get("str_derivar").getContent({format: "text"}));
                                formData.append('str_derivar_html', tinymce.get("str_derivar").getContent({format: "html"}));
                                formData.append('tp_ingreso', 5); // Administrador
                                //------------------------------------
                                me.registrarDatos(ruta, formData);
                                //------------------------------------
                            }

                            break;
                        }
                        case 'feedback':
                        {
                            titulo  =   'Registrar Feedback';
                            tiempo  =   3000;
                            error   =   me.validarDatos(accion);

                            if(error == 1)
                                me.desplegarVentana('warning',titulo,'Favor revisar los campos requeridos');
                            else
                            {
                                //------------------------------------
                                 me.btn_derivar  =   1;
                                //------------------------------------
                                ruta    =   '/feedback/store';                            
                                me.zonaDeEspera(titulo, tiempo);
                                //------------------------------------
                                formData.append('nr_id', me.nr_solicitud);
                                formData.append('str_observacion', me.str_feedback);
                                formData.append('tp_satisfaccion', me.tp_satisfaccion);
                                formData.append('tp_recepcion', me.tp_recepcion);
                                //------------------------------------
                                me.registrarDatos(ruta, formData);
                                //------------------------------------
                            }

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

                            if(error == 1)
                                me.desplegarVentana('warning',titulo,'Favor revisar los campos requeridos');
                            else
                            {
                                //------------------------------------
                                 me.btn_envio   =   1;
                                //------------------------------------
                                ruta    =   '/solicitud/mz/update';                            
                                me.zonaDeEspera(titulo, tiempo);
                                //------------------------------------
                                // Datos de Solicitud
                                formData.append('id_consulta', me.nr_solicitud);
                                //formData.append('nr_tipo', me.getValue(me.nr_servicio));
                                //formData.append('nm_tipo', me.getLabel(me.nr_servicio));
                                formData.append('nr_motivo', me.getValue(me.nr_motivo));
                                formData.append('nr_prioridad', me.nr_prioridad);
                                // ubicacion del problema
                                //if(Object.keys(me.arr_direccion_solicitud).length)
                                //    formData.append('arr_direccion_solicitud[]', JSON.stringify(me.arr_direccion_solicitud));

                                //formData.append('str_observacion', me.str_solicitud);
                                //formData.append('str_aclaratoria_solicitud', me.str_aclara_solicitud);
                                //formData.append('nr_dir_municipal', me.getValue(me.nr_direccion));
                                //formData.append('tp_direccion_solicitud', me.tp_ubicacion_solicitud);
                                //------------------------------------
                                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_str_archivo.length; i++) 
                                    {
                                        formData.append('arr_observacion[]', me.arr_str_archivo[i]);
                                    }
                                }
                                //------------------------------------
                                me.registrarDatos(ruta, formData);
                                //------------------------------------
                            }

                            break;
                        }
                    }
                    //----------------------------------------------------------------
                },
                //-------------------------------------------------------------------------------------------
                validarDatos(tp_validacion)
                {
                    let me          =   this;
                    var error       =   0;
                    me.arr_valida   =   [];    
                    me.arr_form     =   {}; 
                    me.str_msj      =   '';

                    switch(tp_validacion)
                    {
                        case 'solicitud':
                        {
                            

                            break;
                        }
                        case 'aprobar':
                        {
                            if(me.nr_solicitud == 0)
                                me.arr_form.nr_solicitud    =   'No se encuentra el Id de la Solicitud';                            

                            break;
                        }
                        case 'derivar':
                        {
                            if(me.nr_solicitud == 0)
                                me.arr_form.nr_solicitud    =   'No se encuentra el Id de la Solicitud';

                            if(me.getValue(me.nr_servicio) == 0)
                                me.arr_form.nr_servicio     =   'Debe seleccionar un Servicio';

                            if(tinymce.get("str_derivar").plugins.wordcount.body.getCharacterCount() <  10)
                                me.arr_form.str_derivar   =   'La observación debe tener minimo 10 caracteres';

                            if(tinymce.get("str_derivar").plugins.wordcount.body.getCharacterCount() >  1000)
                                me.arr_form.str_derivar   =   'La observación debe tener maximo 1000 caracteres';

                            break;
                        }
                        case 'feedback':
                        {
                            if(me.nr_solicitud == 0)
                                me.arr_form.nr_solicitud    =   'No se encuentra el Id de la Solicitud';

                            if(me.tp_recepcion == 1 && me.tp_satisfaccion == 0)
                                me.arr_form.tp_satisfaccion     =   'Favor seleccionar el nivel de satisfacción';

                            if(me.tp_recepcion == 1 && me.str_feedback.trim().length == 0)
                                me.arr_form.str_feedback        =   'Favor ingresar la observación del feedback';

                            break;
                        }
                        case 'actualizar':
                        {
                            if(me.nr_solicitud == 0)
                                me.arr_form.nr_solicitud    =   'No se encuentra el Id de la Solicitud';

                            if(me.getValue(me.nr_direccion) == 0)
                                me.arr_form.nr_direccion    =   'Debe seleccionar la Dirección Municipal';

                            if(me.getValue(me.nr_servicio) == 0)
                                me.arr_form.nr_servicio     =   'Debe seleccionar un Servicio';

                            if(me.nr_prioridad == 0)
                                me.arr_form.nr_prioridad    =   'Debe indicar la Importancia';

                            if(me.str_solicitud.trim().length < 5)
                                me.arr_form.str_solicitud   =   'La Descripción de la Solicitud debe tener minimo 5 caracteres';

                            if(me.arr_direccion_solicitud === null)
                                me.arr_form.nm_ubicacion_solicitud      =   'Debe ingresar la Dirección del Requerimiento';

                            if(me.tp_ubicacion_solicitud == 0)
                                me.arr_form.tp_ubicacion_solicitud      =   'Debe indicar  si es [Frente | Altura]';

                            break;
                        }
                    }

                    if(Object.keys(me.arr_form).length != 0)
                        error   =   1;

                    return error;
                },
                //-------------------------------------------------------------------------------------------
                registrarDatos(ruta, formData)
                {
                    let me              =       this;
                    var tp_icon         =       '';
                    var titulo          =       '';
                    var mensaje         =       '';
                    var error           =       '';

                    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.btn_envio        =   0;
                            me.btn_clonar       =   0;
                            me.btn_expediente   =   0;
                            //-------------------------------------------------------
                            if(me.btn_responder == 1)
                            {
                                $('.btn_publicar').attr('disabled',false);
                                $('.btn_informar').attr('disabled',false);
                                $('.btn_derivar').attr('disabled',false);
                                $('.btn_vb').attr('disabled',false);
                            }
                            if(me.btn_publicar == 1)
                            {
                                $('.btn_responder').attr('disabled',false);
                                $('.btn_informar').attr('disabled',false);
                                $('.btn_derivar').attr('disabled',false);
                                $('.btn_vb').attr('disabled',false);
                            }
                            if(me.btn_informar == 1)
                            {
                                $('.btn_publicar').attr('disabled',false);
                                $('.btn_responder').attr('disabled',false);
                                $('.btn_derivar').attr('disabled',false);
                                $('.btn_vb').attr('disabled',false);
                            }
                            if(me.btn_vb == 1)
                            {
                                $('.btn_publicar').attr('disabled',false);
                                $('.btn_informar').attr('disabled',false);
                                $('.btn_responder').attr('disabled',false);
                                $('.btn_derivar').attr('disabled',false);
                            }
                            //-------------------------------------------------------
                            if(me.tp_accion === 1)
                            {
                                me.cargarHistorial(me.nr_solicitud);
                                me.limpiarDatos('historial');
                                me.limpiarDatos('archivo');
                                me.refrescarDatos();
                                me.arr_archivo          =   [];
                                me.arr_files            =   [];
                                me.arr_str_archivo      =   [];
                                $('#modal_derivar').modal('hide');
                            }
                            if(me.tp_accion === 2)
                            {
                                me.limpiarDatos('historial');
                                me.refrescarDatos();
                                $('#modal_anular').modal('hide');
                                $('#modal_historial').modal('hide');
                            }
                            if(me.tp_accion === 3)
                            {
                                $('#modal_actualizar').modal('hide');
                                me.limpiarDatos('actualizar');
                                me.refrescarDatos();            
                            }
                            if(me.tp_accion == 5)
                            {
                                me.limpiarDatos('historial');
                                me.limpiarDatos('archivo');
                                me.refrescarDatos();
                                $('#modal_derivar').modal('hide');
                                $('#modal_historial').modal('hide');
                            }
                        }
                        else
                        {
                            me.btn_envio        =   0;
                            me.btn_clonar       =   0;
                            me.btn_expediente   =   0;
                            //-------------------------------------------------------
                            if(me.btn_responder == 1)
                            {
                                $('.btn_publicar').attr('disabled',false);
                                $('.btn_informar').attr('disabled',false);
                                $('.btn_derivar').attr('disabled',false);
                            }
                            if(me.btn_publicar == 1)
                            {
                                $('.btn_responder').attr('disabled',false);
                                $('.btn_informar').attr('disabled',false);
                                $('.btn_derivar').attr('disabled',false);
                            }
                            if(me.btn_informar == 1)
                            {
                                $('.btn_publicar').attr('disabled',false);
                                $('.btn_responder').attr('disabled',false);
                                $('.btn_derivar').attr('disabled',false);
                            }
                            if(me.btn_vb == 1)
                            {
                                $('.btn_publicar').attr('disabled',false);
                                $('.btn_informar').attr('disabled',false);
                                $('.btn_responder').attr('disabled',false);
                                $('.btn_derivar').attr('disabled',false);
                            }

                            me.btn_responder    =   0;
                            me.btn_publicar     =   0;
                            me.btn_informar     =   0;
                            me.btn_vb           =   0;
                            //-------------------------------------------------------
                        }
                    })
                    .catch(function (error) 
                    {
                        me.btn_envio        =   0;
                        me.btn_clonar       =   0;
                        me.btn_aprobar      =   0;
                        me.btn_rechazar     =   0;
                        me.btn_publicar     =   0;
                        me.btn_responder    =   0;
                        me.btn_informar     =   0;
                        me.btn_derivar      =   0;
                        me.btn_expediente   =   0;
                        //-------------------------------------------------------
                        if(me.btn_responder == 1)
                        {
                            $('.btn_publicar').attr('disabled',false);
                            $('.btn_informar').attr('disabled',false);
                            $('.btn_derivar').attr('disabled',false);
                        }
                        if(me.btn_publicar == 1)
                        {
                            $('.btn_responder').attr('disabled',false);
                            $('.btn_informar').attr('disabled',false);
                            $('.btn_derivar').attr('disabled',false);
                        }
                        if(me.btn_informar == 1)
                        {
                            $('.btn_publicar').attr('disabled',false);
                            $('.btn_responder').attr('disabled',false);
                            $('.btn_derivar').attr('disabled',false);
                        }
                        //-------------------------------------------------------
                        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':
                        {
                            switch(accion)
                            {
                                case 'historial':
                                {
                                    me.tp_modal                 =   1;
                                    me.tp_accion                =   1;
                                    me.tp_btn                   =   0;
                                    me.btn_envio                =   0;
                                    me.btn_clonar               =   0;
                                    me.titulo_modal             =   'Historial';
                                    me.limpiarDatos(accion);
                                    me.arr_solicitud            =   data;
                                    me.nr_solicitud             =   data.id;
                                    me.nr_ticket                =   data.nr_ticket;
                                    me.nr_estado                =   data.id_estado;
                                    me.nm_estado                =   data.nm_estado;
                                    $('#modal_historial').modal('show');
                                    me.cargarHistorial(data.id);

                                    break;
                                }
                                case 'aprobar':
                                {
                                    me.tp_modal                 =   1;
                                    me.tp_accion                =   1;
                                    me.tp_btn                   =   1;
                                    me.btn_envio                =   0;
                                    me.nr_solicitud             =   data.id;
                                    me.nr_ticket                =   data.nr_ticket;
                                    me.tp_visado                =   2;
                                    me.ensamblarDatos(accion);

                                    break;
                                }
                                case 'derivar':
                                {
                                    me.tp_modal         =   1;
                                    me.tp_accion        =   5;
                                    me.tp_btn           =   1;
                                    me.btn_envio        =   0;
                                    me.nr_solicitud     =   data.id;
                                    me.nr_ticket        =   data.nr_ticket;
                                    me.btn_derivar      =   0;
                                    me.tp_derivar       =   0;
                                    me.nr_direccion     =   [];
                                    me.nr_depto         =   [];
                                    me.nr_servicio      =   {
                                        value         : 0,
                                        label         : 'Seleccione Servicio',
                                        id_direccion  : 0,
                                        id_depto      : 0,
                                    };

                                    me.asyncDerivar();
                                    
                                    $('#modal_derivar').modal('show');

                                    $("#txt_derivar").html('<textarea maxlength="300" rows="2" id="str_derivar" class="form-control tinymce" disabled="true"></textarea>');
                                    me.existeTextArea();
                                    
                                    break;
                                }                             
                                case 'actualizar':
                                {
                                    me.tp_modal         =   1;
                                    me.tp_accion        =   3;
                                    me.tp_btn           =   1;
                                    me.btn_envio        =   0;
                                    me.titulo_modal     =   'Actualizar Solicitud';
                                    me.arr_solicitud    =   data;
                                    me.nr_solicitud     =   data.id;
                                    me.nr_ticket        =   data.nr_ticket;

                                    if(data.vecino)
                                    {
                                        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_prefijo           =   data.vecino.nr_prefijo;
                                        me.nr_telefono          =   data.vecino.nr_telefono;
                                        me.mail_vecino          =   data.vecino.nm_mail;
                                        me.tp_ubicacion_vecino  =   data.vecino.tp_direccion;
                                        me.str_aclara_vecino    =   data.vecino.str_aclaratoria;
                                        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.noVecino(1);
                                    }
                                    else
                                    {
                                        me.noVecino(0);
                                    }

                                    me.nr_direccion     =   {
                                                                value: data.id_direccion_destino,
                                                                label: data.nm_direccion_destino,
                                                            };

                                    me.cargarServicios(me.getValue(me.nr_direccion), 0);

                                    me.nr_motivo        =   {
                                                                value: data.id_motivo,
                                                                label: data.nm_motivo
                                                            };
                                    me.nr_servicio      =   {
                                                                value: data.id_tipo,
                                                                label: data.nm_tipo
                                                            };

                                    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.tp_municipal             =   data.tp_municipal;
                                    me.nr_prioridad             =   data.prioridad.id;
                                    me.nr_estado                =   data.id_estado;
                                    me.tp_ubicacion_solicitud   =   data.tp_direccion;
                                    me.str_solicitud            =   data.str_observacion;
                                    me.str_aclara_solicitud     =   data.str_aclaratoria;
                                    
                                    
                                    $('#modal_actualizar').modal('show');

                                    break;
                                }
                                case 'feedback':
                                {
                                    me.tp_modal         =   1;
                                    me.tp_accion        =   1;
                                    me.tp_btn           =   1;
                                    me.btn_envio        =   0;
                                    me.nr_solicitud     =   data.id;
                                    me.nr_ticket        =   data.nr_ticket;
                                    me.ensamblarDatos(accion);

                                    break;
                                }
                            }

                            break;
                        }
                        case 'archivo':
                        {
                            switch(accion)
                            {
                                case 'anexar':
                                {
                                    me.tp_modal             =   1;
                                    me.tp_accion            =   1;
                                    me.tp_btn               =   1;
                                    me.btn_envio            =   0;
                                    me.titulo_adjunto       =   'Adjuntar Documentos';
                                    me.tp_adjunto           =   'documento';
                                    me.limpiarDatos(modelo);
                                    $('#modal_adjunto').modal('show');

                                    break;
                                }
                                case 'revisar':
                                {
                                    me.tp_modal             =   1;
                                    me.tp_accion            =   1;
                                    me.tp_btn               =   1;
                                    me.btn_envio            =   0;
                                    me.titulo_adjunto       =   'Revisar Documentos';
                                    me.tp_adjunto           =   'archivos';
                                    me.limpiarDatos(modelo);
                                    me.arr_adjuntos         =   data.archivos;
                                    $('#modal_revisar').modal('show');

                                    break;
                                }
                                case 'examinar':
                                {
                                    me.tp_modal             =   1;
                                    me.tp_accion            =   1;
                                    me.tp_btn               =   1;
                                    me.btn_envio            =   0;
                                    me.titulo_adjunto       =   'Revisar Documentos';
                                    me.tp_adjunto           =   'archivos';
                                    me.limpiarDatos(modelo);
                                    me.arr_adjuntos         =   data.archivos_asignacion;
                                    $('#modal_revisar').modal('show');

                                    break;
                                }
                            }

                            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, tp_btn = 1)
                {
                    Swal.fire({
                        icon: tp_icon,
                        title: titulo,
                        html: mensaje,
                        backdrop:false,
                        showConfirmButton: tp_btn
                    });                       
                },
            },

            mounted() {
                let me = this;
                me.activeDatetimepicker();
                me.cargarUsuario();
                me.cargarDatos();
                me.cargarTipoIngreso();
                me.cargarPendientes();
                me.cargarDireccionesMunicipales();
                me.cargarDeptosMunicipales(0,0);
                me.cargarServicios(0,0);
                me.cargarPrioridad();
                me.cargarMotivo();
                me.cargarMacrozona();
                me.cargarUnidadVecinal();
                me.cargarTicket();
                me.cargarUbicaciones();
                me.cargarPersonas();
            }
        });
    </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 -----*/

            $('#modal_historial').modal({backdrop: 'static', keyboard: false});
            $('#modal_actualizar').modal({backdrop: 'static', keyboard: false});
            $('#modal_derivar').modal({backdrop: 'static', keyboard: false});
            $('#modal_adjunto').modal({backdrop: 'static', keyboard: false});
            $('#modal_revisar').modal({backdrop: 'static', keyboard: false});
        });
        //-----------------------------------------------------------------
        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()