<template>
  <div class="page">
    <t-card v-if="tabActive == 'forgetPassword'" class="w-[400px] absolute top-[12%] right-[8%] bg-[#ffffff60] rounded-[10px]" :bordered="false" shadow>
      <resetPass @back="tabActive = 'login'" />
    </t-card>
    <t-card v-else class="w-[400px] absolute top-[12%] right-[8%] bg-[#ffffff60] rounded-[10px]" :bordered="false" shadow>
      <div class="flex justify-between items-center w-1/3 mx-auto py-2 text-lg">
        <div class="text-blue-400 cursor-pointer" :class="{ 'text-pp-500': tabActive == 'login' }" @click="loginClick">
          登录
        </div>
        <div class="text-blue-400 cursor-pointer" :class="{ 'text-pp-500': tabActive == 'register' }"
          @click="registerClick">注册</div>
      </div>


      <t-form v-if="tabActive == 'login'" :rules="loginRules" :data="loginData" colon showErrorMessage labelAlign="top"
        scroll-to-first-error="smooth" @submit="loginSubmit">
        <t-form-item label="用户名" name="username">
          <t-input v-model="loginData.username" placeholder="请输入邮箱或者手机号" />
        </t-form-item>
        <t-form-item label="密码" name="password">
          <t-input v-model="loginData.password" placeholder="请输入密码" />
        </t-form-item>
        <div @click="tabActive = 'forgetPassword'" class="cursor-pointer text-right text-[12px] mr-1 mb-2 text-pp-500 underline italic">忘记密码？去找回
        </div>
        <t-form-item name="btn">
          <t-button type="submit" block>登录</t-button>
        </t-form-item>
      </t-form>

      <t-form v-if="tabActive == 'register'" :rules="regRules" :data="regData" colon showErrorMessage labelAlign="top"
        scroll-to-first-error="smooth" @submit="regSubmit">
        <t-form-item label="昵称" name="nickname">
          <t-input v-model="regData.nickname" placeholder="请输入昵称" />
        </t-form-item>
        <t-form-item label="邮箱" name="username">
          <t-input v-model="regData.username" placeholder="请输入邮箱" />
        </t-form-item>
        <t-form-item label="验证码" name="code">
          <t-input v-model="regData.code" type="number" placeholder="请输验证码" />
          <t-button theme="primary" @click="getCode">获取验证码</t-button>
        </t-form-item>
        <t-form-item label="密码" name="password">
          <t-input v-model="regData.password" type="password" placeholder="请输入密码" />
        </t-form-item>
        <t-form-item label="重复密码" name="repassword">
          <t-input v-model="regData.repassword" type="password" placeholder="请再次输入密码" />
        </t-form-item>
        <t-form-item class="pt-4" name="btn">
          <t-button type="submit" block>注册</t-button>
        </t-form-item>
      </t-form>


    </t-card>
  </div>
</template>

<script setup>
//mark import
import resetPass from "./resetPass.vue"
//mark data
const router = useRouter()

const tabActive = ref('login') // tab切换: login、register、forgetPassword
const loginData = reactive({
  username: '',
  password: ''
}) // 登录表单数据
const regData = reactive({
  nickname: '',
  username: '',
  code: '',
  password: '',
  repassword: ''
}) // 注册表单数据

const loginRules = reactive({
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
    { validator: validateUsername, message: '请输入正确的邮箱或者手机号', trigger: 'blur' },
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { validator: validatePassword, message: '密码长度为6-12位，且必须包含数字和字母', trigger: 'blur' }
  ]
}) // 登录表单验证规则
const regRules = reactive({
  nickname: [
    { required: true, message: '请输入昵称', trigger: 'blur' },
  ],
  username: [
    { required: true, message: '请输入邮箱', trigger: 'blur' },
    { validator: validateMail, message: '请输入正确的邮箱', trigger: 'blur' },
  ],
  code: [
    { required: true, message: '请输入验证码', trigger: 'blur' },
    { len: 6, message: "验证码长度为6", trigger: "blur" },
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { validator: validatePassword, message: '密码长度为6-12位，且必须包含数字和字母', trigger: 'blur' }
  ],
  repassword: [
    { required: true, message: '请再次输入密码', trigger: 'blur' },
    { validator: validatePassword, message: "必须是含有数字，字母的6-12位密码", trigger: "blur" },
    { validator: validatePasswordStartWith, message: "两次密码输入不一致", trigger: "input" },
    { validator: validatePasswordSame, message: '两次密码输入不一致', trigger: 'blur' },
  ]
}) // 注册表单验证规则


//mark method
function loginClick() {
  tabActive.value = 'login'
}
function registerClick() {
  tabActive.value = 'register'
}

async function loginSubmit({ validateResult, firstError }) {
  console.log(validateResult, firstError);
  if (validateResult === true) {
    const res = await $http.user.login(loginData)
    if (res.code == 1) {
      $cookies.set('token', res.token, 60 * 60 * 24 * 7)
      $cookies.set('userinfo', res.data, 60 * 60 * 24 * 7)
      $msg.success(res.msg)
      router.push('/')
      return
    }
    $msg.error(res.msg)

    return
  }
  $msg.error(firstError)
}
async function regSubmit({ validateResult, firstError }) {
  console.log(validateResult, firstError);
  if (validateResult === true) {
    const res = await $http.user.regis(regData)
    if (res.code == 1) {
      $msg.success(res.msg)
      tabActive.value = 'login'
      resetRegData()
      return
    }
    $msg.error(res.msg)
    return
  }
  $msg.error(firstError)
}
async function getCode() {
  if (!regData.username) {
    $msg.error("请输入邮箱");
    return;
  }
  const res = await $http.addr.sendMail({ mail: regData.username });
  if (res.code == "1") $msg.success(res.msg);
  else if (res.code == "0") $msg.error(res.msg);
}

function resetRegData() {
  regData.nickname = ''
  regData.username = ''
  regData.code = ''
  regData.password = ''
  regData.repassword = ''
}

function validatePasswordStartWith(value) {
  return !!regData.password && regData.password.startsWith(value) && regData.password.length >= value.length;
}
function validatePasswordSame(value) {
  return value === regData.password;
}
function validateUsername(value) {
  return /^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$/.test(value) || /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/.test(value)

}
function validateMail(value) {
  return /^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$/.test(value);
}
function validatePassword(value) {
  return /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,12}$/.test(value);
}
//mark 周期、内置函数等


</script>

<style scoped lang="less">
.page {
  background: transparent url("./img/05.jpeg") 100% 100%/100% 100% no-repeat;
  width: 100vm;
  height: 100vh;
  overflow: hidden;
}
</style>