<template>
  <div class="container-box">
    <div class="header-bar">
      <h2>平台设置</h2>
    </div>

    <el-divider></el-divider>

    <div class="settings-container">
      <el-tabs v-model="activeTab" class="settings-tabs">
        <!-- 验证开关 -->
        <el-tab-pane label="验证开关" name="platform">
          <platformSettings
            ref="platformSettingsRef"
            v-if="activeTab === 'platform'"
          />
        </el-tab-pane>

        <!-- 存储配置 -->
        <el-tab-pane label="存储配置" name="storage">
          <storageSettings
            ref="storageSettingsRef"
            v-if="activeTab === 'storage'"
          />
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import platformSettings from "./components/platformSettings.vue";
import storageSettings from "./components/storageSettings.vue";

const activeTab = ref("platform");
</script>

<style lang="less" scoped>
.container-box {
  padding: 20px;
  border-radius: 4px;
}

.header-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--el-text-color-primary);

  h2 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
  }
}

.settings-container {
  margin-top: 20px;
}

.settings-tabs {
  :deep(.el-tabs__header) {
    margin-bottom: 20px;
  }

  :deep(.el-tabs__nav-wrap::after) {
    height: 1px;
  }
}
</style>
