<template lang="pug">
    div(ref="target" @mouseover="show" @mouseout="hide")
        slot
</template>

<script>
import Vue from 'vue'
    export default {
        name: 'oc-tooltips',
        props: {
            html: String,
            direct: { type: String, default: 'top' },
            reverse: { type: Boolean, default: false},
            maxWidth: { type: String, default: '500px' },
            limited: { type: Number, default: 1024 }
        },
        data: function() {
            return {
                popperVM: null,
            }
        },
        watch: {
            html() {
                this.popperVM.html = this.html;
            },
            direct() {
                this.popperVM.direct = this.direct;
            },
            reverse() {
                this.popperVM.reverse = this.reverse;
            },
            maxWidth() {
                this.popperVM.maxWidth = this.maxWidth;
            },
            limited() {
                this.popperVM.limited = this.limited;
            }
        },
        mounted() {
            this.initPopperVM()
        },
        beforeDestroy() {
            this.popperVM && this.popperVM.$destroy();
        },
        methods: {
            initPopperVM() {
                let popperVMTemplate = Vue.compile(
                    `<div :style="positionStyle"
                        class="ocTooltips-manual"
                        v-show="subHtml"
                        :data-tooltip="subHtml"
                        :direct="direct"
                        :reverse="reverse"
                        :data-width="maxWidth">
                    </div>`)
                this.popperVM = new Vue({
                    data: {
                        html: '',
                        isShow: false,
                        direct: 'top',
                        reverse: false,
                        maxWidth: '500px',
                        limited: null,
                        positionStyle: {
                            left: '',
                            top: '',
                        },
                        subHtml: ''
                    },
                    mounted() {
                        let ret;
                        if(!this.limited) {
                            ret =  this.html;
                        } else if(!this.html || this.html.length <= this.limited) {
                            ret = this.html;
                        } else {
                            ret = this.html.slice(0, this.limited) + '...';
                        }
                        this.subHtml = (ret || '').replaceAll('<br>', '\n');
                    },
                    render: popperVMTemplate.render,
                    staticRenderFns: popperVMTemplate.staticRenderFns,
                })

                this.popperVM.html = this.html;
                this.popperVM.direct = this.direct;
                this.popperVM.reverse = this.reverse;
                this.popperVM.maxWidth = this.maxWidth;
                this.popperVM.limited = this.limited;
            },
            show() {
                let ele = $(this.$refs.target);
                let left = ele.offset().left + this.getScroll(ele).left + 'px';
                let top = ele.offset().top + this.getScroll(ele).top + 'px'; 

                this.popperVM.positionStyle = {
                    position: 'fixed',
                    zIndex: 99999,
                    left,
                    top,
                }

                this.popperVM && this.popperVM.$mount();
                document.body.appendChild(this.popperVM.$el)
            },
            hide() {
                this.popperVM && this.popperVM.$destroy();
                document.body.removeChild(this.popperVM.$el)
            },
            getScroll(ele) {
                let XMiddle = ele[0].offsetWidth * 0.5;
                let XRgiht = ele[0].offsetWidth;
                let XLeft = 0;
                let YMiddle = ele[0].offsetHeight * 0.5 - 2;
                let YBottom = ele[0].offsetHeight + 4;
                let YTop = -15;
                switch (this.direct) {
                    case 'top':
                        return {
                            left: XMiddle,
                            top: YTop,
                        }
                    case 'bottom':
                        return {
                            left: XMiddle,
                            top: YBottom,
                        }
                    case 'left':
                        return {
                            left: XLeft,
                            top: YMiddle,
                        }
                    default:
                        return {
                            left: XRgiht,
                            top: YMiddle,
                        }
                }
            }
        }
    }
</script>
<style lang="stylus">

.ocTooltips-manual
    position relative
    &[html]
        overflow visible
    &:before, &:after
        pointer-events none
        transition all 0.18s ease-out 0.18s
        top -100%
        left 50%
        position absolute
        z-index 10
        transform translate(10px,-50%)
        transform-origin top
        font-size 12px
        margin-top 5px
        opacity 1
    &:after
        background #1d1d2d
        border-radius 3px
        color #fff
        content attr(data-tooltip)
        padding .4em 1em
        white-space pre-wrap
        word-break break-word
        margin-bottom 11px
        line-height 1.41em
        transform translate(-50%, -100%)
        width max-content
        max-width 300px

    &:before
        content ""
        margin-bottom 5px
        border-width 6px
        border-style solid
        border-color transparent
        border-top-color #1d1d2d
        transform translate(-50%, -10%)
        max-width attr(data-width)

    &[direct="right"]
        &:before, &:after
            left 100%
            top 50%
            transform translate(10px, -50%)
            margin-top 0
        &:before
            transform translate(-1px, -50%)
            border-top-color transparent
            border-right-color #1d1d2d
    &[direct="left"]
        &:before, &:after
            left 0
            top 50%
            transform translate(-100%, -50%)
            margin-top 0
            margin-left -8px
        &:before
            transform translate(-1px, -50%)
            border-top-color transparent
            border-left-color #1d1d2d
    &[direct="bottom"]
        &:before, &:after
            left 50%
            top 100%
            transform translate(-50%, 5px)
            margin-top 0
        &:before
            transform translate(-50%, -50%)
            border-top-color transparent
            border-bottom-color #1d1d2d
    
    &[reverse]
        &:after
            color #666
            background #fff
            border 1px solid #ddd
            box-shadow 0 2px 4px rgba(0,0,0,.12), 0 0 6px rgba(0,0,0,.04)
        &[direct="bottom"]
            &:before            
                border-top-color transparent
                border-bottom-color #fff
        &[direct="left"]
            &:before            
                border-top-color transparent
                border-left-color #fff
        &[direct="right"]
            &:before            
                border-top-color transparent
                border-right-color #fff 
    &:hover
        &:before, &:after
            opacity 0.9
            


</style>
