<template>
  <div>
    <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>
    </el-form>
    <el-dialog class="dialog_box" title="提示" v-model="restoreDialog" width="420px">
      <div>该操作将还原所有锁定账号和输错次数，是否继续？</div>
      <template v-slot:footer>
        <div class="apaas_button">
          <el-button type="default" @click="restoreDialog = false">取 消</el-button>
          <el-button type="primary" @click="confirm">确 定</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { reactive, toRefs, ref } from "vue";
import { ElMessage } from "element-plus";
import axios from "@/request/http.js";

const registerFormRef = ref(null);

const state = reactive({
  registerFormData: {
    id: "",
    login_config_state: 0,
    login_limit_time: "",
    login_pwd_error: "",
    login_lock_time: "",
  },
  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",
      },
    ],
  },
  //一键还原受限弹框
  restoreDialog: false,
});
//设置表单数据
const setFormData = (data) => {
  Object.keys(state.registerFormData).forEach((item) => {
    state.registerFormData[item] = data[item];
  });
};
//一键还原受限确定
const confirm = () => {
  axios.post(`/v1/api/sysOptions/reStartConfig`).then((res) => {
    if (res.data.code == 200) {
      ElMessage.success(res.data.msg);
      state.restoreDialog = false;
    } else {
      ElMessage.error(res.data.data);
    }
  });
};
//保存
const save = () => {
  registerFormRef.value.validate((valid) => {
    if (valid) {
      let params = {
        ...state.registerFormData,
      };
      if (params.login_config_state == 0) {
        params.login_limit_time = 0;
        params.login_pwd_error = 0;
        params.login_lock_time = 0;
      }
      axios.post("/v1/api/sysOptions/loginOpts", params).then((res) => {
        if (res.data.code == 200) {
          ElMessage.success(res.data.msg);
        } else {
          ElMessage.error(res.data.data);
        }
      });
    }
  });
};
const { registerFormData, registerRules, restoreDialog } = toRefs(state);
defineExpose({
  setFormData,
  save,
});
</script>
