<script setup lang="ts">
import { defineAsyncComponent } from 'vue';
import ItemWrap from "@/components/item-wrap";
const ContentHeader = defineAsyncComponent(() => import("./content-header.vue"));

// 导入左侧组件
const LeftTop = defineAsyncComponent(() => import("./LeftTop.vue"));
const LeftCenter = defineAsyncComponent(() => import("./LeftCenter.vue"));
const LeftBottom = defineAsyncComponent(() => import("./LeftBottom.vue"));


// 导入中间组件
const CenterTop = defineAsyncComponent(() => import("./components/CenterTop.vue"));
const CenterBottom = defineAsyncComponent(() => import("./components/CenterBottom.vue"));
const CenterMap = defineAsyncComponent(() => import("./center-map.vue"));

// 导入右侧组件
const RightCenter = defineAsyncComponent(() => import("./RightCenter.vue"));

// 地图
const mapRef: any = ref(null);

</script>

<template>
  <div class="index-box">
    <ContentHeader />
    <div class="content-container">
      <!-- 左侧内容区域 -->
      <div class="left-content">
        <ItemWrap title="教师咨询数据统计" class="left-contetn-top module-item">
          <LeftTop />
        </ItemWrap>
        
        <ItemWrap title="平均对话时长" class="left-contetn-center module-item">
          <LeftCenter />
        </ItemWrap>
        
        <ItemWrap title="学生用户高考年份统计" class="left-contetn-bottom module-item">
          <LeftBottom />
        </ItemWrap>
      </div>
      
      <!-- 中间内容区域 -->
      <div class="center-content">
        <CenterMap class="center_content_top" title="咨询地图"/>
        <!-- <CenterTop /> -->
        <!-- <ItemWrap title="高频咨询问题" class="module-item">
          <CenterBottom />
        </ItemWrap> -->
      </div>
      
      <!-- 右侧内容区域 -->
      <div class="right-content">
        <ItemWrap class="right-content-top module-item">
          <RightCenter />
        </ItemWrap>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.index-box {
  width: 100%;
  display: flex;
  flex-direction: column;
  min-height: calc(100% - 80px);
  padding: 20px;
}

.content-container {
  display: flex;
  width: 100%;
  height: 100%;
  gap: 20px;
  margin-top: 12px;
}

.left-content, .right-content {
  display: flex;
  flex-direction: column;
  width: 500px;
  gap: 10px;
}

.center-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.center_content_top {

}

.left-contetn-top {
  height: 200px;
}

.left-contetn-center {
  height: 250px;
}

.left-contetn-bottom {
  height: 240px;
}

.right-content-top {
  height: 710px;
}

// .module-item {
//   height: 100%;
//   flex: 1;
// }

.map-container {
  height: 60%;
}
</style>
