<template>
  <basic-modal
    :footer="null"
    <%_ if (enableTranslation) { _%>
    :title="t('layout.header.lockScreen')"
    <%_ } else { _%>
    title="t$t('layout.header.lockScreen')$t$"
    <%_ } _%>
    v-bind="$attrs"
    :class="prefixCls"
    @register="register"
    :canFullscreen="false"
  >
    <div :class="`${prefixCls}__entry`">
      <div :class="`${prefixCls}__header`">
        <img :src="avatar" :class="`${prefixCls}__header-img`" />
        <p :class="`${prefixCls}__header-name`">
          {{ getRealName }}
        </p>
      </div>

      <basic-form @register="registerForm" />

      <div :class="`${prefixCls}__footer`">
        <a-button type="primary" block class="mt-2" @click="handleLock">
          <% if (enableTranslation) { %>{{ t('layout.header.lockScreenBtn') }}<% } else { %>t$t('layout.header.lockScreenBtn')$t$<% } %>
        </a-button>
      </div>
    </div>
  </basic-modal>
</template>
<script lang="ts" setup>
<%_ if (enableTranslation) { _%>
import { useI18n } from '@/hooks/web/useI18n';
<%_ } _%>
import { useDesign } from '@/hooks/web/useDesign';
import { BasicModal, useModalInner } from '@/components/Modal';
import { BasicForm, useForm } from '@/components/Form';

import { useUserStore } from '@/store/modules/user';
import { useLockStore } from '@/store/modules/lock';
import headerImg from '@/assets/images/header.jpg';

defineOptions({ name: 'LockModal' });

<%_ if (enableTranslation) { _%>
const { t } = useI18n();
<%_ } _%>
const { prefixCls } = useDesign('header-lock-modal');
const userStore = useUserStore();
const lockStore = useLockStore();

const getRealName = computed(() => userStore.getUserInfo?.realName);
const [register, { closeModal }] = useModalInner();

const [registerForm, { validate, resetFields }] = useForm({
labelWidth: 74,
labelAlign:'left',
wrapperCol:{},
showActionButtonGroup: false,
schemas: [
  {
    field: 'password',
    label: <% if (enableTranslation) { %>t('layout.header.lockScreenPassword')<% } else { %>'t$t('layout.header.lockScreenPassword')$t$'<% } %>,
    colProps: {
      span: 24,
    },
    component: 'InputPassword',
    componentProps: {
      autocomplete: "new-password",
    },
  },
],
});

const handleLock = async () => {
const { password = '' } = await validate<{
  password: string;
}>();

closeModal();

lockStore.setLockInfo({
  isLock: true,
  pwd: password,
});

await resetFields();
};

const avatar = computed(() => {
const { imageUrl } = userStore.getUserInfo;
return imageUrl || headerImg;
});
</script>
<style lang="less">
  @prefix-cls: ~'@{namespace}-header-lock-modal';

  .@{prefix-cls} {
    &__entry {
      position: relative;
      //height: 240px;
      padding: 130px 30px 30px 30px;
      border-radius: 10px;
    }

    &__header {
      position: absolute;
      top: 0;
      left: calc(50% - 45px);
      width: auto;
      text-align: center;

      &-img {
        width: 70px;
        border-radius: 50%;
      }

      &-name {
        margin-top: 5px;
      }
    }

    &__footer {
      text-align: center;
    }
  }
</style>
