<template>
  <div class="app-container">
    <el-card>
      <div slot="header" class="clearfix">
        <span style="font-weight: bold; font-size: 16px;">
          <i class="el-icon-document"></i> 文档同步配置
        </span>
      </div>

      <!-- Tab切换 -->
      <el-tabs v-model="activeTab" type="card" @tab-click="handleTabClick">
        <el-tab-pane label="腾讯文档" name="tendoc">
          <span slot="label">
            <i class="el-icon-document"></i> 腾讯文档
          </span>
          <TencentDocConfig ref="tendocConfig" />
        </el-tab-pane>

        <el-tab-pane label="WPS365" name="wps365">
          <span slot="label">
            <i class="el-icon-document-copy"></i> WPS365
          </span>
          <WPS365Config ref="wps365Config" />
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script>
import TencentDocConfig from './components/TencentDocConfig'
import WPS365Config from './components/WPS365Config'

export default {
  name: 'DocSync',
  components: {
    TencentDocConfig,
    WPS365Config
  },
  data() {
    return {
      activeTab: 'tendoc'
    }
  },
  methods: {
    handleTabClick(tab) {
      // Tab切换时的处理
      this.$nextTick(() => {
        if (tab.name === 'tendoc' && this.$refs.tendocConfig) {
          this.$refs.tendocConfig.refresh()
        } else if (tab.name === 'wps365' && this.$refs.wps365Config) {
          this.$refs.wps365Config.refresh()
        }
      })
    }
  }
}
</script>

<style scoped>
.app-container {
  padding: 20px;
}

::v-deep .el-tabs__header {
  margin-bottom: 20px;
}
</style>

