<template>
    <div
        v-if="trigger=='hover'"
        :class="$style.dropdown"
        @mouseover="over"
        @mouseout="out"
    >
        <slot/>
        <div :class="[$style.wrap,visible&&$style.visible]">
            <i :class="$style.arrow"/>
            <slot name="box"/>
        </div>
    </div>
</template>

<script>
    import Touch from "../external/Touch";
    export default {
        name: "Dropdown",
        components: {Touch},
        props:{
            placement:{
                type:String,
                default:'bottom'
            },
            trigger:{
                type:String,
                default: 'hover'
            }
        },
        data(){
            return {
                count:0,
                visible: false,
                timer:null,
            }
        },
        watch:{
            count(){
                if(this.count==5){
                    window.clearInterval(this.timer);
                    this.visible=false;
                }
            }
        },
        methods:{
            over(){
                if(!!this.timer){
                    window.clearInterval(this.timer)
                }
                this.visible=true
            },
            out(){
                this.count=0;
                this.timer=window.setInterval(()=>{
                    this.count++;
                },100);
            }
        }
    }
</script>

<style module lang="scss">
    @import '../../cssInjection/cssLayout.scss';
    .dropdown{
        @extend %ClearFloat;
        position: relative;
        >.wrap{
            transition: transform .2s,opacity .3s,pointer-events 0s 1s;
            transform: translateY(15px);
            opacity: 0;
            pointer-events: none;
            &.visible{
                transform: translateY(0);
                opacity: 1;
                pointer-events: auto;
            }
            $arrowHeight:16px;
            $arrowWidth: 20px;
            >.arrow{
                position: absolute;
                z-index: 11;
                left: 50%;
                top: 100%;
                box-sizing: content-box;
                width: 0;
                height: 0;
                transform: translate(-50%,$arrowHeight/3);
                border-bottom-color: rgba(191,191,191,0.5) !important;
                &,&:after{
                    border-style: solid;
                    border-color: rgba(0,0,0,0);
                    border-width: 0 $arrowWidth/2 $arrowHeight*2/3;
                }
                &:after{
                    content: '';
                    position: absolute;
                    width: 100%;
                    height: 100%;
                    left: 0;
                    top: 2PX;
                    transform: translateX(-50%);
                    border-bottom-color: #FFF !important;
                    z-index: 12;
                }
            }
            >div{
                position: absolute;
                z-index: 10;
                left: 50%;
                top: 100%;
                transform: translate(-50%,$arrowHeight);
                box-shadow: 0px 0px 2px 1px rgba(191,191,191,0.5);
                border-radius: 4PX;
                background-color: #FFF;
                padding: 18px;
            }
        }
    }
</style>