<template>
  <div class="lock-screen flex justify-center items-center">
    <div class="flex items-center">
      <img src="../assets/images/lock_screen.png" class="m-r-base" />
      <el-form ref="ruleFormRef" :model="form" :rules="rules">
        <el-form-item label="" prop="pwd">
          <el-input
            v-model="form.pwd"
            class="pwd-input"
            size="large"
            type="password"
            placeholder="请输入登录密码解锁"
            clearable
            @keydown="enter"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="large" class="m-l-base" @click="submit">确定</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script lang="ts" setup name="LockScreen">
import { ElInput, ElButton, ElForm, ElMessage } from 'element-plus'
import { reactive, ref } from 'vue'
import useFetch from '@/hooks/useFetch'
import useMainStore from '@/store/main'
const mainStore = useMainStore()
const ruleFormRef = ref()
const form = reactive({
  pwd: '',
})
const rules = reactive({
  pwd: [
    {
      required: true,
      message: '请输入登录密码',
      trigger: 'blur',
    },
  ],
})
const enter = (e: any) => {
  if ('Enter' === e.key) {
    submit()
    e.preventDefault()
  }
}
const submit = async () => {
  if (!form.pwd) {
    ElMessage.error('请输入登录密码')
    return
  }
  useFetch('unLockScreen')
    .fetch({ password: form.pwd })
    .then((res) => {
      if (typeof res !== 'undefined') {
        mainStore.setLockScreen(false)
      }
    })
  //   await formEl.validate((valid: any, fields: any) => {
  //     console.log(valid, fields)
  //     if (valid) {
  //       useFetch('unLockScreen')
  //         .fetch({ password: form.pwd })
  //         .then((res) => {
  //           alert(1)
  //         })
  //     } else {
  //       console.log('error submit!', fields)
  //     }
  //   })
}
</script>
<style lang="scss" scoped>
.lock-screen {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  z-index: 3000;
  background: rgba(0, 0, 0, 0.9);
  .pwd-input {
    width: 200px;
  }
  img {
    height: 40px;
  }
}
</style>
