<template>
  <div class="home-shield " v-show="showLogin">
    <div class="login-form">
      <!-- 关闭登录界面 -->
      <div class="login-form-close" @click="func()">
        <img src="../assets/close.svg" width="16" height="16"/>
      </div>
      <div class="login-form-body">
        <!-- 选择登录方式 -->
        <div class="login-form-select">
          <ul>
            <li v-for="(item,index) in loginType" @click="selectLoginTypeFunc(index)">
              <span :class="(selectLoginType === index?'login-type':'' )+' login-type-base'">{{ item.name }}登录</span>
            </li>
          </ul>
        </div>
        <form>
          <div class="form-body">
            <div class="input-username" id="input-username"
                 :class="calibrationUsername?'input-box-focus':'input-box-focus-error'">
              <img src="../assets/phone.svg" width="22" height="22">
              <input :placeholder="'请输入'+(loginType[selectLoginType].name)" name="username"
                     @blur="checkUsername(false)" @focus="checkUsername(true)"
                     v-model="username">
            </div>
            <div class="input-username-tip">
              <span>&nbsp;{{ showUsernameTip }}</span>
            </div>
            <div class="input-pass" id="input-pass" :class="calibrationPass?'input-box-focus':'input-box-focus-error'">
              <img src="../assets/password.svg" width="22" height="22">
              <input :placeholder="'请输入'+(loginType[selectLoginType].type==='phone'?'验证码':'密码')"
                     :style="loginType[selectLoginType].type==='email'?{width: '100%'}:{}"
                     :type="loginType[selectLoginType].type==='email'?'password':'input'"
                     @blur="checkPass(false)" @focus="checkPass(true)"
                     name="password" v-model="password">
              <div class="input-pass-btn" v-show="loginType[selectLoginType].type==='phone'">
                获取验证码
              </div>
            </div>
            <div class="input-pass-tip">
              <span>&nbsp;{{ showPassTip }}</span>
            </div>
            <div class="input-btn" @click="login()">
              <span>立即登录</span>
            </div>
          </div>
          {{ username }}
        </form>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import {ref, watch} from "vue";
import {LoginType} from '../entity/LoginData.ts';
import {validateHeaderName} from "node:http";
//获取父组件获取的值，并可以进行修改
const props = defineProps({
  showLogin: {
    type: Boolean,
  },
  func: {
    type: Function
  }
})

let loginType = ref([new LoginType('phone', '手机'), new LoginType('email', '邮箱')])

let selectLoginType = ref(0)


let selectType = ref("phone")
let username = ref("")
let showUsernameTip = ref("")
let calibrationUsername = ref(true)

let password = ref("")
let showPassTip = ref("")
let calibrationPass = ref(true)

function selectLoginTypeFunc(index) {
  username.value = ""
  password.value = ""
  selectLoginType.value = index
  selectType.value = loginType.value[index].type
}

function checkUsername(isFocus) {
  console.log(isFocus)
  if (selectType.value === "phone") {
    //校验手机号
    const reg = /^1[3-9]\d{9}$/
    if (reg.test(username.value)) {
      calibrationUsername.value = false
      showPassTip.value = "手机号格式错误"
    } else {
      calibrationUsername.value = true
      showPassTip.value = ""
    }
  } else {
    //校验邮箱
    const reg = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/
    if (reg.test(username.value)) {
      calibrationUsername.value = false
      showPassTip.value = "邮箱格式错误"
    } else {
      calibrationUsername.value = true
      showPassTip.value = ""
    }
  }
}

function checkPass(isFocus) {
  console.log(isFocus)
  if (selectType.value === "phone") {
    if (password.value.length !== 6) {
      calibrationPass.value = true
      showPassTip.value = "验证码错误"
    } else {
      calibrationPass.value = false
      showPassTip.value = ""
    }
  } else {
    if (password.value.length < 6) {
      calibrationPass.value = true
      showPassTip.value = "密码过短"
    } else {
      calibrationPass.value = false
      showPassTip.value = ""
    }
  }
}

watch(username, (newValue, oldValue) => {
  console.log(newValue, oldValue)
})

function login() {
  console.log(selectType.value + " | " + username.value + " | " + password.value)
}

</script>
<style>
.home-shield {
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  position: fixed;
  background: rgba(0, 0, 0, 0.5);
  z-index: 999;

  .login-form {

    width: 400px;
    height: 0;
    margin: auto;
    position: fixed;
    top: 25%;
    left: calc(50% - 200px);
    color: black;

    .login-form-body {
      align-items: center;
      display: inline-block;
      background: white;
      width: 300px;
      height: 325px;
      padding: 50px;

      .login-form-select {
        margin-bottom: 40px;

        ul {
          margin: 0;
          padding: 0;
          list-style: none;
          text-align: left;
          height: 36px;
          font-size: 18px;

          li {
            cursor: pointer;
            display: inline-block;

            &:nth-child(n+2) {
              margin-left: 15px;
            }
          }
        }
      }

      .login-type {
        font-size: 24px;
        font-weight: bold;
      }

      .login-type-base {
        transition: font-size 0.3s;
      }
    }

    .login-form-close {
      width: 54px;
      height: 54px;
      display: flex;
      justify-content: center;
      align-items: center;
      position: absolute;
      top: 0;
      right: 0;
      transition: background-color 0.3s ease;

      &:hover {
        cursor: pointer;
        background: rgba(204, 204, 204, 0.3);
      }
    }
  }

  .form-body {
    .input-username {
      border: 1px #bbbbbb solid;
      padding: 10px;
      border-radius: 10px;
      width: 278px;
      display: flex;


      img {
        justify-content: center;
        align-items: center;
      }

      input {
        margin-left: 10px;
        font-size: 14px;
        outline: none;
        border: none;
        width: 258px;
      }
    }

    .input-pass {
      width: 278px;
      border: 1px #bbbbbb solid;
      padding: 10px;
      border-radius: 10px;
      display: flex;
      font-size: 14px;

      img {
        justify-content: center;
        align-items: center;
      }

      input {
        margin-left: 10px;
        outline: none;
        border: none;
      }

      .input-pass-btn {
        /*文本禁止选取*/
        user-select: none;
        color: #1475fa;
        cursor: pointer;
      }
    }

    .input-box-focus {
      &:hover {
        border: 1px #1475fa solid;
      }

      &:focus {
        box-shadow: #1475fa 1px 1px 10px;
      }
    }

    .input-box-focus-error {
      &:hover {
        border: 1px #ff4d4f solid;
      }

      &:focus {
        box-shadow: #ff4d4f 1px 1px 10px;
      }
    }

    .input-username-tip, .input-pass-tip {
      user-select: none;
      text-align: left;
      color: #ff4d4f;
    }

    .input-btn {
      flex: auto;
      height: 42px;
      background: #207cfb;
      border-radius: 10px;
      color: white;
      text-align: center;
      vertical-align: middle;
      justify-content: center;
      line-height: 42px;
      /*文本禁止选取*/
      user-select: none;
      cursor: pointer;
    }
  }

}
</style>