<template>
  <div class="system-pwconfig-container">
    <el-card shadow="hover">
      <template #header>
        <div class="card-header">
          <span>密码策略配置</span>
        </div>
      </template>
      <el-form :model="ruleForm" ref="formRef" :rules="rules" label-width="180px" style="max-width: 800px;">
        <el-form-item label="启用密码策略" prop="enabled">
          <el-switch v-model="ruleForm.enabled" />
        </el-form-item>

        <el-form-item label="最小密码长度" prop="minLength">
          <el-input-number v-model="ruleForm.minLength" :min="4" :max="32" placeholder="请输入最小密码长度" />
          <span class="ml10 text-muted">位</span>
        </el-form-item>

        <el-form-item label="最大密码长度" prop="maxLength">
          <el-input-number v-model="ruleForm.maxLength" :min="4" :max="128" placeholder="请输入最大密码长度" />
          <span class="ml10 text-muted">位</span>
        </el-form-item>

        <el-form-item label="必须包含大写字母" prop="requireUppercase">
          <el-switch v-model="ruleForm.requireUppercase" />
        </el-form-item>

        <el-form-item label="必须包含小写字母" prop="requireLowercase">
          <el-switch v-model="ruleForm.requireLowercase" />
        </el-form-item>

        <el-form-item label="必须包含数字" prop="requireDigit">
          <el-switch v-model="ruleForm.requireDigit" />
        </el-form-item>

        <el-form-item label="必须包含特殊字符" prop="requireSpecialChar">
          <el-switch v-model="ruleForm.requireSpecialChar" />
          <div class="text-muted mt5" style="font-size: 12px;">特殊字符包括：!@#$%^&*()_+-=[]{}|;:,.<>?</div>
        </el-form-item>

        <el-form-item label="密码过期天数" prop="expireDays">
          <el-input-number v-model="ruleForm.expireDays" :min="0" :max="365" placeholder="请输入密码过期天数" />
          <span class="ml10 text-muted">天（0表示永不过期）</span>
        </el-form-item>

        <el-form-item label="登录失败锁定次数" prop="maxRetryCount">
          <el-input-number v-model="ruleForm.maxRetryCount" :min="0" :max="10" placeholder="请输入登录失败锁定次数" />
          <span class="ml10 text-muted">次（0表示不锁定）</span>
        </el-form-item>

        <el-form-item label="锁定时长" prop="lockTimeMinutes">
          <el-input-number v-model="ruleForm.lockTimeMinutes" :min="1" :max="1440" placeholder="请输入锁定时长" />
          <span class="ml10 text-muted">分钟</span>
        </el-form-item>

        <el-form-item label="备注" prop="remark">
          <el-input v-model="ruleForm.remark" type="textarea" :rows="3" placeholder="请输入备注" />
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="onSubmit" :loading="loading">保存配置</el-button>
          <el-button @click="resetForm">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script lang="ts">
import { reactive, toRefs, defineComponent, ref, onMounted, unref } from 'vue';
import { ElMessage, FormInstance, FormRules } from 'element-plus';
import { getPwConfig, savePwConfig } from "/@/api/system/pwconfig";

interface RuleFormState {
  enabled: boolean;
  minLength: number;
  maxLength: number;
  requireUppercase: boolean;
  requireLowercase: boolean;
  requireDigit: boolean;
  requireSpecialChar: boolean;
  expireDays: number;
  maxRetryCount: number;
  lockTimeMinutes: number;
  remark: string;
}

interface PwConfigState {
  ruleForm: RuleFormState;
  rules: FormRules;
  loading: boolean;
}

export default defineComponent({
  name: 'systemPwConfig',
  setup() {
    const formRef = ref<FormInstance>();
    const state = reactive<PwConfigState>({
      loading: false,
      ruleForm: {
        enabled: false,
        minLength: 8,
        maxLength: 32,
        requireUppercase: false,
        requireLowercase: true,
        requireDigit: true,
        requireSpecialChar: false,
        expireDays: 90,
        maxRetryCount: 5,
        lockTimeMinutes: 30,
        remark: '',
      },
      rules: {
        minLength: [
          { required: true, message: '请输入最小密码长度', trigger: 'blur' }
        ],
        maxLength: [
          { required: true, message: '请输入最大密码长度', trigger: 'blur' }
        ],
        expireDays: [
          { required: true, message: '请输入密码过期天数', trigger: 'blur' }
        ],
        maxRetryCount: [
          { required: true, message: '请输入登录失败锁定次数', trigger: 'blur' }
        ],
        lockTimeMinutes: [
          { required: true, message: '请输入锁定时长', trigger: 'blur' }
        ],
      }
    });

    // 获取配置
    const loadConfig = async () => {
      try {
        const res: any = await getPwConfig();
        if (res.code === 0 && res.data) {
          state.ruleForm = {
            ...state.ruleForm,
            ...res.data,
          };
        }
      } catch {
        // 错误由全局拦截器处理
      }
    };

    // 重置表单
    const resetForm = () => {
      loadConfig();
    };

    // 保存配置
    const onSubmit = async () => {
      const formWrap = unref(formRef);
      if (!formWrap) return;

      await formWrap.validate(async (valid: boolean) => {
        if (valid) {
          // 验证最小长度不大于最大长度
          if (state.ruleForm.minLength > state.ruleForm.maxLength) {
            ElMessage.error('最小密码长度不能大于最大密码长度');
            return;
          }

          state.loading = true;
          try {
            await savePwConfig(state.ruleForm);
            ElMessage.success('保存成功');
          } finally {
            state.loading = false;
          }
        }
      });
    };

    // 页面加载时
    onMounted(() => {
      loadConfig();
    });

    return {
      formRef,
      onSubmit,
      resetForm,
      ...toRefs(state),
    };
  },
});
</script>

<style scoped lang="scss">
.text-muted {
  color: var(--el-text-color-placeholder);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.system-pwconfig-container {
  :deep(.el-card__body) {
    padding-top: 30px;
  }
}
</style>
