<template>
  <div class="login-root">
    <div class="form" data-title="大屏登录">
      <el-input :prefix-icon="User" size="large" autocomplete="off" autofocus v-model="form.username" />
      <el-input :prefix-icon="Key" size="large" show-password autocomplete="off" type="password" v-model="form.password" />
      <el-button size="large" @click="login">登录</el-button>
    </div>
  </div>
</template>
<script setup>
import { onMounted, ref, getCurrentInstance } from 'vue';
import { User,Key } from '@element-plus/icons-vue'
import { useAuthStore } from '@/store';
import { doLogin } from '@/api'
import { jsencrypt } from '@/util'
import { ElMessage } from 'element-plus';

const store = useAuthStore();
const { proxy } = getCurrentInstance();

const form = ref({ username: '', password: '' });

const login = async () => {
  if (!/^\w{2,}$/.test(form.value.username)) {
    proxy.$message.error("请输入大屏账号");
    return;
  }
  let r = await doLogin(form.value.username, jsencrypt.encrypt(form.value.password));
  if (r.code == 200) {
    store.setToken(r.data);
    store.user.username = form.value.username;
    store.user.password = jsencrypt.encrypt(form.value.password);
    ElMessage.success("登录成功")
    proxy.$router.push({ path: proxy.$route.query.to?decodeURIComponent(proxy.$route.query.to):'/index' });
  }
}

onMounted(async () => {

});

</script>
<style lang="scss" scoped>
.login-root {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;

  .form {
    width: 25rem;
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    box-shadow: 0 0 1rem .2rem var(--w-bg-dark-3), 0 0 4rem var(--w-bg-dark-1) inset;
    backdrop-filter: blur(.3rem);
    border-radius: .3rem;
    padding: 1rem 2rem 3rem;
    position: relative;
    margin-top: -10rem;
    
    &[data-title]::before {
      content: attr(data-title);
      position: relative;
      line-height: 2;
      color: var(--w-main);
      text-align: center;
      font-size: 1.8rem;
      letter-spacing: .5em;
    }
  }
}
</style>