<template>
  <div class="system-config-container">
    <div class="menu-tabs">
      <div 
        v-for="(item, index) in menuList" 
        :key="index"
        :class="['menu-item', { active: activeTab === item.key }]"
        @click="activeTab = item.key"
      >
        {{ item.label }}
      </div>
    </div>
    
    <div class="page-title">{{ activeTitle }}</div>

    <div class="content-container">
      <!-- 网站设置组件预留 -->
      <!-- <WebsiteConfig v-if="activeTab === 'website'" /> -->
      <div v-if="activeTab === 'website'" class="placeholder">{{ activeTitle }}页面开发中...</div>

      <!-- 平台配置组件预留 -->
      <!-- <PlatformConfig v-if="activeTab === 'platform'" /> -->
      <div v-if="activeTab === 'platform'" class="placeholder">{{ activeTitle }}页面开发中...</div>
      
      <!-- 文件存储配置组件引入 -->
      <OssConfig v-if="activeTab === 'storage'" />

      <!-- 短信配置组件引入 -->
      <SmsConfig v-if="activeTab === 'sms'" />

      <!-- 协议配置组件预留 -->
      <!-- <ProtocolConfig v-if="activeTab === 'protocol'" /> -->
      <div v-if="activeTab === 'protocol'" class="placeholder">{{ activeTitle }}页面开发中...</div>
    </div>
  </div>
</template>

<script setup name="SystemConfig" lang="ts">
import { ref, computed } from 'vue';
import SmsConfig from '@/views/systemConfig/sms/index.vue';
import OssConfig from '@/views/system/oss/config.vue';

const activeTab = ref('website');

const menuList = [
  { label: '网站设置', key: 'website' },
  { label: '平台配置', key: 'platform' },
  { label: '文件存储配置', key: 'storage' },
  { label: '短信配置', key: 'sms' },
  { label: '协议配置', key: 'protocol' }
];

const activeTitle = computed(() => {
  const find = menuList.find(item => item.key === activeTab.value);
  return find ? find.label : '';
});
</script>

<style scoped>
.system-config-container {
  padding: 20px;
  background-color: #fff;
  min-height: calc(100vh - 84px);
  border-radius: 4px;
}

.menu-tabs {
  display: flex;
  margin-bottom: 30px;
  border-bottom: 1px solid #e4e7ed;
}

.menu-item {
  padding: 12px 24px;
  font-size: 14px;
  color: #606266;
  cursor: pointer;
  background-color: transparent;
  border-top: 1px solid transparent;
  border-left: 1px solid transparent;
  border-right: 1px solid transparent;
  border-bottom: 2px solid transparent;
  border-radius: 4px 4px 0 0;
  margin-bottom: -1px;
  transition: all 0.3s;
}

.menu-item:hover {
  color: #409eff;
}

.menu-item.active {
  color: #409eff;
  border-top-color: #e4e7ed;
  border-left-color: #e4e7ed;
  border-right-color: #e4e7ed;
  border-bottom-color: #fff;
  background-color: #fff;
}

.page-title {
  font-size: 16px;
  font-weight: bold;
  color: #303133;
  margin-bottom: 20px;
}

.placeholder {
  padding: 40px;
  text-align: center;
  color: #909399;
  background-color: #f8f9fa;
  border-radius: 4px;
}

/* 如果SmsConfig组件自带了padding，这里可以通过深度选择器稍做调整以防多余内边距 */
:deep(.content-container > .p-2) {
  padding: 0;
}
</style>
