<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="basic">
          <normalSettings ref="normalSettingsRef" />
        </el-tab-pane>

        <el-tab-pane label="SEO设置" name="seo">
          <seoSettings ref="seoSettingsRef" />
        </el-tab-pane>

        <el-tab-pane label="联系方式" name="contact">
          <contactSettings ref="contactSettingsRef" />
        </el-tab-pane>

        <el-tab-pane label="法律声明&隐私条款" name="legalNotice">
          <legalNoticeSettings ref="legalNoticeSettingsRef" />
        </el-tab-pane>

        <el-tab-pane label="其他设置" name="other">
          <otherSettings ref="otherSettingsRef" />
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { ElMessage } from "element-plus";
import normalSettings from "./components/normalSettings.vue";
import seoSettings from "./components/seoSettings.vue";
import contactSettings from "./components/contactSettings.vue";
import otherSettings from "./components/otherSettings.vue";
import legalNoticeSettings from "./components/legalNotice.vue";

const activeTab = ref("basic");

const normalSettingsRef = ref();
const seoSettingsRef = ref();
const contactSettingsRef = ref();
const otherSettingsRef = ref();
const legalNoticeSettingsRef = ref();

// 初始化各标签页数据
const initSettings = async () => {
  // TODO: 从后端获取各设置数据并赋值给对应组件
  if (normalSettingsRef.value) {
    // normalSettingsRef.value.normalinfos = ...
  }
  if (seoSettingsRef.value) {
    // seoSettingsRef.value.seoForm = ...
  }
  if (contactSettingsRef.value) {
    // contactSettingsRef.value.contactForm = ...
  }
  if (otherSettingsRef.value) {
    // otherSettingsRef.value.otherForm = ...
  }
  if (legalNoticeSettingsRef.value) {
    // legalNoticeSettingsRef.value.legalNoticeForm = ...
  }
};

onMounted(() => {
  initSettings();
});
</script>

<style lang="scss" 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>
