<template>
  <div>
    <el-form
      v-loading='loading'
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      label-width="auto"
      class="demo-ruleForm"
      style="width: 100%; margin-left: 60px"
    >
      <div style="margin: 20px -20px">登录配置</div>
      <el-form-item label="最大登录失败次数:" prop="failuresNum">
        <el-input
          placeholder="次数需为0-50之间的数字"
          v-model.number="ruleForm.failuresNum"
          style="width: 300px"
        ></el-input>
      </el-form-item>
      <el-form-item label="失败锁定时长:" prop="failuresTime">
        <el-input
          style="width: 300px"
          placeholder="锁定时长需为0-60之间的数字"
          v-model.number="ruleForm.failuresTime"
        ></el-input>
      </el-form-item>
      <el-form-item label="超时退出时长:" prop="logoutTime">
        <el-input
          style="width: 300px"
          placeholder="超时退出时长时长需为5-300之间的数字"
          v-model.number="ruleForm.logoutTime"
        ></el-input>
      </el-form-item>
      <el-divider style="width: 90%"></el-divider>
      <div style="margin: 20px -20px">密码配置</div>
      <el-form-item label="密码总长度要求:" prop="passwordLength">
        <el-input
          v-model="ruleForm.passwordLength"
          style="width: 200px"
          placeholder="密码长度5-20位"
          v-model.number="ruleForm.passwordLength"
        ></el-input
        >&nbsp;位
      </el-form-item>
      <el-form-item label="密码复杂度要求(密码中需包含):" prop="type">
        <el-checkbox-group v-model="ruleForm.type">
          <el-checkbox label="小写英文字母" name="type"></el-checkbox>
          <el-checkbox label="大写英文字母" name="type"></el-checkbox>
          <el-checkbox label="数字" name="type"></el-checkbox>
          <el-checkbox label="特殊字符" name="type"></el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="密码定期更换时间:" prop="passwordDate">
        <el-input
          style="width: 200px"
          placeholder="请输入密码更换天数"
          v-model.number="ruleForm.passwordDate"
        ></el-input
        >&nbsp;天
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')"
          >确定</el-button
        >
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import {
  checkFailuresNum,
  checkFailuresTime,
  checkLogoutTime,
  checkPasswordLength,
  checkPasswordDay,
} from "./data.js";
import {
  getSecurityConfig,
  setSecurityConfig,
} from "@/api/authority/securityconfig";
export default {
  data() {
    return {
      loading:false,
      ruleForm: {
        failuresNum: "",
        failuresTime: "",
        logoutTime: "",
        passwordLength: "",
        passwordDate: "",
        type: [],
      },
      rules: {
        failuresNum: [{ validator: checkFailuresNum, trigger: "blur" }],
        failuresTime: [{ validator: checkFailuresTime, trigger: "blur" }],
        logoutTime: [{ validator: checkLogoutTime, trigger: "blur" }],
        passwordLength: [{ validator: checkPasswordLength, trigger: "blur" }],
        passwordDate: [{ validator: checkPasswordDay, trigger: "blur" }],
        type: [
          {
            type: "array",
            required: true,
            message: "请至少选择一个选项",
            trigger: "change",
          },
        ],
      },
    };
  },
  mounted() {
    this.getSconfig();
  },
  methods: {
    getSconfig() {
      this.loading = true
      this.ruleForm.type = [];
      getSecurityConfig().then(res => {
        this.ruleForm.failuresTime = res.data.loginFailLockTime;
        this.ruleForm.failuresNum = res.data.maxLoginFailNum;
        this.ruleForm.logoutTime = res.data.sessionTimeout;
        this.ruleForm.passwordLength = res.data.passwordMinLength;
        this.ruleForm.passwordDate = res.data.passwordEffectiveDay;
        const list = [
          { name: "小写英文字母", value: res.data.passwordLowerLetter },
          { name: "大写英文字母", value: res.data.passwordUpperLetter },
          { name: "特殊字符", value: res.data.passwordSymbol },
          { name: "数字", value: res.data.passwordDigital },
        ];
        for (let i of list) {
          if (Number(i.value)) {
            this.ruleForm.type.push(i.name);
          }
        }
          this.loading = false
      })
      .catch(err=>{
        this.loading = false
        this.$message.error('数据获取失败')
      })
    },
    setSconfig() {
      const params = new URLSearchParams();
      params.loginFailLockTime = this.ruleForm.failuresTime;
      params.maxLoginFailNum = this.ruleForm.failuresNum;
      params.sessionTimeout = this.ruleForm.logoutTime;
      params.passwordMinLength = this.ruleForm.passwordLength;
      params.passwordEffectiveDay = this.ruleForm.passwordDate;
      params.passwordDigital = Number(this.ruleForm.type.includes("数字"));
      params.passwordSymbol = Number(this.ruleForm.type.includes("特殊字符"));
      params.passwordUpperLetter = Number(
        this.ruleForm.type.includes("大写英文字母")
      );
      params.passwordLowerLetter = Number(
        this.ruleForm.type.includes("小写英文字母")
      );
      setSecurityConfig(JSON.stringify(params)).then((res) => {
        this.$message.success("操作成功!");
         this.loading = false
        this.getSconfig();
      })
      .catch(err=>{
        this.loading = false
      })
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.loading = true
          this.setSconfig();
        } else {
          return false;
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
/deep/ input::-webkit-outer-spin-button,
/deep/ input::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
}
/deep/ input[type="number"] {
  -moz-appearance: textfield !important;
}
</style>