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

import modelBillet from '@models/payment/pagarme/billet.js';

const vm = new AdmVue({
  components: {
    BaseCard: () => import(/* webpackChunkName: "BaseCard" */ '@elements/BaseCard/index.vue'),
    BaseTabs: () => import(/* webpackChunkName: "BaseTabs" */ '@components/BaseTabs/index.vue'),
  },
  data() {
    return {
      showModal: false,
      showInfo: [],
      configurationModels: {
        pagarme_billet: modelBillet,
      },
      configurations: {
        pagarme_bank: 198,
        pagarme_billet: modelBillet.format({
          status: 0,
          title: '',
          valor_minimo: '',
          validade: '',
          desconto: '',
          tipo_desconto: 0,
        }),
        pagarme_pix: modelBillet.format({
          status: 0,
          title: '',
          expires_at: '',
        }),
        pagarme_parcelamento_configs: [
          {
            num_parcela: '',
            val_minimo: '',
            tipo_calculo: '',
            percentual_calculo: '',
          }
        ],
      },
      tabs: [] ,
      textCopy: '',
      loadingBtn: false,
      maxlengthTextarea: 255,


    };
  },
  beforeMount() {
    this.configurations.pagarme_cnpj = '18.727.053/0001-74';

    this.tabs = [
      {text: this.tabs_geral , active:true},
      {text: this.tabs_status , active:false},
      {text: this.tabs_formas , active:false},
      {text: this.tabs_instrucao , active:false}
    ];

    this.textCopy = this.text_copy;
  },

  mounted() {

  },
  watch:{
    "configurations.pagarme_parcela_qtdmax"(value){
      if (value === ''){
        return;
      }

      const config = [];
      for (let x=0;x<value;x++){
        config[x] = Object.assign({}, this.configurations.pagarme_parcelamento_configs[x] || {});
      }
      this.configurations.pagarme_parcelamento_configs = config;
    },
  },
  computed:{
    sendData() {
      for (let x=1;x<=this.configurations.pagarme_parcelamento_configs.length;x++){
        this.configurations.pagarme_parcelamento_configs[x-1].num_parcela = x;
      }

      return {
        ...this.configurations,
      };
    },
    pagarmeDescontoBoleto(){
      // esta com numero magico, vamos ver como fazer com o type ainda
      return this.configurations.pagarme_billet.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.pagarme_client_id;
      const client_public = this.configurations.pagarme_client_public
      const client_secret = this.configurations.pagarme_client_secret;
      this.loadingBtn = true;

      window
        .axiosApi({
          method: 'get',
          url: url,
          params: { client_id: client_id, client_secret: client_secret, cliente_public: client_public },
        })
        .then(({ data }) => {
          notificationMsg(data.message, data.type);
        })
        .catch(err => {
          console.log(err);
        })
        .finally(() => {
          this.loadingBtn = false;
        });
    },
    iconDisplay() {
        this.showModal = true;
    },
    iconNotDisplay() {
        this.showModal = false;
    },
  }
});

AdmVue.init(vm);