<template>
  <div class="min-h-screen bg-gray-100 dark:bg-gray-900">
    <!-- 顶部导航 -->
    <div class="bg-white dark:bg-gray-800 shadow">
      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
        <div class="flex justify-between items-center">
          <h1 class="text-2xl font-bold text-gray-900 dark:text-white">系统设置</h1>
          <div class="flex space-x-4">
            <button @click="saveSettings" class="bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700">
              保存设置
            </button>
            <button @click="resetSettings" class="bg-gray-600 text-white px-4 py-2 rounded-md hover:bg-gray-700">
              重置设置
            </button>
          </div>
        </div>
      </div>
    </div>

    <!-- 主要内容区域 -->
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
      <!-- 设置卡片 -->
      <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
        <!-- 基本设置 -->
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
          <h2 class="text-lg font-medium text-gray-900 dark:text-white mb-4">基本设置</h2>
          <div class="space-y-4">
            <div>
              <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">系统名称</label>
              <input type="text" v-model="settings.systemName" class="w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white">
            </div>
            <div>
              <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">系统版本</label>
              <input type="text" v-model="settings.systemVersion" class="w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white">
            </div>
            <div>
              <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">系统语言</label>
              <select v-model="settings.language" class="w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white">
                <option value="zh-CN">简体中文</option>
                <option value="en-US">English</option>
              </select>
            </div>
            <div>
              <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">时区</label>
              <select v-model="settings.timezone" class="w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white">
                <option value="Asia/Shanghai">Asia/Shanghai (GMT+8)</option>
                <option value="America/New_York">America/New_York (GMT-5)</option>
                <option value="Europe/London">Europe/London (GMT+0)</option>
              </select>
            </div>
          </div>
        </div>

        <!-- 主题设置 -->
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
          <h2 class="text-lg font-medium text-gray-900 dark:text-white mb-4">主题设置</h2>
          <div class="space-y-4">
            <div>
              <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">主题模式</label>
              <select v-model="settings.theme" class="w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white">
                <option value="light">浅色主题</option>
                <option value="dark">深色主题</option>
                <option value="system">跟随系统</option>
              </select>
            </div>
            <div>
              <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">主色调</label>
              <div class="flex space-x-2">
                <button v-for="color in colors" :key="color.value"
                  @click="settings.primaryColor = color.value"
                  :class="[
                    'w-8 h-8 rounded-full',
                    color.class,
                    settings.primaryColor === color.value ? 'ring-2 ring-offset-2 ring-blue-500' : ''
                  ]"
                  :title="color.name"
                ></button>
              </div>
            </div>
            <div>
              <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">字体大小</label>
              <select v-model="settings.fontSize" class="w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white">
                <option value="small">小</option>
                <option value="medium">中</option>
                <option value="large">大</option>
              </select>
            </div>
          </div>
        </div>

        <!-- 安全设置 -->
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
          <h2 class="text-lg font-medium text-gray-900 dark:text-white mb-4">安全设置</h2>
          <div class="space-y-4">
            <div>
              <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">密码策略</label>
              <div class="space-y-2">
                <div class="flex items-center">
                  <input type="checkbox" v-model="settings.passwordPolicy.minLength" class="rounded border-gray-300 text-blue-600 shadow-sm focus:border-blue-500 focus:ring-blue-500 dark:bg-gray-700 dark:border-gray-600">
                  <label class="ml-2 text-sm text-gray-700 dark:text-gray-300">最小长度: 8位</label>
                </div>
                <div class="flex items-center">
                  <input type="checkbox" v-model="settings.passwordPolicy.requireNumber" class="rounded border-gray-300 text-blue-600 shadow-sm focus:border-blue-500 focus:ring-blue-500 dark:bg-gray-700 dark:border-gray-600">
                  <label class="ml-2 text-sm text-gray-700 dark:text-gray-300">必须包含数字</label>
                </div>
                <div class="flex items-center">
                  <input type="checkbox" v-model="settings.passwordPolicy.requireSpecial" class="rounded border-gray-300 text-blue-600 shadow-sm focus:border-blue-500 focus:ring-blue-500 dark:bg-gray-700 dark:border-gray-600">
                  <label class="ml-2 text-sm text-gray-700 dark:text-gray-300">必须包含特殊字符</label>
                </div>
              </div>
            </div>
            <div>
              <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">登录失败锁定</label>
              <div class="flex items-center">
                <input type="number" v-model="settings.loginLock.attempts" min="1" class="w-20 rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white">
                <span class="ml-2 text-sm text-gray-700 dark:text-gray-300">次失败后锁定</span>
                <input type="number" v-model="settings.loginLock.duration" min="1" class="w-20 ml-2 rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white">
                <span class="ml-2 text-sm text-gray-700 dark:text-gray-300">分钟</span>
              </div>
            </div>
            <div>
              <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">会话超时</label>
              <div class="flex items-center">
                <input type="number" v-model="settings.sessionTimeout" min="1" class="w-20 rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white">
                <span class="ml-2 text-sm text-gray-700 dark:text-gray-300">分钟</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'

// 系统设置
const settings = ref({
  systemName: '管理系统',
  systemVersion: '1.0.0',
  language: 'zh-CN',
  timezone: 'Asia/Shanghai',
  theme: 'light',
  primaryColor: 'blue',
  fontSize: 'medium',
  passwordPolicy: {
    minLength: true,
    requireNumber: true,
    requireSpecial: true
  },
  loginLock: {
    attempts: 5,
    duration: 30
  },
  sessionTimeout: 30
})

// 颜色选项
const colors = [
  { name: '蓝色', value: 'blue', class: 'bg-blue-500' },
  { name: '绿色', value: 'green', class: 'bg-green-500' },
  { name: '红色', value: 'red', class: 'bg-red-500' },
  { name: '紫色', value: 'purple', class: 'bg-purple-500' },
  { name: '黄色', value: 'yellow', class: 'bg-yellow-500' }
]

// 保存设置
const saveSettings = () => {
  // 实现保存设置的逻辑
  console.log('保存设置:', settings.value)
}

// 重置设置
const resetSettings = () => {
  if (confirm('确定要重置所有设置吗？')) {
    // 实现重置设置的逻辑
    console.log('重置设置')
  }
}
</script> 