<template>
  <div class="content-box">

    <template v-if="certificates">

      <h4 v-if="setTitle" class="footer-title text-small text-bold visible-block bottom-margin-x-small">Certificados</h4>
      <template v-if="
        (certificates.banners_certificado && certificates.certificates_status == types.TpCert_Custom) || 
        (certificates.banners_certificado && certificates.certificates_status == types.TpCert_Futura) || 
        (certificates.eBitCertificate.ebit_status) || 
        (certificates.certificates_status == types.TpCert_Enable)"
      >

        <div class="content-box flex">
          
          <template v-if="certificates.banners_certificado && certificates.certificates_status == types.TpCert_Custom">            
            <div v-for="(banner ,index) in certificates.banners_certificado" :key="index">

              <template v-if="banner.link">
                <a :href="banner.link" target='_blank'>
                  <img :src="banner.image" :alt="banner.title" class="right-margin-x-small bottom-margin-x-small">
                </a>  
              </template>
                
              <template v-else>
                <img :src="banner.image" :alt="banner.title" class="right-margin-x-small bottom-margin-x-small">
              </template>
            
            </div>
          </template>

          <template v-if="certificates.certificates_status == types.TpCert_Futura">
            <img src="catalog/view/theme/vista/image/certificado-ssl.png" alt="Site Seguro - Certificado SSL" class="right-margin-x-small bottom-margin-x-small" height="50px" width="150px">
          </template>

          <template v-if="certificates.eBitCertificate.ebit_status == types.TpCert_Enable">
            <a id="seloEbit" class="margin-x-small" :href="'http://www.ebit.com.br/' + certificates.eBitCertificate.ebit_store_id" target="_blank" data-noop="redir(this.href);" title="Ebit"></a>
          </template>
          
        </div>
      </template>
    
    </template>

  </div>
</template>

<script>
import store from "@components/TheFooter/storeFooter.js";

export default {
  name: 'CustomCertificates',
  data() {
    return {
      certificates: store.state.customCertificates,
      language: store.state.languages,
    };
  },
  computed: {
    types() {
      return {
        TpCert_Disable: 0,
        TpCert_Enable: 1,
        TpCert_Futura: 1,
        TpCert_Custom: 2,
      }
    },
    setTitle() {
      return parseInt(this.certificates.certificates_status) !== this.types.TpCert_Disable ?? false; 
    },
  },
  methods:{
    loadScriptEbit() {
      const script = document.createElement('script');

      script.async = true;
      script.src = `https://imgs.ebit.com.br/ebitBR/selo-ebit/js/getSelo.js?${this.certificates.eBitCertificate.ebit_store_id}${this.certificates.eBitCertificate.ebit_store_id ? '&lightbox=true' : ''}`;
      
      document.head.appendChild(script);
    }
  }, 
  mounted() {
    this.certificates.eBitCertificate.ebit_status == this.types.TpCert_Enable ? this.loadScriptEbit() : null; 
  }
};

</script>

<style scoped></style>