<template>
    <div :class="['split-container', direction === 'vertical' ? 'vertical' : 'horizontal']">
        <div class="split-pane" :style="{ flex: firstPaneFlex }">
            <!-- 如果父组件传递了 firstTitle 则展示标题 -->
            <div v-if="firstTitle">
                <div v-if="!firstCollapsed" class="pane-title">
                    <span style="color: #fff;font-size: 16px; font-weight: bold;">{{ firstTitle }}</span>
                    <DoubleLeftOutlined class="title-icon" :rotate="direction === 'vertical' ? 90 : 0"
                        @click="toggleCollapse('first')" />
                </div>
                <div v-else class="pane-title">
                    <span v-if="direction === 'vertical'" style="color: #fff;font-size: 16px; font-weight: bold;">{{
                        firstTitle }}</span>
                    <DoubleRightOutlined :rotate="direction === 'vertical' ? 90 : 0" @click="toggleCollapse('first')" />
                </div>
            </div>
            <div>
                <slot name="first-title"></slot>
            </div>
            <div v-show="!firstCollapsed" class="pane-content">
                <!-- <div v-if="isDragging" style="width: 100%; height: 100%;  background: yellow; display: block;"></div> -->
                <slot name="first"></slot>
                <div v-if="isDragging" class="overlay"
                    style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 10; background: rgba(0, 0, 0, 0);">
                </div>
            </div>

        </div>
        <div class="split-handle" @mousedown="startDrag" @touchstart="startDrag"></div>
        <div class="split-pane" :style="{ flex: secondPaneFlex }">
            <!-- 如果父组件传递了 secondTitle 则展示标题 -->
            <div v-if="secondTitle">
                <div class="pane-title">
                    <span>{{ secondTitle }}</span>
                    <DoubleLeftOutlined class="title-icon" @click="toggleCollapse('first')" />
                </div>
            </div>
            <div class="pane-content">
                <!-- <div v-if="isDragging" style="width: 100%; height: 100%;  background: blue; display: block;"></div> -->
                <slot name="second"></slot>
                <div v-if="isDragging" class="overlay"
                    style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 10; background: rgba(0, 0, 0, 0);">
                </div>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, onUnmounted } from 'vue';
import { DoubleRightOutlined, DoubleLeftOutlined } from "@ant-design/icons-vue";

const props = defineProps({
    direction: {
        type: String,
        default: 'horizontal',
        // horizontal: 左右布局，vertical: 上下布局
        validator: (value: string) => ['horizontal', 'vertical'].includes(value)
    },
    initialRatio: {
        type: Number,
        default: 0.5
    },
    firstTitle: {
        type: String,
        default: ''
    },
    secondTitle: {
        type: String,
        default: ''
    }
});

const isDragging = ref(false);
const startX = ref(0);
const startY = ref(0);
const firstPaneFlex = ref(props.initialRatio);
const secondPaneFlex = ref(1 - props.initialRatio);

const containerRef = ref<HTMLDivElement | null>(null);

// 新增折叠状态
const firstCollapsed = ref(false);
const secondCollapsed = ref(false);

const toggleCollapse = (pane: 'first' | 'second') => {
    if (pane === 'first') {
        firstCollapsed.value = !firstCollapsed.value;
        if (firstCollapsed.value) {
            if (props.direction === 'horizontal') {
                firstPaneFlex.value = 0.02;

            } else {
                firstPaneFlex.value = 0.07;

            }
            secondPaneFlex.value = 1 - firstPaneFlex.value;
            console.log('firstCollapsed', firstPaneFlex.value, secondPaneFlex.value);

        } else {
            firstPaneFlex.value = props.initialRatio;
            secondPaneFlex.value = 1 - props.initialRatio;
        }
    } else {
        secondCollapsed.value = !secondCollapsed.value;
        if (secondCollapsed.value) {
            secondPaneFlex.value = 0.02;
            firstPaneFlex.value = 1 - secondPaneFlex.value;
        } else {
            secondPaneFlex.value = 1 - props.initialRatio;
            firstPaneFlex.value = props.initialRatio;
        }
    }
};


const startDrag = (event: MouseEvent | TouchEvent) => {
    event.stopPropagation();
    event.preventDefault();
    isDragging.value = true;
    if (event instanceof MouseEvent) {
        startX.value = event.clientX;
        startY.value = event.clientY;
    } else {
        startX.value = event.touches[0].clientX;
        startY.value = event.touches[0].clientY;
    }
    document.addEventListener('mousemove', onDrag);
    document.addEventListener('touchmove', onDrag);
    document.addEventListener('mouseup', endDrag);
    document.addEventListener('touchend', endDrag);
};

const onDrag = (event: MouseEvent | TouchEvent) => {
    if (!isDragging.value || !containerRef.value) return;
    const containerRect = containerRef.value.getBoundingClientRect();
    let delta;
    if (props.direction === 'horizontal') {
        const currentX = event instanceof MouseEvent ? event.clientX : event.touches[0].clientX;
        delta = currentX - startX.value;
        const totalWidth = containerRect.width;
        const newFlex = firstPaneFlex.value + delta / totalWidth;
        if (newFlex > 0 && newFlex < 1) {
            firstPaneFlex.value = newFlex;
            secondPaneFlex.value = 1 - newFlex;
            startX.value = currentX;
        }
    } else {
        const currentY = event instanceof MouseEvent ? event.clientY : event.touches[0].clientY;
        delta = currentY - startY.value;
        const totalHeight = containerRect.height;
        const newFlex = firstPaneFlex.value + delta / totalHeight;
        if (newFlex > 0 && newFlex < 1) {
            firstPaneFlex.value = newFlex;
            secondPaneFlex.value = 1 - newFlex;
            startY.value = currentY;
        }
    }
};

const endDrag = () => {
    isDragging.value = false;
    document.removeEventListener('mousemove', onDrag);
    document.removeEventListener('touchmove', onDrag);
    document.removeEventListener('mouseup', endDrag);
    document.removeEventListener('touchend', endDrag);
};

onMounted(() => {
    containerRef.value = document.querySelector('.split-container') as HTMLDivElement;
});

onUnmounted(() => {
    document.removeEventListener('mousemove', onDrag);
    document.removeEventListener('touchmove', onDrag);
    document.removeEventListener('mouseup', endDrag);
    document.removeEventListener('touchend', endDrag);
});
</script>

<style scoped>
.split-container {
    display: flex;
    width: 100%;
    height: 100%;
}

.horizontal {
    /* 默认为水平方向 */
    flex-direction: row;
}

.vertical {
    /* 垂直方向 */
    flex-direction: column;
}

/* .split-pane {
    overflow: auto;
} */
.split-pane {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    /* 改为hidden防止双滚动条 */
    height: 100%;
}

.split-handle {
    /*水平方向的拖拽手柄 */
    cursor: col-resize;
    background-color: #ccc;
    width: 5px;


}

.vertical .split-handle {
    /* 垂直方向的拖拽手柄 */
    cursor: row-resize;
    height: 5px;
    width: 100%;

}

.pane-title {
    height: 34px;
    padding: 5px 12px;
    background-color: #1890ff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
    border-bottom: 1px solid #ddd;
}

/* .pane-content {
    overflow: auto;
} */

.pane-content {
    flex-grow: 1;
    overflow: auto;
    min-height: 0;
}

.title-icon {
    /* color: #666;
    font-size: 12px; */
    margin-left: 8px;

    transition: transform 0.2s;
}

.split-handle:hover {
    background-color: #999;
}

.split-handle:active {
    background-color: #666;
}
</style>
