<template>
  <div class="login-box">
    <el-form
        :model="loginForm"
        ref="formInstance"
        :rules="rules"
        label-width="70px"
    >
      <h2>科技创新项目管理平台</h2>
      <el-form-item prop="username" label="账号">
        <el-input v-model="loginForm.username" :prefix-icon="User"></el-input>
      </el-form-item>
      <el-form-item prop="password" label="密码">
        <el-input v-model="loginForm.password" type="password" :prefix-icon="Lock" :show-password="true"></el-input>
      </el-form-item>
      <el-form-item prop="code" label="验证码">
        <div class="code">
          <el-input v-model="loginForm.code" :prefix-icon="key"
                    @keyup.enter.native="handleLogin(formInstance)"></el-input>
          <img :src="codeImg" alt="" @click="getCode">
        </div>
      </el-form-item>
      <div class="sso">
        <a href="/api/auth/cas/login">
          <svg-icon name="sso"/>
          <span>统一身份认证</span>
        </a>
      </div>
      <el-form-item>
        <el-button @click="handleLogin(formInstance)" type="primary">登录</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup>
import {useRouter} from 'vue-router';
import {getCodeImg} from '../../api/login';
import {useAuthStore} from '@/stores/userstore'
import {ElLoading} from 'element-plus'
import {User, Lock, Key} from '@element-plus/icons-vue'

const router = useRouter()
const authStore = useAuthStore()
const loginForm = reactive({
  username: '',
  password: '',
  code: '',
  uuid: ''
})
const codeImg = ref('')
const formInstance = ref()
const rules = reactive({
  username: [
    {required: true, message: '请输入账户名', trigger: 'blur'},
  ],
  password: [
    {required: true, message: '请输入密码', trigger: 'blur'},
  ],
  code: [
    {required: true, message: '请输入验证码', trigger: 'blur'},
  ]
})

//获取二维码
const getCode = () => {
  getCodeImg().then(res => {
    loginForm.uuid = res.data.uuid
    codeImg.value = 'data:image/gif;base64,' + res.data.img
  })
}

const handleLogin = (instance) => {
  if (!instance) return
  instance.validate(async (valid, fields) => {
    if (!valid) return
    // 发送请求
    await authStore.userLogin(loginForm).then(res => {
      if (res) {
        ElLoading.service({
          lock: true,
          text: '登录中...',
          background: 'rgba(0, 0, 0, 0.7)',
        })
        router.push('/')
      } else {
        getCode()
      }
    })
  })
}

getCode()

onBeforeUnmount(() => {
  ElLoading.service({
    lock: true,
    text: '登录中...',
    background: 'rgba(0, 0, 0, 0.7)',
  }).close()
})
</script>

<style lang="scss" scoped>
.login-box {
  height: 100%;
  background-color: #F3F3F3;
  //background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);
  display: flex;
  justify-content: center;
  align-items: center;

  .sso {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: -5px;
    margin-bottom: 10px;

    a {
      font-size: 16px;
      color: #BEA266;

      &:hover {
        text-decoration: underline;
      }
    }
  }

  .el-form {
    padding: 12px 15px;
    border-radius: 12px;
    width: 560px;
    background-color: #fff;

    .el-form-item {
      margin-bottom: 25px;

      :deep(.el-form-item__label) {
        font-size: 15px;
      }

      .el-input {
        height: 40px;

        :deep(.el-input__inner) {
          font-size: 18px;
        }

        :deep(.el-input__suffix) {
          .el-input__password {
            font-size: 20px;
          }
        }

        :deep(.el-input__prefix ) {
          .el-input__prefix-inner {
            .el-icon {
              font-size: 20px;
            }
          }
        }
      }

    }

    h2 {
      width: 100%;
      text-align: center;
      margin-bottom: 25px;
    }

    .el-button {
      width: 100%;
      background-color: #BEA266;
      border-color: #BEA266;
      font-size: 17px;
    }
  }
}

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

  .el-input {
    // width: ;
    flex: 2;
  }

  img {
    height: 40px;
    flex: 1;
  }
}
</style>
