<template>
  <view class="admin-page">
    <view class="admin-sections">
      <view class="admin-card settings-card">
        <!-- 顶部导航标签 -->
        <view class="tabs-container">
          <scroll-view class="tabs-scroll" scroll-x="true" show-scrollbar="false" :enable-flex="true">
            <view class="tabs-bar">
              <view 
                v-for="(tab, index) in tabs" 
                :key="index"
                class="tab-item"
                :class="{ active: currentTab === index }"
                @click="currentTab = index"
              >
                <text class="tab-text">{{ tab.name }}</text>
                <view class="tab-line" v-if="currentTab === index"></view>
              </view>
            </view>
          </scroll-view>
        </view>

        <!-- 表单区域 -->
        <view class="form-container">
          <view v-if="isLoading" class="loading-state">
            <text>加载配置中...</text>
          </view>
          
          <view v-else class="form-scroll-wrap">
            <!-- 1. 基础配置 -->
            <view v-if="currentTab === 0" class="form-content">
              <view class="form-item">
                <view class="form-label">站点开启:</view>
                <view class="form-right">
                  <radio-group class="radio-group" @change="formData.site_open = parseInt(($event.detail.value as string))">
                    <label class="radio-label"><radio value="1" :checked="formData.site_open == 1" color="#1890ff" />开启</label>
                    <label class="radio-label"><radio value="0" :checked="formData.site_open == 0" color="#1890ff" />关闭</label>
                  </radio-group>
                  <view class="form-tip">站点开启/关闭（用于升级等临时关闭）</view>
                </view>
              </view>
              <view class="form-item">
                <view class="form-label">网站名称:</view>
                <view class="form-right">
                  <input class="form-input" v-model="formData.site_name" placeholder="请输入网站名称" />
                </view>
              </view>
              <view class="form-item">
                <view class="form-label">网站地址:</view>
                <view class="form-right">
                  <input class="form-input" v-model="formData.site_url" placeholder="请输入网站地址" />
                </view>
              </view>
              <view class="form-item">
                <view class="form-label">联系电话:</view>
                <view class="form-right">
                  <input class="form-input" v-model="formData.contact_phone" placeholder="请输入联系电话" />
                </view>
              </view>
            </view>

            <!-- 2. 分享配置 -->
            <view v-else-if="currentTab === 1" class="form-content">
              <view class="form-item">
                <view class="form-label">分享标题:</view>
                <view class="form-right">
                  <input class="form-input" v-model="formData.share_title" />
                </view>
              </view>
              <view class="form-item">
                <view class="form-label">分享简介:</view>
                <view class="form-right">
                  <textarea class="form-textarea" v-model="formData.share_desc" />
                </view>
              </view>
            </view>

            <!-- 3. LOGO配置 -->
            <view v-else-if="currentTab === 2" class="form-content">
              <view class="form-item">
                <view class="form-label">后台登录LOGO:</view>
                <view class="form-right">
                  <view class="upload-placeholder" @click="handleUpload('login_logo')">
                    <image v-if="formData.login_logo" :src="formData.login_logo" mode="aspectFit" class="logo-preview" />
                    <text v-else>上传图片</text>
                  </view>
                </view>
              </view>
            </view>

            <!-- 9. WAF配置 -->
            <view v-else-if="currentTab === 8" class="form-content">
              <view class="form-item">
                <view class="form-label">WAF类型:</view>
                <view class="form-right">
                  <radio-group class="radio-group" @change="formData.waf_type = parseInt(($event.detail.value as string))">
                    <label class="radio-label"><radio value="0" :checked="formData.waf_type == 0" color="#1890ff" />关闭</label>
                    <label class="radio-label"><radio value="1" :checked="formData.waf_type == 1" color="#1890ff" />拦截</label>
                    <label class="radio-label"><radio value="2" :checked="formData.waf_type == 2" color="#1890ff" />过滤</label>
                  </radio-group>
                </view>
              </view>
              <view class="form-item">
                <view class="form-label">WAF规则:</view>
                <view class="form-right">
                  <textarea class="form-textarea code-bg" v-model="formData.waf_config" />
                </view>
              </view>
            </view>

            <!-- 提交按钮 -->
            <view class="submit-section">
              <view class="form-label"></view>
              <view class="form-right">
                <button class="btn-submit" :disabled="isSaving" @click="handleSubmit">
                  <text class="btn-txt">{{ isSaving ? '保存中...' : '提交' }}</text>
                </button>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="uts">
