<script setup lang="ts">
import { onMounted } from 'vue';
import { constructPaypalBtn } from '@/utils/paypal';
import { getPaymentConfig, getPayPalConfig } from '@/service/api/payment';
import CryptoJS from 'crypto-js';

/**
 * AES解密处理（CBC模式）
 */
function decryptCBC(word: string) {
  word = (word + '').replace(/\n*$/g, '').replace(/\n/g, ''); // 这一行，将换行符替换为空

  // 密钥
  const keyStr = "EolSdjfd89v2PubN";

  // 向量
  const ivStr = "EjlnujOBvlv2PubN";
  const key = CryptoJS.enc.Utf8.parse(keyStr);
  let iv = CryptoJS.enc.Utf8.parse(ivStr);
  const decrypt = CryptoJS.AES.decrypt(word, key, 
	  {
	    iv: iv,
	    mode: CryptoJS.mode.CBC,
	    padding: CryptoJS.pad.Pkcs7
	  }
  )
  return decrypt.toString(CryptoJS.enc.Utf8)
}

interface Props {
  orderInfo: {
    orderId: string;
    orderType: number; // 0: 购买套餐, 1: 余额充值
    orderAmount: number;
  };
}

const props = defineProps<Props>();

onMounted(async()=>{
  const response = await getPaymentConfig();
  let currency = 'USD';
  if (response && response.data) {
    currency = response.data.currency || 'USD';
  }
  const configRes = await getPayPalConfig();
  const clientId = decryptCBC(configRes.data);
  await constructPaypalBtn(clientId, props.orderInfo.orderId, currency);
})
</script>

<template>
  <div id="paypal-buttons"></div>
</template>

<style scoped>

</style>
