<template>
    <div :class="[$style.message,visible&&$style.show,type]">
        <Touch
            tag="div"
            :class="$style.layer"
            @tap="cancel"
        />
        <div :class="$style.box">
            <div :class="$style.header">
                <span>{{title}}</span>
            </div>
            <div :class="$style.body">
                <IconFont :class="[$style.icon,type]">{{getIconCode}}</IconFont>
                <span :class="$style.msg">{{msg}}</span>
            </div>
            <div :class="$style.footer">
                <cox-Button @tap="confirm" type="primary">确认</cox-Button>
                <cox-Button @tap="cancel" type="default">取消</cox-Button>
            </div>
        </div>
    </div>
</template>

<script>
    import IconFont from "../../basic/IconFont";
    import Touch from "../../external/Touch";
    export default {
        name: "Confirm",
        components: {Touch, IconFont},
        data(){
            return {
                title:'',
                visible:false,
                msg:"",
                type:undefined,
                flag:0
            }
        },
        computed:{
            getIconCode(){
                switch(this.type){
                    case 'error':return '\ue124';
                    case 'success':return '\ue123';
                    case 'primary':return '\ue122';
                    case 'warning':return '\ue122';
                    case 'notice':
                    default:
                        return '\ue121';
                }
            }
        },
        methods:{
            confirm(){
                this.flag=1;
                this.visible=false;
            },
            cancel(){
                this.flag=-1;
                this.visible=false;
            }
        }
    }
</script>

<style module lang="scss">
    @import '../../../cssInjection/cssFunction.scss';
    @import '../../../cssInjection/cssLayout.scss';
    @value Primary from '../../../cssInjection/stylization.scss';
    .message {
        $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%;
            width: 280px;
            max-height: 80%;
            overflow-x: auto;
            position: absolute;
            z-index: 2;
            left: 50%;
            top: 20%;
            background-color: #FFF;
            transform: translateX(-50%) translateY(1rem);
            opacity: 0;
            transition: transform $duration,opacity $duration;
            padding: 20px 25px 15px;
            box-sizing: content-box;
            border-radius: 2PX;
            >.header{
                width: 100%;
                position: relative;
                height: 1em;
                line-height: 1em;
                font-size: 18px;
                margin-bottom: 15px;
            }
            >.body{
                width: 100%;
                font-size: 14px;
                line-height: 1.5em;
                >.icon{
                    font-size: 20px;
                    margin-right: 4px;
                    &:global{
                        &.success{
                            color: #67c23a;
                        }
                        &.warning{
                            color: #e6a23c;
                        }
                        &.primary{
                            color: Primary;
                        }
                        &.error{
                            color: #f56c6c;
                        }
                    }
                }
                >*{
                    vertical-align: middle;
                }
            }
            >.footer{
                text-align: right;
                margin-top: 18px;
                >*{
                    margin-right: 4PX;
                    &:last-child{
                        margin-right: 0;
                    }
                }
            }
        }
    }
</style>