<template>
  <div class="tenant-configs" v-loading="loading">
    <el-card shadow="hover">
      <template #header>
        <div class="card-header">
          <span>租户配置 - {{ tenantName }}</span>
          <div>
            <el-button @click="$router.back()">返回</el-button>
            <el-button type="primary" @click="handleSaveAll" :loading="saving">保存全部</el-button>
          </div>
        </div>
      </template>
      
      <el-tabs v-model="activeTab" type="border-card">
        <el-tab-pane 
          v-for="group in configGroups" 
          :key="group.group_name"
          :label="group.group_display_name"
          :name="group.group_name"
        >
          <el-form label-width="180px">
            <el-form-item 
              v-for="config in group.configs" 
              :key="config.config_key"
              :label="config.display_name || config.config_key"
            >
              <template v-if="config.is_secret">
                <el-input 
                  v-model="configValues[`${config.config_group}.${config.config_key}`]"
                  type="password"
                  show-password
                  :placeholder="config.description"
                  style="width: 400px;"
                />
              </template>
              <template v-else>
                <el-input 
                  v-model="configValues[`${config.config_group}.${config.config_key}`]"
                  :placeholder="config.description"
                  style="width: 400px;"
                />
              </template>
              <span class="config-desc" v-if="config.description">{{ config.description }}</span>
            </el-form-item>
          </el-form>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import { ElMessage } from 'element-plus'
import api from '@/api'

const route = useRoute()
const tenantId = route.params.id

const loading = ref(false)
const saving = ref(false)
const tenantName = ref('')
const activeTab = ref('database')
const configGroups = ref([])
const configValues = reactive({})

async function fetchConfigs() {
  loading.value = true
  try {
    // 获取租户信息
    const tenant = await api.tenants.get(tenantId)
    tenantName.value = tenant.name
    
    // 获取配置
    const groups = await api.configs.getTenantConfigs(tenantId)
    configGroups.value = groups
    
    // 填充配置值
    for (const group of groups) {
      for (const config of group.configs) {
        const key = `${config.config_group}.${config.config_key}`
        configValues[key] = config.config_value || ''
      }
    }
  } finally {
    loading.value = false
  }
}

async function handleSaveAll() {
  saving.value = true
  try {
    const configs = []
    
    for (const group of configGroups.value) {
      for (const config of group.configs) {
        const key = `${config.config_group}.${config.config_key}`
        const value = configValues[key]
        
        // 只保存有值的配置
        if (value) {
          configs.push({
            config_group: config.config_group,
            config_key: config.config_key,
            config_value: value
          })
        }
      }
    }
    
    await api.configs.batchUpdate(tenantId, { configs })
    ElMessage.success('配置保存成功')
    
    // 刷新缓存
    await api.configs.refreshCache(tenantId)
  } finally {
    saving.value = false
  }
}

onMounted(() => {
  fetchConfigs()
})
</script>

<style lang="scss" scoped>
.tenant-configs {
  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  .config-desc {
    font-size: 12px;
    color: #999;
    margin-left: 12px;
  }
}
</style>

