<style lang="less" scoped>
@import './login.less';
</style>

<template>
  <div class="login">
    <div class="title-box">
      <h1>{{title}}</h1>
    </div>

    <div class="login-con">
      <Card icon="log-in" title="欢迎登录" style="width:350px;height:260px;" :bordered="false">
        <div class="form-con">
          <login-form @on-success-valid="handleSubmit"></login-form>
        </div>
      </Card>
    </div>

    <div class="bottom-box">
      <span>Copyright ©2019 </span>|

      <span>推荐浏览器（360极速浏览器、谷歌浏览器、Edge for win10） </span>
    </div>
  </div>
</template>

<script>
import config from '@/config'
import LoginForm from '@component/login-form'
import Main from '@component/main'
import ParentView from '@component/parent-view'
import Page404 from '@/views/error-page/404.vue'
import { mapActions } from 'vuex'

export default {
  data() {
    return {
      title: config.title,
    }
  },
  components: {
    LoginForm,
  },
  methods: {
    ...mapActions('user', ['handleLogin']),
    async handleSubmit({ userName, password }) {
      try {
        let userFrom = {
          name: userName,
          password: password
        }
        await this.handleLogin({
          userFrom,
          Main,
          ParentView,
          Page404
        })

        this.$Message.success('登录成功！')

        // 跳转到首页
        // 使用 replace 避免返回时回到登录页
        setTimeout(() => {
          // 跳转到根路径，会自动 redirect 到第一个菜单
          this.$router.replace({ path: '/' }).catch(() => {
            // 如果路由跳转失败，刷新页面
            window.location.href = window.location.origin + window.location.pathname + '#/'
          })
        }, 500)
      } catch (error) {
        console.error('登录失败:', error)
        // 处理不同类型的错误
        let errorMsg = '登录失败，请检查用户名和密码'

        if (error) {
          if (typeof error === 'string') {
            errorMsg = error
          } else if (error.message) {
            errorMsg = error.message
          } else if (error.data && error.data.message) {
            errorMsg = error.data.message
          }
        }

        this.$Message.error(errorMsg)
      }
    },
  },
}
</script>

<style  scoped>
.title-box {
  position: absolute;

  top: 0px;
  left: 15px;
  width: 440px;
  text-align: center;
  height: 55px;
  line-height: 55px;
  display: inline-block;
}

.title-box h1 {
  font-size: 28px;
  font-weight: bold;
  color: #fff;
  font-family: '黑体';
}

.bottom-box {
  position: absolute;
  bottom: 20px;
  color: #fff;
  text-align: center;
  width: 100%;
}

.bottom-box span {
  margin: 0 10px;
}
</style>
