<template>
  <body class="bg-gradient-primary">
    <div class="container">
      <!-- Outer Row -->
      <div class="row justify-content-center">
        <div class="col-xl-10 col-lg-12 col-md-9">
          <div class="card o-hidden border-0 shadow-lg my-5">
            <div class="card-body p-0">
              <!-- Nested Row within Card Body -->
              <div class="row">
                <div class="col-lg-6 d-none d-lg-block bg-login-image">
                  <img style="width: 100%" src="/img/lamiter_logo.JPEG" />
                </div>
                <div class="col-lg-6">
                  <div class="p-5">
                    <div class="text-center">
                      <h1 class="h4 text-gray-900 mb-4">Lamiter 歡迎你!</h1>
                    </div>
                    <form class="user">
                      <div class="form-group">
                        <input
                          type="email"
                          class="form-control form-control-user"
                          id="exampleInputEmail"
                          aria-describedby="emailHelp"
                          v-model="email"
                          placeholder="輸入帳號或Email..."
                        />
                      </div>
                      <div class="form-group">
                        <input
                          type="password"
                          class="form-control form-control-user"
                          v-model="password"
                          id="exampleInputPassword"
                          placeholder="Password"
                        />
                      </div>
                      <div class="form-group">
                        <div class="custom-control custom-checkbox small">
                          <input
                            type="checkbox"
                            class="custom-control-input"
                            id="customCheck"
                          />
                          <label class="custom-control-label" for="customCheck"
                            >記住我</label
                          >
                        </div>
                      </div>
                      <a
                        @click="login_in"
                        class="btn btn-primary btn-user btn-block"
                      >
                        登入
                      </a>
                      <hr />
                      <!--
                                    <a href="index.html" class="btn btn-google btn-user btn-block">
                                        <i class="fab fa-google fa-fw"></i> Login with Google
                                    </a>
                                    <a href="index.html" class="btn btn-facebook btn-user btn-block">
                                        <i class="fab fa-facebook-f fa-fw"></i> Login with Facebook
                                    </a>-->
                    </form>
                    <hr />
                    <div class="text-center">
                      <a class="small" href="forgot-password.html">忘記密碼?</a>
                    </div>
                    <div class="text-center">
                      <a class="small" href="/Home_pages/create_user"
                        >創建帳號</a
                      >
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>
</template>

<script setup>
import { useHead } from "#app";
import { ref } from "vue";
import { useRouter } from "vue-router"; //匯入路徑
const { $api_host } = useNuxtApp(); //匯入API host
const router = useRouter(); // 匯入

definePageMeta({
  layout: false, // 禁用 layout
});

useHead({
  title: "Lamiter",
  meta: [
    { charset: "utf-8" },
    { "http-equiv": "X-UA-Compatible", content: "IE=edge" },
    {
      name: "viewport",
      content: "width=device-width, initial-scale=1, shrink-to-fit=no",
    },
    { name: "description", content: "" },
    { name: "author", content: "" },
  ],
  link: [
    {
      rel: "stylesheet",
      href: "https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i",
    }, // 確保 `styles.css` 位於 public/css 資料夾中
    { rel: "stylesheet", href: "/css/sb-admin-2.min.css" },
    { rel: "stylesheet", href: "/vendor/fontawesome-free/css/all.min.css" },
  ],
  script: [
    //{ src: 'https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js', crossorigin: 'anonymous' },
    { src: "/vendor/jquery/jquery.min.js" },
    { src: "/vendor/bootstrap/js/bootstrap.bundle.min.js" },
    { src: "/vendor/jquery-easing/jquery.easing.min.js" },
    { src: "/js/sb-admin-2.min.js" },
  ],
});

const email = ref("");
const password = ref("");

// 提交登入資料
async function login_in() {
  if (!email.value || !password.value) {
    alert("請輸入帳號和密碼");
    return;
  }
  if (email.value) {
    const obj = { Username: email.value, Password: password.value };
    try {
      const response = await fetch(`${$api_host}/Users/authenticate`, {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify(obj),
      });

      if (response.ok) {
        const data = await response.json();
        console.log("成功：", data);
        var token_str = data.token;
        localStorage.setItem('token_TCM', token_str);
        router.push("/");
        // 根據 data 處理登入成功邏輯
      } else {
        console.error("登入失敗");
        alert("帳號、密碼 錯誤");
      }
    } catch (error) {
        alert("伺服器有誤");
    }
  } else {
    alert("帳號、密碼 錯誤");
  }
}
</script>
