<template>
    <el-container
        :style="{
            userSelect: splitType ? 'none': 'text'
        }"
        :class="container.containerClass"
        @mousemove="onMouseMove"
        @mouseup="onMouseUp"
    >
        <el-aside
            v-if="(typeof container.aside === 'function') ? container.aside() : container.aside"
            :style="{
                    width: asideWidth || aside,
                    minHeight: '380px'
                }"
        >
            <infoResizer
                v-if="isResizer === true"
                split="horizontal"
                @mousedown="onMouseDown($event, 'horizontal')"
            />
            <slot name="aside" />
        </el-aside>
        <el-container
            :class="container.subContainerClass"
        >
            <el-header
                v-if="typeof container.header === 'function' ? container.header() : container.header"
                :style="{height: header}"
            >
                <slot name="header" />
            </el-header>
            <el-main v-if="container.main">
                <slot name="main" />
            </el-main>
            <el-footer
                v-if="typeof container.footer === 'function' ? container.footer() : container.footer"
                :style="{
                        height: footerHeight || footer,
                        minHeight: '48px'
                    }"
            >
                <infoResizer
                    v-if="isResizerVertical === true"
                    split="vertical"
                    @mousedown="onMouseDown($event, 'vertical')"
                />
                <slot name="footer" />
            </el-footer>
        </el-container>
    </el-container>
</template>
<script lang="ts" setup>
import infoResizer from './resizer.vue'
import { ref, reactive } from 'vue'
import { ObjectInterface } from '../../script'

const props = defineProps({
    layout: {
        type: Object,
        default: () => {
        }
    },
    aside: {
        type: String,
        default: '220px'
    },
    header: {
        type: String,
        default: 'auto'
    },
    footer: {
        type: String,
        default: '60px'
    },
    isResizer: {
        type: Boolean,
        default: true
    },
    isResizerVertical: {
        type: Boolean,
        default: false
    }
})
interface containerInterface {
    aside: boolean | Function
    header: boolean | Function
    main: boolean | Function
    footer: boolean | Function
    containerClass: string
    subContainerClass: string
}
let container = reactive<containerInterface>({
    aside: false,
    header: true,
    main: true,
    footer: true,
    containerClass: '',
    subContainerClass: ''
})
Object.assign(container, props.layout)

let splitType = ref('')
let onMouseDown = (event: ObjectInterface, type: string) => {
    splitType.value = type
}
let onMouseUp = () => {
    splitType.value = ''
}
let asideWidth = ref('')
let footerHeight = ref('')
// eslint-disable-next-line complexity
let onMouseMove = (e: ObjectInterface) => {
    if (e.buttons === 0 || e.which === 0 || !splitType.value) {
        return false
    }
    let offset = 0
    let target = e.currentTarget
    if (splitType.value === 'horizontal') {
        while (target) {
            offset += target.offsetLeft
            target = target.offsetParent
        }
    } else {
        while (target) {
            offset += target.offsetTop
            target = target.offsetParent
        }
    }
    const currentPage = splitType.value === 'horizontal' ? e.pageX : e.pageY
    const targetOffset = splitType.value === 'horizontal' ? e.currentTarget.offsetWidth : e.currentTarget.offsetHeight
    const percent = Math.floor(((currentPage - offset) / targetOffset) * 10000) / 100
    if (percent > 10 && percent < 100 - 10 && splitType.value === 'horizontal') {
        asideWidth.value = percent + '%'
    } else if (splitType.value !== 'horizontal') {
        footerHeight.value = 100 - percent + '%'
    }
}
</script>
<style lang="scss" scoped>
.el-aside {
    border-right: 1px solid var(--border-color);
    position: relative;
    &:hover {
        .splitter-pane-resizer.horizontal {
            background: var(--bg-color);
        }
    }
}
.el-container {
    height: 100%;
    // background: var(--info-primary-color-2);
}
:deep(.el-header), :deep(.el-footer), :deep(.el-main) {
    padding: 0
}
.el-footer {
    &:hover {
        .splitter-pane-resizer.vertical {
            background: var(--info-primary-color);
        }
    }
}

</style>
