<template>
    

        <transition name="cw-modal-fade" v-if="showMask">

            <!--带有遮罩功能的弹窗-->
            <div class='v-modal-mask' v-if="visible">

                <div class='v-modal' :style="dialogStyle">

                    <!--弹窗顶部工具栏-->
                    <div class="v-modal-tool" @mousedown="mouseDown('drag',$event)">

                        <!--弹窗的头部的标题-->
                        <div class="v-modal-tile-default">{{title}}</div>

                        <!--关闭按钮-->
                        <div class='v-modal-close-default'>

                            <span :class="[isFullScreen?'v-icon-popup':'v-icon-check-empty']" :title="isFullScreen?'最小化':'最大化'" @click="maximum"></span>
                            <span class="v-icon-cancel" @click="close"></span>

                        </div>

                        <div class="clear"></div>

                    </div>

                    <!--弹窗头部-->
                    <div v-if="showHeader">

                        <!--弹窗头部-->
                        <div class="v-modal-header" v-if="showHeader">

                            <component :is="headerComponentName" v-if="headerComponentName"></component>

                        </div>

                    </div>

                    <!--弹窗内容(默认)-->
                    <div class="v-modal-body" :style="{height:bodyHeight+'px'}"  v-if="!bodyComponentName" >

                        <div class="v-modal-body-default">

                            <div v-html="content"></div>

                        </div>

                    </div>

                    <!--弹窗内容(自定义)-->
                    <div class="v-modal-body" :style="{height:bodyHeight+'px'}" v-else>

                        <!--自定义弹窗内容-->
                        <component :is="bodyComponentName"></component>

                    </div>

                    <!--弹窗底部-->
                    <div v-if="showFooter">

                        <!--弹窗底部自定义-->
                        <div class="v-modal-footer" v-if="footerComponentName"></div>

                    </div>

                    <!--弹窗拖拽缩放区域-->

                    <!--左上角-->
                    <div class="v-modal-zoom-leftUpper" v-if="isResize &&!isFullScreen" @mousedown="mouseDown('leftUpper',$event)"></div>
                    <!--顶部-->
                    <div class="v-modal-zoom-top" v-if="isResize &&!isFullScreen" @mousedown="mouseDown('top',$event)"></div>
                    <!--右上角-->
                    <div class="v-modal-zoom-rightUpper" v-if="isResize &&!isFullScreen" @mousedown="mouseDown('rightUpper',$event)"></div>
                    <!--左侧-->
                    <div class="v-modal-zoom-left" v-if="isResize &&!isFullScreen" @mousedown="mouseDown('left',$event)"></div>
                    <!--右侧-->
                    <div class="v-modal-zoom-right" v-if="isResize &&!isFullScreen" @mousedown="mouseDown('right',$event)"></div>
                    <!--左下角-->
                    <div class="v-modal-zoom-leftLower" v-if="isResize &&!isFullScreen" @mousedown="mouseDown('leftLower',$event)"></div>
                    <!--底部-->
                    <div class="v-modal-zoom-bottom" v-if="isResize &&!isFullScreen" @mousedown="mouseDown('bottom',$event)"></div>
                    <!--右下角-->
                    <div class="v-modal-zoom-lowerRight" v-if="isResize &&!isFullScreen" @mousedown="mouseDown('lowerRight',$event)"></div>

                </div>

            </div>

        </transition>

        <transition name="cw-modal-fade" v-else>

            <div class='v-modal' :style="dialogStyle" v-if="visible">

                <!--弹窗顶部工具栏-->
                <div class="v-modal-tool" @mousedown="mouseDown('drag',$event)">

                    <!--弹窗的头部的标题-->
                    <div class="v-modal-tile-default">{{title}}</div>

                    <!--关闭按钮-->
                    <div class='v-modal-close-default'>

                        <span :class="[isFullScreen?'v-icon-popup':'v-icon-check-empty']" :title="isFullScreen?'最小化':'最大化'" @click="maximum"></span>
                        <span class="v-icon-cancel" @click="close"></span>

                    </div>

                    <div class="clear"></div>

                </div>

                <!--弹窗头部-->
                <div v-if="showHeader">

                    <!--弹窗头部-->
                    <div class="v-modal-header" v-if="showHeader">

                        <component :is="headerComponentName" v-if="headerComponentName"></component>

                    </div>

                </div>

                <!--弹窗内容(默认)-->
                <div class="v-modal-body" :style="{height:bodyHeight+'px'}"  v-if="!bodyComponentName" >

                    <div class="v-modal-body-default">

                        <div v-html="content"></div>

                    </div>

                </div>

                <!--弹窗内容(自定义)-->
                <div class="v-modal-body" :style="{height:bodyHeight+'px'}" v-else>

                    <!--自定义弹窗内容-->
                    <component :is="bodyComponentName"></component>

                </div>

                <!--弹窗底部-->
                <div v-if="showFooter">

                    <!--弹窗底部自定义-->
                    <div class="v-modal-footer" v-if="footerComponentName"></div>

                </div>

                <!--弹窗拖拽缩放区域-->

                <!--左上角-->
                <div class="v-modal-zoom-leftUpper" v-if="isResize &&!isFullScreen" @mousedown="mouseDown('leftUpper',$event)"></div>
                <!--顶部-->
                <div class="v-modal-zoom-top" v-if="isResize &&!isFullScreen" @mousedown="mouseDown('top',$event)"></div>
                <!--右上角-->
                <div class="v-modal-zoom-rightUpper" v-if="isResize &&!isFullScreen" @mousedown="mouseDown('rightUpper',$event)"></div>
                <!--左侧-->
                <div class="v-modal-zoom-left" v-if="isResize &&!isFullScreen" @mousedown="mouseDown('left',$event)"></div>
                <!--右侧-->
                <div class="v-modal-zoom-right" v-if="isResize &&!isFullScreen" @mousedown="mouseDown('right',$event)"></div>
                <!--左下角-->
                <div class="v-modal-zoom-leftLower" v-if="isResize &&!isFullScreen" @mousedown="mouseDown('leftLower',$event)"></div>
                <!--底部-->
                <div class="v-modal-zoom-bottom" v-if="isResize &&!isFullScreen" @mousedown="mouseDown('bottom',$event)"></div>
                <!--右下角-->
                <div class="v-modal-zoom-lowerRight" v-if="isResize &&!isFullScreen" @mousedown="mouseDown('lowerRight',$event)"></div>

            </div>

        </transition>



</template>

<script>

    import props from './mixins/props.js';//组件配置属性
    import events from './mixins/events.js';//组件事件

    export default{
        mixins:[props,events]
    };

</script>
