<template>
    <div class="strategy-manage pd10" :style="height">
        <el-form :inline="true" class="demo-form-inline">
            <el-form-item>
                <el-button @click="AddClick()" type="primary" :icon="Plus">保存</el-button>
            </el-form-item>
        </el-form>
        <div style="width: 500px">
            <el-form ref="formRef" :model="form" label-width="auto" :rules="rules">
                <el-divider content-position="left">系统策略</el-divider>
                <el-form-item label="最大并发数:" prop="maxUseUser">
                    <el-input-number
                        v-model.number="form.maxUseUser"
                        :min="10"
                        :max="99"
                        style="width: 100%"
                    ></el-input-number>
                </el-form-item>
                <el-divider content-position="left">账号锁定策略</el-divider>
                <el-form-item label="密码输入错误次数:" prop="errorsCount">
                    <el-input-number
                        v-model.number="form.errorsCount"
                        :min="3"
                        :max="20"
                        style="width: 100%"
                    ></el-input-number>
                </el-form-item>
                <el-form-item label="自动解锁(分钟):" prop="releaseTime">
                    <el-input-number
                        v-model.number="form.releaseTime"
                        :min="5"
                        :max="60"
                        style="width: 100%"
                    ></el-input-number>
                </el-form-item>
                <el-form-item label="会话超时时间(分钟):" prop="sessionTime">
                    <el-input-number v-model.number="form.sessionTime" :min="10" style="width: 100%"></el-input-number>
                </el-form-item>
                <el-form-item label="token刷新时间(分钟):" prop="sessionRefreshTime">
                    <el-input-number
                        v-model.number="form.sessionRefreshTime"
                        :min="10"
                        style="width: 100%"
                    ></el-input-number>
                </el-form-item>
                <el-divider content-position="left">账号密码复杂度校验</el-divider>
                <el-form-item label="密码有效期(月):" prop="passwordExpirationMonth">
                    <el-input-number
                        v-model.number="form.passwordExpirationMonth"
                        :min="1"
                        :max="6"
                        style="width: 100%"
                    ></el-input-number>
                </el-form-item>
                <el-form-item label="账号长时间未登录休眠期(天):" prop="sleepDay">
                    <el-input-number
                        v-model.number="form.sleepDay"
                        :min="1"
                        :max="180"
                        style="width: 100%"
                    ></el-input-number>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { ruleUpdate, getRule, unlockRoot } from '@/api/admin/user.js'
import { Plus } from '@element-plus/icons-vue'
import { mainHeight } from '@/utils/layout'

// 页面缓存
defineOptions({
    name: 'system-boot/sysConfig/timer'
})

const height = mainHeight(20)

// 定义表单引用
const formRef = ref()

// 定义表单数据
const form = reactive({
    maxUseUser: 50,
    errorsCount: 0,
    passwordExpirationMonth: 0,
    sleepDay: 90,
    releaseTime: 0,
    sessionTime: 0,
    sessionRefreshTime: 0
})

// 定义表单验证规则
const rules = {
    maxUseUser: [{ required: true, message: '请填写最大并发数', trigger: 'blur' }],
    errorsCount: [{ required: true, message: '请填写密码输入错误次数', trigger: 'blur' }],
    releaseTime: [{ required: true, message: '请填写自动解锁(分钟)', trigger: 'blur' }],
    sessionTime: [{ required: true, message: '请填写会话超时时间', trigger: 'blur' }],
    sessionRefreshTime: [{ required: true, message: '请填写会话刷新时间', trigger: 'blur' }],
    passwordExpirationMonth: [{ required: true, message: '请填写密码有效期', trigger: 'blur' }],
    sleepDay: [{ required: true, message: '请填写休眠期', trigger: 'blur' }]
}

// 获取策略信息
const info = () => {
    getRule().then(res => {
        Object.assign(form, res.data)
    })
}

// 保存策略
const AddClick = () => {
    formRef.value.validate(valid => {
        if (valid) {
            ruleUpdate(form).then(res => {
                Object.assign(form, res.data)
                ElMessage({
                    message: '保存成功',
                    type: 'success'
                })
                info()
            })
        }
    })
}

// 组件挂载时获取数据
onMounted(() => {
    info()
})
</script>

<style lang="less" scoped>
.strategy-manage {
    background-color: #fff;
    margin: 10px;
}

:deep(.el-form-item__label ){
    color: var(--el-color-primary);
    font-weight: 600;
}
</style>
