<template>
  <n-layout class="home">
    <n-layout-header class="header">
      <ToolBar />
    </n-layout-header>
    <!-- 左侧组件列表 -->
    <n-layout has-sider class="main">
      <n-layout-sider
        class="left"
        :width="400"
        :collapsed="true"
        :native-scrollbar="false"
        :collapsed-width="80"
        bordered
        collapse-mode="width"
      >
        <ApiType @change="menuChange" />
      </n-layout-sider>
      <n-layout has-sider sider-placement="right">
        <!-- 中间画布 -->
        <n-layout-content v-resize="editorWindowResizeHandler" class="content">
          <n-scrollbar x-scrollable :style="scrollbarStyle">
            <RequestContent :active="activeKey" />
          </n-scrollbar>
        </n-layout-content>
        <n-layout-sider
          class="right"
          width="240"
          :collapsed="collapsedRight"
          :native-scrollbar="false"
          bordered
          :collapsed-width="35"
          collapse-mode="width"
          show-trigger="arrow-circle"
          @collapse="collapsedRight = true"
          @expand="collapsedRight = false"
        >
          <DataHistory :active="activeKey" />
        </n-layout-sider>
      </n-layout>

      <!-- 右侧属性列表 -->
    </n-layout>
  </n-layout>
</template>

<script setup lang="ts">
import { NLayout, NLayoutContent, NLayoutHeader, NLayoutSider, NScrollbar } from 'naive-ui'
import { computed, ref } from 'vue'

import DataHistory from './ApiView/DataHistory'
import ApiType from './ApiView/siderBar/indext'
import ToolBar from './ApiView/ToolBar'
import RequestContent from './ApiView/View'

const collapsedRight = ref(false)

const windowWidth = ref<number>(0)
const windowHeight = ref<number>(0)
const scrollbarStyle = computed(() => {
  return {
    width: windowWidth.value + 'px',
    height: windowHeight.value + 'px'
  }
})

const activeKey = ref<string>('REST')
const menuChange = (value: string) => {
  activeKey.value = value
}

const editorWindowResizeHandler = (entry: ResizeObserverEntry) => {
  const { width, height } = entry.contentRect
  windowWidth.value = width
  windowHeight.value = height
}
</script>

<style scoped lang="less">
.header {
  height: 5vh;
}

.main {
  height: 94vh;
}
</style>
