<template>
    <div :class="[prefixCls]" v-show="isShow" :style="noticeModalSize">
        <div v-show="tipTopShow" :class="[prefixCls + '-tipTop']" :style="position"></div>
        <div v-show="tipTopShow" :class="[prefixCls + '-tipLeft']" :style="position"></div>
        <div :class="[prefixCls + '-info']">
            <div :class="[prefixCls + '-content']">
                <div>
                    {{content}}
                </div>
            </div>
        </div>
        <div v-show="tipBotShow" :class="[prefixCls + '-tipBot']" :style="position"></div>
    </div>
</template>
<script>
    const prefixCls = 'ivu-noticeModel';
    export default {
        props:{
            width:{
                type: Number,
                default:0,
            },
            height:{
                type: Number,
                default:0,
            },
            isShow: {
                type: Boolean,
                default: false
            },
            placement:{
                type:String,
                default:'',
            },
            content:{
                type:String,
                default:''
            }
        },
        data(){
            return {
                prefixCls: prefixCls,
                isClick:true,
                tipTopShow:true,
                tipBotShow:false,
                noticeModalSize:{
                    width:'',
                    height:'',
                    position: 'absolute',
                    top: '',
                    left:'',
                },
                position:{
                    right:'',
                    left:'',
                }
            }
        },
        created(){
            this.noticeModalSize.width=this.$props.width+'px';
            this.noticeModalSize.height=this.$props.height +'px';
        },
        methods:{
            showPosition(){
                const nmWidth = this.$props.width;
                const nmHeight = this.$props.height;
                const prev = document.getElementsByClassName("ivu-noticeModel")[0].parentNode.firstChild;
                const offsetLeft = prev.offsetLeft;
                const offsetTop = prev.offsetTop;
                const clientHeight = prev.clientHeight;
                const clientWidth = prev.clientWidth;
                const ocLeft = offsetLeft + clientWidth; //同级元素左侧到window左边的距离
                const ocTop = offsetTop + clientHeight + 15; //同级元素底部到window顶部的距离
                const onBot = offsetTop - nmHeight -15 ;//同级元素顶部到window顶部的距离
                const tipLeft =  clientWidth / 2;
                if(this.placement == "top"){
                    this.tipTopShow = false;
                    this.tipBotShow = true;
                    this.noticeModalSize.top = onBot + 'px';
                    if(ocTop >= nmHeight && ocLeft >= nmWidth){
                        this.noticeModalSize.left = ocLeft - nmWidth + 'px';
                        this.position.right = tipLeft +'px';
                        this.position.left ='';
                    }else {
                        this.position.left = tipLeft +'px';
                        this.position.right ='';
                    }
                }else {
                    this.tipTopShow = true;
                    this.tipBotShow = false;
                    this.noticeModalSize.top = ocTop + 'px';
                    if(ocLeft >= nmWidth ){
                        this.noticeModalSize.left = ocLeft - nmWidth + 'px';
                        this.position.right= tipLeft +'px';
                        this.position.left='';
                    }else {
                        this.position.left = tipLeft +'px';
                        this.position.right ='';
                    }
                }
            }
        },
        mounted(){
            this.showPosition();
            window.addEventListener('resize', this.showPosition);
        },
    }
</script>