<template>
  <div class="system-parameters-container">
    <vab-card title="系统参数配置">
      <el-tabs v-model="activeTab">
        <el-tab-pane label="基础设置" name="basic">
          <el-form ref="basicFormRef" :model="basicForm" label-width="120px" class="mt-20">
            <el-form-item label="系统名称">
              <el-input v-model="basicForm.systemName" style="width: 400px" />
            </el-form-item>
            <el-form-item label="系统Logo">
              <el-upload action="#" :auto-upload="false" :limit="1" list-type="picture-card">
                <vab-icon icon="add-line" />
              </el-upload>
            </el-form-item>
            <el-form-item label="版权信息">
              <el-input v-model="basicForm.copyright" style="width: 400px" />
            </el-form-item>
            <el-form-item label="备案号">
              <el-input v-model="basicForm.icp" style="width: 400px" />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="handleSave('basic')">保存设置</el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>
        
        <el-tab-pane label="安全设置" name="security">
          <el-form ref="securityFormRef" :model="securityForm" label-width="160px" class="mt-20">
            <el-form-item label="密码最小长度">
              <el-input-number v-model="securityForm.minPasswordLength" :min="6" :max="20" />
            </el-form-item>
            <el-form-item label="密码复杂度要求">
              <el-checkbox-group v-model="securityForm.passwordComplexity">
                <el-checkbox label="number">包含数字</el-checkbox>
                <el-checkbox label="lowercase">包含小写字母</el-checkbox>
                <el-checkbox label="uppercase">包含大写字母</el-checkbox>
                <el-checkbox label="special">包含特殊字符</el-checkbox>
              </el-checkbox-group>
            </el-form-item>
            <el-form-item label="登录失败锁定阈值">
              <el-input-number v-model="securityForm.loginRetryLimit" :min="3" :max="10" />
              <span class="ml-10 text-gray">次 (超过次数锁定账号)</span>
            </el-form-item>
            <el-form-item label="会话超时时间">
              <el-input-number v-model="securityForm.sessionTimeout" :min="10" :max="1440" />
              <span class="ml-10 text-gray">分钟</span>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="handleSave('security')">保存设置</el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>

        <el-tab-pane label="业务规则" name="business">
          <el-form ref="businessFormRef" :model="businessForm" label-width="160px" class="mt-20">
            <el-form-item label="默认最早入住时间">
              <el-time-select
                v-model="businessForm.defaultCheckInTime"
                start="08:00"
                step="00:30"
                end="20:00"
                placeholder="选择时间"
              />
            </el-form-item>
            <el-form-item label="默认最晚退宿时间">
              <el-time-select
                v-model="businessForm.defaultCheckOutTime"
                start="08:00"
                step="00:30"
                end="20:00"
                placeholder="选择时间"
              />
            </el-form-item>
            <el-form-item label="缴费逾期缓冲期">
              <el-input-number v-model="businessForm.paymentGracePeriod" :min="0" :max="30" />
              <span class="ml-10 text-gray">天</span>
            </el-form-item>
             <el-form-item label="自动取消未支付订单">
              <el-input-number v-model="businessForm.orderTimeout" :min="10" :max="1440" />
              <span class="ml-10 text-gray">分钟</span>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="handleSave('business')">保存设置</el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>
      </el-tabs>
    </vab-card>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'

defineOptions({
  name: 'SystemParameters',
})

const activeTab = ref('basic')

const basicForm = reactive({
  systemName: '浙大海宁国际校区学生公寓管理系统',
  copyright: 'Copyright © 2026 Zhejiang University. All Rights Reserved.',
  icp: '浙ICP备12345678号',
})

const securityForm = reactive({
  minPasswordLength: 8,
  passwordComplexity: ['number', 'lowercase'],
  loginRetryLimit: 5,
  sessionTimeout: 30,
})

const businessForm = reactive({
  defaultCheckInTime: '09:00',
  defaultCheckOutTime: '12:00',
  paymentGracePeriod: 3,
  orderTimeout: 30,
})

const handleSave = (type: string) => {
  // Mock save
  setTimeout(() => {
    ElMessage.success('设置保存成功')
  }, 500)
}
</script>

<style scoped>
.mt-20 {
  margin-top: 20px;
}
.ml-10 {
  margin-left: 10px;
}
.text-gray {
  color: #909399;
  font-size: 13px;
}
</style>
