<template>
  <a-layout class="layout">
    <a-layout-sider :width="siderWidth" class="resizable-sider" :style="{ maxWidth: `${maxSiderWidth}px`, minWidth: `${minSiderWidth}px` }">
      <div class="sider-content">
        <LeftTree ref="registerLeftTree" @select-tree-node="setTreeNodeId" />
      </div>
      <div class="resizer" @mousedown="onMouseDown"></div>
    </a-layout-sider>
    <a-layout-content class="content">
      <DocFilesList ref="registerDocFilesList" @success="uploadSuccess" @select-folder="selectFolder" v-bind="$attrs" />
    </a-layout-content>
  </a-layout>
</template>
<script lang="ts" setup>
  import { ref } from 'vue';
  import DocFilesList from './DocFilesList.vue';
  import LeftTree from './DocTree.vue';
  const siderWidth = ref(375); // 初始宽度
  const maxSiderWidth = 480; // 最大宽度
  const minSiderWidth = 250; // 最小宽度
  const registerLeftTree = ref();
  const emit = defineEmits(['selectFolder', 'refresh']);

  const onMouseDown = (e: MouseEvent) => {
    const startX = e.clientX;
    const startWidth = siderWidth.value;

    const onMouseMove = (e: MouseEvent) => {
      const newWidth = startWidth + e.clientX - startX;
      if (newWidth >= minSiderWidth && newWidth <= maxSiderWidth) {
        siderWidth.value = newWidth;
      }
    };

    const onMouseUp = () => {
      document.removeEventListener('mousemove', onMouseMove);
      document.removeEventListener('mouseup', onMouseUp);
    };

    document.addEventListener('mousemove', onMouseMove);
    document.addEventListener('mouseup', onMouseUp);
  };
  const registerDocFilesList = ref();

  const ctp = ref(1);

  function setTreeNodeId(data) {
    if (data != null) {
      ctp.value = data.key;
      registerDocFilesList.value.setFileCtp(data);
    } else {
      registerDocFilesList.value.setFileCtp(null);
    }
  }
  function uploadSuccess() {
    registerDocFilesList.value.setFileCtp(ctp.value);
  }
  function selectFolder(item) {
    registerLeftTree.value.handleFolderNode(item);
  }
</script>

<style scoped>
  body {
    overflow: hidden;
  }
  .layout {
    background: #fff;
    height: calc(90vh - 110px);
    margin: 10px 10px 0px 10px;
    overflow: hidden;
  }
  .resizable-sider {
    position: relative;
    background: #f0f2f5;
  }

  .sider-content {
    background-color: #fff;
    padding: 16px;
    height: calc(90vh - 88px);
    overflow-y: auto;
  }

  .resizer {
    position: absolute;
    top: 0;
    right: 0;
    width: 5px;
    height: 100%;
    cursor: ew-resize;
    background-color: #d9d9d9;
  }
  .content {
    background: #fff;
    padding: 24px;
    /* height: calc(90vh - 100px);
    overflow-y: auto; */
  }
  ::-webkit-scrollbar {
    /* 隐藏滚动条 */
    display: none;
  }
</style>
