<template>
    <Popper
        :trigger="trigger"
        :options="getOption"
    >
        <div :class="[$style.popper,popperClassName]">
            <slot name="popper"/>
        </div>
        <template slot="reference">
            <slot name="reference"/>
        </template>
    </Popper>
</template>

<script>
    import Popper from 'vue-popperjs/src/index';
    export default {
        name: "Popover",
        components: {Popper},
        props:{
            trigger:{
                default:'hover',
                validator(v){
                    return v==='click'||v==='hover';
                }
            },
            options:{
                default(){
                    return {};
                },
                type:Object
            },
            popperClassName:{
                default:null,
                type:String
            }
        },
        computed:{
            getOption(){
                return {
                    placement: 'bottom',
                    ...this.options
                }
            }
        }
    }
</script>

<style module lang="scss">
    @import '../../cssInjection/cssFunction.scss';
    @import '../../cssInjection/cssLayout.scss';
    .popper{
        font-size: 0.9rem;
        $bgColor:#FFF;
        $borderColor:#ebeef5;
        padding: 4PX 6PX;
        width: auto;
        background-color: $bgColor;
        color: #606266;
        border-radius: 4PX;
        border: 1PX solid $borderColor;
        z-index: 200000;
        box-shadow: 0px 2PX 12PX 0px rgba(0,0,0,0.1);
        $arrowSize:6PX;
        &[x-placement^="top"]{
            margin-bottom: $arrowSize;
            >:global(.popper__arrow){
                border-bottom-width: 0;
                border-top-color: $borderColor;
                bottom: -$arrowSize;
                margin-top: 0;
                margin-bottom: 0;
                &:after{
                    border-bottom-width: 0;
                    border-top-color: $bgColor;
                    transform: translate(-50%, -100%) translateY(-1PX);
                }
            }
        }
        &[x-placement^="bottom"]{
            margin-top: $arrowSize;
            >:global(.popper__arrow){
                border-top-width: 0;
                border-bottom-color: $borderColor;
                top: -$arrowSize;
                margin-top: 0;
                margin-bottom: 0;
                &:after{
                    border-top-width: 0;
                    border-bottom-color: $bgColor;
                    transform: translate(-50%, 0%) translateY(1PX);
                }
            }
        }
        &[x-placement^="left"]{
            margin-right: $arrowSize;
            >:global(.popper__arrow){
                border-right-width: 0;
                border-left-color: $borderColor;
                right: -$arrowSize;
                margin-left: 0;
                margin-right: 0;
                &:after{
                    border-right-width: 0;
                    border-left-color: $bgColor;
                    transform: translate(-100%, -50%) translateX(-1PX);
                }
            }
        }
        &[x-placement^="right"]{
            margin-left: $arrowSize;
            >:global(.popper__arrow){
                border-left-width: 0;
                border-right-color: $borderColor;
                left: -$arrowSize;
                margin-right: 0;
                margin-left: 0;
                &:after{
                    border-left-width: 0;
                    border-right-color: $bgColor;
                    transform: translate(0%, -50%) translateX(1PX);
                }
            }
        }
        >:global(.popper__arrow){
            width: 0;
            height: 0;
            border: $arrowSize solid transparent;
            position: absolute;
            margin: $arrowSize;
            &:after{
                content: '';
                border: $arrowSize solid transparent;
                width: 0;
                height: 0;
                position: absolute;
                left: 0;
                top: 0;
            }
        }
    }
</style>