<template>
  <div class="settings-container">
    <!-- 页面标题 -->
    <div class="page-header">
      <h2>系统设置</h2>
      <p>管理系统配置和参数</p>
    </div>

    <!-- 设置内容 -->
    <div class="settings-content">
      <div class="settings-card">
        <h3>基本设置</h3>
        <div class="setting-item">
          <label>系统名称:</label>
          <input v-model="settings.systemName" class="setting-input" placeholder="请输入系统名称" />
        </div>
        <div class="setting-item">
          <label>系统版本:</label>
          <input v-model="settings.systemVersion" class="setting-input" placeholder="请输入系统版本" />
        </div>
        <div class="setting-item">
          <label>系统描述:</label>
          <textarea v-model="settings.systemDescription" class="setting-textarea" placeholder="请输入系统描述"></textarea>
        </div>
      </div>

      <div class="settings-card">
        <h3>业务设置</h3>
        <div class="setting-item">
          <label>默认分页大小:</label>
          <select v-model="settings.defaultPageSize" class="setting-select">
            <option value="10">10条/页</option>
            <option value="20">20条/页</option>
            <option value="50">50条/页</option>
            <option value="100">100条/页</option>
          </select>
        </div>
        <div class="setting-item">
          <label>数据保留天数:</label>
          <input v-model="settings.dataRetentionDays" type="number" class="setting-input" placeholder="请输入数据保留天数" />
        </div>
        <div class="setting-item">
          <label>自动备份:</label>
          <label class="checkbox-label">
            <input v-model="settings.autoBackup" type="checkbox" />
            <span>启用自动备份</span>
          </label>
        </div>
      </div>

      <div class="settings-card">
        <h3>安全设置</h3>
        <div class="setting-item">
          <label>会话超时时间(分钟):</label>
          <input v-model="settings.sessionTimeout" type="number" class="setting-input" placeholder="请输入会话超时时间" />
        </div>
        <div class="setting-item">
          <label>密码复杂度:</label>
          <select v-model="settings.passwordComplexity" class="setting-select">
            <option value="low">低</option>
            <option value="medium">中</option>
            <option value="high">高</option>
          </select>
        </div>
        <div class="setting-item">
          <label>登录失败锁定:</label>
          <label class="checkbox-label">
            <input v-model="settings.loginLock" type="checkbox" />
            <span>启用登录失败锁定</span>
          </label>
        </div>
      </div>

      <div class="settings-card">
        <h3>通知设置</h3>
        <div class="setting-item">
          <label>邮件通知:</label>
          <label class="checkbox-label">
            <input v-model="settings.emailNotification" type="checkbox" />
            <span>启用邮件通知</span>
          </label>
        </div>
        <div class="setting-item">
          <label>短信通知:</label>
          <label class="checkbox-label">
            <input v-model="settings.smsNotification" type="checkbox" />
            <span>启用短信通知</span>
          </label>
        </div>
        <div class="setting-item">
          <label>系统消息:</label>
          <label class="checkbox-label">
            <input v-model="settings.systemMessage" type="checkbox" />
            <span>启用系统消息</span>
          </label>
        </div>
      </div>

      <!-- 操作按钮 -->
      <div class="settings-actions">
        <button @click="handleSave" class="action-btn primary">💾 保存设置</button>
        <button @click="handleReset" class="action-btn secondary">🔄 重置</button>
        <button @click="handleTest" class="action-btn info">🧪 测试连接</button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'

// 设置数据
const settings = reactive({
  systemName: 'Apple ERP系统',
  systemVersion: '1.0.0',
  systemDescription: '企业资源规划管理系统',
  defaultPageSize: 20,
  dataRetentionDays: 365,
  autoBackup: true,
  sessionTimeout: 30,
  passwordComplexity: 'medium',
  loginLock: true,
  emailNotification: true,
  smsNotification: false,
  systemMessage: true
})

// 原始设置（用于重置）
const originalSettings = ref({})

// 保存设置
const handleSave = () => {
  // 这里可以调用后端API保存设置
  console.log('保存设置:', settings)
  showMessage('设置保存成功', 'success')
}

// 重置设置
const handleReset = () => {
  Object.assign(settings, originalSettings.value)
  showMessage('设置已重置', 'warning')
}

// 测试连接
const handleTest = () => {
  showMessage('连接测试成功', 'success')
}

// 显示消息
const showMessage = (message: string, type: 'success' | 'warning' | 'error') => {
  // 这里可以集成Element Plus的消息组件
  console.log(`${type}: ${message}`)
}

// 组件挂载时加载设置
onMounted(() => {
  // 这里可以调用后端API加载设置
  originalSettings.value = { ...settings }
})
</script>

<style scoped>
.settings-container {
  padding: 20px;
  background-color: #f5f5f5;
  min-height: 100vh;
}

.page-header {
  margin-bottom: 30px;
  text-align: center;
}

.page-header h2 {
  color: #333;
  margin-bottom: 10px;
  font-size: 28px;
}

.page-header p {
  color: #666;
  font-size: 16px;
}

.settings-content {
  max-width: 1200px;
  margin: 0 auto;
}

.settings-card {
  background: white;
  border-radius: 8px;
  padding: 24px;
  margin-bottom: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.settings-card h3 {
  color: #333;
  margin-bottom: 20px;
  font-size: 18px;
  border-bottom: 2px solid #e9ecef;
  padding-bottom: 10px;
}

.setting-item {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  gap: 16px;
}

.setting-item label {
  min-width: 150px;
  color: #333;
  font-weight: 500;
}

.setting-input,
.setting-select,
.setting-textarea {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
  transition: border-color 0.3s;
}

.setting-input:focus,
.setting-select:focus,
.setting-textarea:focus {
  outline: none;
  border-color: #007bff;
  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
}

.setting-textarea {
  min-height: 80px;
  resize: vertical;
}

.checkbox-label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.checkbox-label input[type="checkbox"] {
  width: 16px;
  height: 16px;
}

.settings-actions {
  display: flex;
  gap: 16px;
  justify-content: center;
  margin-top: 30px;
}

.action-btn {
  padding: 12px 24px;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s;
  min-width: 120px;
}

.action-btn.primary {
  background-color: #007bff;
  color: white;
}

.action-btn.primary:hover {
  background-color: #0056b3;
}

.action-btn.secondary {
  background-color: #6c757d;
  color: white;
}

.action-btn.secondary:hover {
  background-color: #545b62;
}

.action-btn.info {
  background-color: #17a2b8;
  color: white;
}

.action-btn.info:hover {
  background-color: #138496;
}

@media (max-width: 768px) {
  .setting-item {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .setting-item label {
    min-width: auto;
    margin-bottom: 8px;
  }
  
  .settings-actions {
    flex-direction: column;
    align-items: center;
  }
}
</style>