<template>
  <el-form ref="secureFormRef" :model="secureFormData" :rules="secureRules" label-width="110px" class="secureForm">
    <div class="passwordItem">
      <el-form-item label="最低密码强度" prop="min_pwd_level">
        <el-select v-model="secureFormData.min_pwd_level" placeholder="请选择">
          <el-option label="弱" :value="1" />
          <el-option label="中" :value="2" />
          <el-option label="强" :value="3" />
        </el-select>
        <el-tooltip placement="top-start" effect="light">
          <template #content>
            <span>支持大写字母/小写字符/数字/特殊符号</span>
            <br />
            <span>密码长度应至少8位字符</span>
            <br />
            <span>弱：至少包含一种组合。</span>
            <br />
            <span>中：至少包含两种组合。</span>
            <br />
            <span>强：至少包含三种及以上组合。</span>
          </template>
          <div class="tip-image"></div>
        </el-tooltip>
      </el-form-item>
      <el-form-item label="是否强制修改" prop="force_update_state">
        <bg-switch :labels="['否', '是']" :values="[0, 1]" v-model="secureFormData.force_update_state"></bg-switch>
      </el-form-item>
    </div>
    <el-form-item label="密码有效期" prop="pwd_validity">
      <el-input placeholder="请输入" v-model.trim.number="secureFormData.pwd_validity" maxlength="3">
        <template #append>天</template>
      </el-input>
      <el-tooltip placement="top-start" effect="light">
        <template #content>
          <span>单位，天</span>
          <br />
          <span>密码有效期是指强制修改密码的周期，例如60天表示用户需要每60天修改一次密码。</span>
          <br />
          <span>若配置为0，表示密码有效期为永久</span>
        </template>
        <div class="tip-image"></div>
      </el-tooltip>
    </el-form-item>
    <el-form-item label="会话有效期" prop="session_validity">
      <el-input placeholder="请输入" v-model.trim.number="secureFormData.session_validity">
        <template #append>分钟</template>
      </el-input>
      <el-tooltip placement="top-start" effect="light">
        <template #content>
          <span>{{ `范围（10~${session_validity_max}）` }}</span>
          <br />
          <span>单位，分钟</span>
          <br />
          <span>会话有效期是指您登录后，一定时间内无操作，系统将自动登出</span>
        </template>
        <div class="tip-image"></div>
      </el-tooltip>
    </el-form-item>
    <el-form-item label="访问规则模式" prop="access_rule_state">
      <el-select placeholder="请选择" v-model="secureFormData.access_rule_state">
        <el-option label="关闭" :value="0"> </el-option>
        <el-option label="打开" :value="1"> </el-option>
      </el-select>
      <el-tooltip placement="top-start" effect="light">
        <template #content>
          <span>访问规则模式开启后，按照【访问规则管理】配置执行。</span>
          <br />
          <span>该模式针对超管无效</span>
        </template>
        <div class="tip-image"></div>
      </el-tooltip>
    </el-form-item>
  </el-form>
</template>

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

const secureFormRef = ref(null);

const session_validity_max = window.defaultConfig.session_validity_max;
const state = reactive({
  secureFormData: {
    id: "",
    min_pwd_level: "",
    force_update_state: 0,
    pwd_validity: "",
    session_validity: "",
    access_rule_state: "",
  },
  //安全相关表单校验规则
  secureRules: {
    pwd_validity: [
      {
        type: "number",
        message: "请输入大于或等于0的整数",
        trigger: "blur",
      },
    ],
    session_validity: [
      {
        type: "number",
        min: 10,
        max: session_validity_max,
        message: `请输入10~${session_validity_max}的整数`,
        trigger: "blur",
      },
    ],
  },
});
//设置表单数据
const setFormData = (data) => {
  Object.keys(state.secureFormData).forEach((item) => {
    state.secureFormData[item] = data[item];
  });
};
//保存
const save = () => {
  secureFormRef.value.validate((valid) => {
    if (valid) {
      let params = {
        ...state.secureFormData,
      };
      axios.post("/v1/api/sysOptions/safeOpts", params).then((res) => {
        if (res.data.code == 200) {
          ElMessage.success(res.data.msg);
        } else {
          ElMessage.error(res.data.data);
        }
      });
    }
  });
};
const { secureFormData, secureRules } = toRefs(state);

defineExpose({
  setFormData,
  save,
});
</script>
