<!-- 锁屏弹窗 -->
<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"
  >
    <el-input
      type="password"
      v-model="lockPassword"
      size="large"
      placeholder="请输入临时锁定密码/为空则使用默认使用账号密码"
      @keyup.enter="confirmLock"
      autofocus
    />
    <div style="margin-top: 20px">
      <el-button
        class="ele-fluid"
        type="primary"
        :loading="lockLoading"
        @click="confirmLock"
        >锁定客户端</el-button
      >
    </div>
  </ele-modal>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import { wsInstance, WsSendEventType } from '@/plugins/websocket';
  import { ElMessage } from 'element-plus';
  import { LockScreenStatus, useClientStore } from '@/store/modules/client';

  /** 弹窗是否打开 */
  const visible = defineModel({ type: Boolean });

  const lockLoading = ref<boolean>(false);
  const lockPassword = ref<string>('');

  /**
   * 确定锁屏
   */
  const confirmLock = () => {
    if (lockLoading.value) {
      return;
    }
    lockLoading.value = true;
    if (wsInstance) {
      /*
       * 先快速锁定当前窗口的
       */
      useClientStore().setLockScreen(LockScreenStatus.LOCK);
      /*
       * 通知设备下的窗口全部锁屏
       */
      wsInstance.sendMessage(WsSendEventType.LOCK_CLIENT_SCREEN, {
        lockPassword: lockPassword.value
      });
      visible.value = false;
      lockPassword.value = ''; // 清空密码
    } else {
      ElMessage.error('锁屏功能不可用');
    }
    lockLoading.value = false;
  };
</script>
