<template>
  <div class="login-box">
    <div class="login-form">
      <h3 class="title">登 录</h3>
      <el-form size="medium" :model="formData" :rules="rules" :ref="el => formRef = el" @keyup.enter="submit">
        <el-form-item prop="userName">
          <el-input
            v-model="formData.userName"
            placeholder="登录名"
            prefix-icon="el-icon-user"
          />
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            v-model="formData.password"
            :type="passwordType"
            placeholder="密码"
            prefix-icon="el-icon-lock"
          >
          <template #suffix>
            <i class="fa fa-eye" @click="trigPasswordShow">&nbsp;</i>
          </template>
          </el-input>
        </el-form-item>
      </el-form>
      <el-form-item>
        <div class="submit-area">
          <el-button type="primary" @click="submit">登录</el-button>
        </div>
      </el-form-item>
    </div>
  </div>
</template>

<script>
import { computed, reactive, ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import md5 from 'md5'
import store from '@/store'

const { useModel } = store

export default {
  setup(props) {
    const showPassword = ref(false)
    const formRef = ref()
    const formData = reactive({ loginType: 'account', userName: undefined, password: undefined  })
    const rules = {
      userName: [
        { required: true, message: '请输入用户名', trigger: 'blur' }
      ],
      password: [
        { required: true, message: '请输入密码', trigger: 'blur' }
      ]
    }

    const trigPasswordShow = () => showPassword.value = !showPassword.value

    const passwordType = computed(() => !showPassword.value ? 'password' : 'text')

    const { login } = useModel('user')

    const route = useRoute()
    const router = useRouter()

    const submit = () => {
      formRef.value.validate((valid) => {
        if (valid) {
          login({
              ...formData,
              password: md5(formData.password)
          }).then(res => {
            const redirect = route.query.from ? decodeURIComponent(route.query.from) : '/'
            router.replace(redirect)
          })
        }
      })
    }

    return {
      formData,
      rules,
      passwordType,
      trigPasswordShow,
      formRef,
      submit,
    }
  }
}
</script>

<style lang="less" scoped>
.login-box {
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  background: url('../../assets/background-3.jpg') no-repeat;
  background-size: cover;

  .login-form {
    width: 360px;
    padding: 4em;
    background: rgba(255, 255, 255, .9);
    border: 1px solid rgba(0,0,0, .24);
    border-radius: 2px;

    .title {
      text-align: center;
      font-size: 1.6em;
      font-weight: 500;
      margin-bottom: 2em;
      color: rgba(0,0,0, .8)
    }

    .submit-area {
      display: flex;
      justify-content: center;
    }
  }
}
</style>