import { ref, reactive, onMounted } from "vue"
import { getSystemConfig, saveSystemConfig } from "@/services/admin/systemConfigService.uts"

const currentTab = ref(0)
const tabs = [
  { name: "基础配置" }, { name: "分享配置" }, { name: "LOGO配置" },
  { name: "自定义JS" }, { name: "地图配置" }, { name: "备案配置" },
  { name: "模块配置" }, { name: "远程登录" }, { name: "WAF配置" }
]

const isLoading = ref(false)
const isSaving = ref(false)

const formData = reactive({
  site_open: 1,
  site_name: "",
  site_url: "",
  msg_queue: 0,
  contact_phone: "",
  auth_key: "",
  share_img: "",
  share_title: "",
  share_desc: "",
  login_logo: "",
  small_logo: "",
  big_logo: "",
  mobile_js: "",
  admin_js: "",
  pc_js: "",
  tencent_map_key: "",
  filing_no: "",
  icp_link: "",
  module_config: [] as string[],
  remote_login_url: "",
  waf_type: 0,
  waf_config: ""
})

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

async function loadConfig() {
  isLoading.value = true
  try {
    const res = await getSystemConfig('system_settings')
    if (res != null) {
      Object.assign(formData, res as any)
    }
  } finally {
    isLoading.value = false
  }
}

async function handleSubmit() {
  isSaving.value = true
  try {
    const ok = await saveSystemConfig('system_settings', formData as UTSJSONObject, '系统全局配置项')
    if (ok) {
      uni.showToast({ title: "保存成功", icon: "success" })
    } else {
      uni.showToast({ title: "保存失败", icon: "none" })
    }
  } finally {
    isSaving.value = false
  }
}

const handleUpload = (field: string) => {
  uni.showToast({ title: "上传功能开发中: " + field, icon: "none" })
}
</script>

<style scoped>
.admin-page { padding: 24px; background-color: #f0f2f5; min-height: 100vh; }
.settings-card { background: #fff; border-radius: 4px; box-shadow: 0 1px 4px rgba(0,21,41,0.08); }

.tabs-container { margin-bottom: 30px; border-bottom: 1px solid #e8eaec; }
.tabs-scroll { width: 100%; white-space: nowrap; }
.tabs-bar { display: inline-flex; flex-direction: row; }
.tab-item { padding: 12px 24px; cursor: pointer; position: relative; }
.tab-text { font-size: 14px; color: #515a6e; }
.tab-item.active .tab-text { color: #1890ff; font-weight: bold; }
.tab-line { position: absolute; bottom: 0; left: 0; right: 0; height: 2px; background-color: #1890ff; }

.form-container { padding: 0 20px 40px; }
.loading-state { padding: 60px; text-align: center; color: #999; }

.form-item { display: flex; flex-direction: row; margin-bottom: 25px; align-items: flex-start; }
.form-label { width: 140px; font-size: 14px; color: #303133; text-align: right; padding-right: 20px; padding-top: 8px; flex-shrink: 0; }
.form-right { flex: 1; display: flex; flex-direction: column; }

.form-input { border: 1px solid #dcdfe6; width: 100%; max-width: 450px; height: 32px; padding: 0 12px; border-radius: 4px; font-size: 14px; }
.form-textarea { border: 1px solid #dcdfe6; width: 100%; max-width: 550px; height: 100px; padding: 8px 12px; border-radius: 4px; font-size: 14px; }
.code-bg { background-color: #f5f7fa; }
.form-tip { font-size: 12px; color: #c0c4cc; margin-top: 8px; }

.radio-group { display: flex; flex-direction: row; gap: 20px; height: 32px; align-items: center; }
.radio-label { display: flex; flex-direction: row; align-items: center; font-size: 14px; color: #606266; }

.upload-placeholder { width: 80px; height: 80px; border: 1px dashed #dcdfe6; border-radius: 4px; display: flex; align-items: center; justify-content: center; font-size: 12px; color: #909399; cursor: pointer; }
.logo-preview { width: 100%; height: 100%; }

.submit-section { display: flex; flex-direction: row; margin-top: 20px; }
.btn-submit { background-color: #1890ff; border: none; padding: 0 24px; height: 36px; border-radius: 4px; cursor: pointer; }
.btn-txt { color: #fff; font-size: 14px; }
.btn-submit[disabled] { opacity: 0.6; }
</style>
