<template>
    <div class="flex flex-center split-panel">
        <div class="flex flex-center">
            <i class="el-icon-ap-caret-left caret-left" :style="leftStyle" @click="leftClick"/>
            <i class="el-icon-ap-caret-right caret-right" :style="rightStyle" @click="rightClick"/>
        </div>
    </div>
</template>

<script>
    export default {
        name: "ApSplitPanel",
        data() {
            return {
                leftStyle: {},
                rightStyle: {display: 'none'},
            }
        },
        methods: {
            leftClick(e) {
                e.currentTarget.parentNode.parentNode.previousSibling.style.display = 'none';
                this.leftStyle = {display: 'none'};
                this.rightStyle = {display: 'inline'};
            },
            rightClick(e) {
                e.currentTarget.parentNode.parentNode.previousSibling.style.display = 'flex';
                this.leftStyle = {display: 'inline'};
                this.rightStyle = {display: 'none'};
            }
        }
    }
</script>

<style scoped>
    .split-panel {
        width: 0px;
        color: #747d8f;
        z-index: 100;
    }

    .caret-left{
        margin-left: -10px;
        font-size: 16px;
    }
    .caret-right {
        margin-left: 10px;
        font-size: 16px;
    }

    .caret-left:hover,
    .caret-right:hover {
        cursor: pointer;
        color: #1f2d3d;
    }
</style>