<script setup lang="ts">
const useAuthStore = ref('');
const remember = ref(false);
const memberId = ref('');
const password = ref('');

definePageMeta({
  layout: 'empty'
});

// const router = useRouter();
// const store = useAuthStore();
// const { authentication } = storeToRefs(store);
//
// onBeforeMount(() => {
//   store.loadRemember();
// });
//
// onBeforeUnmount(() => {
//   authentication.value = {
//     ...authentication.value,
//     memberId: ''
//   };
// });
//
// watch(authentication.value, (newValue) => {
//   if (newValue.remember) {
//     store.setRemember();
//   } else {
//     store.initRemember();
//   }
// });

const login = async () => {
  // try {
  //   const { data } = await store.authenticate();
  //   store.authorize(data);
  //
  //   await router.push('/');
  // } catch (e) {
  //   message.error('아이디 또는 비밀번호를 확인해주세요.');
  // }
};

const validateLogin = computed(() => {
  return false;
});
</script>

<template>
  <a-row justify="center" class="w-full h-full items-center">
    <a-col :span="7.5">
      <a-card bordered style="background-color: #f5f5f5; padding: 24px">
        <h1
          style="
            text-align: center;
            font-size: 24px;
            font-weight: bold;
            margin-bottom: 16px;
          "
        >
          로그인
        </h1>
        <div style="height: 18px"></div>

        <a-form-item>
          <a-checkbox v-model:checked="remember">
            키보드보안 프로그램적용
          </a-checkbox>
          <div style="height: 10px"></div>
          <div>
            <p style="font-size: 12px; color: #888">
              ※ 안전한 서비스 이용을 위해 키보드보안 프로그램 적용을 권장합니다.
            </p>
          </div>
        </a-form-item>

        <a-form :colon="false" label-align="left">
          <a-form-item label="아이디" :label-col="{ span: 5 }">
            <a-input
              v-model:value="memberId"
              placeholder="아이디를 입력하세요"
              maxLength="20"
            />
          </a-form-item>

          <a-form-item label="비밀번호" :label-col="{ span: 5 }">
            <a-input-password
              v-model:value="password"
              placeholder="비밀번호를 입력하세요"
              maxLength="20"
              @keyup.enter="login"
            />
          </a-form-item>

          <a-form-item>
            <a-button
              type="primary"
              block
              @click="login"
              :disabled="!validateLogin"
              style="font-weight: bold"
            >
              로그인
            </a-button>
          </a-form-item>

          <div style="display: flex; justify-content: center; margin-top: 16px">
            <router-link to="/login/id" style="color: #1890ff"
              >아이디 찾기</router-link
            >
            <span style="margin: 0 8px; color: #888">|</span>
            <router-link to="/login/pw" style="color: #1890ff"
              >비밀번호 찾기</router-link
            >
            <span style="margin: 0 8px; color: #888">|</span>
            <router-link to="/login/join" style="color: #1890ff"
              >회원가입</router-link
            >
          </div>
        </a-form>
      </a-card>
    </a-col>
  </a-row>
</template>
