<template>
  <div class="login__box">
    <p class="login__box--logo">
      <img
        src="../../../src/assets/images/logo_white.png"
        alt="logo"
        width="32"
      />
      <span class="login__logo--title">数据共享平台</span>
    </p>
    <div class="login__box--containt p-40">
      <p class="login__box--title m-b-40 m-t-40">欢迎登录数据共享平台</p>
      <el-form ref="form" :model="formData" :rules="rules">
        <el-form-item class="m-b-40" prop="loginname">
          <el-input
            v-model.trim="formData.loginname"
            placeholder="手机、邮箱、用户名"
            size="large"
          ></el-input>
        </el-form-item>
        <el-form-item class="m-b-40" prop="password">
          <el-input
            v-model.trim="formData.password"
            placeholder="请输入密码"
            type="password"
            size="large"
          ></el-input>
        </el-form-item>
      </el-form>
      <el-button
        type="primary"
        class="login__box--submite"
        size="large"
        @click="handleSubmite"
        :loading="loading"
        >立即登录</el-button
      >
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import { useStore } from 'vuex'
import { useRouter } from 'vue-router'

const store = useStore()
const router = useRouter()
const form = ref()
const loading = ref(false)

const rules = reactive({
  loginname: [{ required: true, message: '必填项不能为空', trigger: 'blur' }],
  password: [{ required: true, message: '必填项不能为空', trigger: 'blur' }]
})

const formData = ref({
  loginname: '',
  password: ''
})

const handleSubmite = () => {
  form.value.validate((valid: boolean) => {
    if (valid) {
      loading.value = true
      const userInfo = {
        loginname: formData.value.loginname,
        password: formData.value.password
      }
      store.dispatch('userModule/login', userInfo).then(response => {
        const { data: res } = response
        loading.value = false
        if (res.code === 'success') {
          store.dispatch('userModule/getUserInfo')
          router.push({ path: '/resourceview/list' })
        }
      })
    }
  })
}
</script>

<style scoped lang="scss">
.login__box {
  width: 100%;
  height: 100%;
  display: flex;
  min-height: 750px;
  justify-content: center;
  align-items: center;
  background: url('@/assets/images/login-bj.png') no-repeat;
  background-size: 100% 100%;
  &--containt {
    background: $--color-white;
    border-radius: 2px;
    width: 450px;
    height: 450px;
  }
  &--title {
    font-size: 24px;
    color: #111217;
    line-height: 26px;
    font-weight: 500;
  }
  &--submite {
    width: 100%;
  }
  &--logo {
    position: fixed;
    top: 20px;
    left: 20px;
  }
}
.login__logo--title {
  font-size: 18px;
  color: $--color-white;
  font-weight: 500;
  line-height: 32px;
  margin-left: 10px;
  position: relative;
  top: 3px;
}
</style>
