<!--
扩展element-ui 抽屉组件，实现左右或上下拉伸
-->

<template>
    <el-drawer
        :title="title"
        :visible.sync="show"
        :class="direction === 'rtl' ? 'drawer-drag' : ''"
        :modal="false"
        :size="size || '660px'"
        append-to-body
        @close="$emit('close')"
        @closed="$emit('closed');$emit('update:visible', false)"
        :direction="direction">

        <div class="drag-bar" v-if="direction === 'rtl'" draggable v-resize-left></div>
        <div class="drag-bar-top" v-else draggable v-resize-top></div>

        <slot></slot>


    </el-drawer>
</template>

<script>
export default {
    props: {
        title: String,
        visible: Boolean,
        direction: {
            type: String,
            default: 'rtl'
        },
        size: String
    },
    mounted() {
        this.$root.$on('close-drawer', () => {
            this.show = false
            this.$emit('update:visible', false)
        })
        this.show = this.visible
    },
    watch: {
        visible (val) {
            this.show = val
        }
    },
    data () {
        return {
            show: false
        }
    },
    directives: {
        /** 向左拉伸 */
        resizeLeft: { //
            inserted: (el) => {
                let docW = document.body.clientWidth - 300,
                    l = 0,
                    parent = el.parentNode
                let findParent = (el) => {
                    let p = el.parentNode
                    if(p) {
                        if(p.className.match('el-drawer__wrapper') !== null) {
                            parent = p
                        }else {
                            findParent(p)
                        }
                    }
                }
                findParent(el)
                docW = parent.clientWidth

                let setpos = (e) => {
                    if(e.clientX > 0) {
                        let dw =Math.max(100, docW + (l - e.clientX))
                        parent.style.width = dw + 'px'
                    }
                }
                el.ondragstart = function(e) {
                    l = e.clientX
                }
                el.ondrag = setpos
                el.ondragend = function () {
                    docW = parent.clientWidth
                }
            }
        },
        /** 向上拉伸 */
        resizeTop: { //
            inserted: (el) => {
                let docW = document.body.clientWidth - 300,
                    l = 0,
                    parent = el.parentNode
                let findParent = (el) => {
                    let p = el.parentNode
                    if(p) {
                        if(p.className.match('el-drawer ') !== null) {
                            parent = p
                        }else {
                            findParent(p)
                        }
                    }
                }
                findParent(el)
                docW = parent.clientHeight

                let setpos = (e) => {
                    if(e.clientY > 0) {
                        let dw =Math.max(100, docW + (l - e.clientY))

                        parent.style.height = dw + 'px'
                    }
                }
                el.ondragstart = function(e) {
                    l = e.clientY
                }
                el.ondrag = setpos
                el.ondragend = function (e) {
                    docW = parent.clientHeight

                }
            }
        },
    },

}
</script>

<style lang="less" scoped>
.drag-bar {
    position: absolute;
    left: -20px;
    width: 40px;
    top: 0;
    height: 100%;
    cursor: w-resize;
    z-index: 1002;
    //  background: red;

}
.drag-bar-top {
    position: absolute;
    top: -20px;
    height: 40px;
    left: 0;
    width: 100%;
    cursor: n-resize;
    z-index: 1002;
    // background: red;
}
.drawer-drag {
    width: 661px;
    left: auto;
    box-shadow: 0 3px 6px rgba(0, 0, 0, .2);

    /deep/ * {
        -moz-user-select: none;           /*火狐*/
        -webkit-user-select: none;        /*webkit浏览器*/
        -ms-user-select: none;            /*IE10*/
        -khtml-user-select: none;         /*早期浏览器*/
        user-select: none;                /** 去掉蓝色选中底*/
    }
    /deep/ .el-drawer__header {
        border-bottom: 1px solid #ddd;
        padding-bottom: 20px;
    }
    /deep/.el-drawer {
        width: 100% !important;
    }
}
</style>