<template>
  <el-form
    ref="registerFormRef"
    :model="registerFormData"
    :rules="registerRules"
    label-width="125px"
    class="registerForm">
    <bg-form-gap title="登录受限配置"></bg-form-gap>
    <el-form-item label="登录受限是否启用" prop="login_config_state">
      <bg-switch :labels="['否', '是']" :values="[0, 1]" v-model="registerFormData.login_config_state"></bg-switch>
    </el-form-item>
    <div class="input_password_config" v-if="registerFormData.login_config_state == 1">
      <span>在</span>
      <el-form-item prop="login_limit_time" label-width="0">
        <el-input
          placeholder="请输入小时数"
          v-model.trim.number="registerFormData.login_limit_time"
          maxlength="3"></el-input>
      </el-form-item>
      <span>小时内</span>
      <el-form-item prop="login_pwd_error" label-width="0">
        <el-input
          placeholder="请输入密码输错次数"
          v-model.trim.number="registerFormData.login_pwd_error"
          maxlength="3"></el-input>
      </el-form-item>
      <span>次输错密码，自动锁定</span>
      <el-form-item prop="login_lock_time" label-width="0">
        <el-input
          placeholder="请输入分钟数"
          v-model.trim.number="registerFormData.login_lock_time"
          maxlength="3"></el-input>
      </el-form-item>
      <span>分钟</span>
      <el-button type="primary" @click="restoreDialog = true">一键还原受限</el-button>
      <el-tooltip placement="top-start" effect="light">
        <template #content>
          <span>必须为大于0的正整数且不能为空</span>
          <br />
          <span>一键还原按钮将所有锁定的账号解锁并将输错次数还原</span>
        </template>
        <div class="tip-image"></div>
      </el-tooltip>
    </div>
    <bg-form-gap title="注册配置"></bg-form-gap>
    <el-form-item label="允许注册" prop="register_config_state">
      <el-radio-group v-model="registerFormData.register_config_state">
        <el-radio :label="1">是</el-radio>
        <el-radio :label="0">否</el-radio>
      </el-radio-group>
    </el-form-item>
  </el-form>
</template>

<script setup>
import { reactive, toRefs } from "vue";

const props = defineProps({
  registerFormData: {
    type: Object,
    default: () => ({}),
  },
});

const state = reactive({
  registerRules: {
    login_limit_time: [
      {
        type: "number",
        min: 1,
        message: "请输入正整数",
        trigger: "blur",
      },
    ],
    login_pwd_error: [
      {
        type: "number",
        min: 1,
        message: "请输入正整数",
        trigger: "blur",
      },
    ],
    login_lock_time: [
      {
        type: "number",
        min: 1,
        message: "请输入正整数",
        trigger: "blur",
      },
    ],
  },
});

const { registerRules } = toRefs(state);
</script>
