<template>
  <ele-modal
    title="设备已被锁定"
    :width="480"
    v-model="visible"
    :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="请输入密码解锁"
      />
      <div style="margin-top: 20px">
        <el-button 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';

  const visible = ref(false);
  const lockPassword = ref('');
  const confirmUnlock = () => {};
  wsEventManager.subscribe(WsEvent.LOCK_CLIENT_SCREEN, () => {
    visible.value = true;
  });
</script>
