<template>
    <div
        :class="paneClass"
        v-bind="{'data-type': split}"
    >
        <!-- <img
            v-if="showButton"
            class="imgMove"
            src="../../images/moveButton.png"
        > -->
    </div>
</template>

<script lang="ts">
import { defineComponent, computed } from 'vue'
export default defineComponent({
    props: {
        split: {
            type: String,
            default: ''
        },
        showButton: { // showButton = true
            type: Boolean,
            default: false
        }
    },
    setup (props) {
        const paneClass = computed(() => {
            return `splitter-pane-resizer ${props.split}`
        })
        return {
            paneClass
        }
    }
})
</script>

<style lang="scss" scoped>
.splitter-pane-resizer {
    background: var(--bg-color);
    height: 100%;
    box-sizing: border-box;
    opacity: 1;
}

.splitter-pane-resizer.horizontal {
    float: right;
    width: 3px;
    height: 100%;
    cursor: col-resize;
}

.splitter-pane-resizer.vertical {
    width: 100%;
    height: 3px;
    z-index: 99;
    cursor: row-resize;
}
.imgMove{
    z-index: 1;
    top: -6px;
    pointer-events: none;
    position: relative;
    margin-left: calc((100% - 50px) / 2);
    width: 50px;
}
</style>
