<template>
  <div :class="prefixCls" class="flx-center w-screen h-screen relative">
    <div :class="`${prefixCls}__unlock`" class="flx-center pt-32 flx-col" v-show="showDate" @click="handleShowForm(false)">
      <i class="iconfont iconUnlock"></i>
      <span>{{ $t("sys.lock.unlock") }}</span>
    </div>

    <div class="flx-center w-screen h-screen" @click="handleShowForm(false)">
      <div :class="`${prefixCls}__hour`" class="relative">
        <span>{{ hour }}</span>
        <span class="meridiem absolute left-32 top-32 text-h4-m" v-show="showDate">
          {{ meridiem }}
        </span>
      </div>
      <div :class="`${prefixCls}__minute`">
        <span> {{ minute }}</span>
      </div>
    </div>
    <transition name="fade-slide">
      <div :class="`${prefixCls}-entry`" v-show="!showDate">
        <div :class="`${prefixCls}-entry-content enter-x`">
          <div :class="`${prefixCls}-entry__header enter-x`">
            <!-- <img :src="userinfo.avatar || headerImg" :class="`${prefixCls}-entry__header-img`" /> -->
            <i class="iconfont iconuser-circle" :class="`${prefixCls}-entry__header-iconfont`"></i>
            <p :class="`${prefixCls}-entry__header-name`">
              {{ userinfo.username }}
            </p>
          </div>
          <el-form ref="lockFormRef" :model="lockForm" status-icon :rules="rules" class="demo-ruleForm" @submit.prevent>
            <el-form-item prop="password">
              <el-input
                ref="passwordRef"
                v-model="lockForm.password"
                type="password"
                show-password
                class="enter-x"
                size="large"
                :placeholder="$t('sys.lock.placeholder')"
                @keydown.enter="unLock(lockFormRef)"
              >
                <template #prefix>
                  <i class="iconfont iconPassword"></i>
                </template>
              </el-input>
            </el-form-item>
            <!-- <span :class="`${prefixCls}-entry__err-msg enter-x`" v-if="errMsg">
              {{ $t("sys.lock.alert") }}
            </span> -->
            <div :class="`flx-col enter-x`">
              <el-button class="flx-1" type="primary" size="default" @click.stop="unLock(lockFormRef)" :loading="loading">
                {{ $t("sys.lock.entry") }}
              </el-button>
              <div class="flx-center mt-12">
                <el-button
                  type="default"
                  size="default"
                  class="flx-1 enter-x"
                  :disabled="loading"
                  @click.stop="handleShowForm(true)"
                >
                  {{ $t("common.cancelText") }}
                </el-button>
                <el-button type="primary" plain size="default" class="flx-1 enter-x" :disabled="loading" @click.stop="goLogin">
                  {{ $t("sys.lock.backToLogin") }}
                </el-button>
              </div>
            </div>
          </el-form>
        </div>
      </div>
    </transition>

    <div class="absolute bottom-16 w-full color-gray-8 text-h3-m text-center enter-y">
      <div class="text-2xl" :class="{ 'color-gray-12': !showDate }">{{ year }}/{{ month }}/{{ day }} {{ week }}</div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, computed, nextTick } from "vue";
import { useUserStore } from "@/stores/modules/user";
import { useLockStore } from "@/stores/modules/lock";
import { useNow } from "./useNow";
import { useDesign } from "@/hooks/useDesign";
// import { LockOutlined } from "@ant-design/icons-vue";
// import headerImg from "/@/assets/images/header.jpg";
// import md5 from "js-md5";
import type { FormInstance, FormRules } from "element-plus";
import { ElNotification } from "element-plus";
import { useI18n } from "vue-i18n";
import { getTimeState } from "@/utils";

const AppName = import.meta.env.VITE_GLOB_APP_COMPANY + import.meta.env.VITE_GLOB_APP_TITLE;
const loading = ref(false);
const errMsg = ref(false);
const showDate = ref(true);
const { t } = useI18n();

const { prefixCls } = useDesign("lock-page");
const lockStore = useLockStore();
const userStore = useUserStore();

const { hour, month, minute, meridiem, year, day, week } = useNow(true);

const userinfo = computed(() => {
  return userStore.userInfo || {};
});

/**
 * @description 验证规则
 */
const lockForm = reactive({
  password: ""
});
const lockFormRef = ref<FormInstance>();
const rules = reactive<FormRules>({
  // password: [{ required: true, message: t("sys.login.passwordPlaceholder"), trigger: "blur" }]
});

/**
 * @description: 解锁，进入系统
 */
function unLock(formEl: FormInstance | undefined) {
  if (!formEl) return;
  formEl.validate(async valid => {
    if (!valid) return;
    loading.value = true;
    try {
      const res = await lockStore.unLock(lockForm.password);

      ElNotification({
        title: getTimeState(t),
        message: t("sys.login.welcome") + " " + AppName,
        type: "success",
        duration: 3000
      });
    } finally {
      loading.value = false;
    }
  });
}

async function goLogin() {
  // userStore.logout(true);
  await userStore.logout(true, () => {
    lockStore.resetLockInfo();
  });
}

const passwordRef = ref<any>();
function handleShowForm(show = false) {
  if (!show) {
    nextTick(() => {
      passwordRef.value.focus();
      passwordRef.value.select();
    });
  }
  showDate.value = show;
}
</script>
<style lang="scss" scoped>
@import "./LockPage.scss";
</style>
req
