<template>
    <div id="app">
        <div class="container">
            <div v-if="showLeftPanel" ref="leftPanel" class="left-panel">
                <div class="left-panel-header">
                    <div class="left-panel-title">机构树面板</div>
                    <div class="left-panel-tool">
                        <DoubleLeftOutlined @click="toggleShowLeftPanel" />
                    </div>
                </div>
                <div class="left-panel-body">
                    <span>汇总关系：</span>
                    <pro-select
                        style="width: calc(100% - 50px); height: 25px;position: absolute;right: 10px; margin-top: -13px; top:50%;overflow: hidden; "
                        :allowClear="true">
                    </pro-select>

                </div>

                <div>
                    <!-- <a-tabs type="card" v-model:activeKey="activeKey"> -->
                    <a-tabs type="card">
                        <a-tab-pane key="1" tab="账务树">Content of Tab Pane 1</a-tab-pane>
                        <a-tab-pane key="2" tab="对比树">Content of Tab Pane 2</a-tab-pane>
                        <a-tab-pane key="3" tab="报送树">Content of Tab Pane 3</a-tab-pane>
                    </a-tabs>
                </div>
                <div>
                    <a-tree :treeData="treeData" :loadData="onLoadData" :multiple="true" :search="searchValue"
                        @select="onSelect" @deselect="onDeselect" @search="onSearch" />
                </div>




            </div>
            <div v-else>
                <div class="left-panel-header">
                    <div class="left-panel-tool">
                        <DoubleRightOutlined @click="toggleShowLeftPanel" />
                    </div>
                </div>
            </div>

            <div class="resizer-horizontal" @mousedown="startDragHorizontal"></div>
            <div ref="rightPanel" class="right-panel">
                <div ref="topPane" class="top-pane">
                    <div>
                        <div class="left-panel-header">
                            <div class="left-panel-title">报表查询</div>
                        </div>
                        <pro-form-grid>
                            <pro-input :formItemProps="{ label: '层级编号', prop: 'levelKey' }" placeholder="请输入层级编号"
                                :allowClear="true">
                            </pro-input>

                            <pro-select :formItemProps="{ label: '启用标志', prop: 'useYn' }" placeholder="请选择启用标志"
                                :allowClear="true">
                            </pro-select>
                        </pro-form-grid>

                    </div>
                </div>
                <div class="resizer-vertical" @mousedown="startDragVertical"></div>
                <div ref="bottomPane" class="bottom-pane">
                    <div>底部内容</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="jsx">
import { ref, watch, h, computed } from 'vue';
import { DoubleRightOutlined, DoubleLeftOutlined } from "@ant-design/icons-vue";

const leftPanel = ref(null);
const rightPanel = ref(null);
const topPane = ref(null);
const bottomPane = ref(null);

let startX = ref(0);
let startY = ref(0);

let initialLeftWidth = ref(0); // 左侧面板初始宽度
let initialTopHeight = ref(0); // 顶部面板初始高度
let isResizingHorizontal = ref(false);
let isResizingVertical = ref(false);

let showLeftPanel = ref(true);

const searchValue = ref('');
const treeData = [
    {
        title: '总公司',
        key: '0-0',
        children: [
            {
                title: '分公司1',
                key: '0-0-0',
                children: []
            },
            {
                title: '分公司2',
                key: '0-0-1',
                children: []
            }
        ]
    }

];
const replaceFields = computed(() => {
    return {
        key: 'id',
        title: 'name',
        children: 'children'
    };
});

function toggleShowLeftPanel () {
    console.log('wyq--切换左侧面板前', showLeftPanel.value);
    showLeftPanel.value = !showLeftPanel.value;
    console.log('wyq--切换左侧面板后', showLeftPanel.value);
}

function startDragHorizontal (event) {
    console.log('wyq--开始水平拖动');
    isResizingHorizontal = true;
    startX = event.clientX;
    // 转换为百分比
    initialLeftWidth = leftPanel.value.offsetWidth / window.innerWidth * 100;
    document.addEventListener('mousemove', resizeHorizontal);
    document.addEventListener('mouseup', stopResizeHorizontal);
}

