<script setup lang='ts'>
import { ElMessage } from 'element-plus'
import { user, loginShow} from '~/store/index'
import { encrypt } from "@/utils/crypto";

// let loginShow.value= $ref(false)
const passwordType = $ref('password')
const router = useRouter();

interface IForm {
  user_name: string
  user_password: string
}

const lastForm = localStorage.getItem('login-form')
const isRemember = $ref(!!lastForm)

const loginForm: IForm = reactive(
  lastForm && isRemember
    ? (JSON.parse(atob(lastForm)))
    : {
      user_name: '',
      user_password: '',
    },
)

function userLoginSubmit() {
  localStorage.removeItem('login-form')
  isRemember && localStorage.setItem('login-form', btoa(JSON.stringify(loginForm)))

  request({
    url: '/user/main/login',
    data: {
      user_main: {
        user_name: loginForm.user_name,
        user_password: encrypt(loginForm.user_password),
      },
      token: undefined,
    },
  }).then((res) => {
    if (res.code === '1') {
      ElMessage({
        message: '登录成功！',
        type: 'success',
        showClose: true,
      })
      user.value = res.data
      loginShow.value= false

      // router.replace({name: "home"});
      setTimeout(() => {
        location.reload();
      }, 300);
    } else {
      ElMessage({
        message: '登录失败！',
        type: 'error',
        showClose: true,
        customClass: 'z-3000',
      })
    }
  }).catch(() => {
    ElMessage({
      message: '登录失败！',
      type: 'error',
      showClose: true,
    })
  })
}

defineExpose({
  open() {
    loginShow.value= true
  },
})

function handleClose() {
  loginForm.user_name = ''
  loginForm.user_password = ''

  loginShow.value= false
}
</script>

<template>
  <el-overlay v-if="loginShow" :key="loginShow" class="flex_center">
    <div class="w-720px h-500px relative bg-img-login ">
      <div class="absolute -right-40 -top-40 login-close" @click="handleClose" />
      <div class="box-border py-12 m-auto w-420px flex flex-col h-full items-center">
        <div class="w-310px h-104px">
          <img class="w-full h-full" src="/images/icon/logo.png" alt="">
        </div>
        <div class="w-300px flex-auto flex-auto mt-8 flex flex-col space-y-5">
          <el-input v-model="loginForm.user_name" class="h-54px"
            input-style="text-align:center;--el-input-border-radius:27px" size="large" placeholder="用户名">
            <!-- <template #suffix>
                                  <i:ant-design:user-outlined class="w-23px h-23px" />
                                </template> -->
          </el-input>
          <el-input v-model="loginForm.user_password" class="h-54px "
            input-style="text-align:center;--el-input-border-radius:27px" size="large" :type="passwordType"
            placeholder="密码">
            <!-- <template #suffix>
                                  <i:bi:eye-slash
                                    v-show="passwordType === 'password'" class="w-23px h-23px cursor-pointer"
                                    @click="passwordType = 'text'"
                                  />
                                  <i:bi:eye
                                    v-show="passwordType === 'text'" class="w-23px h-23px cursor-pointer"
                                    @click="passwordType = 'password'"
                                  />
                                  <!~~ <i:akar-icons:lock-off class="w-23px h-23px" /> ~~>
                                </template> -->
          </el-input>

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

          <button type="button" :disabled="!(loginForm.user_name && loginForm.user_password)"
            class="w-full h-54px bg-hex-409EFF rounded-full text-white tracking-0.5rem "
            :class="!(loginForm.user_name && loginForm.user_password) && 'cursor-not-allowed bg-hex-79BBFF'"
            @click="userLoginSubmit">
            登录
          </button>
          <!-- <div class="mt-12 w-full">
                              <el-divider>其他登录方式</el-divider>
                            </div> -->
          <!-- <div class="w-full flex items-center justify-around">
                                  <el-link type="primary" @click="partyLogin('zlb')">浙里办登录</el-link>
                                  <el-link type="primary" @click="partyLogin('jyej')">教育E家登录</el-link>
                                </div> -->
          <!-- <div class="flex-grow w-full flex items-end justify-around">
                          <el-link type="primary" class="text-xs">
                            忘记密码
                          </el-link>
                        </div> -->
        </div>
      </div>
    </div>
  </el-overlay>
</template>

<style scoped>
.bg-img-login {
  background: url("/images/header/login_bg.webp");
  background-size: 100% 100%;
}

.login-close {
  position: absolute;
  right: -40px;
  top: -40px;
  width: 30px;
  height: 30px;
  background: url("/images/header/login-close.png") center no-repeat;
  background-size: 30px 30px;
  cursor: pointer;
}
</style>
