<template>
  <div>
    <v-form fast-fail @submit.prevent="submit">
      <!-- <v-img class="mx-auto my-6" max-width="228"
        src="https://cdn.vuetifyjs.com/docs/images/logos/vuetify-logo-v3-slim-text-light.svg"></v-img> -->

      <v-card class="mx-auto pa-12 pb-8" elevation="8" max-width="448" rounded="lg">
        <v-text-field v-model="userId" prepend-inner-icon="mdi-account-circle" :rules="userIdRules"
          label="账号"></v-text-field>

        <v-divider :thickness="10" class="border-opacity-0"></v-divider>

        <v-text-field v-model="password" :rules="passwordRules" label="密码"
          :append-inner-icon="visible ? 'mdi-eye' : 'mdi-eye-off'" :type="visible ? 'text' : 'password'"
          @click:append-inner="visible = !visible" prepend-inner-icon="mdi-lock-outline"></v-text-field>

        <v-divider :thickness="10" class="border-opacity-0"></v-divider>

        <v-text-field :rules="passwordRules2" label="重复输入密码" :append-inner-icon="visible ? 'mdi-eye-off' : 'mdi-eye'"
          :type="visible ? 'text' : 'password'" @click:append-inner="visible = !visible"
          prepend-inner-icon="mdi-lock-outline"></v-text-field>

        <v-divider :thickness="10" class="border-opacity-0"></v-divider>

        <v-card class="mb-12" color="surface-variant" variant="tonal">
          <v-card-text class="text-medium-emphasis text-caption">
            这只是个占位符文本，不知道为什么没有这段话整个布局就会乱成一坨，我还在研究怎么让它表现得正常一点，这个组件库的文档太抽象了，看不懂，唉。
          </v-card-text>
        </v-card>

        <v-btn :loading="loading" class="mb-8" color="blue" size="large" type="submit" variant="tonal" block>
          注册
        </v-btn>

      </v-card>
    </v-form>
  </div>
  <v-dialog v-model="dialogShow" width="auto">
    <v-card max-width="400" prepend-icon="mdi-update" :text="dialogText" :title="dialogTitle">
      <template v-slot:actions>
        <v-btn class="ms-auto" text="Ok" @click="dialogShow = false, dialogClose()"></v-btn>
      </template>
    </v-card>
  </v-dialog>
</template>

<script setup lang="ts">
import { useAuthStore } from '@/store/auth';
import axios, { AxiosError } from 'axios';
import { inject, ref } from 'vue';

const visible = ref(false);
const model = defineModel();

const authStore = useAuthStore();
const storedToken = ref(authStore.token);

const dialogShow = ref(false);
const dialogTitle = ref('');
const dialogText = ref('');
const dialogClose = ref(() => { });

const loading = ref(false);
const userId = ref('');
const password = ref('');

type RegisterResponse = { success?: string, error?: string };

const dialog = (title: string, text: string) => {
  dialogTitle.value = title;
  dialogText.value = text;
  dialogShow.value = true;
  return new Promise(res => {
    dialogClose.value = res as () => void;
  });
};

const register = async (userId: string, password: string) => {
  console.log('login', userId, password);
  try {
    const formData = new FormData;
    formData.append("user_id", userId);
    formData.append("password", password);
    let res = await axios.post('/api/auth/register', formData);
    console.log(res.data);
    return res.data as RegisterResponse;
  } catch (e) {
    let ex = e as AxiosError;
    return ex.response?.data as RegisterResponse;
  }
};

const submit = async (event: SubmitEvent) => {
  const results: any = await event;
  if (results.valid) {
    loading.value = true
    console.log('valid')
    let res = await register(userId.value, password.value);
    loading.value = false
    if (res?.error) {
      dialog('错误', `注册失败：${res.error}`);
    } else {
      await dialog('提示', '注册成功，请前往登录。');
      model.value = 0;
    }
  }
  console.log(2);
};

const userIdRules: any = [(value: string) => {
  if (value?.length > 0) return true;
  return '账号不能为空';
}];

const passwordRules: any = [(value: string) => {
  if (value?.length > 0) return true;
  return '密码不能为空';
}];

const passwordRules2: any = [(value: string) => {
  if (value == password.value) return true;
  return '两次输入需保持一致';
}];

</script>