function resizeHorizontal (event) {
    console.log('wyq--开始水平拖动-resizeHorizontal',);

    if (!isResizingHorizontal) return;
    console.log('wyq--进来了没');

    const deltaX = event.clientX - startX;
    const newLeftWidthPercent = initialLeftWidth + (deltaX / window.innerWidth * 100);
    const newLeftWidth = (window.innerWidth * newLeftWidthPercent) / 100;
    console.log('wyq--水平拖动', newLeftWidthPercent, newLeftWidth);

    // 更新左右面板的宽度（使用flex-basis而不是直接设置width，以保持响应式）
    leftPanel.value.style.flexBasis = `${newLeftWidth}px`;
    rightPanel.value.style.flexBasis = `calc(100% - ${newLeftWidth}px)`;
}

function stopResizeHorizontal () {
    console.log('wyq--开始水平拖动-stopResizeHorizontal');
    isResizingHorizontal = false;
    document.removeEventListener('mousemove', resizeHorizontal);
    document.removeEventListener('mouseup', stopResizeHorizontal);
}

function startDragVertical (event) {
    console.log('wyq--开始上下拖动');
    isResizingVertical = true;
    startY = event.clientY;
    initialTopHeight = topPane.value.offsetHeight;
    document.addEventListener('mousemove', resizeVertical);
    document.addEventListener('mouseup', stopResizeVertical);


}

function resizeVertical (event) {
    console.log('wyq--开始上下拖动-resizeVertical',);

    if (!isResizingVertical) return;
    console.log('wyq--进来了没');

    const deltaY = event.clientY - startY;
    const newHeight = initialTopHeight + deltaY;

    const minHeight = 50; // 最小高度限制
    const maxHeight = window.innerHeight - minHeight; // 最大高度限制
    let finalHeight = Math.max(minHeight, Math.min(maxHeight, newHeight));
    topPane.value.style.height = `${finalHeight}px`;
    bottomPane.value.style.height = `calc(100% - ${finalHeight}px)`;
}

function stopResizeVertical () {
    console.log('wyq--开始上下拖动-stopResizeVertical');
    isResizingVertical = false;
    document.removeEventListener('mousemove', resizeVertical);
    document.removeEventListener('mouseup', stopResizeVertical);

}
</script>

<style scoped>
#app {
    height: 100vh;
    width: 100vw;
    display: flex;
    justify-content: center;
    align-items: center;
}

.container {
    display: flex;
    width: 100%;
    height: 100%;
}

.left-panel {
    /* 纵向排列滚动条*/
    overflow: auto;
    /* background-color: lightblue; */
    flex: 1;
    /* 初始时左面板占10% */
    flex-basis: 18%;
}

.resizer-horizontal {
    width: 5px;
    cursor: ew-resize;
    background-color: #ccc;
    user-select: none;
}

.right-panel {
    /* background-color: #e0e0e0; */
    flex: 1;
    /* 初始时左面板占90% */
    flex-basis: 82%;
}



.top-pane {
    /* background-color: blueviolet; */
    height: 20%;
}

.resizer-vertical {
    height: 5px;
    cursor: ns-resize;
    background-color: #ccc;
    user-select: none;
}

.bottom-pane {
    background-color: bisque;
    height: 80%;
}

.div9 {
    /* height: 100px; */
    background-color: #f0f0f0;
}

.logo {
    height: 32px;
    margin: 16px;
    cursor: pointer;
}

.left-panel-header {
    height: 34px;
    line-height: 34px;
    border: 0;
    background-color: #94C8C1;
    padding: 0 14px;
    margin: 2px 0;
    display: flex;
    position: relative;
}

.left-panel-title {
    height: 34px;
    line-height: 34px;
    color: #fff;
    font-weight: bold;
    font-size: 16px;
    margin: 0;
    padding: 0;
}

.left-panel-tool {
    right: 10px;
    width: auto;
    position: absolute;
    top: 50%;
    margin-top: -17px;
    overflow: hidden;
}

.left-panel-body {
    padding: 5px;
    position: relative;

}
</style>
