<template>
  <div class="tenant-features" v-loading="loading">
    <el-card shadow="hover">
      <template #header>
        <div class="card-header">
          <span>功能开关 - {{ tenantName }}</span>
          <el-button @click="$router.back()">返回</el-button>
        </div>
      </template>
      
      <div v-for="group in featureGroups" :key="group.group_name" class="feature-group">
        <h3>{{ group.group_display_name }}</h3>
        
        <el-table :data="group.features" style="width: 100%;">
          <el-table-column prop="feature_name" label="功能名称" width="200" />
          <el-table-column prop="description" label="说明" />
          <el-table-column label="状态" width="120">
            <template #default="{ row }">
              <el-switch 
                v-model="row.is_enabled"
                @change="handleToggle(row)"
              />
            </template>
          </el-table-column>
          <el-table-column label="操作" width="100">
            <template #default="{ row }">
              <el-button 
                type="primary" 
                link 
                @click="handleReset(row)"
                v-if="row.tenant_id"
              >
                重置
              </el-button>
              <span v-else class="default-label">默认</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-card>
  </div>
</template>

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

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

const loading = ref(false)
const tenantName = ref('')
const featureGroups = ref([])

async function fetchFeatures() {
  loading.value = true
  try {
    // 获取租户信息
    const tenant = await api.tenants.get(tenantId)
    tenantName.value = tenant.name
    
    // 获取功能开关
    const groups = await api.features.getTenantFeatures(tenantId)
    featureGroups.value = groups
  } finally {
    loading.value = false
  }
}

async function handleToggle(feature) {
  try {
    await api.features.updateFeature(tenantId, feature.feature_code, {
      is_enabled: feature.is_enabled
    })
    ElMessage.success(feature.is_enabled ? '功能已启用' : '功能已禁用')
  } catch (e) {
    // 回滚状态
    feature.is_enabled = !feature.is_enabled
  }
}

async function handleReset(feature) {
  await ElMessageBox.confirm('确定要重置为默认配置吗？', '提示', {
    type: 'warning'
  })
  
  try {
    await api.features.resetFeature(tenantId, feature.feature_code)
    ElMessage.success('已重置为默认配置')
    fetchFeatures()
  } catch (e) {
    // 错误已在拦截器处理
  }
}

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

<style lang="scss" scoped>
.tenant-features {
  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  .feature-group {
    margin-bottom: 30px;
    
    h3 {
      font-size: 16px;
      color: #333;
      margin-bottom: 16px;
      padding-bottom: 8px;
      border-bottom: 1px solid #eee;
    }
  }
  
  .default-label {
    color: #999;
    font-size: 12px;
  }
}
</style>

