<script setup lang="ts">
import { ref } from "vue";
import type { PaymentData } from "@/interfaces";
import { useMainStore } from "@/stores/main";

const mainStore = useMainStore();
let isLoading = ref(false);
const credit = ref(1);

function increment() {
  credit.value++;
}
function decrement() {
  if (credit.value > 1) {
    credit.value--;
  }
}

const epayment = ref("ecpay");

async function ecpay() {
  isLoading.value = true;
  const data: PaymentData = {
    item: `Credit ${60 * credit.value}`,
    amount: 500 * credit.value,
  };
  if (data.amount <= 0) {
    return;
  }

  const originalHTML = await mainStore.Payment(data, "zh");

  let formHTML = originalHTML?.replace(
    '<script type="text/javascript">document.getElementById("data_set").submit();</scr',
    ""
  );
  formHTML = formHTML?.replace("ipt>", "");
  const payFormElement = document.getElementById("pay-form");
  payFormElement!.innerHTML = formHTML!;
  const ecpayForm: HTMLFormElement = <HTMLFormElement>(
    document.getElementById("data_set")
  );
  ecpayForm.submit();

  setTimeout(() => {
    isLoading.value = false;
  }, 3000);
}
</script>

<template>
  <div class="d-flex align-center flex-wrap">
    <button class="ms-2 mb-2">立即訂閱</button>
  </div>

  <div id="pay-form"></div>
</template>

<style lang="scss" scoped>
button {
  padding: 0.7rem 3rem;
  color: #fff;
  letter-spacing: 2px;
  font-weight: 500;
  border-radius: 4px;
  background-image: linear-gradient(
    -225deg,
    rgb(234, 84, 19) 35%,
    rgb(178, 69, 146) 100%
  );
}
</style>
