<template lang="pug">
    .slide.zFadeInRight(ref="slide", v-show="isShow", :style="{ width: isFullScreen? '100%' : offWidth }")
        .split(v-if="isDrag", @mousedown="handleMousedown")
        .ocSlideCover(v-if="isShowCover")
        .slideHd
            i.iconHide(@click="hide") &gt;
            i.fa.fa-arrows-alt.iconFullScreem(v-if="isShowFullScreenButton", @click="toggleFullScreen")
            slot(name="head")
                p(v-html="title")
        .slideBd(ref="slideBody", tabindex="-1", @keyup.esc="hide")
           
            slot {{content}}
</template>


<script>
    export default {
        name: 'oc-slide',
        props: {
            title: String,
            content: String,
            width: { type: String, default: '800px' },
            defaultShow: { type: Boolean, default: false },
            isShowCover: { type: Boolean, default: false },
            isShowFullScreenButton: { type: Boolean, default: false },
            closeHandler: { type: Function, default: null },
            isDrag:{type: Boolean, default: false},
        },
        data() {
            return {
                isFullScreen: false,
                isShow: this.defaultShow || false,
                canMove: false,
                offWidth: this.width
            }
        },
        watch: {
            isShow(isShow) {
                if(isShow) {
                    // $(this.$refs.slide).appendTo(document.body);
                    setTimeout(e => {
                        this.$refs.slideBody.focus();
                    }, 300)
                }
                else {
                    this.$emit('hideCb');
                    this.$emit('hide');
                }
            }
        },
        mounted() {
            $(this.$refs.slide).appendTo(document.body);
        },
        beforeDestroy() {
            document.removeEventListener('mousemove', this.handleMousemove);
            document.removeEventListener('mousemove', this.handleMouseup);
            this.$refs.slide && $(this.$refs.slide).remove();
        },
        methods: {
            hide() {
                if(this.closeHandler) {
                    this.closeHandler();
                } else {
                    this.isShow = false;
                }
            },

            toggleFullScreen() {
                this.isFullScreen = !this.isFullScreen;
            },
            handleMousedown (event) {
                document.addEventListener('mousemove', this.handleMousemove);
                document.addEventListener('mouseup', this.handleMouseup);
                this.canMove = true
            },
            handleMousemove (event) {
                if (!this.canMove) return;
                let bodyWidth = document.body.getBoundingClientRect().width;
                let offWidth = bodyWidth - event.pageX  + 6/2;
                offWidth = offWidth >= bodyWidth ? bodyWidth: offWidth;
                offWidth = offWidth <= 300 ? 300 : offWidth;
                this.offWidth = offWidth + 'px';
            },
            handleMouseup () {
                this.canMove = false;
            }
        }
    }
</script>


<style lang="stylus" scoped>
    :host
        display block
    .ocSlideCover
        position fixed
        left 0
        top 0
        width 100%
        height 100%
        z-index 0
    .slide
        position fixed
        top 0
        bottom 0
        right 0
        overflow hidden
        background #fff
        box-shadow -3px 0 11px rgba(0,0,0,.2)
        z-index 15
        transition all .3s ease-in-out
        box-sizing border-box
        display flex
        flex-direction column
        font-size 12px
    .slideHd, .slideBd
        z-index 1
    .slideHd
        flex 0 0 40px
        background #f5f6fa
        padding-right 15px
        line-height 40px
        display flex
        overflow hidden
        .iconFullScreem
            position absolute
            right 0
            padding 14px
            color #aaa
            cursor pointer
            &:hover
                color #222
        .iconHide
            flex 0 0 40px
            height 32px
            line-height 38px
            text-align center
            display inline-block
            transform scale(1, 1.5)
            color #666
            cursor pointer
            &:hover
                background #f0f0f0
        p
            flex 1
            padding-left 5px
    .slideBd
        flex 1
        overflow-y auto
        &:focus
            border 0
            outline none
    .split
        position absolute
        top 0
        left 0
        width 6px
        height 100%
        background-color transparent
        z-index: 10;
        user-select: none;
        cursor: col-resize;
</style>
