<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 } from "vue";

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

const session_validity_max = window.defaultConfig.session_validity_max;
const state = reactive({
  //安全相关表单校验规则
  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 { secureRules } = toRefs(state);
</script>
