<template>
  <div class="login">
    <div class="login-card">
      <div class="login-card-l">
        <el-image style="width: 100%; height: 100%" :src="loginBg" />
      </div>
      <div class="login-card-r">
        <b>欢迎登录</b>
        <LoginForm ref="passwordRef" style="width: 100%" @keyup.enter="toLogin" />
        <el-button type="primary" style="width: 100%; padding: 16px" @click="toLogin">登录</el-button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { removeStore } from '@/utils/storage'
import LoginForm from './LoginForm.vue'

const passwordRef = ref<InstanceType<typeof LoginForm> | null>(null)

function toLogin() {
  passwordRef.value?.toLogin()
}

function clearLocalStorage() {
  removeStore('multipleTag')
  removeStore('userInfo')
  removeStore('accessToken')
  removeStore('permissions')
  removeStore('expireTime')
}

onMounted(() => {
  clearLocalStorage()
})

// Use a data URL placeholder since we don't have the actual image
const loginBg = 'data:image/svg+xml,' + encodeURIComponent(
  '<svg xmlns="http://www.w3.org/2000/svg" width="730" height="600" viewBox="0 0 730 600">' +
  '<rect width="730" height="600" fill="#e8f1fe"/><text x="365" y="300" text-anchor="middle" ' +
  'font-size="20" fill="#4c84ff">许愿树管理平台</text></svg>'
)
</script>

<style scoped lang="less">
.login {
  background: #3274f6;
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;

  &-card {
    background: #fff;
    width: 1180px;
    height: 600px;
    display: flex;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 0 24px #0d3ea18b;

    &-l {
      width: 730px;
    }

    &-r {
      border-left: 1px solid #eee;
      width: 450px;
      box-sizing: border-box;
      padding: 80px 65px;

      b {
        width: 100%;
        text-align: center;
        display: block;
        padding-bottom: 90px;
        font-size: 24px;
      }
    }
  }
}
</style>
