<template>
  <div class="login-container">
    <div class="svg-top">
      <svg height="1337" width="1337">
        <defs>
          <path id="path-1" opacity="1" fill-rule="evenodd"
            d="M1337,668.5 C1337,1037.455193874239 1037.455193874239,1337 668.5,1337 C523.6725684305388,1337 337,1236 370.50000000000006,1094 C434.03835568300906,824.6732385973953 6.906089672974592e-14,892.6277623047779 0,668.5000000000001 C0,299.5448061257611 299.5448061257609,1.1368683772161603e-13 668.4999999999999,0 C1037.455193874239,0 1337,299.544806125761 1337,668.5Z">
          </path>
          <linearGradient id="linearGradient-2" x1="0.79" y1="0.62" x2="0.21" y2="0.86">
            <stop offset="0" stop-color="var(--el-color-primary-light-5)" stop-opacity="1"></stop>
            <stop offset="1" stop-color="var(--el-color-primary)" stop-opacity="1"></stop>
          </linearGradient>
        </defs>
        <g opacity="1">
          <use xlink:href="#path-1" fill="url(#linearGradient-2)" fill-opacity="1"></use>
        </g>
      </svg>
    </div>
    <div class="svg-bottom">
      <svg height="896" width="967.8852157128662">
        <defs>
          <path id="path-2" opacity="1" fill-rule="evenodd"
            d="M896,448 C1142.6325445712241,465.5747656464056 695.2579309733121,896 448,896 C200.74206902668806,896 5.684341886080802e-14,695.2579309733121 0,448.0000000000001 C0,200.74206902668806 200.74206902668791,5.684341886080802e-14 447.99999999999994,0 C695.2579309733121,0 475,418 896,448Z">
          </path>
          <linearGradient id="linearGradient-3" x1="0.5" y1="0" x2="0.5" y2="1">
            <stop offset="0" stop-color="var(--el-color-primary)" stop-opacity="1"></stop>
            <stop offset="1" stop-color="var(--el-color-primary-light-9)" stop-opacity="1"></stop>
          </linearGradient>
        </defs>
        <g opacity="1">
          <use xlink:href="#path-2" fill="url(#linearGradient-3)" fill-opacity="1"></use>
        </g>
      </svg>
    </div>
    <div class="login-box">
      <el-row :gutter="10">
        <el-col :span="12">
          <img class="login-left" src="@/assets/images/login_left.png">
        </el-col>
        <el-col :span="12">
          <div class="row-login">
            <div class="login-form">
              <h2>小程序聊天管理 登录</h2>
              <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="0">
                <el-form-item label="" prop="username" style="margin-bottom: 30px;">
                  <el-input v-model="ruleForm.username" placeholder="用户名" prefix-icon="User" size="large" />
                </el-form-item>
                <el-form-item label="" prop="password">
                  <el-input type="password" v-model="ruleForm.password" placeholder="密码" show-password
                    prefix-icon="Lock" size="large" />
                </el-form-item>
              </el-form>
              <el-checkbox v-model="checked" label="记住密码" size="large" style="margin-bottom: 10px;" />
              <el-button type="primary" @click="login" size="large" :class="{ 'login-btn': isLoginIng }"> <el-icon>
                  <Loading />
                </el-icon> 登 录 </el-button>
            </div>
          </div>
        </el-col>
      </el-row>

    </div>

  </div>
</template>
<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue'
import { userLogin } from '@/api/login'
import md5 from 'js-md5'
import { SET_TOKEN } from '@/utils/token'
import { useRouter } from 'vue-router'
const router = useRouter()
const ruleFormRef = ref()
const ruleForm = ref({
  username: '',
  password: ''
})
const checked = ref(true)
const isLoginIng = ref(false)
const rules = ref({
  username: [
    {
      required: true,
      message: '请输入用户名',
      trigger: 'change',
    }
  ],
  password: [
    {
      required: true,
      message: '请输入用密码',
      trigger: 'change',
    }
  ]
})
const handleKeyUp = (event) => {
  if (event.key === 'Enter') {
    if (ruleForm.value.username && ruleForm.value.password) {
      login()
    }
  }
}
const login = async () => {
  await ruleFormRef.value.validate(async (valid, fields) => {
    if (valid) {
      isLoginIng.value = true
      try {
        const res = await userLogin({
          username: ruleForm.value.username,
          password: md5(ruleForm.value.password)
        })
        isLoginIng.value = false
        SET_TOKEN(res.token)
        localStorage.is_super = res.is_super
        router.push('/miniProgram')
        if (checked.value) {
          localStorage.account = JSON.stringify(ruleForm.value)
        } else {
          localStorage.account = ''
        }
      } catch (error) {
        isLoginIng.value = false
      }
    } else {
    }
  })

}
onMounted(() => {
  if (checked.value && localStorage.account) {
    ruleForm.value = JSON.parse(localStorage.account)
  }

  document.addEventListener('keyup', handleKeyUp);
})
onBeforeUnmount(() => {
  document.removeEventListener('keyup', handleKeyUp);
})
</script>

<style lang="scss" scoped>
.login-container {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  overflow: hidden;
  background-color: var(--el-primary-light-7);

  .svg-top {
    position: absolute;
    right: -300px;
    top: -900px;
    z-index: 0;
  }

  .svg-bottom {
    position: absolute;
    left: -200px;
    bottom: -400px;
    z-index: 0;
  }

  .login-box {
    position: relative;
    width: 1000px;
    height: 600px;
    box-shadow: var(--el-box-shadow);
    z-index: 1;
    background-color: var(--el-bg-color);
  }

  .row-login {
    height: 600px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
  }

  .login-left {
    position: relative;
    left: 40px;
    top: 50%;
    transform: translateY(-50%);
  }

  .login-form {
    width: 300px;
    // padding: 40px 35px;


    h2 {
      font-size: 28px;
      text-align: center;
      margin-bottom: 40px;
      line-height: 40px;

      img {
        height: 40px;
        margin-right: 5px;
        vertical-align: middle;
      }
    }

    :deep(.el-input__prefix-inner) {
      color: var(--el-color-primary);
    }

    .el-button {
      width: 100%;

      .el-icon {
        display: none;
        margin-right: 7px;
      }
    }

    .login-btn {
      pointer-events: none;

      .el-icon {
        display: inline;
        font-size: 17px;
        transform: rotate(45deg);
        animation: spin 2s linear infinite;
      }
    }
  }
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}
</style>