<template>
    <Touch
        :tag="tag"
        :class="[
            $style.button,
            plain&&$style.isPlain,
            disabled&&$style.disabled,
            type,
            'btn',
            getStatus&&$style.ban,
            getSize
        ]"
        @tap="tap"
    >
        <RingRoller
            v-if="getStatus"
            hiddenBg
            :style="{width:$px2rem(28)}"
            :color="getColor"
        />
        <div :class="[$style.content,getStatus&&$style.cannotVisible]">
            <slot/>
        </div>
    </Touch>
</template>

<script>
    import Touch from "../external/Touch";
    import RingRoller from "../effect/RingRoller";
    export default {
        name: "Button",
        components: {RingRoller, Touch},
        props:{
            tag:{
                type:String,
                default:'span'
            },
            disabled:{
                type:Boolean,
                default:false
            },
            type:{
                //primary / success / warning / danger / info / text
                type:String,
                default:'text'
            },
            plain:{
                type:Boolean
            },
            loadingColor:{},
            status:{
                validator(v){
                    if(v.constructor==Boolean){
                        return true;
                    }
                    return v===-2||v===-1||v===0||v===1||v===2;
                },
                default:0
            },
            isSubmit:{
                type:Boolean,
                default:false
            },
            size:{
                default:2
            }
        },
        methods:{
            tap(e){
                if(this.status===1 || this.disabled){
                    return;
                }
                this.$emit('tap',e)
            },
            eventListener(e){
                if(this.status===1){
                    return;
                }
                if(e.keyCode == 13){
                    this.$emit('tap');
                }
            }
        },
        mounted(){
            if(!this.isSubmit || this.disabled){
                return;
            }
            document.addEventListener('keydown',this.eventListener);
        },
        destroyed(){
            if(document.removeEventListener){
                document.removeEventListener("keydown", this.eventListener);
            }
            else if(document.detachEvent){
                document.detachEvent("keydown", this.eventListener);
            }
        },
        computed:{
            getColor(){
                return !this.plain&&(this.loadingColor===undefined)?'#FFF':this.loadingColor;
            },
            getStatus(){
                if(this.disabled){
                    return false;
                }
                if(this.status.constructor==Boolean){
                    return !!this.status;
                }
                return this.status==1;
            },
            getSize(){
                switch (Number(this.size)) {
                    case 1:return 'small';
                    case 2:
                    default:
                        return 'normal';
                }
            }
        }
    }
</script>

<style module lang="scss">
    @value Default,Primary,Success,Warning,Danger,Info,Action from '../../cssInjection/stylization.scss';
    .button{
        display: inline-block;
        padding: 6px 12px;
        border-radius: 4px;
        color: #FFF;
        margin: 0 12px;
        font-size: 14px;
        transition-property: border-color,color,background-color;
        transition-duration: .25s;
        cursor: pointer;
        text-align: center;
        line-height: 1.56em !important;
        position: relative;
        &:global{
            &.small{
                padding: 3px 12px;
                font-size: 12px;
            }
        }
        &.ban{
            cursor: not-allowed !important;
            &:hover{
                box-shadow: none !important;
            }
        }
        &.disabled{
            opacity: 0.7;
            cursor: not-allowed;
            box-shadow: none !important;
        }
        &:global{
            border-width: 1PX;
            border-style: solid;
            letter-spacing: 1PX;
            &:not(.isPlain){
                color: #FFF;
                &:hover{
                    box-shadow: 0 0 20px 0px rgba(0,0,0,0.1) inset;
                }
                &.default{
                    border-color: #D8D8D8;
                    background-color: #D8D8D8;
                    color: #000;
                }
                &.primary{
                    border-color: Primary;
                    background-color: Primary;
                }
                &.success{
                    border-color: Success;
                    background-color: Success;
                }
                &.warning{
                    border-color: Warning;
                    background-color: Warning;
                }
                &.danger{
                    border-color: Danger;
                    background-color: Danger;
                }
                &.info{
                    border-color: Info;
                    background-color: Info;
                }
                &.action{
                    border-color: Action;
                    background-color: Action;
                }
            }
            &.text{
                border-color: rgba(223,223,223,1);
                color: #8F8F8F;
                background-color: rgba(0,0,0,0);
                &:hover{
                    background-color: Primary;
                    border-color: Primary;
                    color: #FFF;
                }
            }
        }
        >.cannotVisible{
            opacity: 0;
        }
        >.content{
            white-space: nowrap;
        }

    }
</style>
