Vue.component('v-select', VueSelect.VueSelect);
Vue.use(VeeValidate);
Vue.use("vuejs-uib-pagination")
window.onload = function(){
	var app = new Vue({
		el:'#app',
		created:function(){
			this.$validator.localize('es')
			this.getSis()
		},
		data:{
			sistemas:[],
			modulo:[],
			paginado:[],
			sisId:'',
			nombre:'',
			descripcion:'',
			nombre1:'',
			descripcion1:'',
			modId:'',
			search:'',
			paginacion:{
				currentPage:1,
				numPages:1
			},
			totalItems:null,
			itemsPerPage:6
		},
		watch:{
			paginacion:function(){
				this.setPaddingData(this.paginacion.currentPage)
			}
		},

		methods:{
			setPaddingData:function(page){
				var pagedData=this.modulo.slice(
					(page - 1)*this.itemsPerPage,
					page * this.itemsPerPage
					)
				this.paginado=pagedData
			},
			getSis:function(){
				axios.post('sistemas')
				.then(r => {
					this.sistemas=r.data
				})
				.catch( error => {
					swal({
						title:'¡Atención!',
						text:'Estimado Usuario, Tenemos problemas con la consulta, Por favor intente mas tarde',
						icon:'error',
						animation:'slide-from-top'
					})
				})
			},
			getMod:function(){
				axios.post('modulos',{id:this.sisId})
				.then( r => {
					this.modulo=r.data
					this.totalItems=this.modulo.length
				})
			},
			send:function(){
				this.$validator.errors.clear()
				this.$validator.validateAll('addForm')
				.then((result) => {
					if (this.errors.any('addForm')) {
						swal({
							title:'¡Atención!',
							text:'Estimado Usuario, Por Favor rellene todos los campos',
							icon:'error',
							animation:'slide-from-top'
						})
					}else{
						let array={
							nombre:this.nombre,
							descripcion:this.descripcion,
							id:this.sisId
						}
						axios.post('modulos/save',array)
						.then( r => {
							if (r.data['resultado'] == 'guardo') {
								swal({
									title:'¡Notificación!',
									text:'Estimado usuario, el modulo se ha guardado correctamente',
									icon:'success',
									animation:'slide-from-top'
								})
								this.getMod()
								$('#ModalAdd').modal('hide')
								this.$validator.errors.clear()
								this.resetear()
							}else if(r.data['resultado'] == 'existe'){
								swal({
									title:'¡Atención!',
									text:'Estimado usuario, hay un modulo con ese mismo nombre, por favor use otro',
									icon:'error',
									animation:'slide-from-top'
								})
							}else if(r.data['resultado'] == 'falta'){
								swal({
									title:'¡Atención!',
									text:'Estimado Usuario, Tenemos problemas para guardar, Por favor intente mas tarde',
									icon:'error',
									animation:'slide-from-top'
								})
								$('#ModalAdd').modal('hide')
								this.$validator.errors.clear()
							}
						})
						.catch(error =>{
							swal({
								title:'¡Atención!',
								text:'Estimado Usuario, Tenemos problemas para guardar, Por favor intente mas tarde',
								icon:'error',
								animation:'slide-from-top'
							})
							$('#ModalAdd').modal('hide')
							this.$validator.errors.clear()
						})
					}
				})
			},
			edit:function(x){
				this.modId=x.id
				this.nombre1=x.nombre_modulo
				this.descripcion1=x.descripcion_modulo
			},
			update:function(){
				this.$validator.errors.clear()
				this.$validator.validateAll('editForm')
				.then(() => {
					if(this.errors.any('editForm')){
						swal({
							title:'¡Atención!',
							text:'Estimado Usuario, Por Favor rellene todos los campos',
							icon:'error',
							animation:'slide-from-top'
						})
					}else{
						let array={
							nombre:this.nombre1,
							descripcion:this.descripcion1,
							sisId:this.sisId,
							modId:this.modId
						}
						axios.post('modulos/update',array)
						.then( r => {
							if( r.data['resultado'] == 'actualizo'){
								swal({
									title:'¡Notificación!',
									text:'Estimado usuario, el modulo se ha actualizado correctamente',
									icon:'success',
									animation:'slide-from-top'
								})
								this.getMod()
								$('#ModalEdit').modal('hide')
								this.resetear()
							}else if(r.data['resultado']=='yasta'){
								swal({
									title:'¡Atención!',
									text:'Estimado usuario, existe un modulo con ese mismo nombre, por favor use otro',
									icon:'error',
									animation:'slide-from-top'
								})
							}else if(r.data['resultado']=='falta'){
								swal({
									title:'¡Atención!',
									text:'Estimado Usuario, Tenemos problemas para actualizar, Por favor intente mas tarde',
									icon:'error',
									animation:'slide-from-top'
								})
								$('#ModalAdd').modal('hide')
								this.$validator.errors.clear()
							}
						})
						.catch( error => {
							swal({
								title:'¡Atención!',
								text:'Estimado Usuario, Tenemos problemas para actualizar, Por favor intente mas tarde',
								icon:'error',
								animation:'slide-from-top'
							})
						})
					}
				})
			},
			resetear:function(){
				this.$validator.errors.clear();
				this.nombre=''
				this.descripcion=''
				this.nombre1=''
				this.descripcion1=''
				this.modId=''
			},
			borrar:function(x){
				var id = x.id
				var nombre = x.nombre_modulo
				axios.post('modulos/delete',{id:id})
				.then( r => {
					if(r.data['resultado'] == 'borro'){
						swal({
							title:'¡Notificación!',
							text:'Estimado usuario, el modulo ' +nombre+ ' ha sido borrado correctamente',
							icon:'success',
							animation:'slide-from-top'
						})
						this.resetear()
						this.getMod()
					}else if(r.data['resultado'] == 'error'){
						swal({
							title:'¡Atención!',
							text:'Estimado Usuario, Tenemos problemas para borrar, Por favor intente mas tarde',
							icon:'error',
							animation:'slide-from-top'
						})
					} else if (r.data['resultado'] == 'no') {
						swal("¡Atención!", "El modulo " +nombre+" tiene procesos asignados.", "error");
					}
				})
				.catch( error => {
					swal({
						title:'¡Atención!',
						text:'Estimado Usuario, Tenemos problemas para borrar, Por favor intente mas tarde',
						icon:'error',
						animation:'slide-from-top'
					})
				})

			}
		},
		computed:{
		    paginados(){
		      return this.modulo
		      .filter(x => {
		        return x.nombre_modulo.toLowerCase().indexOf(this.search.toLowerCase()) > -1
		      })
		      .slice(0,6)
		    }
		}
	})
}


