<script setup lang="ts">
import { ref, reactive } from "vue";
import { required } from "@/utils";
import { useAdminStore } from "@/stores/admin";
import axios from "axios";
import { useMainStore } from "@/stores/main";

const mainStore = useMainStore();
async function ECPaySubmit() {
  /*
  const timestamp = Date.now()
  const date = new Date(timestamp);
  const year = date.getFullYear();
  const month = date.getMonth() + 1;
  const day = date.getDate();
  const hour = date.getHours();
  const minute = date.getMinutes();
  const second = date.getSeconds();

  console.log("ECPay button pushed")
  const formData = new URLSearchParams();
  formData.append("MerchantID", "3226141") //必填
  formData.append("MerchantTradeNo", "AAA000") //必填
  formData.append("MerchantTradeDate", `${year}/${month}/${day} ${hour}:${minute}:${second}`) //必填
  formData.append("PaymentType", "aio") //必填
  formData.append("TotalAmount", "600") //必填
  formData.append("TradeDesc", "choozmo SaaS") //必填
  formData.append("ItemName", "charge600") //必填
  formData.append("ReturnURL", "https:cloud.choozmo.com") //必填
  formData.append("ChoosePayment", "ALL") //必填
  formData.append("CheckMacValue", "choaho")
  formData.append("EncryptType", "1") //必填
  formData.append("StoreID", "")
  formData.append("ClientBackURL", "")
  formData.append("ItemURL", "")
  formData.append("Remark", "")
  formData.append("ChooseSubPayment", "")
  formData.append("OrderResultURL", "")
  formData.append("NeedExtraPaidInfo", "")
  formData.append("IgnorePayment", "")
  formData.append("PlatformID", "")
  formData.append("IgnorePayment", "")
  formData.append("CustomField1 ", "")
  formData.append("CustomField2", "")
  formData.append("CustomField3", "")
  formData.append("CustomField4", "")
  formData.append("Language", "")
  return axios.post("https://payment-stage.ecpay.com.tw/Cashier/AioCheckOut/V5", formData)
  */

  const originalHTML = await mainStore.ecpayPaymentHTML(500);
  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")
  );
  console.log(ecpayForm);
  ecpayForm.submit();
}
</script>

<template>
  <v-container fluid>
    <v-card class="ma-3 pa-3">
      <v-card-title primary-title>
        <div class="headline primary--text">Test ECPay</div>
      </v-card-title>
      <v-card-actions>
        <v-spacer></v-spacer>
        <v-btn @click="ECPaySubmit"> Send </v-btn>
      </v-card-actions>
    </v-card>
  </v-container>

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