﻿<template>
  <div class="space-y-6">
    <!-- 页面标题 -->
    <div>
      <h1 class="text-2xl font-bold text-gray-900">系统设置</h1>
      <p class="text-gray-600 mt-1">配置系统参数和功能选项</p>
    </div>

    <!-- 设置选项卡 -->
    <div class="bg-white rounded-lg shadow-sm border border-gray-200">
      <nav class="flex border-b border-gray-200">
        <button
          v-for="tab in tabs"
          :key="tab.key"
          @click="activeTab = tab.key"
          :class="[
            'px-6 py-4 text-sm font-medium border-b-2 transition-colors',
            activeTab === tab.key
              ? 'border-blue-500 text-blue-600'
              : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
          ]"
        >
          {{ tab.name }}
        </button>
      </nav>

      <div class="p-6">
        <!-- 基础设置 -->
        <div v-if="activeTab === 'basic'" class="space-y-6">
          <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div>
              <label class="block text-sm font-medium text-gray-700 mb-2">网站名称</label>
              <input
                v-model="settings.siteName"
                type="text"
                class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
              />
            </div>
            <div>
              <label class="block text-sm font-medium text-gray-700 mb-2">网站标语</label>
              <input
                v-model="settings.siteSlogan"
                type="text"
                class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
              />
            </div>
            <div class="md:col-span-2">
              <label class="block text-sm font-medium text-gray-700 mb-2">网站描述</label>
              <textarea
                v-model="settings.siteDescription"
                rows="3"
                class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
              ></textarea>
            </div>
            <div>
              <label class="block text-sm font-medium text-gray-700 mb-2">联系邮箱</label>
              <input
                v-model="settings.contactEmail"
                type="email"
                class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
              />
            </div>
            <div>
              <label class="block text-sm font-medium text-gray-700 mb-2">备案号</label>
              <input
                v-model="settings.icp"
                type="text"
                class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
              />
            </div>
          </div>
        </div>

        <!-- 安全设置 -->
        <div v-if="activeTab === 'security'" class="space-y-6">
          <div class="space-y-4">
            <div class="flex items-center justify-between p-4 bg-gray-50 rounded-lg">
              <div>
                <h4 class="text-sm font-medium text-gray-900">启用两步验证</h4>
                <p class="text-sm text-gray-500">为管理员账户启用两步验证以提高安全性</p>
              </div>
              <label class="relative inline-flex items-center cursor-pointer">
                <input
                  v-model="settings.twoFactorAuth"
                  type="checkbox"
                  class="sr-only peer"
                />
                <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"></div>
              </label>
            </div>

            <div class="flex items-center justify-between p-4 bg-gray-50 rounded-lg">
              <div>
                <h4 class="text-sm font-medium text-gray-900">登录验证码</h4>
                <p class="text-sm text-gray-500">登录时需要输入图形验证码</p>
              </div>
              <label class="relative inline-flex items-center cursor-pointer">
                <input
                  v-model="settings.loginCaptcha"
                  type="checkbox"
                  class="sr-only peer"
                />
                <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"></div>
              </label>
            </div>

            <div>
              <label class="block text-sm font-medium text-gray-700 mb-2">密码最小长度</label>
              <select
                v-model="settings.minPasswordLength"
                class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
              >
                <option value="6">6位</option>
                <option value="8">8位</option>
                <option value="10">10位</option>
                <option value="12">12位</option>
              </select>
            </div>
          </div>
        </div>

        <!-- 邮件设置 -->
        <div v-if="activeTab === 'email'" class="space-y-6">
          <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div>
              <label class="block text-sm font-medium text-gray-700 mb-2">SMTP服务器</label>
              <input
                v-model="settings.smtpHost"
                type="text"
                placeholder="smtp.example.com"
                class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
              />
            </div>
            <div>
              <label class="block text-sm font-medium text-gray-700 mb-2">SMTP端口</label>
              <input
                v-model="settings.smtpPort"
                type="number"
                placeholder="587"
                class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
              />
            </div>
            <div>
              <label class="block text-sm font-medium text-gray-700 mb-2">发件人邮箱</label>
              <input
                v-model="settings.fromEmail"
                type="email"
                placeholder="noreply@example.com"
                class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
              />
            </div>
            <div>
              <label class="block text-sm font-medium text-gray-700 mb-2">发件人名称</label>
              <input
                v-model="settings.fromName"
                type="text"
                placeholder="系统管理员"
                class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
              />
            </div>
            <div>
              <label class="block text-sm font-medium text-gray-700 mb-2">用户名</label>
              <input
                v-model="settings.smtpUsername"
                type="text"
                class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
              />
            </div>
            <div>
              <label class="block text-sm font-medium text-gray-700 mb-2">密码</label>
              <input
                v-model="settings.smtpPassword"
                type="password"
                class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
              />
            </div>
          </div>
        </div>

        <!-- 存储设置 -->
        <div v-if="activeTab === 'storage'" class="space-y-6">
          <div>
            <label class="block text-sm font-medium text-gray-700 mb-2">存储类型</label>
            <select
              v-model="settings.storageType"
              class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
            >
              <option value="local">本地存储</option>
              <option value="oss">阿里云OSS</option>
              <option value="cos">腾讯云COS</option>
              <option value="qiniu">七牛云</option>
            </select>
          </div>

          <div v-if="settings.storageType !== 'local'" class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div>
              <label class="block text-sm font-medium text-gray-700 mb-2">Access Key</label>
              <input
                v-model="settings.accessKey"
                type="text"
                class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
              />
            </div>
            <div>
              <label class="block text-sm font-medium text-gray-700 mb-2">Secret Key</label>
              <input
                v-model="settings.secretKey"
                type="password"
                class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
              />
            </div>
            <div>
              <label class="block text-sm font-medium text-gray-700 mb-2">存储桶名称</label>
              <input
                v-model="settings.bucket"
                type="text"
                class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
              />
            </div>
            <div>
              <label class="block text-sm font-medium text-gray-700 mb-2">访问域名</label>
              <input
                v-model="settings.domain"
                type="text"
                placeholder="https://example.com"
                class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
              />
            </div>
          </div>

          <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div>
              <label class="block text-sm font-medium text-gray-700 mb-2">最大文件大小（MB）</label>
              <input
                v-model="settings.maxFileSize"
                type="number"
                min="1"
                max="100"
                class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
              />
            </div>
            <div>
              <label class="block text-sm font-medium text-gray-700 mb-2">允许的文件类型</label>
              <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mt-2">
                <label v-for="type in fileTypes" :key="type.value" class="flex items-center">
                  <input
                    v-model="settings.allowedFileTypes"
                    :value="type.value"
                    type="checkbox"
                    class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"
                  />
                  <span class="ml-2 text-sm text-gray-700">{{ type.label }}</span>
                </label>
              </div>
            </div>
          </div>
        </div>

        <!-- 系统信息 -->
        <div v-if="activeTab === 'system'" class="space-y-6">
          <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
            <div class="bg-gray-50 p-4 rounded-lg">
              <h4 class="text-sm font-medium text-gray-900 mb-2">系统版本</h4>
              <p class="text-lg font-semibold text-blue-600">v1.0.0</p>
            </div>
            <div class="bg-gray-50 p-4 rounded-lg">
              <h4 class="text-sm font-medium text-gray-900 mb-2">数据库大小</h4>
              <p class="text-lg font-semibold text-purple-600">45.2 MB</p>
            </div>
            <div class="bg-gray-50 p-4 rounded-lg">
              <h4 class="text-sm font-medium text-gray-900 mb-2">存储空间</h4>
              <p class="text-lg font-semibold text-green-600">2.1 GB</p>
            </div>
          </div>

          <div class="bg-yellow-50 border border-yellow-200 rounded-lg p-4">
            <div class="flex">
              <div class="flex-shrink-0">
                <WarningIcon class="h-5 w-5 text-yellow-400" />
              </div>
              <div class="ml-3">
                <h3 class="text-sm font-medium text-yellow-800">系统维护建议</h3>
                <div class="mt-2 text-sm text-yellow-700">
                  <p>建议定期清理系统缓存和日志文件以保持系统性能。</p>
                </div>
                <div class="mt-4 flex space-x-3">
                  <button
                    @click="clearCache"
                    class="bg-yellow-100 hover:bg-yellow-200 text-yellow-800 px-3 py-1 rounded text-sm"
                  >
                    清理缓存
                  </button>
                  <button
                    @click="clearLogs"
                    class="bg-yellow-100 hover:bg-yellow-200 text-yellow-800 px-3 py-1 rounded text-sm"
                  >
                    清理日志
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 保存按钮 -->
        <div class="flex justify-end pt-6 border-t border-gray-200">
          <button
            @click="saveSettings"
            class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-2 rounded-lg"
          >
            保存设置
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

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

