import AdmVue from '@assets/js/adm-vue';
import copyContent from '@assets/js/copyContent';

// import modelCreditCard from '@models/payment/getnet/creditCard.js';
import modelBillet from '@models/payment/getnet/billet.js';
// import modelPix from '@models/payment/getnet/pix.js';
import {Number, String} from "@assets/js/objectModel";

const vm = new AdmVue({
  components: {
    BaseCard: () => import(/* webpackChunkName: "BaseCard" */ '@elements/BaseCard/index.vue'),
    BaseTabs: () => import(/* webpackChunkName: "BaseTabs" */ '@components/BaseTabs/index.vue'),
    BaseContent: () => import(/* webpackChunkName: "BaseContent" */ '@elements/BaseContent/index.vue'),
  },
  data() {
    return {
      showModal: [],
      configurationModels: {
        // seta o modelo do objeto
        getnet_billet: modelBillet,
        // getnet_pix: [],
      },
      configurations: {
        getnet_status: 0,
        getnet_seller_id: '',
        getnet_client_id: '',
        getnet_client_secret: '',
        getnet_ambiente: 0,
        getnet_display: 0,
        getnet_log_error: 1,
        getnet_region: 0,
        getnet_order: '',

        getnet_order_status_replicar: 0,
        getnet_order_status_pending: 0,
        getnet_order_status_approved: 0,
        getnet_order_status_paid: 0,
        getnet_order_status_reproved: 0,
        getnet_order_status_canceled: 0,
        getnet_order_status_error: 0,
        getnet_order_status_denied: 0,

        getnet_discount: 0,
        getnet_discount_order: '',

        getnet_debit_card: modelBillet.format({
          status: 0,
          title: '',
          valor_minimo: '',
          desconto: '',
          valor_minimo_discount: 0,
          tipo_desconto: 0,
          brands: [],
        }),

        getnet_pix: modelBillet.format({
          status: 0,
          title: '',
          valor_minimo: '',
          desconto: '',
          valor_minimo_discount: 0,
          tipo_desconto: 0,
          expires_at: '',
        }),

        getnet_billet: modelBillet.format({
          status: 0,
          title: '',
          valor_minimo: '',
          validade: '',
          valor_minimo_discount: 0,
          desconto: '',
          tipo_desconto: 0,
        }),

        getnet_parcela_minima: '',
        getnet_parcela_qtdmax: '',
        getnet_parcela_juros: '',
        getnet_parcela_comdesconto: '',
        getnet_parcela_desconto: '',
        getnet_parcela_semjuros: '',

        getnet_config_parcelamento: '',

        getnet_credit_card_title: '',

        getnet_parcelamento_configs: [
          {
            num_parcela: '',
            val_minimo: '',
            tipo_calculo: '',
            percentual_calculo: '',
          }
        ],

        getnet_credit_card: [
          {
            key: '',
            descricao: '',
            status: '',
            valor_minimo: '',
            total_parcela: '',
            parcela_juros: '',
          }
        ],

      },
      tabs: [
        {text:'Geral', active:true},
        {text:'Status do Pagamento', active:false},
        {text:'Formas de Pagamento', active:false}
      ],
      loadingBtn: false,
      textCopy: '',
    };
  },
  beforeMount() {

    this.configurations.getnet_cnpj =  '10440482000154';
    // Monta a interface das bandeira dos cartões de crédito
    const getnetBandeira = Object.entries(this.Type_GetnetBandeira.getEnumList());

    this.configurations.getnet_credit_card = getnetBandeira.map((item, index)=>{
      const {getnet_credit_card} = this.configurations;
      const itemDb = getnet_credit_card.find(({key})=>{
        return key==item[0];
      }) || {};

      return {
        key: item[0],
        descricao: item[1],
        status: itemDb.status || 0,
        valor_minimo: itemDb.valor_minimo || '',
        total_parcela: itemDb.total_parcela || 0,
        parcela_juros: itemDb.parcela_juros || 0,
      };
    });

    this.textCopy = this.text_copy;
  },
  watch:{
    "configurations.getnet_parcela_qtdmax"(value){
      if (value === ''){
        return;
      }

      const config = [];
      for (let x=0;x<value;x++){
        config[x] = Object.assign({}, this.configurations.getnet_parcelamento_configs[x] || {});
      }
      this.configurations.getnet_parcelamento_configs = config;
    },
    "configurations.getnet_discount"(value){
      if (value == "0"){
        this.configurations.getnet_billet.desconto = '';
      }
    }
  },
  computed:{
    sendData() {
      for (let x=1;x<=this.configurations.getnet_parcelamento_configs.length;x++){
        this.configurations.getnet_parcelamento_configs[x-1].num_parcela = x;
      }

      return {
        ...this.configurations,
      };
    },
    getnetDescontoBoleto(){
      // esta com numero magico, vamos ver como fazer com o type ainda
      return this.configurations.getnet_billet.tipo_desconto == 1 ? 'brazilCurrency' : 'percentage';
    },
    getnetDescontoPix(){
      // esta com numero magico, vamos ver como fazer com o type ainda
      return this.configurations.getnet_pix.tipo_desconto == 1 ? 'brazilCurrency' : 'percentage';
    },
    getnetDescontoDebit(){
      // esta com numero magico, vamos ver como fazer com o type ainda
      return this.configurations.getnet_debit_card.tipo_desconto == 1 ? 'brazilCurrency' : 'percentage';
    }
  },
  methods: {
    copyLink() {
      copyContent(this.url_callback);
      this.textCopy = this.text_copied;
      setTimeout(() => {
        this.textCopy = this.text_copy;
      }, 2000);
    },
    validateCredentials(url) {
      const client_id     = this.configurations.getnet_client_id;
      const client_secret = this.configurations.getnet_client_secret;

      this.loadingBtn = true;

      window
        .axiosApi({
          method: 'get',
          url: url,
          params: { client_id: client_id, client_secret: client_secret },
        })
        .then(({ data }) => {
          notificationMsg(data.message, data.type);
        })
        .catch(err => {
          console.log(err);
        })
        .finally(() => {
          this.loadingBtn = false;
        });
    },
    iconDisplay(index){
      document.querySelectorAll('.show-modal').forEach(element => {
        if(element.getAttribute('index') == index){
          element.classList.remove('hidden');
        }
      })
    },
    iconNotDisplay(index){
      document.querySelectorAll('.show-modal').forEach(element => {
        if(element.getAttribute('index') == index){
          element.classList.add('hidden');
        }
      })
    },
    iconDisplayCredit(keyParcela) {
      this.$set(this.showModal, keyParcela, true);
  },
  iconNotDisplayCredit(keyParcela) {
      this.$set(this.showModal, keyParcela, false);
  },
  }
});

AdmVue.init(vm);