<template>
    <div class="hc-page-layout-box split" :class="ui">
        <div class="hc-layout-left-box" :id="'page-' + left_uuid">
            <slot name="left"></slot>
        </div>
        <div class="hc-page-content-box" :id="'page-' + page_uuid">
            <slot></slot>
        </div>
    </div>
</template>

<script setup>
import {onMounted, onUnmounted, ref} from "vue";
import {getRandom} from "js-fast-way";
import split from "split.js";

//参数
const props = defineProps({
    ui: String
})

//变量
const left_uuid = getRandom(8);
const page_uuid = getRandom(8);

//渲染完成
onMounted(()=> {
    setSplitDom()
})

// 初始化设置拖动分割线
const splitvar = ref(null);
const setSplitDom = () => {
    try {
        //配置参考： https://split.js.org/#/?direction=vertical&snapOffset=0
        splitvar.value = split([
            `#page-${left_uuid}`,
            `#page-${page_uuid}`
        ], {
            sizes: [20, 80],
            minSize: [200, 900],
        });
    } catch (e) {
        setTimeout(() => {
            setSplitDom()
        }, 500)
    }
}

//销毁
onUnmounted(() => {
    if (splitvar.value) {
        splitvar.value.destroy()
    }
})
</script>

<style lang="scss">
.hc-page-layout-box.split {
    --hc-box-shadow: 0 0 10px 0 rgba(32, 37, 50, 0.03), 0 10px 21px 20px rgba(32, 37, 50, 0.03);
    .hc-layout-left-box {
        margin-right: 3px;
        box-shadow: var(--hc-box-shadow);
    }
    .gutter {
        background-color: transparent;
    }
    .hc-page-content-box {
        margin-left: 3px;
        .el-card.hc-card-box {
            box-shadow: var(--hc-box-shadow);
        }
    }
}
</style>
