<template>
  <div class="container">
    <div class="content">
      <div class="left">
        <p>面向深海地球物理调查需求，构建用户体验良好的地球物理数据目录信息平台。</p>
        <p>提供便捷安全的数据入库、统计分析和可视化检索工具，服务数据贡献者、资助机构和管理机构。</p>
      </div>

      <div class="card">
        <div class="login_img">
          <img src="@/assets/logo.png" alt="">
          <div class="cn">深海地球物理数据管理可视化平台</div>
        </div>
        <div class="form">
          <div class="input">
            <img src="@/assets/icon_user.png" alt="">
            <input v-model="loginName" type="text" placeholder="请输入用户名">
          </div>
          <div class="input">
            <img src="@/assets/icon_pwd.png" alt="">
            <input v-model="loginPass" type="password" placeholder="请输入密码" @keyup.enter="onLogin">
          </div>
        </div>
        <div class="btn">
          <el-button @click="onReset">重置</el-button>
          <el-button type="primary" @click="onLogin">登录</el-button>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { localLogin } from '@/api/data.js'
import { ref, onMounted } from 'vue'
import md5 from 'md5'
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'
import { useAuthStore } from '@/store/authStore'

const router = useRouter()
const authStore = useAuthStore()

const loginName = ref('')
const loginPass = ref('')

onMounted(() => {
  if (authStore.isLoggedIn) {
    router.push('/')
  }
})

const onReset = () => {
  loginName.value = ''
  loginPass.value = ''
}

const onLogin = () => {
  if (!loginName.value) return ElMessage('请输入用户名')
  if (!loginPass.value) return ElMessage('请输入密码')

  localLogin({
    loginName: loginName.value,
    loginPass: md5(loginPass.value)
  }).then(res => {
    if (res.success) {
      authStore.login(res.entity)
      ElMessage.success('登录成功')
      router.push('/')
    } else {
      ElMessage.error(res.message || '登录失败')
    }
  })
}
</script>
<style lang="scss" scoped>
.container {
  width: 100%;
  height: 100vh;
  background: url(@/assets/loginBg.jpg) center no-repeat;
  background-size: cover;
  display: flex;
  justify-content: center;
  align-items: center;

  .content {
    max-width: 1400px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .left {
      width: 50%;
      height: auto;
      display: flex;
      flex-direction: column;
      p {
        font-size: 26px;
        color: #fff;
        line-height: 50px;
      }
    }

    .card {
      width: 540px;
      background: #fff;
      border-radius: 10px;
      box-sizing: border-box;
      padding: 45px;
      display: flex;
      flex-direction: column;

      .login_img {
        margin-bottom: 30px;
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        img {
          width: auto;
          height: auto;
        }

        .cn {
          font-size: 28px;
          color: #000;
          font-weight: bold;
        }
      }

      .form {
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: column;
        align-items: center;

        .input {
          margin-bottom: 15px;
          width: 100%;
          height: 60px;
          border: 1px solid #eeeeee;
          border-radius: 5px;
          box-sizing: border-box;
          padding: 20px;
          display: flex;
          align-items: center;

          img {
            width: auto;
            height: auto;
            display: block;
            margin-right: 25px;
          }

          input {
            width: 90%;
            height: auto;
            border: none;
            background: none;
            outline: none;
            font-size: 16px;
            color: #666;
          }
        }
      }

      .btn {
        width: 100%;
        height: 60px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 20px;
        margin-bottom: 40px;

        .el-button {
          width: 48%;
          height: 50px;
          font-size: 18px;
        }
      }
    }
  }
}
</style>
