{"version":3,"sources":["webpack:///./src/components/cardTable/CardTableV2.vue","webpack:///src/components/cardTable/CardTableV2.vue","webpack:///./src/components/cardTable/CardTableV2.vue?66a5","webpack:///./src/components/cardTable/CardTableV2.vue?9838","webpack:///./src/views/Helexium/Erp/Contabilidad/Ventas/Clientes/Clientes.vue?9250","webpack:///./src/components/cardTable/CardTableV2.vue?c182","webpack:///./src/views/Helexium/Erp/Contabilidad/Ventas/Clientes/Clientes.vue","webpack:///src/views/Helexium/Erp/Contabilidad/Ventas/Clientes/Clientes.vue","webpack:///./src/views/Helexium/Erp/Contabilidad/Ventas/Clientes/Clientes.vue?4563","webpack:///./src/views/Helexium/Erp/Contabilidad/Ventas/Clientes/Clientes.vue?52e8"],"names":["render","_vm","this","_c","_self","staticClass","staticStyle","_l","data","card","index","key","style","boxShadow","activeCard","color","on","$event","showCursorGlow","hideCursorGlow","event","handleMouseMove","toggleActive","showGlow","left","cursorX","top","cursorY","glowStyle","opacity","_e","class","width","height","backgroundColor","computeBorderRadius","tipo","iconName","computeAnimateIcon","animated","animatedState","shouldAnimateTitle","_v","_s","title","evaluateValue","value","staticRenderFns","props","type","Array","default","onActivate","onDeactivate","animationFrameId","beat","beatFade","bounce","fade","flip","shake","spin","spinReverse","spinPulse","tipoIcon","circle","squared","shield","water","mounted","onResize","window","addEventListener","beforeDestroy","removeEventListener","methods","forEach","_","checkTitleLength","$nextTick","titleElement","$el","querySelectorAll","scrollWidth","clientWidth","$set","rect","currentTarget","getBoundingClientRect","targetX","clientX","targetY","clientY","cancelAnimationFrame","animate","startX","startY","dx","dy","Math","abs","requestAnimationFrame","component","attrs","$router","push","dataCards","scopedSlots","_u","fn","model","search","callback","$$v","expression","proxy","selected","length","customers","$vs","checkAll","allCheck","sortData","getPage","getSearch","page","max","tr","i","includes","Nombre","CIFNIF","CorreoElectronico","Telefono","Pais","Pendiente","Pagado","getLength","components","CardTable","editActive","edit","editProp","active","created","updateDataCardsValues","pendienteTotal","reduce","sum","customer","pagadoTotal"],"mappings":"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AA,GACAV,UAAA,CACA,CACA9D,MAAA,YACAE,MAAA,EACAT,SAAA,eACAtB,MAAA,qBACAqB,KAAA,SACAG,SAAA,UAEA,CACAK,MAAA,YACAE,MAAA,EACAT,SAAA,eACAtB,MAAA,qBACAqB,KAAA,SACAG,SAAA,WAGA+E,UAAA,CACA,CACA,OACA,oBACA,mBACA,2CACA,2BACA,cACA,cACA,aAEA,CACA,OACA,qBACA,mBACA,4CACA,2BACA,cACA,cACA,YAEA,CACA,OACA,0BACA,mBACA,iDACA,2BACA,cACA,YACA,aAEA,CACA,OACA,sBACA,mBACA,6CACA,2BACA,cACA,cACA,UAEA,CACA,OACA,uBACA,mBACA,8CACA,2BACA,cACA,cACA,YAEA,CACA,OACA,mBACA,mBACA,0CACA,2BACA,cACA,cACA,aAEA,CACA,OACA,uBACA,mBACA,8CACA,2BACA,cACA,cACA,YAEA,CACA,OACA,qBACA,mBACA,4CACA,2BACA,cACA,cACA,eAKA0B,UACA,KAAAC,yBAEAtE,QAAA,CACAsE,wBACA,MAAAC,EAAA,KAAA5B,UAAA6B,OAAA,CAAAC,EAAAC,IAAAD,EAAAC,EAAAd,UAAA,GACAe,EAAA,KAAAhC,UAAA6B,OAAA,CAAAC,EAAAC,IAAAD,EAAAC,EAAAb,OAAA,GACA,KAAA9B,UAAA,GAAA5D,MAAAoG,EACA,KAAAxC,UAAA,GAAA5D,MAAAwG,KC/N+b,I,wBCQ3bhD,EAAY,eACd,EACAtG,EACA+C,GACA,EACA,KACA,KACA,MAIa,aAAAuD,E","file":"js/chunk-4716b1d2.ec9a9c6f.js","sourcesContent":["var render = function render(){var _vm=this,_c=_vm._self._c;return _c('div',{staticClass:\"row\",staticStyle:{\"gap\":\"1rem\"}},_vm._l((_vm.data),function(card,index){return _c('div',{key:index,staticClass:\"col-12 col-md d-flex justify-content-between align-items-center rounded p-2 glow-box bg-dark\",style:({\n      boxShadow: _vm.activeCard === index ? `inset 0 0 0 2px ${card.color}` : 'none',\n    }),on:{\"mouseenter\":function($event){return _vm.showCursorGlow(index)},\"mouseleave\":function($event){return _vm.hideCursorGlow(index)},\"mousemove\":(event) => _vm.handleMouseMove(event, index),\"click\":function($event){return _vm.toggleActive(index)}}},[(_vm.showGlow)?_c('div',{staticClass:\"cursor-glow\",style:({\n        left: _vm.cursorX[index] + 'px',\n        top: _vm.cursorY[index] + 'px',\n        ..._vm.glowStyle(card.color),\n        opacity: _vm.showGlow[index] ? '1' : '0',\n      })}):_vm._e(),_c('div',{class:`d-flex align-items-center justify-content-center`,style:({\n        width: '60px',\n        height: '60px',\n        backgroundColor: card.color,\n        'border-radius': _vm.computeBorderRadius(card.tipo),\n        '-webkit-box-shadow': `0px -1px 33px -8px ${card.color}`,\n        '-moz-box-shadow': `0px -1px 33px -8px ${card.color}`,\n        'box-shadow': `0px -1px 33px -8px ${card.color}`,\n      })},[_c('i',{class:`fas fa-${card.iconName} ${_vm.computeAnimateIcon(card.animated, index)}`,staticStyle:{\"font-size\":\"1.5rem\"}})]),_c('div',{staticClass:\"d-flex flex-column align-items-center\",staticStyle:{\"flex-grow\":\"1\",\"max-width\":\"calc(100% - 60px)\"}},[_c('div',{class:`title-container`},[_c('span',{staticClass:\"font-weight-bold\",class:[_vm.showGlow[index] && _vm.animatedState[index] && _vm.shouldAnimateTitle[index] ? 'title-animate' : 'title-static']},[_vm._v(\" \"+_vm._s(card.title)+\" \")])]),_c('span',{staticClass:\"font-weight-bold\",staticStyle:{\"font-size\":\"18px\"}},[_vm._v(_vm._s(_vm.evaluateValue(card.value)))])])])}),0)\n}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<!-- card table info -->\r\n<template>\r\n  <div class=\"row\" style=\"gap: 1rem\">\r\n    <div\r\n      v-for=\"(card, index) in data\"\r\n      :key=\"index\"\r\n      class=\"col-12 col-md d-flex justify-content-between align-items-center rounded p-2 glow-box bg-dark\"\r\n      :style=\"{\r\n        boxShadow: activeCard === index ? `inset 0 0 0 2px ${card.color}` : 'none',\r\n      }\"\r\n      @mouseenter=\"showCursorGlow(index)\"\r\n      @mouseleave=\"hideCursorGlow(index)\"\r\n      @mousemove=\"(event) => handleMouseMove(event, index)\"\r\n      @click=\"toggleActive(index)\"\r\n    >\r\n      <!-- linar-style cursor glow -->\r\n      <div\r\n        v-if=\"showGlow\"\r\n        class=\"cursor-glow\"\r\n        :style=\"{\r\n          left: cursorX[index] + 'px',\r\n          top: cursorY[index] + 'px',\r\n          ...glowStyle(card.color),\r\n          opacity: showGlow[index] ? '1' : '0',\r\n        }\"\r\n      ></div>\r\n      <div\r\n        :class=\"`d-flex align-items-center justify-content-center`\"\r\n        :style=\"{\r\n          width: '60px',\r\n          height: '60px',\r\n          backgroundColor: card.color,\r\n          'border-radius': computeBorderRadius(card.tipo),\r\n          '-webkit-box-shadow': `0px -1px 33px -8px ${card.color}`,\r\n          '-moz-box-shadow': `0px -1px 33px -8px ${card.color}`,\r\n          'box-shadow': `0px -1px 33px -8px ${card.color}`,\r\n        }\"\r\n      >\r\n        <i :class=\"`fas fa-${card.iconName} ${computeAnimateIcon(card.animated, index)}`\" style=\"font-size: 1.5rem\"></i>\r\n      </div>\r\n      <div class=\"d-flex flex-column align-items-center\" style=\"flex-grow: 1; max-width: calc(100% - 60px)\">\r\n        <div :class=\"`title-container`\">\r\n          <span :class=\"[showGlow[index] && animatedState[index] && shouldAnimateTitle[index] ? 'title-animate' : 'title-static']\" class=\"font-weight-bold\">\r\n            {{ card.title }}\r\n          </span>\r\n        </div>\r\n        <span class=\"font-weight-bold\" style=\"font-size: 18px\">{{ evaluateValue(card.value) }}</span>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</template>\r\n\r\n<script>\r\nexport default {\r\n  // Documentación del componente CardTable.js\r\n\r\n  /**\r\n   * Este componente Vue.js se utiliza para renderizar un conjunto de tarjetas de información.\r\n   * Cada tarjeta es interactiva y muestra diferentes tipos de datos y un ícono.\r\n   *\r\n   * Propiedades:\r\n   * - data: Un array de objetos que contiene la información para renderizar cada tarjeta.\r\n   *\r\n   * Estado interno:\r\n   * - showGlow: Un objeto que controla si el efecto de brillo debe mostrarse en cada tarjeta.\r\n   * - cursorX: Un objeto que contiene la coordenada X del cursor para cada tarjeta.\r\n   * - cursorY: Un objeto que contiene la coordenada Y del cursor para cada tarjeta.\r\n   * - animationFrameId: Un objeto que guarda el ID de la solicitud de animación para cada tarjeta.\r\n   * - animatedState: Un objeto que guarda el estado de animación para cada tarjeta.\r\n   * - activeCard: Un número que indica el índice de la tarjeta activa. Null si no hay ninguna tarjeta activa.\r\n   * - shouldAnimateTitle: Un objeto que determina si el título de la tarjeta debe animarse para cada tarjeta.\r\n   *\r\n   * Métodos:\r\n   * - toggleActive: Cambia el estado activo de una tarjeta.\r\n   * - computeBorderRadius: Calcula el radio del borde según el tipo de tarjeta.\r\n   * - computeAnimateIcon: Devuelve la clase de animación apropiada para el ícono.\r\n   * - evaluateValue: Evalúa el valor que debe mostrarse en la tarjeta.\r\n   * - glowStyle: Devuelve el estilo CSS para el efecto de brillo del cursor.\r\n   * - handleMouseMove: Maneja el movimiento del mouse para el efecto de brillo del cursor.\r\n   * - showCursorGlow: Activa el efecto de brillo del cursor.\r\n   * - hideCursorGlow: Desactiva el efecto de brillo del cursor.\r\n   * - onResize: Maneja el evento de cambio de tamaño de la ventana.\r\n   * - checkTitleLength: Verifica la longitud del título para determinar si necesita animación.\r\n   */\r\n\r\n  props: {\r\n    /*\r\n       // Ejemplo de un objeto dentro del array 'data':\r\n          {\r\n          title: \"Finalizadas\",\r\n          value: () => this.listaItems.filter((cap) => cap.estadoCap && cap.disponible).length,\r\n          iconName: \"calendar-check\",\r\n          color: \"rgba(22, 162, 117, 1)\",\r\n          tipo: \"squared\",\r\n          animated: \"shake\",\r\n          onActivate: () => { console.log(\"Tarjeta activada\"); },\r\n          onDeactivate: () => { console.log(\"Tarjeta desactivada\"); }\r\n        },\r\n        */\r\n    data: {\r\n      type: Array,\r\n      default: () => [\r\n        {\r\n          title: \"Título\",\r\n          value: 0,\r\n          iconName: \"crown\",\r\n          color: \"rgba(223, 18, 46, 1)\",\r\n          tipo: \"circle\",\r\n          animated: \"shake\",\r\n          onActivate: null,\r\n          onDeactivate: null,\r\n        },\r\n      ],\r\n    },\r\n  },\r\n  data() {\r\n    return {\r\n      showGlow: {},\r\n      cursorX: {},\r\n      cursorY: {},\r\n      animationFrameId: {},\r\n      animatedState: {},\r\n      activeCard: null,\r\n      shouldAnimateTitle: {},\r\n      animated: {\r\n        beat: \"fa-beat\",\r\n        beatFade: \"fa-beat-fade\",\r\n        bounce: \"fa-bounce\",\r\n        fade: \"fa-fade\",\r\n        flip: \"fa-flip\",\r\n        shake: \"fa-shake\",\r\n        spin: \"fa-spin\",\r\n        spinReverse: \"fa-spin fa-spin-reverse\",\r\n        spinPulse: \"fa-spin-pulse\",\r\n      },\r\n      tipoIcon: {\r\n        circle: \"50%\",\r\n        squared: \"20%\",\r\n        shield: \"49% 51% 48% 52% / 29% 29% 71% 71%\",\r\n        water: \"60% 40% 78% 22% / 73% 66% 34% 27%\",\r\n      },\r\n    };\r\n  },\r\n  /*\r\nEventos de Ciclo de Vida:\r\n- mounted: Se añade un escuchador para el evento de redimensionamiento de la ventana.\r\n- beforeDestroy: Se elimina el escuchador para el evento de redimensionamiento de la ventana.\r\n*/\r\n  mounted() {\r\n    this.onResize();\r\n    window.addEventListener(\"resize\", this.onResize);\r\n  },\r\n  beforeDestroy() {\r\n    window.removeEventListener(\"resize\", this.onResize);\r\n  },\r\n  methods: {\r\n    onResize() {\r\n      this.data.forEach((_, index) => {\r\n        this.checkTitleLength(index);\r\n      });\r\n    },\r\n    checkTitleLength(index) {\r\n      this.$nextTick(() => {\r\n        const titleElement = this.$el.querySelectorAll(\".title-container span\")[index];\r\n        if (titleElement) {\r\n          // console.log(\"Client Width: \", titleElement.clientWidth);\r\n          // console.log(\"Scroll Width: \", titleElement.scrollWidth);\r\n\r\n          if (titleElement.scrollWidth > titleElement.clientWidth) {\r\n            this.$set(this.shouldAnimateTitle, index, true);\r\n          } else {\r\n            this.$set(this.shouldAnimateTitle, index, false);\r\n          }\r\n        }\r\n      });\r\n    },\r\n    toggleActive(index) {\r\n      // Desactivar tarjeta anterior si es diferente de la actual\r\n      if (this.activeCard !== null && this.activeCard !== index) {\r\n        if (typeof this.data[this.activeCard].onDeactivate === \"function\") {\r\n          this.data[this.activeCard].onDeactivate();\r\n        }\r\n      }\r\n\r\n      // Cambiar la tarjeta activa\r\n      this.activeCard = this.activeCard === index ? null : index;\r\n\r\n      // Ejecutar la función de activación o desactivación correspondiente\r\n      if (this.activeCard !== null) {\r\n        if (typeof this.data[this.activeCard].onActivate === \"function\") {\r\n          this.data[this.activeCard].onActivate();\r\n        }\r\n      } else {\r\n        if (typeof this.data[index].onDeactivate === \"function\") {\r\n          this.data[index].onDeactivate();\r\n        }\r\n      }\r\n    },\r\n    computeBorderRadius(tipo) {\r\n      return this.tipoIcon[tipo] || \"20% 40% 20% 40%\";\r\n    },\r\n    computeAnimateIcon(tipo, index) {\r\n      if (this.animatedState[index]) {\r\n        return this.animated[tipo] || \"\";\r\n      }\r\n    },\r\n    evaluateValue(value) {\r\n      if (typeof value === \"function\") {\r\n        return value();\r\n      }\r\n      return value;\r\n    },\r\n    glowStyle(color) {\r\n      return {\r\n        boxShadow: `0 0 40px 20px ${color}`,\r\n      };\r\n    },\r\n    handleMouseMove(event, index) {\r\n      const rect = event.currentTarget.getBoundingClientRect();\r\n      const targetX = event.clientX - rect.left;\r\n      const targetY = event.clientY - rect.top;\r\n\r\n      // Cancelar la animación anterior si está en curso\r\n      if (this.animationFrameId[index]) {\r\n        cancelAnimationFrame(this.animationFrameId[index]);\r\n      }\r\n\r\n      // Iniciar una nueva animación\r\n      const animate = () => {\r\n        const startX = this.cursorX[index] || 0;\r\n        const startY = this.cursorY[index] || 0;\r\n        const dx = (targetX - startX) * 0.1; // Factor de suavizado\r\n        const dy = (targetY - startY) * 0.1; // Factor de suavizado\r\n\r\n        this.$set(this.cursorX, index, startX + dx);\r\n        this.$set(this.cursorY, index, startY + dy);\r\n\r\n        if (Math.abs(dx) > 0.1 || Math.abs(dy) > 0.1) {\r\n          // Continuar la animación\r\n          this.animationFrameId[index] = requestAnimationFrame(animate);\r\n        }\r\n      };\r\n\r\n      // Iniciar la animación\r\n      this.animationFrameId[index] = requestAnimationFrame(animate);\r\n    },\r\n    showCursorGlow(index) {\r\n      this.$set(this.animatedState, index, true);\r\n      this.$set(this.showGlow, index, true);\r\n    },\r\n    hideCursorGlow(index) {\r\n      this.$set(this.animatedState, index, false);\r\n      this.$set(this.showGlow, index, false);\r\n    },\r\n  },\r\n};\r\n</script>\r\n\r\n<style scoped>\r\n/*\r\nEstilos:\r\n- glow-box: Configuración base para el efecto de resplandor.\r\n- cursor-glow: Estilo para el resplandor del cursor.\r\n- title-container: Contenedor para el título de la tarjeta.\r\n- title-animate: Animación para el título de la tarjeta.\r\n- title-static: Estilo estático para el título de la tarjeta.\r\n*/\r\n\r\n.glow-box {\r\n  position: relative;\r\n  overflow: hidden;\r\n  transition: box-shadow 0.3s ease;\r\n}\r\n\r\n.cursor-glow {\r\n  position: absolute;\r\n  width: 0;\r\n  height: 0;\r\n  border-radius: 50%;\r\n  pointer-events: none;\r\n  transition: left 0.2s, top 0.2s, opacity 0.5s ease;\r\n}\r\n\r\n.title-container {\r\n  max-width: calc(100% - 20px);\r\n  overflow: hidden;\r\n  height: 20px;\r\n}\r\n\r\n.title-animate {\r\n  display: inline-block;\r\n  white-space: nowrap;\r\n  animation: marquee 5s linear infinite;\r\n  transition: transform 0.3s ease;\r\n}\r\n\r\n.title-static {\r\n  display: inline-block;\r\n  max-width: 100%; /* Se ajusta al tamaño del contenedor */\r\n  white-space: nowrap;\r\n  overflow: hidden;\r\n  text-overflow: ellipsis;\r\n}\r\n\r\n@keyframes marquee {\r\n  from {\r\n    transform: translateX(0%);\r\n  }\r\n  to {\r\n    transform: translateX(-100%);\r\n  }\r\n}\r\n</style>\r\n","import mod from \"-!../../../node_modules/cache-loader/dist/cjs.js??ref--13-0!../../../node_modules/thread-loader/dist/cjs.js!../../../node_modules/@vue/cli-plugin-babel/node_modules/babel-loader/lib/index.js!../../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./CardTableV2.vue?vue&type=script&lang=js\"; export default mod; export * from \"-!../../../node_modules/cache-loader/dist/cjs.js??ref--13-0!../../../node_modules/thread-loader/dist/cjs.js!../../../node_modules/@vue/cli-plugin-babel/node_modules/babel-loader/lib/index.js!../../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./CardTableV2.vue?vue&type=script&lang=js\"","import { render, staticRenderFns } from \"./CardTableV2.vue?vue&type=template&id=06fcb589&scoped=true\"\nimport script from \"./CardTableV2.vue?vue&type=script&lang=js\"\nexport * from \"./CardTableV2.vue?vue&type=script&lang=js\"\nimport style0 from \"./CardTableV2.vue?vue&type=style&index=0&id=06fcb589&prod&scoped=true&lang=css\"\n\n\n/* normalize component */\nimport normalizer from \"!../../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n  script,\n  render,\n  staticRenderFns,\n  false,\n  null,\n  \"06fcb589\",\n  null\n  \n)\n\nexport default component.exports","export * from \"-!../../../../../../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--7-oneOf-1-0!../../../../../../../node_modules/@vue/cli-service/node_modules/css-loader/dist/cjs.js??ref--7-oneOf-1-1!../../../../../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../../../../../node_modules/postcss-loader/src/index.js??ref--7-oneOf-1-2!../../../../../../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../../../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./Clientes.vue?vue&type=style&index=0&id=1513a184&prod&lang=css\"","export * from \"-!../../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--7-oneOf-1-0!../../../node_modules/@vue/cli-service/node_modules/css-loader/dist/cjs.js??ref--7-oneOf-1-1!../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../node_modules/postcss-loader/src/index.js??ref--7-oneOf-1-2!../../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./CardTableV2.vue?vue&type=style&index=0&id=06fcb589&prod&scoped=true&lang=css\"","var render = function render(){var _vm=this,_c=_vm._self._c;return _c('b-container',{attrs:{\"fluid\":\"\"}},[_c('b-row',[_c('b-col',{attrs:{\"sm\":\"12\"}},[_c('card',{staticClass:\"pb-5\"},[_c('div',{staticClass:\"d-flex justify-content-between align-items-center px-4 pt-4\"},[_c('h3',{staticClass:\"card-title font-weight-bold\",staticStyle:{\"font-size\":\"30px\"}},[_vm._v(\"Clientes\")]),_c('article',{staticClass:\"d-flex justify-content-between align-items-center\"},[_c('vs-button',{on:{\"click\":function($event){return _vm.$router.push('NuevoCliente')}}},[_vm._v(\"Nuevo Cliente\")])],1)]),_c('div',{staticClass:\"px-5 py-3\"},[_c('CardTable',{attrs:{\"data\":_vm.dataCards}})],1),_c('vs-table',{staticClass:\"px-4 py-3\",scopedSlots:_vm._u([{key:\"header\",fn:function(){return [_c('vs-input',{attrs:{\"border\":\"\",\"placeholder\":\"Buscar un Artículo\"},model:{value:(_vm.search),callback:function ($$v) {_vm.search=$$v},expression:\"search\"}})]},proxy:true},{key:\"thead\",fn:function(){return [_c('vs-tr',[_c('vs-th',[_c('vs-checkbox',{attrs:{\"indeterminate\":_vm.selected.length == _vm.customers.length},on:{\"change\":function($event){_vm.selected = _vm.$vs.checkAll(_vm.selected, _vm.customers)}},model:{value:(_vm.allCheck),callback:function ($$v) {_vm.allCheck=$$v},expression:\"allCheck\"}})],1),_c('vs-th',{attrs:{\"sort\":\"\"},on:{\"click\":function($event){_vm.customers = _vm.$vs.sortData($event, _vm.customers, 'Nombre')}}},[_vm._v(\" Nombre \")]),_c('vs-th',{staticStyle:{\"max-width\":\"200px\"},attrs:{\"sort\":\"\"},on:{\"click\":function($event){_vm.customers = _vm.$vs.sortData($event, _vm.customers, 'CIFNIF')}}},[_vm._v(\" CIF/NIF \")]),_c('vs-th',{attrs:{\"sort\":\"\"},on:{\"click\":function($event){_vm.customers = _vm.$vs.sortData($event, _vm.customers, 'CorreoElectronico')}}},[_vm._v(\" Correo Electrónico \")]),_c('vs-th',{staticStyle:{\"width\":\"150px\"},attrs:{\"sort\":\"\"},on:{\"click\":function($event){_vm.customers = _vm.$vs.sortData($event, _vm.customers, 'Telefono')}}},[_vm._v(\" Teléfono \")]),_c('vs-th',{attrs:{\"sort\":\"\"},on:{\"click\":function($event){_vm.customers = _vm.$vs.sortData($event, _vm.customers, 'Pais')}}},[_vm._v(\" País \")]),_c('vs-th',{attrs:{\"sort\":\"\"},on:{\"click\":function($event){_vm.customers = _vm.$vs.sortData($event, _vm.customers, 'Pendiente')}}},[_vm._v(\" Pendiente \")]),_c('vs-th',{attrs:{\"sort\":\"\"},on:{\"click\":function($event){_vm.customers = _vm.$vs.sortData($event, _vm.customers, 'Pagado')}}},[_vm._v(\" Cancelado \")]),_c('vs-th',[_vm._v(\" Opciones \")])],1)]},proxy:true},{key:\"tbody\",fn:function(){return _vm._l((_vm.$vs.getPage(_vm.$vs.getSearch(_vm.customers, _vm.search), _vm.page, _vm.max)),function(tr,i){return _c('vs-tr',{key:i,attrs:{\"data\":tr,\"is-selected\":!!_vm.selected.includes(tr),\"not-click-selected\":\"\",\"open-expand-only-td\":\"\"}},[_c('vs-td',{attrs:{\"checkbox\":\"\"}},[_c('vs-checkbox',{attrs:{\"val\":tr},model:{value:(_vm.selected),callback:function ($$v) {_vm.selected=$$v},expression:\"selected\"}})],1),_c('vs-td',[_vm._v(\" \"+_vm._s(tr.Nombre)+\" \")]),_c('vs-td',[_vm._v(\" \"+_vm._s(tr.CIFNIF)+\" \")]),_c('vs-td',[_vm._v(\" \"+_vm._s(tr.CorreoElectronico)+\" \")]),_c('vs-td',[_vm._v(\" \"+_vm._s(tr.Telefono)+\" \")]),_c('vs-td',[_vm._v(\" \"+_vm._s(tr.Pais)+\" \")]),_c('vs-td',[_vm._v(\" \"+_vm._s(tr.Pendiente)+\" \")]),_c('vs-td',[_vm._v(\" \"+_vm._s(tr.Pagado)+\" \")]),_c('vs-td',{staticStyle:{\"width\":\"150px !important\"}},[_c('div',{staticClass:\"d-flex\"},[_c('vs-button',[_c('ion-icon',{attrs:{\"name\":\"create-outline\"}})],1),_c('vs-button',{staticClass:\"bg-danger\"},[_c('ion-icon',{attrs:{\"name\":\"trash-outline\"}})],1)],1)])],1)})},proxy:true},{key:\"footer\",fn:function(){return [_c('vs-pagination',{attrs:{\"length\":_vm.$vs.getLength(_vm.$vs.getSearch(_vm.customers, _vm.search), _vm.max)},model:{value:(_vm.page),callback:function ($$v) {_vm.page=$$v},expression:\"page\"}})]},proxy:true}]),model:{value:(_vm.selected),callback:function ($$v) {_vm.selected=$$v},expression:\"selected\"}})],1)],1)],1)],1)\n}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<template>\r\n  <b-container fluid>\r\n    <b-row>\r\n      <b-col sm=\"12\">\r\n        <card class='pb-5'>\r\n          <div class=\"d-flex justify-content-between align-items-center px-4 pt-4\">\r\n            <h3 class=\"card-title font-weight-bold\" style='font-size: 30px'>Clientes</h3>\r\n            <article class=\"d-flex justify-content-between align-items-center\">\r\n              <vs-button @click=\"$router.push('NuevoCliente')\">Nuevo Cliente</vs-button>\r\n            </article>\r\n          </div>\r\n          <div class=\"px-5 py-3\">\r\n            <CardTable :data=\"dataCards\" />\r\n          </div>\r\n          <vs-table v-model=\"selected\" class='px-4 py-3'>\r\n            <template #header>\r\n              <vs-input v-model=\"search\" border placeholder=\"Buscar un Artículo\" />\r\n            </template>\r\n            <template #thead>\r\n              <vs-tr>\r\n                <vs-th>\r\n                  <vs-checkbox :indeterminate=\"selected.length == customers.length\" v-model=\"allCheck\"\r\n                    @change=\"selected = $vs.checkAll(selected, customers)\" />\r\n                </vs-th>\r\n                <vs-th sort @click=\"customers = $vs.sortData($event, customers, 'Nombre')\">\r\n                  Nombre\r\n                </vs-th>\r\n                <vs-th sort style='max-width: 200px;'\r\n                  @click=\"customers = $vs.sortData($event, customers, 'CIFNIF')\">\r\n                  CIF/NIF\r\n                </vs-th>\r\n                <vs-th sort @click=\"customers = $vs.sortData($event, customers, 'CorreoElectronico')\">\r\n                  Correo Electrónico\r\n                </vs-th>\r\n                <vs-th style='width: 150px;' sort @click=\"customers = $vs.sortData($event, customers, 'Telefono')\">\r\n                  Teléfono\r\n                </vs-th>\r\n                <vs-th sort @click=\"customers = $vs.sortData($event, customers, 'Pais')\">\r\n                  País\r\n                </vs-th>\r\n                <vs-th sort @click=\"customers = $vs.sortData($event, customers, 'Pendiente')\">\r\n                  Pendiente\r\n                </vs-th>\r\n                <vs-th sort @click=\"customers = $vs.sortData($event, customers, 'Pagado')\">\r\n                  Cancelado\r\n                </vs-th>\r\n                <vs-th>\r\n                  Opciones\r\n                </vs-th>\r\n              </vs-tr>\r\n            </template>\r\n            <template #tbody style='background: var(--vs-background) !important; margin-top: 20px;'>\r\n              <vs-tr :key=\"i\" v-for=\"(tr, i) in $vs.getPage($vs.getSearch(customers, search), page, max)\" :data=\"tr\"\r\n                :is-selected=\"!!selected.includes(tr)\" not-click-selected open-expand-only-td>\r\n                <vs-td checkbox>\r\n                  <vs-checkbox :val=\"tr\" v-model=\"selected\" />\r\n                </vs-td>\r\n                <vs-td>\r\n                  {{ tr.Nombre }}\r\n                </vs-td>\r\n                <vs-td>\r\n                  {{ tr.CIFNIF }}\r\n                </vs-td>\r\n                <vs-td>\r\n                  {{ tr.CorreoElectronico }}\r\n                </vs-td>\r\n                <vs-td>\r\n                  {{ tr.Telefono }}\r\n                </vs-td>\r\n                <vs-td>\r\n                  {{ tr.Pais }}\r\n                </vs-td>\r\n                <vs-td>\r\n                  {{ tr.Pendiente }}\r\n                </vs-td>\r\n                <vs-td>\r\n                  {{ tr.Pagado }}\r\n                </vs-td>\r\n                <vs-td style=\"width: 150px !important\">\r\n                  <div class='d-flex'>\r\n                    <vs-button><ion-icon name=\"create-outline\"></ion-icon></vs-button>\r\n                    <vs-button class='bg-danger'><ion-icon name=\"trash-outline\"></ion-icon></vs-button>\r\n                  </div>\r\n                </vs-td>\r\n              </vs-tr>\r\n            </template>\r\n            <template #footer>\r\n              <vs-pagination v-model=\"page\" :length=\"$vs.getLength($vs.getSearch(customers, search), max)\" />\r\n            </template>\r\n          </vs-table>\r\n        </card>\r\n      </b-col>\r\n    </b-row>\r\n  </b-container>\r\n</template>\r\n\r\n<script>\r\n  import CardTable from \"../../../../../../components/cardTable/CardTableV2.vue\";\r\n  export default {\r\n    components: {\r\n      CardTable,\r\n    },\r\n    data() {\r\n      return {\r\n        editActive: false,\r\n        edit: null,\r\n        editProp: {},\r\n        search: '',\r\n        allCheck: false,\r\n        page: 1,\r\n        max: 5,\r\n        active: 0,\r\n        selected: [],\r\n        dataCards: [\r\n          {\r\n            title: \"Pendiente\",\r\n            value: 0,\r\n            iconName: \"money-bill-1\",\r\n            color: \"rgba(255, 0, 0, 1)\",\r\n            tipo: \"shield\",\r\n            animated: \"bounce\",\r\n          },\r\n          {\r\n            title: \"Cancelado\",\r\n            value: 0,\r\n            iconName: \"money-bill-1\",\r\n            color: \"rgba(71,136,255,1)\",\r\n            tipo: \"shield\",\r\n            animated: \"bounce\",\r\n          }\r\n        ],\r\n        customers: [\r\n          {\r\n            \"id\": \"1\",\r\n            \"Nombre\": \"Juan Pérez\",\r\n            \"CIFNIF\": \"A12345678\",\r\n            \"CorreoElectronico\": \"juan.perez@example.com\",\r\n            \"Telefono\": \"+34 123 456 789\",\r\n            \"Pais\": \"España\",\r\n            \"Pendiente\": 500.00,\r\n            \"Pagado\": 1500.00\r\n          },\r\n          {\r\n            \"id\": \"2\",\r\n            \"Nombre\": \"María Gómez\",\r\n            \"CIFNIF\": \"B98765432\",\r\n            \"CorreoElectronico\": \"maria.gomez@example.com\",\r\n            \"Telefono\": \"+34 987 654 321\",\r\n            \"Pais\": \"España\",\r\n            \"Pendiente\": 700.00,\r\n            \"Pagado\": 1000.00\r\n          },\r\n          {\r\n            \"id\": \"3\",\r\n            \"Nombre\": \"Carlos Fernández\",\r\n            \"CIFNIF\": \"C54321678\",\r\n            \"CorreoElectronico\": \"carlos.fernandez@example.com\",\r\n            \"Telefono\": \"+34 654 321 098\",\r\n            \"Pais\": \"España\",\r\n            \"Pendiente\": 0.00,\r\n            \"Pagado\": 2500.00\r\n          },\r\n          {\r\n            \"id\": \"4\",\r\n            \"Nombre\": \"Laura Martín\",\r\n            \"CIFNIF\": \"D87654321\",\r\n            \"CorreoElectronico\": \"laura.martin@example.com\",\r\n            \"Telefono\": \"+34 321 654 987\",\r\n            \"Pais\": \"España\",\r\n            \"Pendiente\": 1000.00,\r\n            \"Pagado\": 0.00\r\n          },\r\n          {\r\n            \"id\": \"5\",\r\n            \"Nombre\": \"Miguel Torres\",\r\n            \"CIFNIF\": \"E34567890\",\r\n            \"CorreoElectronico\": \"miguel.torres@example.com\",\r\n            \"Telefono\": \"+34 765 432 109\",\r\n            \"Pais\": \"España\",\r\n            \"Pendiente\": 250.00,\r\n            \"Pagado\": 750.00\r\n          },\r\n          {\r\n            \"id\": \"6\",\r\n            \"Nombre\": \"Ana López\",\r\n            \"CIFNIF\": \"F09876543\",\r\n            \"CorreoElectronico\": \"ana.lopez@example.com\",\r\n            \"Telefono\": \"+34 876 543 210\",\r\n            \"Pais\": \"España\",\r\n            \"Pendiente\": 300.00,\r\n            \"Pagado\": 1200.00\r\n          },\r\n          {\r\n            \"id\": \"7\",\r\n            \"Nombre\": \"David Sánchez\",\r\n            \"CIFNIF\": \"G12345679\",\r\n            \"CorreoElectronico\": \"david.sanchez@example.com\",\r\n            \"Telefono\": \"+34 432 109 876\",\r\n            \"Pais\": \"España\",\r\n            \"Pendiente\": 450.00,\r\n            \"Pagado\": 850.00\r\n          },\r\n          {\r\n            \"id\": \"8\",\r\n            \"Nombre\": \"Isabel Ruiz\",\r\n            \"CIFNIF\": \"H98765430\",\r\n            \"CorreoElectronico\": \"isabel.ruiz@example.com\",\r\n            \"Telefono\": \"+34 567 890 123\",\r\n            \"Pais\": \"España\",\r\n            \"Pendiente\": 600.00,\r\n            \"Pagado\": 400.00\r\n          }\r\n        ]\r\n      }\r\n    },\r\n    created() {\r\n      this.updateDataCardsValues();\r\n    },\r\n    methods: {\r\n      updateDataCardsValues() {\r\n        const pendienteTotal = this.customers.reduce((sum, customer) => sum + customer.Pendiente, 0);\r\n        const pagadoTotal = this.customers.reduce((sum, customer) => sum + customer.Pagado, 0);\r\n        this.dataCards[0].value = pendienteTotal;\r\n        this.dataCards[1].value = pagadoTotal;\r\n      }\r\n    }\r\n  }\r\n</script>\r\n\r\n<style>\r\n  .vs-table__header\r\n  .vs-input\r\n  .vs-table__footer\r\n  .vs-pagination__arrow\r\n  .vs-pagination__arrow {\r\n    background: var(--body-bg) !important;\r\n  }\r\n</style>","import mod from \"-!../../../../../../../node_modules/cache-loader/dist/cjs.js??ref--13-0!../../../../../../../node_modules/thread-loader/dist/cjs.js!../../../../../../../node_modules/@vue/cli-plugin-babel/node_modules/babel-loader/lib/index.js!../../../../../../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../../../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./Clientes.vue?vue&type=script&lang=js\"; export default mod; export * from \"-!../../../../../../../node_modules/cache-loader/dist/cjs.js??ref--13-0!../../../../../../../node_modules/thread-loader/dist/cjs.js!../../../../../../../node_modules/@vue/cli-plugin-babel/node_modules/babel-loader/lib/index.js!../../../../../../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../../../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./Clientes.vue?vue&type=script&lang=js\"","import { render, staticRenderFns } from \"./Clientes.vue?vue&type=template&id=1513a184\"\nimport script from \"./Clientes.vue?vue&type=script&lang=js\"\nexport * from \"./Clientes.vue?vue&type=script&lang=js\"\nimport style0 from \"./Clientes.vue?vue&type=style&index=0&id=1513a184&prod&lang=css\"\n\n\n/* normalize component */\nimport normalizer from \"!../../../../../../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n  script,\n  render,\n  staticRenderFns,\n  false,\n  null,\n  null,\n  null\n  \n)\n\nexport default component.exports"],"sourceRoot":""}