<template>
  <div class="container">
    <div class="box">
      <img src="../../assets/images/logo2.jpg" alt="" class="logoImg">
      <h1>{{ systemTitle }}</h1>
      <el-form class="form">
        <el-input size="large" v-model="form.userName"  placeholder="用户名" type="text" maxlength="50">
          <template #prepend>
            <el-icon  size="20"><User /></el-icon>
          </template>
        </el-input>

        <el-input size="large" ref="password"  @keyup.enter="submit" v-model="form.password" :type="passwordType" placeholder="密码" name="password" maxlength="50">
          <template #prepend>
            <el-icon size="20"><Lock /></el-icon>
          </template>
          <template #append>
            <el-icon size="20" @click="passwordTypeChange">
              <Hide v-if="passwordType" />
              <View v-else />
            </el-icon>
          </template>
        </el-input>
        
        <el-button type="primary" @click="submit" style="width: 100%;" size="large">登录</el-button>
      </el-form>
    </div>
  </div>
</template>

<script>
import { systemTitle } from '@/config'
import { defineComponent, ref, reactive } from 'vue'
import { useStore } from 'vuex'
import { useRouter, useRoute } from 'vue-router'
import { ElMessage } from 'element-plus'
export default defineComponent({
  setup() {
    const store = useStore()
    const router = useRouter()
    const route = useRoute()
    const form = reactive({
      userName: '',
      password: ''
    })
    const passwordType = ref('password')
    const passwordTypeChange = () => {
      passwordType.value === '' ? passwordType.value = 'password' : passwordType.value = ''
    }
    const checkForm = () => {
      return new Promise((resolve, reject) => {
        if (form.userName === '') {
          ElMessage.warning({
            message: '用户名不能为空',
            type: 'warning'
          });
          return;
        }
        if (form.password === '') {
          ElMessage.warning({
            message: '密码不能为空',
            type: 'warning'
          })
          return;
        }
        resolve(true)
      })
    }
    const submit = () => {
      checkForm().then(() => {
        store.dispatch('user/getUserToken', form).then((res) => {
          if(store.state.user.isGetToken){
            ElMessage.success({
              message: store.state.user.loginMessage,
              type: 'success',
              showClose: true,
              duration: 1000
            })
            store.dispatch('user/getUserInfo') //获取登录用户信息
            router.push(route.query.redirect || '/')
          }else{
            ElMessage.error({
              message: store.state.user.loginMessage,
              type: 'error',
              showClose: true,
              duration: 1000
            })
          }
        })

      })
    }
    return {
      systemTitle,
      form,
      passwordType,
      passwordTypeChange,
      submit
    }
  }
})
</script>

<style lang="scss" scoped>
  .container {
    position: relative;
    width: 100vw;
    height: 100vh;
    background-color: #eef0f3;
    .box {
      width: 500px;
      position: absolute;
      left: 50%;
      top: 50%;
      background: white;
      border-radius: 8px;
      transform: translate(-50%, -50%);
      height: 440px;
      overflow: hidden;
      box-shadow: 0 6px 20px 5px rgba(152, 152, 152, 0.1), 0 16px 24px 2px rgba(117, 117, 117, 0.14);
      h1 {
        margin-top: 20px;
        text-align: center;
      }
      .logoImg{margin-top: 15px;margin-left: 15px;}
      .form {
        width: 80%;
        margin: 40px auto 20px;
        .el-input {
          margin-bottom: 20px;
        }
        .password-icon {
          cursor: pointer;
          color: #409EFF;
        }
      }
      .fixed-top-right {
        position: absolute;
        top: 10px;
        right: 10px;
      }
    }
  }
  @media screen and ( max-width: 750px ) {
    .container .box {
      width: 100vw;
      height: 100vh;
      box-shadow: none;
      left: 0;
      top: 0;
      transform: none;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      h1 {
        margin-top: 0;
      }
      .form {
        
      }
    }
  }
</style>