<template>
  <ele-modal
    title="设备已被锁定"
    v-model="clientStore.lockScreen"
    :modal-penetrable="false"
    :append-to-body="true"
    :lock-scroll="true"
    center
    :close-on-press-escape="false"
    :close-on-click-modal="false"
    :show-close="false"
    :fullscreen="true"
  >
    <div style="text-align: center">
      <h1>请输入锁屏密码进行解锁</h1>
    </div>
    <div style="margin-top: 10%">
      <el-input
        type="password"
        v-model="lockPassword"
        size="large"
        placeholder="请输入密码解锁"
        autofocus
        @keyup.enter="confirmUnlock"
      />
      <div style="margin-top: 20px">
        <el-button
          :loading="unlockLoading"
          class="ele-fluid"
          type="primary"
          @click="confirmUnlock"
          >解锁客户端</el-button
        >
      </div>
    </div>
  </ele-modal>
</template>

<script setup lang="ts">
  import { ref } from 'vue';
  import { WsEvent, wsEventManager } from '@/plugins/websocket';
  import { clientScreenUnlock } from '@/api/layout';
  import { LockScreenStatus, useClientStore } from '@/store/modules/client';

  /** 设备状态管理器 */
  const clientStore = useClientStore();
  /** 输入解锁密码 */
  const lockPassword = ref('');
  /** 解锁loading. */
  const unlockLoading = ref(false);
  /** 确定解锁 */
  const confirmUnlock = () => {
    if (unlockLoading.value) {
      return;
    }
    unlockLoading.value = true;

    clientScreenUnlock({ password: lockPassword.value })
      .then(() => {
        clientStore.setLockScreen(LockScreenStatus.UNLOCK);
        lockPassword.value = ''; // 清空密码
      })
      .catch((message) => {
        alert(message);
      })
      .finally(() => {
        unlockLoading.value = false;
      });
  };
  /** 事件订阅器 - 锁屏事件 */
  wsEventManager.subscribe(WsEvent.LOCK_CLIENT_SCREEN, () => {
    clientStore.setLockScreen(LockScreenStatus.LOCK);
  });
</script>
