<template>
    <div :class="[$style.dialog,value&&$style.show]">
        <Touch
            tag="div"
            :class="$style.layer"
            @tap="$emit('input',false)"
        />
        <div :class="[$style.box,title&&$style.hasTitle]">
            <div v-if="title" :class="$style.header">
                <span>{{title}}</span>
                <!--<Touch tag="span" :class="$style.closeIcon"  @tap="$emit('input',false)">-->
                    <!--<IconFont :class="$style.icon">&#xe7;</IconFont>-->
                <!--</Touch>-->
            </div>
            <div
                v-if="status==1"
                :class="$style.loadding"
            >
                <RingRoller/>
            </div>
            <template v-else>
                <div :class="[className,$style.body]" :key="value">
                    <slot/>
                </div>
                <div :class="$style.footer">
                    <slot name="footer"/>
                </div>
            </template>

        </div>
    </div>
</template>

<script>
    import Touch from "../external/Touch";
    import RingRoller from "../effect/RingRoller";
	import IconFont from "../basic/IconFont";
    export default {
        name: "Dialog",
        components: {RingRoller, Touch,IconFont},
        props:{
            title:{
                type:String,
                default:'提示'
            },
            value:{},
            className:{},
            status:{
                validator(v){
                    if(v.constructor==Boolean){
                        return true;
                    }
                    return v===-2||v===-1||v===0||v===1||v===2;
                },
                default:0
            }
        }
    }
</script>

<style module lang="scss">
    @value FormItemTextColor from '../../cssInjection/stylization.scss';
    @import '../../cssInjection/cssFunction.scss';
    @import '../../cssInjection/cssLayout.scss';

    .dialog {
        $duration: 400ms;
        position: fixed;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        z-index: 20;
        pointer-events: none;
        visibility: hidden;
        transition: pointer-events 0s $duration,visibility 0s $duration;

        &.show{
            pointer-events: auto;
            visibility: visible;
            transition: pointer-events 0s 0s,visibility 0s 0s;
            >.layer{
                opacity: 1;
            }
            >.box{
                transform: translateX(-50%);
                opacity: 1;
            }
        }
        >.layer{
            position: relative;
            z-index: 1;
            width: 100%;
            height: 100%;
            background-color: rgba(0,0,0,0.8);
            opacity: 0;
            transition: opacity $duration;
        }
        >.box{
            max-width: 60%;
            min-width: 280px;
            max-height: 80%;
            overflow-y: visible;
            position: absolute;
            z-index: 2;
            left: 50%;
            top: 10%;
            background-color: #FFF;
            transform: translateX(-50%) translateY(1rem);
            opacity: 0;
            transition: transform $duration,opacity $duration;
            $headerHight: 50px;
            $paddingTop: 15px;
            padding: 25px 25px 15px;
            &.hasTitle{
                padding-top: $headerHight+$paddingTop;
            }
            box-sizing: content-box;
            border-radius: 4PX;
            >.header{
                width: 100%;
                position: absolute;
                left: 0;
                top: 0;
                height: $headerHight;
                line-height: $headerHight;
                border-radius: 4PX 4PX 0 0;
                font-size: 17px;
                padding-left: 1em;
                padding-right: 1em;
                background-image: linear-gradient(90deg,#f1f1f1 0%,#f1f1f1 100%);
                /*>.closeIcon{*/
                    /*float: right;*/
                    /*>span{*/
                        /*border: 1PX solid FormItemTextColor;*/
                        /*padding: 2px;*/
                        /*border-radius: 50%;*/
                    /*}*/
                    /*>span:hover{*/
                        /*color: FormItemTextColor;*/
                    /*}*/
                /*}*/
            }
            >.loadding{
                height: 250px;
            }
            >.body{
                width: 100%;
                font-size: 14px;
            }
            >.footer{
                text-align: right;
                margin-top: 18px;
                >*{
                    &:last-child{
                        margin-right: 0;
                    }
                }
                :global(.btn){
                    /*width: 66px;*/
                }
            }
        }
    }
</style>