<template>
    <!-- 绑定 ref 到根元素 -->
    <div ref="container"
        :class="['pro-split', direction === 'horizontal' ? 'pro-split-horizontal' : 'pro-split-vertical']">
        <!-- 顶部标题 -->
        <div v-if="topTitle" class="pro-split-title" :style="{ display: isTopExpanded ? 'flex' : 'none' }">
            <span>{{ topTitle }}</span>
            <button v-if="canTopCollapse" @click="toggleTopCollapse">{{ isTopExpanded ? '收起' : '展开' }}</button>
        </div>
        <!-- 左侧标题 -->
        <div v-if="leftTitle" class="pro-split-title pro-split-title-left"
            :style="{ display: isLeftExpanded ? 'flex' : 'none' }">
            <span>{{ leftTitle }}</span>
            <button v-if="canLeftCollapse" @click="toggleLeftCollapse">{{ isLeftExpanded ? '收起' : '展开' }}</button>
        </div>
        <div class="pro-split-pane" :style="pane1Style">
            <slot name="pane1"></slot>
        </div>
        <div class="pro-split-handle" :class="{ 'pro-split-handle-floating': dragging }" @mousedown="onHandleMouseDown"
            :style="handleStyle">
        </div>
        <div class="pro-split-pane" :style="pane2Style">
            <slot name="pane2"></slot>
        </div>
        <!-- 底部标题 -->
        <div v-if="bottomTitle" class="pro-split-title" :style="{ display: isBottomExpanded ? 'flex' : 'none' }">
            <span>{{ bottomTitle }}</span>
            <button v-if="canBottomCollapse" @click="toggleBottomCollapse">{{ isBottomExpanded ? '收起' : '展开' }}</button>
        </div>
        <!-- 右侧标题 -->
        <div v-if="rightTitle" class="pro-split-title pro-split-title-right"
            :style="{ display: isRightExpanded ? 'flex' : 'none' }">
            <span>{{ rightTitle }}</span>
            <button v-if="canRightCollapse" @click="toggleRightCollapse">{{ isRightExpanded ? '收起' : '展开' }}</button>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted, defineEmits, defineProps } from 'vue';

const props = defineProps({
    direction: {
        type: String,
        default: 'horizontal',
        validator: (value) => ['horizontal', 'vertical'].includes(value)
    },
    sizeRatio: {
        type: Number,
        default: 0.5
    },
    topTitle: {
        type: String,
        default: ''
    },
    leftTitle: {
        type: String,
        default: ''
    },
    bottomTitle: {
        type: String,
        default: ''
    },
    rightTitle: {
        type: String,
        default: ''
    },
    canTopCollapse: {
        type: Boolean,
        default: false
    },
    canLeftCollapse: {
        type: Boolean,
        default: false
    },
    canBottomCollapse: {
        type: Boolean,
        default: false
    },
    canRightCollapse: {
        type: Boolean,
        default: false
    },
    isTopExpanded: {
        type: Boolean,
        default: true
    },
    isLeftExpanded: {
        type: Boolean,
        default: true
    },
    isBottomExpanded: {
        type: Boolean,
        default: true
    },
    isRightExpanded: {
        type: Boolean,
        default: true
    }
});

const emits = defineEmits(['update:sizeRatio']);

const dragging = ref(false);
const startX = ref(0);
const startY = ref(0);
const startSizeRatio = ref(props.sizeRatio);
const tempSizeRatio = ref(props.sizeRatio);

const handle = ref(null);
const container = ref(null);

const pane1Style = ref({});
const pane2Style = ref({});
const handleStyle = ref({});

const isTopExpanded = ref(props.isTopExpanded);
const isLeftExpanded = ref(props.isLeftExpanded);
const isBottomExpanded = ref(props.isBottomExpanded);
const isRightExpanded = ref(props.isRightExpanded);

const toggleTopCollapse = () => {
    isTopExpanded.value = !isTopExpanded.value;
};

const toggleLeftCollapse = () => {
    isLeftExpanded.value = !isLeftExpanded.value;
};

