<script setup>
import {debounce} from "throttle-debounce";
import Config from "@/config";

const {t} = useI18n();

const isSubmit = ref(false)

function submit() {
  isSubmit.value = true
  setTimeout(() => {
    isSubmit.value = false
  }, 3000)
}


// 提交
const handleSubmit = debounce(Config.debounceLongTime, submit, {
  atBegin: true
})

</script>
<script>
// @ts-ignore
import {debounce} from "throttle-debounce";
// @ts-ignore
import Config from "@/config";
import {appUserCardSavePost} from "@/service";

export default {
  data() {
    return {
      isSubmit: false
    }
  },
  onLoad() {
    console.log('onLoad')
// @ts-ignore
    this.handleSuccess = debounce(Config.debounceLongTime, this.handleSuccess, {
      atBegin: true
    })
  },
  methods: {
    handleError() {
      uni.showToast({
        icon: 'none',
        title: 'Add credit card failed'
      })
    },
    async handleSuccess(data) {
      try {
        const params = {
          cardNumber: '************' + data.card.last4,
          cardId: data.id,
        }
        const res = await appUserCardSavePost({
          body: params
        })
        console.log('handleSuccess', res)

        await uni.showToast({
          icon: 'none',
          title: 'The credit card was added successfully.'
        })
        // const eventChannel = this.getOpenerEventChannel();
        // const id = res.data
        // eventChannel.emit('acceptDataFromOpenedPage', {...params, id});
        setTimeout(uni.navigateBack, 1000)
      } catch (e) {
      }
    },

  }
}
</script>
<script lang="renderjs" module="addRenderjs">
import {loadStripe} from '@stripe/stripe-js/pure';
import Config from '@/config/index'

// @ts-ignore
export default {
  data() {
    return {
      isCompleted: false,
      stripe: null,
      elements: null,
    }
  },

  mounted() {
    console.log('mounted')
    this.init()
  },
  methods: {
    async init() {
      console.log('本次初始化使用的key', Config.stripeKey)
      loadStripe.setLoadParameters({advancedFraudSignals: false});
      const stripe = await loadStripe(Config.stripeKey);
      this.stripe = stripe
      console.log(stripe)
      const options = {
        appearance: {/*...*/},
      };
      this.elements = stripe.elements(options);
      const paymentElement = this.elements.create('card', {disableLink: true});
      paymentElement.mount('#payment-form');
      this.elements.get
      paymentElement.on('change', (event) => {
        console.log(event)
        if (event.complete) {
          this.isCompleted = true
          // enable payment button
        }
      });
    },
    async handleSubmit(isSubmit) {
      console.log('handleSubmit', isSubmit, this.isCompleted)
      console.log('handleSubmit', this.stripe)

      if (!isSubmit || !this.isCompleted || !this.stripe) {
        return
      }
      const {error, paymentMethod} = await this.stripe.createPaymentMethod({
        elements: this.elements,
      });
      console.log(error)
      console.log(paymentMethod)
      if (error) {
        // Handle error
        this.$ownerInstance.callMethod('handleError')
      } else {
        // Send paymentMethod.id to your server
        this.$ownerInstance.callMethod('handleSuccess', paymentMethod)
      }
    }
  }
}
</script>
<template>
  <view class="">
    <navbar customClass="!bg-transparent"/>
    <view class="text-center px-30rpx mt-98rpx">
      <view class="text-46rpx lh-46rpx text-#333 font-bold">{{ Config.appName }}</view>
      <view class="text-32rpx text-#333 font-500 mt-70rpx mb-12rpx">{{ t('pages-user.card.title') }}</view>
      <view class="text-28rpx lh-28rpx text-#999">{{ t('pages-user.card.desc') }}</view>
    </view>
    <view id="payment-form" :change:prop="addRenderjs.handleSubmit"
          :prop="isSubmit"
          class="mt-188rpx px-30rpx py-40rpx  bg-#fff"
    ></view>

    <!-- 底部确认按钮 -->
    <fixed-bottom-large-btn
        :text="t('common.save')"
        class="z-100"
        fixed
        @click="handleSubmit"
    />
  </view>
</template>

<style lang="scss" scoped>
page {
  background-color: #F5F5F5;
}
</style>