// 图标组件
const WarningIcon = {
  template: `<svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L4.082 16.5c-.77.833.192 2.5 1.732 2.5z"></path></svg>`
}

// 响应式数据
const activeTab = ref('basic')

const tabs = [
  { key: 'basic', name: '基础设置' },
  { key: 'security', name: '安全设置' },
  { key: 'email', name: '邮件设置' },
  { key: 'storage', name: '存储设置' },
  { key: 'system', name: '系统信息' }
]

const settings = ref({
  // 基础设置
  siteName: 'CMS管理系统',
  siteSlogan: '高效、安全、易用的内容管理系统',
  siteDescription: '这是一个基于Vue3和TailwindCSS构建的现代化内容管理系统，提供完整的文章管理、用户管理和系统配置功能。',
  contactEmail: 'admin@example.com',
  icp: '京ICP备12345678号',

  // 安全设置
  twoFactorAuth: false,
  loginCaptcha: true,
  minPasswordLength: '8',

  // 邮件设置
  smtpHost: '',
  smtpPort: 587,
  fromEmail: 'noreply@example.com',
  fromName: '系统管理员',
  smtpUsername: '',
  smtpPassword: '',

  // 存储设置
  storageType: 'local',
  accessKey: '',
  secretKey: '',
  bucket: '',
  domain: '',
  maxFileSize: 10,
  allowedFileTypes: ['jpg', 'png', 'gif', 'pdf', 'doc']
})

