<template>
  <v-form ref="form" v-model="isValid" class="pa-4 pt-6">
    <v-text-field v-model="usrname" variant="filled" :rules="[rules.usrname]" color="indigo" label="用户名"></v-text-field>
    <v-text-field v-model="password" variant="filled" :rules="[rules.password]" color="indigo" label="密码"
      type="password"></v-text-field>
  </v-form>

  <v-card-actions>
    <v-btn :disabled="!isValid" :loading="loading" block class="text-none mb-4" color="indigo" size="x-large"
      variant="flat" @click="login">
      登录
    </v-btn>

  </v-card-actions>
  <v-form v-model="isValid">
    <v-dialog v-model="realname1">
      <v-card>
        <v-card-text>如要加入俱乐部，请输入真实姓名：
          <v-text-field v-model="realname" variant="filled" :rules="[rules.realname]" color="indigo"
            label="姓名"></v-text-field>
          <v-btn :disabled="!isValid" :loading="loading" block class="text-none mb-4" color="indigo" size="x-large"
            variant="flat" @click="submit">
            提交
          </v-btn>
        </v-card-text>
      </v-card>
    </v-dialog>
  </v-form>


  <v-dialog v-model="dialog" width="auto">
    <v-card width="300px">
      <v-card-title>
        {{ cardtitle }}
      </v-card-title>
      <v-card-text>
        {{ cardtext }}
      </v-card-text>
      <template v-slot:actions>
        <v-btn class="ms-auto" variant="flat" color="indigo" text="确认" @click="dialog = false"></v-btn>
      </template>
    </v-card>
  </v-dialog>

</template>
<script setup>
import { ref } from 'vue';
import { reactive } from 'vue';
import axios from 'axios';

const form = ref(null);
const rules = reactive({
  email: v => !!(v || '').match(/@/) || 'Please enter a valid email',
  length: len => v => (v || '').length >= len || `Invalid character length, required ${len}`,
  usrname: v => !!v || '用户名不能为空',
  password: v => !!v || '密码不能为空',
  // password: v => !!(v || '').match(/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*(_|[^\w])).+$/) ||
  //   'Password must contain an upper case letter, a numeric character, and a special character',
  required: v => !!v || 'This field is required',
  realname: v => !!v || '姓名不能为空',
});
const usrname = ref(null);
const password = ref(null);
const realname = ref(null);
const isValid = ref(false);
const realname1 = ref(false);
const loading = ref(false);

const cardtitle = ref(null);
const cardtext = ref(null);
const dialog = ref(false);
function info(title, text) {
  cardtitle.value = title;
  cardtext.value = text;
  dialog.value = true;
}

function login() {
  loading.value = true;
  axios.post('/api/login', {
    usrname: usrname.value,
    psword: password.value
  })
    .then(function (response) {
      const data = response.data;
      // console.log(data.is_member);
      // console.log(data.is_member == 0);

      if (data.status === 'SUCCESS') {
        if (data.is_su) {
          window.location.href = '/main.html';
          // console.log("su");
        }
        else if (data.is_member) {
          // console.log("member");
          window.location.href = '/main.html';
        }
        else if (!data.is_member) {
          // console.log("not member");
          // console.log(realname1);
          // window.location.href = '/main.html';
          realname1.value = true;
        }
      }
      else if(data.status === 'USER_NOT_EXIST'){
        info('用户不存在!');
      }
      else if(data.status === 'AUTHENTICATION_FAILED'){
        info('密码错误!');
      }
    })
    .catch(function (error) {
      console.log(error);
    });
  loading.value = false;
}

function submit() {
  loading.value = true;
  axios.post('/api/setRealName', {
    name: realname.value,
  })
    .then(function () {
      info('提交成功！', "请联系管理员审核！");
    })
    .catch(function (error) {
      console.log(error);
    });
  loading.value = false;
}

</script>