<script setup>
import { onMounted, watch, ref } from "vue";
import { useRouter } from "vue-router";
import MyOffcanvas from "@/components/MyOffcanvas.vue";
import { myfuncs } from "@/myfunc.js";
import { my_network_func } from "@/my_network_func";
import { useI18n } from "vue-i18n";
// 使用 vue-i18n 的 Composition API
const { t, locale } = useI18n();
const mos = ref();
const isShowPassword = ref(false);
const username = ref();
const useremail = ref();
const userpassword = ref();
const router = useRouter();

function functionupdataTitle() {
  document.title = "Operations." + t("appname.register");
}
function togglePasswordVisibility() {
  isShowPassword.value = !isShowPassword.value;
}
function createAccount() {
  // 在这里处理创建新账户的逻辑
  const user = username.value?.value;
  const email = useremail.value?.value;
  const pass = userpassword.value?.value;

  username.value?.classList.remove("is-invalid");
  useremail.value?.classList.remove("is-invalid");
  userpassword.value?.classList.remove("is-invalid");

  let isDataErr = false;

  if (!user) {
    isDataErr = true;
    username.value?.classList.add("is-invalid");
  }
  if (!email) {
    isDataErr = true;
    useremail.value?.classList.add("is-invalid");
  }
  if (!pass) {
    isDataErr = true;
    userpassword.value?.classList.add("is-invalid");
  }

  if (isDataErr) {
    mos.value?.showAlert(
      "info",
      t("message.please_enter_username_and_password"),
      5000
    );
    return;
  }

  //判断长度

  if (!myfuncs.isValidEmail(email)) {
    useremail.value?.classList.add("is-invalid");
    mos.value?.showAlert("warning", t("message.this_not_email"), 5000);
    return;
  }
  // console.log("创建新账户信息:", {
  //   user: username.value?.value,
  //   email: useremail.value?.value,
  //   pass: userpassword.value?.value,
  // });

  my_network_func.postJson(
    "/users/register",
    {
      username: username.value?.value,
      useremail: useremail.value?.value,
      userpass: userpassword.value?.value,
    },
    (r) => {
      //console.log(r);
      switch (r.statusCode) {
        case 200:
          switch (r.data.err_code) {
            case -4:
              username.value?.classList.add("is-invalid");
              mos.value?.showAlert("warning", t("message.username_dup"), 5000);
              break;
            case 0:
              mos.value?.showAlert(
                "success",
                t("message.registration_successful"),
                1000,
                () => {
                  router.push("/login");
                }
              );
              break;
            default:
              mos.value?.showAlert("danger", t("message.server_error"), 5000);
              break;
          }
          break;
        default:
          mos.value?.showAlert("danger", t("message.network_err"), 5000);
          break;
      }
    }
  );
}

onMounted(() => {
  functionupdataTitle();
});
// 监听语言变化，更新标题
watch(locale, () => {
  functionupdataTitle();
});
</script>

<template>
  <div class="page page-center">
    <div class="container container-tight py-4">
      <div class="text-center mb-4">
        <router-link to="/" class="navbar-brand navbar-brand-autodark">
          <img
            src="/static/logo.svg"
            width="110"
            height="32"
            alt="Tabler"
            class="navbar-brand-image"
          />
        </router-link>
      </div>
      <div class="card card-md">
        <div class="card-body">
          <h2 class="card-title text-center mb-4">
            {{ t("message.create_new_account") }}
          </h2>
          <div class="mb-3">
            <label class="form-label">{{ t("message.user_name") }}</label>
            <input
              ref="username"
              type="text"
              maxlength="64"
              class="form-control"
              :placeholder="t('message.your_user_name')"
            />
          </div>
          <div class="mb-3">
            <label class="form-label">{{ t("message.email_address") }}</label>
            <input
              ref="useremail"
              type="email"
              maxlength="250"
              class="form-control"
              :placeholder="t('message.your_email_address')"
            />
          </div>
          <div class="mb-3">
            <label class="form-label">{{ t("message.password") }}</label>
            <div class="input-group input-group-flat">
              <input
                ref="userpassword"
                :type="isShowPassword ? 'text' : 'password'"
                class="form-control"
                :placeholder="t('message.your_password')"
                autocomplete="off"
              />
              <span class="input-group-text">
                <div
                  class="link-secondary"
                  title="Show password"
                  data-bs-toggle="tooltip"
                >
                  <!-- Download SVG icon from http://tabler-icons.io/i/eye -->
                  <svg
                    v-if="!isShowPassword"
                    @click="togglePasswordVisibility"
                    xmlns="http://www.w3.org/2000/svg"
                    class="icon"
                    width="24"
                    height="24"
                    viewBox="0 0 24 24"
                    stroke-width="2"
                    stroke="currentColor"
                    fill="none"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  >
                    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                    <path d="M10 12a2 2 0 1 0 4 0a2 2 0 0 0 -4 0" />
                    <path
                      d="M21 12c-2.4 4 -5.4 6 -9 6c-3.6 0 -6.6 -2 -9 -6c2.4 -4 5.4 -6 9 -6c3.6 0 6.6 2 9 6"
                    />
                  </svg>
                  <svg
                    v-if="isShowPassword"
                    @click="togglePasswordVisibility"
                    xmlns="http://www.w3.org/2000/svg"
                    class="icon"
                    width="24"
                    height="24"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="currentColor"
                    stroke-width="2"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  >
                    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                    <path d="M10.585 10.587a2 2 0 0 0 2.829 2.828" />
                    <path
                      d="M16.681 16.673a8.717 8.717 0 0 1 -4.681 1.327c-3.6 0 -6.6 -2 -9 -6c1.272 -2.12 2.712 -3.678 4.32 -4.674m2.86 -1.146a9.055 9.055 0 0 1 1.82 -.18c3.6 0 6.6 2 9 6c-.666 1.11 -1.379 2.067 -2.138 2.87"
                    />
                    <path d="M3 3l18 18" />
                  </svg>
                </div>
              </span>
            </div>
          </div>
          <!-- <div class="mb-3">
              <label class="form-check">
                <input type="checkbox" class="form-check-input"/>
                <span class="form-check-label">Agree the <a href="./terms-of-service.html" tabindex="-1">terms and policy</a>.</span>
              </label>
            </div> -->
          <div class="form-footer">
            <button @click="createAccount" class="btn btn-primary w-100">
              {{ t("message.create_new_account") }}
            </button>
          </div>
        </div>
      </div>
      <div class="text-center text-secondary mt-3">
        {{ t("message.already_have_an_account") }}
        <router-link to="/login">{{ t("message.back_to_login") }}</router-link>
      </div>
    </div>
  </div>
  <MyOffcanvas ref="mos" />
</template>
