{"id":3251,"date":"2024-07-03T13:51:11","date_gmt":"2024-07-03T16:51:11","guid":{"rendered":"https:\/\/dev.site.age.pe.gov.br\/?page_id=3251"},"modified":"2024-07-03T16:31:34","modified_gmt":"2024-07-03T19:31:34","slug":"simulador-age","status":"publish","type":"page","link":"https:\/\/age.pe.gov.br\/index.php\/simulador-age\/","title":{"rendered":"Simulador"},"content":{"rendered":"<p><head><br \/>\n  <meta charset=\"UTF-8\"><br \/>\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"><br \/>\n  <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/vue@2\"><\/script>\n  <link href=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.3.3\/dist\/css\/bootstrap.min.css\" rel=\"stylesheet\" integrity=\"sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH\" crossorigin=\"anonymous\">\n<\/head><br \/>\n<body><\/p>\n<div id=\"app\">\n<div class=\"container\">\n<div class=\"p-3\">\n<div class=\"row\">\n<div class=\"mb-3\">\n<h2 class=\"text-center text-white fw-bold\">{{ message }}<\/h2>\n<\/p><\/div>\n<\/p><\/div>\n<div class=\"row\">\n<div class=\"col\">\n            <img decoding=\"async\" src=\"https:\/\/i.imgur.com\/dnvGFnM.png\">\n          <\/div>\n<div class=\"col\">\n            <!-- Campo de entrada para o valor solicitado (campo num\u00e9rico) --><\/p>\n<p class=\"text-valor-solicitado text-white\">Valor solicitado<\/p>\n<div class=\"div-valorSolicitado\">\n              <label for=\"inputNum\" class=\"text-moeda\">R$<\/label><br \/>\n              <input id=\"inputNum\" v-model=\"inputRange1\" class=\"campo-input-valor text-moeda\" type=\"number\" min=\"500\" max=\"21000\" @input=\"formatCurrency\"><br \/>\n              <!-- Campo de entrada para o valor solicitado (campo de range) --><\/p>\n<div class=\"row div-range\">\n                <input v-model=\"inputRange1\" class=\"campo-range-valor\" type=\"range\" min=\"500\" max=\"21000\" @input=\"formatCurrency\">\n              <\/div>\n<\/p><\/div>\n<p class=\"text-valor-solicitado text-white\">Car\u00eancia<\/p>\n<div class=\"div-valorSolicitado\">\n              <select v-model=\"carencia\" class=\"form-select\" aria-label=\"Default select example\"><option value=\"Nao\">Sem car\u00eancia<\/option><option value=\"sim\">Com car\u00eancia<\/option><\/select>\n            <\/div>\n<p class=\"text-valor-solicitado text-white\">Parcelas<\/p>\n<div class=\"div-valorSolicitado\">\n<div class=\"row\">\n<div class=\"col-2 col-parcelas\">\n<p class=\"input-parcelas mb-0\">{{ inputRange2 }}<\/p>\n<\/p><\/div>\n<div class=\"col col-parcelas\">\n                  <input class=\"input-range-parcelas\" v-model=\"inputRange2\" type=\"range\" min=\"6\" max=\"36\">\n                <\/div>\n<\/p><\/div>\n<\/p><\/div>\n<div class=\"row div-btn-simular\">\n<div class=\"col\">\n<p class=\"text-valor-solicitado text-white\">J\u00e1 \u00e9 nosso cliente?<\/p>\n<p>                <input type=\"checkbox\" v-model=\"isChecked\" class=\"form-check-input\"><label class=\"text-white\">Marque se for renova\u00e7\u00e3o<\/label>\n              <\/div>\n<div class=\"col\">\n                <!-- Bot\u00e3o para simular --><br \/>\n                <button @click=\"simular\" class=\"btn fs-4 btn-simular fw-bold\" type=\"button\" data-bs-toggle=\"modal\" data-bs-target=\"#myModal\">Simular<\/button>\n              <\/div>\n<\/p><\/div>\n<\/p><\/div>\n<p>          <!-- Resultado da simula\u00e7\u00e3o --><br \/>\n            <!-- Modal --><\/p>\n<div class=\"modal fade\" id=\"myModal\" tabindex=\"-1\" aria-labelledby=\"myModalLabel\" aria-hidden=\"true\">\n<div class=\"modal-dialog modal-dialog-scrollable\">\n<div class=\"modal-content\">\n<div class=\"modal-header\">\n<h1 class=\"modal-title fs-5\" id=\"myModalLabel\">Resultado da Simula\u00e7\u00e3o<\/h1>\n<p>                    <button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\" aria-label=\"Close\"><\/button>\n                  <\/div>\n<div class=\"modal-body\">\n<div v-if=\"simulated\">\n<div class=\"row\">\n<div>\n<ul class=\"list-group\">\n<li class=\"list-group-item d-flex justify-content-between align-items-center fw-bold\">\n                              Valor Solicitado:<br \/>\n                              <span class=\"badge text-bg-primary rounded-pill fs-7\">{{ currencyValue }}<\/span>\n                            <\/li>\n<li class=\"list-group-item d-flex justify-content-between align-items-center fw-bold\">\n                              Per\u00edodo (meses):<br \/>\n                              <span class=\"badge text-bg-primary rounded-pill fs-7\">{{ inputRange2 }}<\/span>\n                            <\/li>\n<li class=\"list-group-item d-flex justify-content-between align-items-center fw-bold\">\n                              Car\u00eancia:<br \/>\n                              <span class=\"badge text-bg-primary rounded-pill fs-7\">{{ carencia === &#8216;sim&#8217; ? &#8216;Sim&#8217; : &#8216;Nao&#8217; }}<\/span>\n                            <\/li>\n<li class=\"list-group-item d-flex justify-content-between align-items-center fw-bold\">\n                              Taxa de Juros:<br \/>\n                              <span class=\"badge text-bg-primary rounded-pill fs-7\">{{ isChecked ? &#8216;1.8%&#8217; : &#8216;2.5%&#8217; }}<\/span>\n                            <\/li>\n<\/ul><\/div>\n<div>\n                          <!-- Resultado da simula\u00e7\u00e3o --><\/p>\n<table class=\"table table-striped table-hover\">\n<thead>\n<tr>\n<th>N\u00b0<\/th>\n<th>Juros<\/th>\n<th>Amortiza\u00e7\u00e3o<\/th>\n<th>Valor Parcela<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr v-for=\"(parcela, index) in calcularParcelas()\" :key=\"index\">\n<td>{{ index + 1 }}<\/td>\n<td>{{ parcela.juros }}<\/td>\n<td>{{ parcela.amortizacao }}<\/td>\n<td>{{ parcela.parcela }}<\/td>\n<\/tr>\n<tr>\n<td><strong>Total:<\/strong><\/td>\n<td><strong>{{ calcularTotal(&#8216;juros&#8217;) }}<\/strong><\/td>\n<td><strong>{{ calcularTotal(&#8216;amortizacao&#8217;) }}<\/strong><\/td>\n<td><strong>{{ calcularTotal(&#8216;parcela&#8217;) }}<\/strong><\/td>\n<\/tr>\n<\/tbody>\n<\/table><\/div>\n<\/p><\/div>\n<div class=\"row p-1\">\n<p>Os valores das presta\u00e7\u00f5es s\u00e3o aproximados. As op\u00e7\u00f5es apresentadas n\u00e3o valem como proposta e representam apenas uma simula\u00e7\u00e3o com o intuito de subsidiar a tomada de decis\u00e3o. At\u00e9 a contrata\u00e7\u00e3o da opera\u00e7\u00e3o, a taxa de juros, prazo e demais condi\u00e7\u00f5es podem ser alterados sem pr\u00e9vio aviso. As opera\u00e7\u00f5es de cr\u00e9dito est\u00e3o sujeitas \u00e0 an\u00e1lise e aprova\u00e7\u00e3o da AGE. Taxa considerando rating A. As taxas variam de acordo com o rating do cliente.<br \/>\n                          A Selic \u00e9 definida pelo Comit\u00ea de Pol\u00edtica Monet\u00e1ria do Bacen (Copom) em reuni\u00f5es que ocorrem em m\u00e9dia a cada 45 dias, podendo variar durante a vig\u00eancia do contrato.<br \/>\n                          Outras tarifas podem ser aplicadas.<\/p>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<div class=\"modal-footer\">\n                      <button type=\"button\" class=\"btn btn-secondary\" data-bs-dismiss=\"modal\">Fechar<\/button><br \/>\n                      <button type=\"button\" class=\"btn btn-primary\" onclick=\"printModal()\">Imprimir<\/button>\n                    <\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<p>  <\/body><\/p>\n<p>  <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.3.3\/dist\/js\/bootstrap.bundle.min.js\" integrity=\"sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz\" crossorigin=\"anonymous\"><\/script><\/p>\n<style type=\"text\/css\">\n    .container{\n      background-image: url('https:\/\/i.imgur.com\/dwyPVOD.jpeg'); \n    }\n    img{\n      width: 80%;\n    }\n    option{\n      color: #3a6bb1;\n      font-weight: bold;\n    }\n    .text-moeda{\n      color: #3a6bb1;\n      font-size: 30px;\n      font-weight: bold;\n    }\n    .div-valorSolicitado{\n      background-color: white;\n      border: 10px;\n      border-radius: 10px;\n      width: 100%;\n      margin-bottom: 5%;\n    }\n    .div-range{\n      width: 95%;\n      margin-left: 2%;\n    }\n    .campo-input-valor{\n      border: none;\n      width: 40%;\n    }\n    .campo-range-valor{\n      margin-bottom: 3%;\n    }<\/p>\n<p>    .col-parcelas{\n      display: flex;\n      align-items: center;\n      justify-content: center;\n    }<\/p>\n<p>    .valor-parcelas{\n      display: flex;\n      align-items: center;\n      justify-content: center;\n    }<\/p>\n<p>    .input-range-parcelas{\n      width: 95%;\n    }<\/p>\n<p>    .input-parcelas{\n      color: #3a6bb1;\n      font-size: 30px;\n      font-weight: bold;\n    }<\/p>\n<p>    .btn-simular{\n      background-color: #ffcb03;\n      width: 100%;\n    }\n    .btn-simular:hover{\n      background-color: #DAA520;\n      color: white;\n    }<\/p>\n<p>    .div-btn-simular{\n      display: flex;\n      align-items: center;\n      justify-content: center;\n    }\n  <\/style>\n<p>  <script>\n    \/\/ Vue instance\n    new Vue({\n      el: '#app',\n      data: {\n        message: 'Simulador de Cr\u00e9dito',\n        inputRange1: 500,\n        inputRange2: 6,\n        inputText: '',\n        isChecked: false,\n        carencia: 'Nao', \/\/ Valor padr\u00e3o \u00e9 \"Sem Car\u00eancia\"\n        simulated: false, \/\/ Flag para mostrar ou ocultar o resultado da simula\u00e7\u00e3o\n        resultadoParcelas: [] \/\/ Armazena os resultados das parcelas\n      },\n      computed: {\n        currencyValue: function() {\n          return 'R$ ' + this.inputRange1.toFixed(2).replace(\/\\d(?=(\\d{3})+\\.)\/g, '$&,');\n        }\n      },\n      methods: {\n        formatCurrency: function(event) {\n          this.inputRange1 = parseFloat(event.target.value);\n        },\n        simular: function() {\n          this.simulated = true;\n          this.resultadoParcelas = this.calcularParcelas();\n        },\n        calcularParcelas: function() {\n          \/\/ C\u00e1lculo das parcelas utilizando o sistema de amortiza\u00e7\u00e3o Price\n          let valorSolicitado = this.inputRange1;\n          let periodoMeses = this.inputRange2;\n          let taxaJuros = this.isChecked ? 0.018 : 0.025;\n          let valorParcela = (valorSolicitado * taxaJuros) \/ (1 - Math.pow(1 + taxaJuros, -periodoMeses));\n          let parcelas = [];<\/p>\n<p>          \/\/ Se houver car\u00eancia, adiciona parcelas vazias para os meses de car\u00eancia\n          if (this.carencia === 'sim') {\n            for (let i = 0; i < 2; i++) {\n              parcelas.push({ juros: '0,00', amortizacao: '0,00', parcela: '0,00' });\n            }\n          }\n\n          \/\/ Calcula as parcelas mensais\n          for (let i = 0; i < periodoMeses; i++) {\n            let juros = valorSolicitado * taxaJuros;\n            let amortizacao = valorParcela - juros;\n            parcelas.push({\n              juros: 'R$ ' + juros.toFixed(2).replace(\/\\d(?=(\\d{3})+\\.)\/g, '$&#038;,'),\n              amortizacao: 'R$ ' + amortizacao.toFixed(2).replace(\/\\d(?=(\\d{3})+\\.)\/g, '$&#038;,'),\n              parcela: 'R$ ' + valorParcela.toFixed(2).replace(\/\\d(?=(\\d{3})+\\.)\/g, '$&#038;,')\n            });\n          }\n          return parcelas;\n        },\n        calcularTotal: function(propriedade) {\n          \/\/ Calcula o total da propriedade especificada (juros, amortizacao, parcela)\n          let total = this.resultadoParcelas.reduce((acc, parcela) => {\n            return acc + parseFloat(parcela[propriedade].replace(\/[^\\d.,]\/g, '').replace(',', '.'));\n          }, 0);\n          return 'R$ ' + total.toFixed(2).replace(\/\\d(?=(\\d{3})+\\.)\/g, '$&,');\n        }\n      }\n    });\n    \/\/ Fun\u00e7\u00e3o para imprimir apenas o conte\u00fado do modal\n    function printModal() {\n      var printContents = document.getElementById(\"myModal\").innerHTML;\n      var originalContents = document.body.innerHTML;\n      document.body.innerHTML = printContents;\n      window.print();\n      document.body.innerHTML = originalContents;\n    }\n  <\/script><\/p>\n","protected":false},"excerpt":{"rendered":"<p>{{ message }} Valor solicitado R$ Car\u00eancia Sem car\u00eanciaCom car\u00eancia Parcelas {{ inputRange2 }} J\u00e1 \u00e9 nosso cliente? Marque se [&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":"","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-3251","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/age.pe.gov.br\/index.php\/wp-json\/wp\/v2\/pages\/3251","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=3251"}],"version-history":[{"count":3,"href":"https:\/\/age.pe.gov.br\/index.php\/wp-json\/wp\/v2\/pages\/3251\/revisions"}],"predecessor-version":[{"id":3570,"href":"https:\/\/age.pe.gov.br\/index.php\/wp-json\/wp\/v2\/pages\/3251\/revisions\/3570"}],"wp:attachment":[{"href":"https:\/\/age.pe.gov.br\/index.php\/wp-json\/wp\/v2\/media?parent=3251"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}