<route>
{
  meta: {
    ignoreRouterCheck: true,
    ignoreLoginCheck: true
  }
}
</route>

<style src="~/styles/login/index.scss"></style>
<template>
  <div class="login-container">
    <div class="login-background">
      <!-- 登录页背景图替换 -->
      <!-- <img src="/images/login-background.jpg" alt=""> -->
    </div>
    <div class="login-big-box">
      <div class="login-left-box">
        <!-- 登录页左图替换 -->
        <img src="/images/login-left.png" alt="">
      </div>
      <div class="login-middle-line"></div>
      <div class="login-right-box">
        <form action="" autocomplete="off">
          <div class="login-head-box">
            <!-- 登录页Logo替换 -->
            <img src="/images/logo_login.png" alt="">
            <!-- <span>AERWEN</span> -->
          </div>
          <div class="login-right-title-box">
            <!-- 登录页文字替换 -->
            官方网站模板后台管理平台
            <div class="login-right-title-bottom"></div>
          </div>
          <div class="login-right-form-control-box">
            <div class="login-right-form-control-item js-input">
              <input type="text" autocomplete="off" name="account" class="login-form-input-control " @focus="formControlAnimation('inputFocus',$event)" @blur="formControlAnimation('inputBlur',$event)" placeholder="请输入账号">
              <div class="account-msg msg op0"></div>
              <img src="/images/login-user-icon.png" class="login-form-icon"  alt="">
            </div>
            <div class="login-right-form-control-item js-input">
              <input type="password" autocomplete="new-password" name="password" class="login-form-input-control " @focus="formControlAnimation('inputFocus',$event)" @blur="formControlAnimation('inputBlur',$event)" placeholder="请输入密码">
              <div class="password-msg msg op0"></div>
              <img src="/images/login-password-icon.png" class="login-form-icon"  alt="">
            </div>
            <div class="login-right-form-control-item js-input">
              <div class="login-right-captcha-box">
                <div class="login-right-captcha-input-box">
                  <input type="text"  name="captcha" class=" captcha-input " placeholder="请输入验证码">
                  <div class="captcha-msg msg op0"></div>
                  <img src="/images/login-captcha-icon.png" class="login-form-icon"  alt="">
                </div>
                <img :src="`${getCaptcha}?v=${time}`" class="captcha-img" @click="reloadCaptcha" alt="">
              </div>
            </div>
            <div class="login-right-form-control-item js-input">
              <a class="login-right-form-control-button js-login-btn" href="#"  @click="formSubmit()">
                <span class="" >登录</span>
              </a>
            </div>
          </div>
          <div class="login-right-copyright-box">
            <!-- 登录页版权文字替换 -->
            ©版权归xxx公司所有
          </div>
        </form>
      </div>
    </div>
  </div>

</template>
<script lang="ts" setup>
import {onMounted, reactive, ref, watch} from 'vue';
import { useRouter } from 'vue-router';
import { useLoginStore } from '~/store';
import { Lock, User } from '@element-plus/icons-vue';
import { getCaptcha } from '~/service/login';

const time = ref();
const login = useLoginStore();
const date = new Date();

const submitForm = formEl => {
  // await login.accountLogin(ruleForm);
};

const resetForm = formEl => {
  if (!formEl) return;
  formEl.resetFields();
};

const reloadCaptcha = () => {
  time.value = new Date().getTime();
};

reloadCaptcha();

window.onkeydown=function(e){
  if(e.code === 'Enter'){
    formSubmit()
  }
}

/**按钮提交事件*/
async function formSubmit(){
  
  let oBtn = document.getElementsByClassName('js-login-btn')[0]
  let oBtnSpan = oBtn.getElementsByTagName('span')[0]

  
  let verifyPass = false
  for (let rKey in regPool) {
    verifyPass = verify(msg?.[rKey]?.value || '',rKey,regPool,msg).pass
  }
  if(verifyPass){
          
    oBtnSpan.innerText='登录中...'
    oBtn.style.setProperty("pointer-events", "none")
    login.accountLogin({
      account:msg['account'].value?.trim(),
      password:msg['password'].value?.trim(),
      captcha:msg['captcha'].value?.trim()
    }).catch(res=>{
      oBtnSpan.innerText='登录'
    oBtn.style.setProperty("pointer-events", "auto")
      
    })
  }else{
  }
}

/**消息容器*/
const msg = reactive({})