const fileTypes = [
  { value: 'jpg', label: 'JPG图片' },
  { value: 'png', label: 'PNG图片' },
  { value: 'gif', label: 'GIF图片' },
  { value: 'pdf', label: 'PDF文档' },
  { value: 'doc', label: 'Word文档' },
  { value: 'xls', label: 'Excel表格' },
  { value: 'zip', label: 'ZIP压缩包' },
  { value: 'mp4', label: 'MP4视频' }
]

// 保存设置
const saveSettings = () => {
  console.log('保存设置:', settings.value)
  // 这里应该调用API保存设置
  alert('设置保存成功！')
}

// 清理缓存
const clearCache = () => {
  if (confirm('确定要清理系统缓存吗？')) {
    console.log('清理缓存')
    // 这里应该调用API清理缓存
    alert('缓存清理完成！')
  }
}

// 清理日志
const clearLogs = () => {
  if (confirm('确定要清理系统日志吗？此操作不可恢复！')) {
    console.log('清理日志')
    // 这里应该调用API清理日志
    alert('日志清理完成！')
  }
}
</script>

<style lang='scss' scoped>
/* 开关样式 */
.peer:checked ~ .peer-checked\:bg-blue-600 {
  background-color: #2563eb;
}

/* 响应式优化 */
@media (max-width: 1024px) {
  .grid-cols-1.md\:grid-cols-2 {
    grid-template-columns: 1fr;
  }

  .grid-cols-1.md\:grid-cols-3 {
    grid-template-columns: 1fr;
  }
}

/* 标签页导航样式 */
nav ul li button {
  transition: all 0.2s ease-in-out;
}
</style>
