<template>
    <view class="tool-tip" :style="{'visibility': show ? 'visible' : 'hidden'}">
        <view
            v-if="showMask"
            class="tool-mask"
            @tap.stop="onMaskTap"
        >
        </view>
        <view
            class="inner"
            :style="{
                left: left + 'px',
                top: top + 'px',
                padding: padding ? padding : '',
                transform: innerStyle.transform || '',
                opacity: innerStyle.opacity || '',
                boxShadow: boxShadow
            }"
        >
            <slot></slot>
            <view
                v-if="triangle === 'up'"
                class="triangle-up"
                :style="{'left': triangleLeft + 'px'}"
            ></view>
            <view
                v-else
                class="triangle-down"
                :style="{'left': triangleCenter ? '50%' : triangleLeft + 'px',
                         'marginLeft': triangleCenter ? '-7px' : ''}"
            ></view>
        </view>
    </view>
</template>

<script>
/**
* @file 简单气泡
* @author wangying
*/
export default {
    config: {
        component: true
    },
    props: {
        show: {
            type: Boolean,
            default: false
        },
        showMask: {
            type: Boolean,
            default: true
        },
        padding: {
            type: String,
            default: ''
        },
        top: {
            type: Number,
            default: 0
        },
        left: {
            type: Number,
            default: 0
        },
        boxShadow: {
            type: String,
            default: ''
        },
        triangle: {
            type: String,
            default: 'up'
        },
        triangleLeft: {
            type: Number,
            default: 10
        },
        triangleCenter: {
            type: Boolean,
            default: false
        }
    },
    computed: {
        innerStyle() {
            if (this.show) {
                return {transform: 'scale(1)', opacity: '1'};
            }

            return {transform: 'scale(.83)', opacity: '0'};

        }
    },
    data() {
        return {
        };
    },
    methods: {
        onMaskTap() {
            this.$emit('close');
        }
    }
};
</script>
<style lang="less" scoped>
.tool-tip {
    .tool-mask {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background-color: rgba(0, 0, 0, .3);
        z-index: 921;
    }

    .inner {
        position: relative;
        padding: .05rem .1rem;
        background-color: #fff;
        border-radius: 5px;
        z-index: 930;
        transition: opacity .26s cubic-bezier(.4, .2, .6, 1) 0s, transform .26s cubic-bezier(.4, .2, .6, 1) 0s;
    }

    .triangle-up {
        position: absolute;
        top: -6px;
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 0 7px 7px 7px;
        border-color: transparent transparent #fff transparent;
        transition: opacity .2s cubic-bezier(.42, 0, .52, 1) 0s;
    }

    .triangle-down {
        position: absolute;
        bottom: -6px;
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 7px 7px 0px 7px;
        border-color: #fff transparent transparent transparent;
        transition: opacity .2s cubic-bezier(.42, 0, .52, 1) 0s;
    }
}
</style>


