<template>
  <div class="content-box">
    
    <h4 v-if="setTitle" class="footer-title text-small text-bold visible-block bottom-margin-x-small">Formas de pagamento</h4>

    <template v-if="paymentOptions.paymentStatus">
      <div class="content-box flex">
        
        <template v-if="paymentOptions.bandeiras_automaticas == types.Tp_Enable">
          <div v-for="data ,key in paymentOptions.banners" :key="key">
            <div class="bandeira right-margin-x-small bottom-margin-x-small" :class="data.class" :title="data.title"></div>
          </div>
        </template>

        <template v-else>
          <div v-for="data ,key in paymentOptions.banners" :key="key">

            <template v-if="data.link">
              <div class="right-margin-x-small bottom-margin-x-small">
                <a :href="data.link" target="_blank">
                  <picture>
                    <source class="load-image" :srcset="data.image.webp">
                    <img class="load-image" src="assets/img/loading-black.svg" :data-src="data.image.jpg" :alt="data.title"/>
                  </picture>
                </a>
              </div>
            </template>

            <template v-else>
              <div class="right-margin-x-small bottom-margin-x-small">
                <picture>
                  <source class="load-image" :srcset="data.image.webp">
                  <img class="load-image" src="assets/img/loading-black.svg" :data-src="data.image.jpg" :alt="data.title"/>
                </picture>
              </div>
            </template>

          </div>
        </template>

      </div>
    </template>

  </div>
</template>

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

export default {
  name: 'DynamicPayment',
  data() {
    return {
      paymentOptions: store.state.dynamicPayment,
      language: store.state.languages,
    };
  },
  computed: {
    types() {
      return {
        Tp_Disable: 0,
        Tp_Enable: 1,
        Tp_Futura: 1,
        Tp_Custom: 2,
      }
    },
    setTitle() {
      return parseInt(this.paymentOptions.paymentStatus) !== this.types.Tp_Disable ?? false; 
    },
  },
};
</script>

<style scoped></style>