const toggleBottomCollapse = () => {
    isBottomExpanded.value = !isBottomExpanded.value;
};

const toggleRightCollapse = () => {
    isRightExpanded.value = !isRightExpanded.value;
};

const updateStyles = () => {
    if (container.value) {
        if (props.direction === 'horizontal') {
            const width = container.value.offsetWidth;
            const pane1Width = width * tempSizeRatio.value;
            const pane2Width = width - pane1Width;
            pane1Style.value = { width: `${pane1Width}px` };
            pane2Style.value = { width: `${pane2Width}px` };
        } else {
            const height = container.value.offsetHeight;
            const pane1Height = height * tempSizeRatio.value;
            const pane2Height = height - pane1Height;
            pane1Style.value = { height: `${pane1Height}px` };
            pane2Style.value = { height: `${pane2Height}px` };
        }
        updateHandleStyle(tempSizeRatio.value);
    }
};

const updateHandleStyle = (ratio) => {
    if (container.value) {
        if (props.direction === 'horizontal') {
            const width = container.value.offsetWidth;
            const pane1Width = width * ratio;
            handleStyle.value = {
                left: `${pane1Width}px`,
                width: '5px', // 设置水平分割线宽度
                height: '100%' // 设置水平分割线高度
            };
        } else {
            const height = container.value.offsetHeight;
            const pane1Height = height * ratio;
            handleStyle.value = {
                top: `${pane1Height}px`,
                width: '100%', // 设置垂直分割线宽度
                height: '5px' // 设置垂直分割线高度
            };
        }
    }
};

const onHandleMouseDown = (e) => {
    dragging.value = true;
    startX.value = e.clientX;
    startY.value = e.clientY;
    startSizeRatio.value = props.sizeRatio;
    tempSizeRatio.value = props.sizeRatio;
    document.addEventListener('mousemove', onMouseMove);
    document.addEventListener('mouseup', onMouseUp);
};

const onMouseMove = (e) => {
    if (dragging.value) {
        const deltaX = e.clientX - startX.value;
        const deltaY = e.clientY - startY.value;
        if (props.direction === 'horizontal') {
            const containerWidth = container.value.offsetWidth;
            const newSizeRatio = startSizeRatio.value + deltaX / containerWidth;
            tempSizeRatio.value = Math.max(0, Math.min(1, newSizeRatio));
        } else {
            const containerHeight = container.value.offsetHeight;
            const newSizeRatio = startSizeRatio.value + deltaY / containerHeight;
            tempSizeRatio.value = Math.max(0, Math.min(1, newSizeRatio));
        }
        updateHandleStyle(tempSizeRatio.value);
    }
};

const onMouseUp = () => {
    dragging.value = false;
    document.removeEventListener('mousemove', onMouseMove);
    document.removeEventListener('mouseup', onMouseUp);
    emits('update:sizeRatio', tempSizeRatio.value);
    // 确保更新样式时使用 tempSizeRatio 的值
    updateStyles();
};

onMounted(() => {
    updateStyles();
});

onUnmounted(() => {
    document.removeEventListener('mousemove', onMouseMove);
    document.removeEventListener('mouseup', onMouseUp);
});
</script>

<style scoped>
.pro-split {
    position: relative;
    display: flex;
    width: 100%;
    height: 100%;
    flex-direction: column;
}

.pro-split-title {
    background-color: #f0f0f0;
    padding: 8px;
    font-weight: bold;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.pro-split-title-left {
    flex-direction: column;
}

.pro-split-title-right {
    flex-direction: column;
}

.pro-split-horizontal {
    flex-direction: row;
}

.pro-split-vertical {
    flex-direction: column;
}

.pro-split-pane {
    overflow: auto;
}

.pro-split-handle {
    background-color: #d71212;
    cursor: col-resize;
    z-index: 1;
}

.pro-split-vertical .pro-split-handle {
    cursor: row-resize;
}

.pro-split-handle-floating {
    position: absolute;
    z-index: 2;
}
</style>
