<template>
  <div class="login-container">
    <div class="form-container">
      <h1>牧云项目管理</h1>
      <form>
        <span class="input">
          <input
            v-model="userInfo.username"
            type="text"
            placeholder="请输入账号"
            @keyup.enter="handleSubmit"
          />
        </span>
        <input
          v-model="userInfo.password"
          type="password"
          placeholder="请输入密码"
          @keyup.enter="handleSubmit"
        />
        <a-row style="width: 100%; margin: 2rem 0">
          <a-col flex="180px" styke>
            <input
              v-model="userInfo.vcode"
              type="text"
              placeholder="请输入验证码"
              clas="vcode"
              style="margin: 0"
              @keyup.enter="handleSubmit"
            />
          </a-col>
          <a-col flex="auto" style="">
            <a-image
              :src="iData.pic"
              :preview="false"
              style="width: 100%; text-align: center; cursor: pointer"
              alt="点击再次获取"
              @click="getVcode"
            >
              <template #error>
                <div class="image-slot" style="width: 100%">验证码获取失败</div>
              </template>
            </a-image>
          </a-col>
        </a-row>

        <a-button class="button" @click="handleSubmit">登录</a-button>
      </form>
      <div class="register-forget">
        <a href="">记住密码</a>
        <a href="">忘记密码</a>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted } from 'vue'
import { LocationQueryValue, useRouter } from 'vue-router'
import { Message } from '@arco-design/web-vue'
import { useStorage } from '@vueuse/core'
import { useUserStore } from '@/store'
import { doLogin, getImageVcode } from '@/api/client'
import { ImageVodeResParams, LoginResParams } from '@/types/client'
import { Md5 } from 'ts-md5'
import { DEFAULT_ROUTE } from '@/router/routes'

const router = useRouter()
const errorMessage = ref('')

const userStore = useUserStore()

const loginConfig = useStorage('login-config', {
  rememberPassword: true,
  username: '',
  password: '',
  vcode: ''
})
const userInfo = reactive({
  vcode: loginConfig.value.vcode,
  username: loginConfig.value.username,
  password: loginConfig.value.password
})

const iData = reactive({
  session: '',
  pic: ''
})

/**
 * 获取图形验证码
 */
const getVcode = async () => {
  const { session, pic }: ImageVodeResParams = await getImageVcode()
  iData.pic = pic
  iData.session = session
}

const handleSubmit = async () => {
  try {
    const { username: userId, password, vcode } = userInfo
    const md5Pwd: any = Md5.hashStr(password) // 密码按照md5加密传输
    const { token, username: name }: LoginResParams = await doLogin(
      userId,
      md5Pwd,
      iData.session,
      vcode
    )
    const { redirect } = router.currentRoute.value.query
    userStore.setToken(token)
    userStore.setUserInfo({
      username: name,
      userId
    })
    router.push((redirect as LocationQueryValue) || DEFAULT_ROUTE.fullPath)
    Message.success('登录成功')
    const { rememberPassword } = loginConfig.value

    // 实际生产环境需要进行加密存储。
    // The actual production environment requires encrypted storage.
    loginConfig.value.username = rememberPassword ? userId : ''
    loginConfig.value.password = rememberPassword ? password : ''
  } catch (err) {
    errorMessage.value = (err as Error).message
    getVcode().then(() => console.log('获取图形验证码'))
  }
}
// const setRememberPassword = (value: boolean) => {
//   loginConfig.value.rememberPassword = value
// }

onMounted(() => {
  getVcode().then(() => console.log('获取图形验证码'))
})
</script>

<style lang="less" scoped>
a {
  text-decoration: none;
  font-size: 18px;
  // color: #ffffff;
}

h1 {
  padding-bottom: 1rem;
  font-size: 2.5rem;
  background: -webkit-linear-gradient(left, #0093e9, #80d0c7);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-align: center;
}

.login-container {
  position: relative;
  width: 30rem;
}
.form-container {
  border: 1px solid hsla(0, 0%, 65%, 0.158);
  box-shadow: 0 0 36px 1px rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  backdrop-filter: blur(20px);
  z-index: 99;
  padding: 32px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
}

.login-container form .input-prefix {
  // position: absolute;
  width: 20px;
  height: 20px;
  // top: 20px;
  // left: 10px;
  //   z-index: 999;
  // flex-shrink: 0;
  // align-items: center;
  // white-space: nowrap;
  // user-select: none;
  // padding-right: 12px;
}

// .login-container form .username::before {
//   content: '';
//   position: absolute;
//   background: url(https://v.bootstrapmb.com/2019/9/j01m16107/images/cart.png);
//   width: 20px;
//   height: 20px;
//   top: 20px;
//   left: 10px;
//   z-index: 999;
// }
// .login-container form .input {
// }

.login-container form input {
  display: block;
  // padding: 18.5px 20px 18.5px 45px;
  padding: 16.5px;
  width: 100%;
  margin: 2rem 0;
  color: #000;
  outline: none;
  background-color: #ffffff80;
  border: none;
  border-radius: 5px;
  font-weight: 500;
  letter-spacing: 0.8px;
  font-size: 18px;
  backdrop-filter: blur(15px);
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
}

.login-container form input:focus {
  box-shadow: 0 0 16px 1px rgba(0, 0, 0, 0.2);
  animation: wobble 0.3s ease-in;
  color: #000;
  -webkit-animation: wobble 0.3s ease-in;
  background-color: #fff;
}

.login-container form .button {
  background-color: #0f3460;
  color: #ffffff;
  display: block;
  // padding: 15px;
  height: 55.7px;
  border-radius: 5px;
  outline: none;
  font-size: 18px;
  letter-spacing: 1.5px;
  font-weight: bold;
  width: 100%;
  cursor: pointer;
  margin-bottom: 3rem;
  transition: all 0.1s ease-in-out;
  border: none;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  -webkit-transition: all 0.1s ease-in-out;
  -moz-transition: all 0.1s ease-in-out;
  -ms-transition: all 0.1s ease-in-out;
  -o-transition: all 0.1s ease-in-out;
}

.login-container form .button:hover {
  box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.15);
  transform: scale(1.02);
  -webkit-transform: scale(1.02);
  -moz-transform: scale(1.02);
  -ms-transform: scale(1.02);
  -o-transform: scale(1.02);
}

.register-forget {
  margin: 1rem 0;
  display: flex;
  justify-content: space-between;
}
.opacity {
  opacity: 0.6;
}

@keyframes wobble {
  0% {
    transform: scale(1.025);
    -webkit-transform: scale(1.025);
    -moz-transform: scale(1.025);
    -ms-transform: scale(1.025);
    -o-transform: scale(1.025);
  }
  25% {
    transform: scale(1);
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
  }
  75% {
    transform: scale(1.025);
    -webkit-transform: scale(1.025);
    -moz-transform: scale(1.025);
    -ms-transform: scale(1.025);
    -o-transform: scale(1.025);
  }
  100% {
    transform: scale(1);
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
  }
}
</style>
