<template>
  <div class="main-container_app">
    <el-tabs type="border-card" v-model="activeName" @tab-click="handleTabClick">
      <el-tab-pane label="智能问答" name="chat">
        <div class="tab-content_app">
          <ChatComponent :autoLoadWarning="true" />
        </div>
      </el-tab-pane>
      <el-tab-pane label="智能AI" name="chatAI">
        <div class="tab-content_app">
         <cat-ai/>
        </div>
      </el-tab-pane>
      <el-tab-pane label="文件管理" name="statistics">
        <div class="tab-content_app">
        <file-view></file-view>
        </div>
      </el-tab-pane>
      <el-tab-pane label="知识抽取" name="settings">
        <div class="tab-content_app">
          <KnowledgeExtraction/>
        </div>
      </el-tab-pane>
      <el-tab-pane label="故障统计" name="faultMonitor">
        <div class="tab-content_app">
         <fault-statistics-board/>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import ChatComponent from './ChatComponent.vue';
import FileView from '@/views/file'
import KnowledgeExtraction from '@/views/knowledgeExtraction/index.vue'
import CatAi from '@/views/chat/catAi.vue'
import FaultStatisticsBoard from '@/views/FaultStatisticsBoard.vue'
export default {
  name: 'MainPage',
  components: {
    ChatComponent,
    FileView,
    KnowledgeExtraction,
    CatAi,
    FaultStatisticsBoard
  },
  data() {
    return {
      activeName: 'chat'
    };
  },
  methods: {
    handleTabClick(tab, event) {
      console.log('切换到标签页: ', tab.name);
    }
  }
};
</script>

<style lang="scss" scoped>
html, body, #app {
  height: 100%;
  margin: 0;
  padding: 0;
}

.main-container_app {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}

.tab-content_app {
  width: 100%;
  height: calc(100vh - 56px); // 使用视口高度计算
  box-sizing: border-box;
  background-color: #fff;
  border-radius: 0 0 4px 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.el-tabs--border-card {
  height: 100%;
  border: none;
}

.el-tabs--border-card > .el-tabs__content {
  padding: 0;
  height: calc(100% - 42px); // 减去标签页标题高度
}
::v-deep .el-tabs--border-card > .el-tabs__content {
  padding: 0 !important;
}
// 确保智能问答组件在标签页中占满空间
::v-deep .tab-content_app >>> .chat-container {
  height: 100%;
}
</style>
