<script setup lang="ts">
// import md5 from 'md5'
import type { FormInstance, FormRules } from 'element-plus'
import Crypto from "@/utils/crypto";
import bar from '~/assets/img/login/bar.webp'
import { user } from '~/store/index'
import type { User } from '~/store/user/index'
const router = useRouter()
const route = useRoute()
console.log('route :>> ', route)
interface IForm {
  user_name: string
  user_password: string
}
const lastForm = localStorage.getItem('login-form')
const form: IForm = reactive(
  lastForm
    ? (JSON.parse(atob(lastForm)))
    : {
        user_name: '',
        user_password: '',
      },
)

const rules: FormRules = reactive({

})

const formRef = $ref<FormInstance>()

const isRemember = $ref(!!lastForm)

function handleLogin() {
    console.log(Crypto.encrypt(form.user_password))
  formRef?.validate((valid) => {
    if (valid) {
      localStorage.removeItem('login-form')
      isRemember && localStorage.setItem('login-form', btoa(JSON.stringify(form)))
      // console.log('md5() :>> ', md5(form.user_password))
      // console.log('btoa() :>> ', btoa(md5(form.user_password)))
      // TODO: request login api
      request({
        url: '/user/main/login',
        data: {
          user_main: {
            user_name: form.user_name,
            // user_password: btoa(md5(form.user_password)),
            user_password: Crypto.encrypt(form.user_password),
          },
        },
      }).then((res) => {
        if (res?.code === '1') {
          user.value = res.data as User
          router.replace('/')
        }
      })
    }
  })
}
</script>

<template>
  <div class="flex">
    <div class="flex-auto flex_center min-w-580px">
      <div class="w-470px flex flex-col">
        <h1 class="text-5xl mb-24">
          蒙阴县教育数字平台
        </h1>
        <el-form ref="formRef" label-position="top" :model="form" :rules="rules" size="large">
          <el-form-item label="账户">
            <el-input v-model="form.user_name" class="h-40px" clearable />
          </el-form-item>
          <el-form-item label="密码" class="mt-8">
            <el-input v-model="form.user_password" type="password" class="h-40px rounded-full" />
          </el-form-item>
        </el-form>

        <div class="flex justify-between my-6">
          <el-checkbox v-model="isRemember" label="记住密码" size="large" />
          <el-link type="primary" class="text-xs" :underline="false">
            忘记密码
          </el-link>
        </div>

        <div
          class="rounded bg-hex-409eff hover:bg-hex-40bbff h-50px flex_center text-white text-sm font-semibold box_shadow tracking-wider cursor-pointer"
          @click="handleLogin"
        >
          登录
        </div>
      </div>
    </div>
    <div class="h-full min-w-683px bg-hex-3F8CFF w-1/2 flex_center">
      <img :src="bar" alt="" class="h-full">
    </div>
  </div>
</template>

<style lang="scss" scoped>
._shadow {
  text-shadow: 0px 7px 14px 0px rgba(143, 149, 178, 0.15);
  box-shadow: 0px 7px 14px 0px rgba(143, 149, 178, 0.15), 0px 7px 14px 0px rgba(143, 149, 178, 0.15);
}
</style>
