{"id":3049,"date":"2024-06-10T15:22:20","date_gmt":"2024-06-10T18:22:20","guid":{"rendered":"https:\/\/dev.site.age.pe.gov.br\/\/?page_id=3049"},"modified":"2024-07-22T14:37:25","modified_gmt":"2024-07-22T17:37:25","slug":"simulador-2","status":"publish","type":"page","link":"https:\/\/age.pe.gov.br\/index.php\/simulador-2\/","title":{"rendered":"SIMULADOR"},"content":{"rendered":"\n<style>\n\t@media print {\n\t  header, footer {\n\t\tdisplay: none;\n\t  }\n\t  .modal-header, .modal-footer {\n\t\tdisplay: none;\n\t  }\n\t  .text-success {\n\t\tcolor: #007bff; \/* Azul para textos de sucesso *\/\n\t  }\n\t}\n\n\t.text-moeda {\n\t  color: #3a6bb1;\n\t  font-size: 1.5rem;\n\t  font-weight: bold;\n\t}\n\n\t.text-moeda-here {\n\t  color: #3a6bb1;\n\t  font-size: 1.5rem;\n\t  font-weight: bold;\n\t  margin: 0 !important;\n\t}\n\n\t.div-valorSolicitado {\n\t  background-color: white;\n\t  border: 2px solid #ccc;\n\t  border-radius: 10px;\n\t  width: 100%;\n\t  margin-bottom: 5%;\n\t  padding: 1rem;\n\t}\n\n\t.div-valorInputado {\n\t  background-color: white;\n\t  border: 2px solid #ccc;\n\t  border-radius: 10px;\n\t  width: 100%;\n\t  margin-bottom: 5%;\n\t  padding: 1rem;\n\t  display: flex; \/* Flexbox para alinhamento lado a lado *\/\n\t  align-items: center;\n\t  justify-content: space-between; \/* Espa\u00e7amento entre os elementos *\/\n\t}\n\n\t.input-container {\n\t  display: flex;\n\t  align-items: center;\n\t}\n\n\t.input-container input[type=\"number\"] {\n\t  flex-grow: 1;\n\t}\n\n\t.input-container.flex-grow-1 {\n\t  flex-grow: 1;\n\t}\n\n\t.me-2 {\n\t  margin-right: 0.5rem;\n\t}\n\n\t.div-Select {\n\t  border-radius: 10px;\n\t  width: 100%;\n\t  margin-bottom: 5%;\n\t}\n\n\t.div-range {\n\t  width: 95%;\n\t  margin-left: 2%;\n\t}\n\n\t.campo-input-valor, .campo-range-valor {\n\t  border: none;\n\t  width: 100%;\n\t  font-size: 1.5rem;\n\t}\n\n\t.col-parcelas, .valor-parcelas {\n\t  display: flex;\n\t  align-items: center;\n\t  justify-content: center;\n\t}\n\n\t.input-range-parcelas, .input-parcelas {\n\t  width: 95%;\n\t}\n\n\t.btn-simular {\n\t  background-color: #007bff;\n\t  color: white;\n\t  width: 100%;\n\t}\n\n\t.btn-simular:hover {\n\t  background-color: #f8b306;\n\t  color: white;\n\t}\n\n\t.div-btn-simular {\n\t  display: flex;\n\t  align-items: center;\n\t  justify-content: center;\n\t}\n\n\t.container-bg {\n\t  background-image: url('\/static\/simulator\/bg-degrade.jpg');\n\t  background-size: cover;\n\t  background-position: center;\n\t}\n\n\t.img-size {\n\t  width: 80%;\n\t}\n\n\t.custom-select {\n\t  width: 100%;\n\t  padding: 10px;\n\t  font-size: 16px;\n\t  background-color: #007bff; \/* Azul de fundo *\/\n\t  color: white;\n\t  border: 1px solid #ccc;\n\t  border-radius: 4px;\n\t}\n\n\t.custom-select option {\n\t  background-color: #cce4ff; \/* Azul claro *\/\n\t  color: #000;\n\t}\n\n\t\/* Estilo para as c\u00e9lulas da tabela de parcelas com plano de fundo *\/\n\ttable td{\n\t  background-color: #e0f2f1; \/* Azul muito suave *\/\n\t}\n\n\ttable thead th, table thead tr {\n\t  background-color: #003f6c; \/* Azul escuro para o cabe\u00e7alho *\/\n\t  color: white; \/* Cor do texto no cabe\u00e7alho *\/\n\t}\n\n\ttable tbody tr:nth-child(even) {\n\t  background-color: rgba(227, 242, 253, 0.8) !important; \/* Azul claro para as linhas pares com opacidade *\/\n\t}\n\n\ttable tbody tr:nth-child(odd) {\n\t  background-color: rgba(255, 255, 255, 0.8) !important; \/* Branco com opacidade para as linhas \u00edmpares *\/\n\t}\n\n\t\/* Estilo para o hover das linhas do corpo da tabela *\/\n\ttable tbody tr:hover {\n\t  background-color: rgba(0, 123, 255, 0.6) !important; \/* Azul claro com opacidade para hover *\/\n\t}\n\n\t\/* Estilo para o texto dos td dentro do tr quando o tr est\u00e1 em hover *\/\n\ttable tbody tr:hover td {\n\t  color: white !important; \/* Cor do texto em branco ao passar o cursor sobre a linha *\/\n\t}\n\n\ttable td, table th {\n\t  padding: 8px; \/* Espa\u00e7amento interno das c\u00e9lulas *\/\n\t  border: 1px solid #ddd; \/* Borda das c\u00e9lulas *\/\n\t}\n\n\t\/* Nova classe para estilizar o texto do resultado *\/\n\t.text-success {\n\t  color: #007bff; \/* Azul para textos de sucesso *\/\n\t}\n\n\t.text-bg-primary {\n\t  background-color: #007bff !important;\n\t  color: white !important;\n\t}\n\n\t.text-custom {\n\t  color: white !important;\n\t}\n\n\t.max-size-horizontal{\n\t  max-width: 28%;\n\t}\n<\/style>\n\n\n<div id=\"app\">\n  <div class=\"container-fluid\">\n    <div class=\"card card-body blur shadow-blur mx-3 mx-md-4 mt-6\">\n\n      <div class=\"container container-bg\">\n        <div class=\"p-3\">\n          <div v-if=\"!showResult\" class=\"simulator\">\n            <div class=\"row\">\n              <div class=\"mb-3\">\n                <h2 class=\"text-center text-white fw-bold\">Simulador de Cr\u00e9dito<\/h2>\n              <\/div>\n            <\/div>\n            <div class=\"row\">\n              <div class=\"col-12 col-md-6 mb-3\">\n                <img decoding=\"async\" class=\"img-fluid img-size\" src=\"{% static 'simulator\/calc.png' %}\" alt=\"Simulador de Cr\u00e9dito\">\n              <\/div>\n              <div class=\"col-12 col-md-6\">\n                <!-- Sele\u00e7\u00e3o de Linha de Cr\u00e9dito -->\n                <p class=\"text-valor-solicitado text-white\">Selecione uma linha de cr\u00e9dito:<\/p>\n                <div class=\"div-Select\">\n                  <select id=\"credit-line\" class=\"custom-select\" v-model=\"selectedLineId\" @change=\"updateFields\">\n                    <option value=\"\" disabled selected>Selecione uma linha de cr\u00e9dito<\/option>\n                    <option v-for=\"line in creditLines\" :value=\"line.id\">\n                      [[ line.name ]] &#8211; [[ line.description ]]\n                    <\/option>\n                  <\/select>\n                  <p v-if=\"creditLineError\" class=\"text-warning\">Por favor, selecione uma linha de cr\u00e9dito.<\/p>\n                <\/div>\n\n                <!-- Campo de entrada para o valor solicitado (campo num\u00e9rico) -->\n                <p class=\"text-valor-solicitado text-white\">Valor solicitado<\/p>\n                <div class=\"div-valorInputado d-flex justify-content-between\">\n                  <div class=\"input-container flex-grow-1 max-size-horizontal\">\n                    <input id=\"inputNum\" class=\"campo-input-valor text-moeda\" type=\"text\" v-model=\"formattedInputNum\">\n                  <\/div>\n                  <!-- Campo de entrada para o valor solicitado (campo de range) -->\n                  <div class=\"input-container flex-grow-1\">\n                    <input id=\"inputRange1\" class=\"campo-range-valor\" type=\"range\" :min=\"minValue\" :max=\"maxValue\" v-model=\"inputNum\">\n                  <\/div>\n                <\/div>\n\n                <p class=\"text-valor-solicitado text-white\">Car\u00eancia<\/p>\n                <div class=\"div-Select\">\n                  <select id=\"carencia\" class=\"custom-select\" v-model=\"carencia\" @change=\"clearCarenciaError\">\n                    <option value=\"\" disabled selected>Selecione uma op\u00e7\u00e3o<\/option>\n                    <option class=\"option-color\" value=\"Nao\">Sem car\u00eancia<\/option>\n                    <option class=\"option-color\" value=\"Sim\">Com car\u00eancia<\/option>\n                  <\/select>\n                <\/div>\n                <p v-if=\"carenciaError\" class=\"text-warning\">Por favor, selecione se h\u00e1 ou n\u00e3o car\u00eancia.<\/p>\n\n                <p class=\"text-valor-solicitado text-white\">Parcelas<\/p>\n                <div class=\"div-valorInputado d-flex justify-content-between\">\n                  <div class=\"input-container flex-grow-1 max-size-horizontal\">\n                    <p id=\"inputRange2Display\" class=\"text-moeda-here\">[[ inputRange2 ]]<\/p>\n                  <\/div>\n                  <div class=\"input-container flex-grow-1\">\n                    <input id=\"inputRange2\" class=\"input-range-parcelas\" type=\"range\" :min=\"minMonths\" :max=\"maxMonths\" v-model=\"inputRange2\">\n                  <\/div>\n                <\/div>\n\n                <div class=\"row div-btn-simular\">\n                  <div class=\"col-12 col-md-6 mb-2 mb-md-0\">\n                    <p class=\"text-valor-solicitado text-white\">J\u00e1 \u00e9 nosso cliente?<\/p>\n                    <input type=\"checkbox\" id=\"isChecked\" class=\"form-check-input\" v-model=\"isClient\"><label class=\"text-white ms-2\">Marque se for renova\u00e7\u00e3o<\/label>\n                  <\/div>\n                  <div class=\"col-12 col-md-6\">\n                    <!-- Bot\u00e3o para simular -->\n                    <button id=\"btnSimular\" class=\"btn fs-4 btn-simular fw-bold w-100\" type=\"button\" @click=\"simulate\">Simular<\/button>\n                  <\/div>\n                <\/div>\n              <\/div>\n            <\/div>\n          <\/div>\n\n          <div v-if=\"showResult\" class=\"result\">\n            <div id=\"simulatedContent\" v-html=\"resultContent\"><\/div>\n            <div class=\"row\">\n              <div class=\"col-12 text-center\">\n                <button class=\"btn btn-secondary\" @click=\"goBack\">Voltar<\/button>\n              <\/div>\n            <\/div>\n          <\/div>\n        <\/div>\n      <\/div>\n\n    <\/div>\n  <\/div>\n<\/div>\n\n<script>\n  new Vue({\n    el: '#app',\n    delimiters: ['[[', ']]'],\n    data: {\n      creditLines: [],\n      selectedLineId: '', \/\/ Inicializar como string vazia\n      inputNum: 1000,\n      carencia: '', \/\/ Inicializar como string vazia\n      carenciaMonths: 0,\n      inputRange2: 6,\n      isClient: false,\n      minValue: 1000,\n      maxValue: 21000,\n      minMonths: 6,\n      maxMonths: 12,\n      resultContent: '',\n      showResult: false, \/\/ Novo estado para controlar a visibilidade do resultado\n      carenciaError: false, \/\/ Novo estado para rastrear o erro de car\u00eancia\n      creditLineError: false \/\/ Novo estado para rastrear o erro da linha de cr\u00e9dito\n    },\n    methods: {\n      fetchCreditLines() {\n        axios.get('https:\/\/django.denky.dev.br\/api\/get_credit_line\/')\n          .then(response => {\n            this.creditLines = response.data;\n          })\n          .catch(error => {\n            console.error('Erro ao buscar linhas de cr\u00e9dito:', error);\n          });\n      },\n      formatCurrency(value) {\n        let val = (value\/1).toFixed(2).replace('.', ',');\n        return 'R$ ' + val.toString().replace(\/\\B(?=(\\d{3})+(?!\\d))\/g, \".\");\n      },\n      updateFields() {\n        this.creditLineError = false;\n        const selectedLine = this.creditLines.find(line => line.id === this.selectedLineId);\n        if (selectedLine) {\n          this.minValue = selectedLine.min_financing_value;\n          this.maxValue = selectedLine.max_financing_value;\n\n          this.minMonths = selectedLine.min_financing_months;\n          this.maxMonths = selectedLine.max_financing_months;\n\n          this.inputNum = selectedLine.min_financing_value;\n          this.inputRange2 = selectedLine.min_financing_months;\n          this.carenciaMonths = selectedLine.max_grace_months;\n        }\n      },\n      async getCsrfToken() {\n        try {\n          const response = await axios.get('https:\/\/django.denky.dev.br\/api\/csrf-token\/');\n          return response.data.csrfToken;\n        } catch (error) {\n          console.error('Erro ao obter o token CSRF:', error);\n          return '';\n        }\n      },\n      async simulate() {\n        if (!this.selectedLineId) {\n          this.creditLineError = true;\n        }\n        if (!this.carencia) {\n          this.carenciaError = true;\n        }\n        if (this.creditLineError || this.carenciaError) {\n          return;\n        }\n    \n        \/\/ Obter o token CSRF\n        const csrftoken = await this.getCsrfToken();\n    \n        const requestData = {\n          credit_line_id: this.selectedLineId,\n          financing_amount: parseInt(this.inputNum, 10),\n          num_installments: parseInt(this.inputRange2, 10),\n          grace_months: this.carencia === 'Sim' ? this.carenciaMonths : 0\n        };\n    \n        axios.post('https:\/\/django.denky.dev.br\/api\/get_calculation\/', requestData, {\n          headers: {\n            'X-CSRFToken': csrftoken\n          }\n        })\n        .then(response => {\n          const data = response.data.parcelas;\n          console.log('Resposta da API:', response.data);\n          \n          this.resultContent = `\n            <ul class=\"list-group\">\n              <li class=\"list-group-item d-flex justify-content-between align-items-center fw-bold text-secondary\">\n                Valor Solicitado:\n                <span class=\"badge text-bg-primary rounded-pill fs-7\">${'R$ ' + requestData.financing_amount.toFixed(2).replace(\/\\d(?=(\\d{3})+\\.)\/g, '$&,')}<\/span>\n              <\/li>\n              <li class=\"list-group-item d-flex justify-content-between align-items-center fw-bold text-secondary\">\n                Per\u00edodo (meses):\n                <span class=\"badge text-bg-primary rounded-pill fs-7\">${requestData.num_installments}<\/span>\n              <\/li>\n              <li class=\"list-group-item d-flex justify-content-between align-items-center fw-bold text-secondary\">\n                Car\u00eancia:\n                <span class=\"badge text-bg-primary rounded-pill fs-7\">${this.carencia}<\/span>\n              <\/li>\n            <\/ul>\n            <table class=\"table table-striped table-hover mt-3\">\n              <thead>\n                <tr>\n                  <th class=\"text-custom\">N\u00b0<\/th>\n                  <th class=\"text-custom\">Juros<\/th>\n                  <th class=\"text-custom\">Amortiza\u00e7\u00e3o<\/th>\n                  <th class=\"text-custom\">Valor Parcela<\/th>\n                <\/tr>\n              <\/thead>\n              <tbody>\n                ${Array.isArray(data) ? data.map((parcela, index) => `\n                  <tr>\n                    <td class=\"text-secondary\">${index + 1}<\/td>\n                    <td class=\"text-secondary\">${'R$ ' + parcela.juros.toFixed(2).replace(\/\\d(?=(\\d{3})+\\.)\/g, '$&,')}<\/td>\n                    <td class=\"text-secondary\">${'R$ ' + parcela.amortizacao.toFixed(2).replace(\/\\d(?=(\\d{3})+\\.)\/g, '$&,')}<\/td>\n                    <td class=\"text-secondary\">${'R$ ' + parcela.valorParcela.toFixed(2).replace(\/\\d(?=(\\d{3})+\\.)\/g, '$&,')}<\/td>\n                  <\/tr>\n                `).join('') : '<tr><td colspan=\"4\">Nenhuma parcela dispon\u00edvel.<\/td><\/tr>'}\n              <\/tbody>\n            <\/table>\n          `;\n          this.showResult = true;\n        })\n        .catch(error => {\n          console.error('Erro ao simular:', error);\n        });\n      },\n      clearCarenciaError() {\n        this.carenciaError = false;\n      },\n      printModal() {\n        const modalElement = document.getElementById('myModal');\n        const modalInstance = bootstrap.Modal.getInstance(modalElement) || new bootstrap.Modal(modalElement);\n    \n        modalInstance.hide(); \/\/ Ocultar o modal imediatamente ap\u00f3s o clique\n    \n        const printContents = document.querySelector(\"#myModal .modal-content\").innerHTML;\n        const originalContents = document.body.innerHTML;\n    \n        document.body.innerHTML = printContents;\n        window.print();\n        document.body.innerHTML = originalContents;\n      },\n      goBack() {\n        this.showResult = false; \/\/ Voltar ao simulador\n      },\n    },\n    mounted() {\n      this.fetchCreditLines();\n    },\n    computed: {\n      formattedInputNum: {\n        get() {\n          return this.formatCurrency(this.inputNum);\n        },\n        set(newValue) {\n          let plainNumber = newValue.replace(\/[R$.,]\/g, ''); \/\/ Remove os caracteres de formata\u00e7\u00e3o\n          this.inputNum = parseFloat(plainNumber) || 0; \/\/ Converte para n\u00famero e define o valor original\n        }\n      }\n    }    \n  });  \n<\/script>\n\n","protected":false},"excerpt":{"rendered":"<p>Simulador de Cr\u00e9dito Selecione uma linha de cr\u00e9dito: Selecione uma linha de cr\u00e9dito [[ line.name ]] &#8211; [[ line.description ]] [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_eb_attr":"","site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"_themeisle_gutenberg_block_has_review":false,"footnotes":""},"class_list":["post-3049","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/age.pe.gov.br\/index.php\/wp-json\/wp\/v2\/pages\/3049","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/age.pe.gov.br\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/age.pe.gov.br\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/age.pe.gov.br\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/age.pe.gov.br\/index.php\/wp-json\/wp\/v2\/comments?post=3049"}],"version-history":[{"count":4,"href":"https:\/\/age.pe.gov.br\/index.php\/wp-json\/wp\/v2\/pages\/3049\/revisions"}],"predecessor-version":[{"id":3732,"href":"https:\/\/age.pe.gov.br\/index.php\/wp-json\/wp\/v2\/pages\/3049\/revisions\/3732"}],"wp:attachment":[{"href":"https:\/\/age.pe.gov.br\/index.php\/wp-json\/wp\/v2\/media?parent=3049"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}