<template>
  <div class="system-config">
    <el-form :model="configForm" label-width="150px" class="config-form">
      <el-divider content-position="left">基本设置</el-divider>
      
      <el-form-item label="系统名称">
        <el-input v-model="configForm.systemName" />
      </el-form-item>

      <el-form-item label="系统Logo">
        <el-upload
          class="logo-uploader"
          action="#"
          :show-file-list="false"
          :before-upload="beforeLogoUpload"
        >
          <img v-if="configForm.logo" :src="configForm.logo" class="logo-preview" />
          <el-icon v-else class="logo-uploader-icon">+</el-icon>
        </el-upload>
      </el-form-item>

      <el-form-item label="版权信息">
        <el-input v-model="configForm.copyright" />
      </el-form-item>

      <el-divider content-position="left">安全设置</el-divider>

      <el-form-item label="启用验证码">
        <el-switch v-model="configForm.enableCaptcha" />
      </el-form-item>

      <el-form-item label="密码最小长度">
        <el-input-number v-model="configForm.minPasswordLength" :min="6" :max="20" />
      </el-form-item>

      <el-form-item label="会话超时(分钟)">
        <el-input-number v-model="configForm.sessionTimeout" :min="5" :max="1440" />
      </el-form-item>

      <el-form-item label="登录失败锁定">
        <el-switch v-model="configForm.enableLoginLock" />
      </el-form-item>

      <el-form-item label="锁定阈值(次)" v-if="configForm.enableLoginLock">
        <el-input-number v-model="configForm.loginLockThreshold" :min="3" :max="10" />
      </el-form-item>

      <el-divider content-position="left">功能设置</el-divider>

      <el-form-item label="启用用户注册">
        <el-switch v-model="configForm.enableRegister" />
      </el-form-item>

      <el-form-item label="启用评论功能">
        <el-switch v-model="configForm.enableComment" />
      </el-form-item>

      <el-form-item label="启用文件上传">
        <el-switch v-model="configForm.enableFileUpload" />
      </el-form-item>

      <el-form-item label="文件上传大小限制(MB)">
        <el-input-number v-model="configForm.maxFileSize" :min="1" :max="100" />
      </el-form-item>

      <el-divider content-position="left">邮件设置</el-divider>

      <el-form-item label="启用邮件通知">
        <el-switch v-model="configForm.enableEmail" />
      </el-form-item>

      <el-form-item label="SMTP服务器" v-if="configForm.enableEmail">
        <el-input v-model="configForm.smtpHost" />
      </el-form-item>

      <el-form-item label="SMTP端口" v-if="configForm.enableEmail">
        <el-input-number v-model="configForm.smtpPort" :min="1" :max="65535" />
      </el-form-item>

      <el-form-item label="发件人邮箱" v-if="configForm.enableEmail">
        <el-input v-model="configForm.senderEmail" />
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="handleSave">保存配置</el-button>
        <el-button @click="handleReset">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { ElForm, ElFormItem, ElInput, ElInputNumber, ElSwitch, ElButton, ElDivider, ElUpload, ElIcon, ElMessage } from 'element-plus';

const configForm = ref({
  systemName: '红色思政学习平台',
  logo: '',
  copyright: 'Copyright ©红色思政智能体平台',
  enableCaptcha: false,
  minPasswordLength: 6,
  sessionTimeout: 30,
  enableLoginLock: true,
  loginLockThreshold: 5,
  enableRegister: true,
  enableComment: true,
  enableFileUpload: true,
  maxFileSize: 10,
  enableEmail: false,
  smtpHost: '',
  smtpPort: 587,
  senderEmail: ''
});

onMounted(() => {
  loadConfig();
});

function loadConfig() {
  // TODO: 加载系统配置
}

function beforeLogoUpload(file: File) {
  const isImage = file.type.startsWith('image/');
  const isLt2M = file.size / 1024 / 1024 < 2;

  if (!isImage) {
    ElMessage.error('只能上传图片文件');
    return false;
  }
  if (!isLt2M) {
    ElMessage.error('图片大小不能超过 2MB');
    return false;
  }
  return true;
}

function handleSave() {
  // TODO: 保存配置
  ElMessage.success('配置保存成功');
}

function handleReset() {
  // TODO: 重置配置
  loadConfig();
}
</script>

<style lang="scss" scoped>
.system-config {
  padding: 20px;
  max-width: 800px;
}

.config-form {
  padding: 20px 0;
}

.logo-uploader {
  :deep(.el-upload) {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: all 0.3s;
    
    &:hover {
      border-color: #C62828;
    }
  }
}

.logo-preview {
  width: 178px;
  height: 178px;
  display: block;
  object-fit: contain;
}

.logo-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
  line-height: 178px;
}
</style>