/**验证器*/
const regPool = {
  account:{
    r:/^(?![\s!@#])[^!@#]*(?![\s!@#]).$/,
    m:'用户名不能有空'
  },
  password:{
    r:/^(?![\s!@#])[^!@#]*(?![\s!@#]).$/,
    m:'密码不能有空'
  },
  captcha:{
    done: function (ctx,item){
      if(!/^(?![\s!@#])[^!@#]*(?![\s!@#]).$/.test(item.value)){
        return '验证码不能有空'
      }else{
        return true
      }
    }
  }
}

/**输入框输入事件公用逻辑，内置函数防抖*/
function inputEvent(){
  let timer
  return function (name) {
    this.value = this.value.trim()
    if (timer!==null){
      clearTimeout(timer)
    }
    timer = setTimeout(() => {
      verify(this.value, name, regPool, msg)
    }, 500)
  }
}
/**监听验证器*/
watch(msg,(n,o)=>{
  for (const key in n) {
    dispatchMsg(n[key].msg,key+'-msg',function (tag,txt){
      txt !=='' ? tag.classList.remove('op0') : tag.classList.add('op0')
    })
  }
},{deep:true})


/**绑定输入框输入事件*/
onMounted(()=>{
  [].map.call(document.querySelectorAll('.js-input input'),function (item,idx){
    item.addEventListener('input',inputEvent().bind(item,item.getAttribute('name'),false))
  })
})

/**
 *
 * @param type
 * @param e
 * @author hyw
 * 表单控件的动画效果
 */
const formControlAnimation = (type,e)=>{
  let oInput = e.target,
      oImg = document.getElementsByClassName('login-form-icon')[[...document.getElementsByClassName('login-form-input-control')].indexOf(e.target)]
  new Promise((s,j)=>{
    const animationType = {
      'inputFocus':()=>{
        oImg.classList.add('t5s')
        s('inputFocus')
      },
      'inputBlur':()=>{
        oImg.classList.remove('t5s')
        s('inputBlur')
      }
    }
    animationType[type]()
  }).then(cn=>{
    cn==='inputFocus' ? oInput.classList.add('inputFocus') : oInput.classList.remove('inputFocus')
  })
}

/**
 *
 * @param txt 消息文本
 * @param tag *要派发的容器，可以是样式名也可以是dom节点
 * @param cb 回调 参数1为派发的容器，参数2为文本
 * @author hyw
 * @description 将消息派发到dom上，配合验证器一起食用，将txt派发到tag容器里,只能用于事件处理函数中
 */
function dispatchMsg(txt, tag, cb=undefined) {
  txt = txt===true ? '' : txt
  let dom =
      typeof tag === 'string' ? document.getElementsByClassName(tag)[0] : tag;
  dom !== undefined &&
  (() => {
    if (txt !== dom.innerText) {
      dom.innerText = txt;
    }
  })();
  cb && cb(tag !== 'string' ? document.getElementsByClassName(tag)[0] : tag,txt)
}

/**
 *
 * @param v 对应的输入框值
 * @param t 对应的name
 * @param regPool 规则集，要与输入框name对应上
 * @param msg 结果容器,通过验证则对应的msg为true否则则为false
 * @description 验证器v4.0
 * @module if-else策略优化模式
 * @author hyw
 * @return verifyObj
 * @regPoolDescription 规则集文档：
 * r：规则，一般传入正则，当传入一个对象时，里面必须包含test方法，其内容将作为参数传入
 * m：消息，当不符合规则，则消息派发
 * c：是否为可选，默认false
 * done：回调函数，msg上下文将作为第一个参数注册，item将作为第二个参数传入，返回值将作为msg，且r跟m将失效，done可以为async
 * @regPoolExample 实例：
 * {
 *  curriculum_activity_name: {
 *    r: /^\S+$/,
 *    m: '活动名称不能为空捏或首尾不能有空格！'
 *  },
 *  curriculum_activity_price: {
 *    r: /^\+?((0|([0-9]+\d*))|((0\.\d+)|([1-9]+\d*\.\d+)))$/,
 *    m: '价格不能为负数',
 *    c: true
 *  },
 * }
 */
function verify(v, t, regPool, msg) {
  regPool[t] !== undefined
      ? (async () => {
        msg[t] = {};
        msg[t].value = v;
        let is = regPool[t]?.r ? regPool[t].r.test(v) : true;
        if (is) {
          msg[t].msg = true;
        } else {
          msg[t].msg = true;
          msg[t].msg = regPool[t].m;
          if (regPool[t]?.c) {
            //nice try 包装类
            msg[t].value === '' ? (msg[t].msg = true) : regPool[t].m;
            msg[t].msg = new String(msg[t].msg);
            msg[t].msg.type = '可选';
          }
        }
        if (regPool[t]?.done && regPool[t]?.c) {
          msg[t].msg = regPool[t]?.done instanceof Promise ? new String(await regPool[t]?.done(msg, msg[t])) : new String(regPool[t]?.done(msg, msg[t]));
          msg[t].msg.type = '可选';
        } else if (regPool[t]?.done && !regPool[t]?.c) {
          msg[t].msg = regPool[t]?.done instanceof Promise ?  regPool[t]?.done(msg, msg[t]) : regPool[t]?.done(msg, msg[t]);
        }
        msg[t].msg===undefined && (msg[t].msg = false)
      })()
      : (msg[t].msg = true)
  let inputNum = 0,
      inputPassNum = 0
  for (let key in regPool) {
    inputNum +=1
    if((key in msg) && msg[key].msg === true){
      inputPassNum +=1
    }
  }
  // console.log(inputNum,inputPassNum)
  return {
    pass:inputNum === inputPassNum
  }
}

</script>
<style>
.login-background{
  background-image: linear-gradient(to top,  #109dea,90%,rgba(255, 255, 255, 0.5) 160%);
}

.login-right-title-bottom{
  background-color: #A72027 !important;
}

</style>