<template>
  <div class="layout-lock-screen">
    <div class="layout-lock-screen-login">
      <div class="layout-lock-screen-login-box">
        <div class="layout-lock-screen-login-box-img">
          <img
            src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1813762643,1914315241&fm=26&gp=0.jpg"
          />
        </div>
        <div class="layout-lock-screen-login-box-name">Administrator</div>
        <div class="layout-lock-screen-login-box-value">
          <el-input
            placeholder="请输入密码"
            ref="lockScreenPasswwordRef"
            v-model="password"
            @keyup.enter.stop="handleSubmit"
          >
            <template #append>
              <el-button icon="el-icon-right" @click="handleSubmit"></el-button>
            </template>
          </el-input>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { ref, defineComponent } from "vue";
import { ElInput } from "element-plus";

export default defineComponent({
  name: "lockScreenLoginForm",

  emits: ["submit"],

  setup(_, { expose, emit }) {
    const lockScreenPasswwordRef = ref<typeof ElInput | undefined>(undefined);
    const password = ref("");

    const focus = () => {
      lockScreenPasswwordRef.value!.focus();
    };

    const handleSubmit = () => {
      emit("submit");
    };

    expose({
      focus,
    });

    return {
      password,
      handleSubmit,
      lockScreenPasswwordRef,
    };
  },
});
</script>
<style lang="scss" scoped>
.layout-lock-screen-fixed {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.layout-lock-screen {
  @extend .layout-lock-screen-fixed;
  z-index: 100000000;

  &-login {
    position: relative;
    z-index: 100000001;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: #ffffff;
    &-box {
      text-align: center;
      margin: auto;
      &-img {
        width: 180px;
        height: 180px;
        margin: auto;
        img {
          width: 100%;
          height: 100%;
          border-radius: 100%;
        }
      }
      &-name {
        font-size: 26px;
        margin: 15px 0 30px;
      }
    }
  }
}

::v-deep(.el-input-group__append) {
  background: #ffffff;
  padding: 0px 15px;
}
::v-deep(.el-input__inner) {
  border-right-color: #f6f6f6;
  &:hover {
    border-color: #f6f6f6;
  }
}
</style>
