<template>
    <button
            :class="classStr"
            hover-class="yui_button_hover"
            hover-stop-propagation
            :style="{height:height,width:width,fontSize:fontSize,letterSpace:letterSpace,paddingTop:padding,paddingBottom:padding,fontWeight:bold?'bold':'normal'}"
            :open-type="openType"
            :scope='scope'
            :session-from="sessionFrom"
            :send-message-title="sendMessageTitle"
            :send-message-path="sendMessagePath"
            :send-message-img="sendMessageImg"
            :show-message-card="showMessageCard"
            @opensetting="handleOpenType($event)"
            @error="fnError"
            @getphonenumber="handleOpenType($event)"
            @agreeprivacyauthorization="handleOpenType($event)"
            @getAuthorize="handleOpenType($event)"
            @getuserinfo="handleOpenType($event)"
            @click.stop="fn_click"
    >

        <span :class="'yui_button_loading '+(loadingText==='' ? 'yui_button_loadingSingle' : '')" v-if="isLoading">
            <y-loading
                    topic="common"
                    size="auto"
                    :color="plain ? '':'white'"
            ></y-loading>
        </span>
        <slot name="icon"></slot>
        <span v-if="isSlot">
            <slot></slot>
        </span>
        <span v-else-if="loadingText!==undefined && loadingText!==null && isLoading">{{loadingText === true || loadingText === 'true' ? '':loadingText}}</span>
        <span v-else>{{text}}</span>

    </button>

</template>

<script>


    import yLoading from "./yLoading";
    export default {
        name: "yButton",
        components: {
            yLoading
        },
        computed: {
            classStr(){
                let ret = {
                    yui_button:true,
                    warn:this.isWarn,
                    error:this.isError,
                    correct:this.isCorrect,
                    plain:this.isPlain,
                    plain_none:this.disBorder,
                    topic_main:this.topicMain,
                    topic_gray:this.topicGray,
                    topic_yellow:this.topicYellow,
                    topic_light_yellow:this.topicLightYellow,
                    topic_light_gray:this.topicLightGray,
                    topic_disable:this.topicDisabled,
                    topic_black:this.topicBlack,
                    topic_gradient:this.topicGradient,
                    radius_full:this.radiusFull,
                    radius_round:this.radiusRound,
                    radius_little:this.radiusLittle,
                    disabled:this.isDisabled,
                    size_large:this.sizeLarge,
                    size_small:this.sizeSmall,
                    size_mini:this.sizeMini,
                    letter_space_middle:this.letterSpace == "middle" && !this.isLoading,
                    block:this.block
                }
                let retStr = "";
                for(let a in ret){
                    if(ret[a]){
                        retStr+=a + " ";
                    }
                }
                return "yui_button " +  retStr  + (this.customClass ? this.customClass : '');
            },
            isSlot(){
                return !!((this.$slots && this.$slots.default) || this.uiSlot);
            },
            isWarn() {
                return this.type === "warn";
            },
            isError() {
                return this.type === "error";
            },
            isCorrect() {
                return this.type === "correct";
            },
            isPlain() {
                return this.plain;
            },
            widthFull() {
                return this.width === "full";
            },
            radiusFull() {
                return this.radius === "full";
            },
            radiusRound() {
                return this.radius === "round";
            },
            radiusLittle() {
                return this.radius === "little"
            },
            widthHalf() {
                return this.width === "half";
            },
            sizeLarge() {
                return this.size === "large";
            },
            sizeSmall() {
                return this.size === "small";
            },
            sizeMini() {
                return this.size === "mini";
            },
            isDisabled() {
                return this.disabled;
            },
            isLoading(){
                return this.loading;
            },
            topicMain() {
                return this.topic === "main"
            },
            topicGray() {
                return this.topic === "gray"
            },
            topicYellow() {
                return this.topic === "yellow"
            },
            topicLightYellow() {
                return this.topic === "lightYellow"
            },
            topicDisabled() {
                return this.topic === "disabled"
            },
            topicLightGray() {
                return this.topic === "lightGray"
            },
            topicBlack() {
                return this.topic === "black"
            },
            topicGradient() {
                return this.topic === "gradient"
            }
        },
        data(){
            return {
                clickLock:false
            }
        },
        methods:{
            fn_click(e){
                const self = this;
                if(!this.isDisabled && !this.isLoading && !this.clickLock){
                    if(this.clickDistance){
                        self.clickLock = true;
                        setTimeout(data=>{
                            self.clickLock = false;
                        },self.clickDistance);
                    }
                    this.$emit("click",e);
                }
            },
            fnError(e){
                this.$emit("error",e)
            },
            handleOpenType(res){
                this.$emit("opentype",res)
            }
        },
        props: {
            bold:Boolean,
            block:Boolean,
            clickDistance:{
                default:1000,
                type:Number
            },
            customClass:String,
            disabled: Boolean,
            disBorder:Boolean,
            fontSize: {
                default:""
            },
            height: {
                default:"",
            },//高度
            letterSpace:"",
            loading: Boolean,//加载状态
            loadingText: [String,Boolean],//加载文字
            openType:{
                default:"",
                type:String
            },
            scope:{
                default:"",
                type:String
            },
            padding:"",
            sessionFrom:{
                default:"",
                type:String
            },
            sendMessageTitle:String,
            sendMessagePath:String,
            sendMessageImg:String,
            showMessageCard:Boolean,
            plain: Boolean,
            //圆角[full:椭圆|round:半圆|little:8px]
            radius: {
                default:"little",
                type:String
            },
            uiSlot:Boolean,
            shape: String,
            size: String,
            text: "",
            topic: String,
            type: String,//按钮类型
            width: {
                default:""
            },
        },

    }
</script>

<style lang="scss">
    @import "../css/var.scss";
    @import "../css/base";


    @keyframes loading {
        from {
            transform: rotate(0deg)
        }
        to {
            transform: rotate(360deg)
        }
    }

    .yui_button {
        display: inline-block;
        background: $button_color_default;
        height:auto;
        //padding: 0 10px;
        margin: 0;
        border: .5px solid #ebedf0;
        //line-height: 42px;
        line-height: 1;
        padding: $button_padding;
        font-size: $font_size_t3;
        box-sizing: border-box;
        position: relative;
        text-align: center;
        -webkit-appearance: none;
        overflow: visible;
        &:before{
            content: " ";
            display: block;
            background: #000;
            position: absolute;
            left: 50%;
            top: 50%;
            width: 100%;
            height: 100%;
            border: inherit;
            border-radius: inherit;
            opacity: 0;
            transform: translate(-50%, -50%);
            transition:all .2s;
        }
        &:after{
            border:none;
        }

        &:active,&.yui_button_hover {
            &:before {
                opacity: 0.2;
            }
        }

        &.block{
            display: block;
        }


        &.warn {
            background: $color_warn;
            color: $button_default_color;
            border: none;

            &.plain {
                background: #fff;
                color: $color_warn;
                border: .5px solid $color_warn;
            }
        }

        &.error {
            background: $color_error;
            color: $button_default_color;
            border: none;

            &.plain {
                background: #fff;
                color: $color_error;
                border: .5px solid $color_error;
            }
        }


        &.correct {
            background: $color_correct;
            color: $button_default_color;
            border: none;

            &.plain {
                background: #fff;
                color: $color_correct;
                border: .5px solid $color_correct;
            }
        }

        &.topic_main {
            background: $color_topic_main;
            color: $button_default_color;
            border: none;

            &.plain {
                background: #fff;
                color: $color_topic_main;
                //border: .5px solid $color_topic_main;
                border:none;
                &:after{
                    content: " ";
                    display: block;
                    background: none;
                    position: absolute;
                    left:0;
                    top:0;
                    width: calc(200% - 1px);
                    height: calc(200% - 1px);
                    border-radius: 12px;
                    border:1px solid $color_topic_main;
                    transform: scale(0.5);
                    transform-origin: left top;
                    box-sizing: border-box;
                }
                &.plain_none{
                    &:after{
                        content:"";
                        display: none;
                    }
                }

            }
        }

        &.topic_gradient {
            background: $color_topic_gradient;
            color: $button_default_color;
            border: none;
        }

        &.topic_gray{
            background: $button_gray_color;
            color: $button_default_color;
            border: none;
            &.disabled {
                opacity: 1;
                &:active:before,&.yui_button_hover:before {
                    content: none;
                }
            }

            &.plain {
                background: #fff;
                color: $button_gray_color;
                //border: .5px solid $color_topic_main;
                border:none;
                &:after{
                    content: " ";
                    display: block;
                    background: none;
                    position: absolute;
                    left:0;
                    top:0;
                    width: calc(200% - 1px);
                    height: calc(200% - 1px);
                    border-radius: 12px;
                    border:1px solid $button_gray_color;
                    transform: scale(0.5);
                    transform-origin: left top;
                    box-sizing: border-box;
                }
                &.plain_none{
                    &:after{
                        content:"";
                        display: none;
                    }
                }

            }
        }
        &.topic_yellow{
            background: #FED100;
            color: #000;
            border: none;
            &.disabled {
                opacity: 1;
                &:active:before,&.yui_button_hover:before {
                    content: none;
                }
            }
        }
        &.topic_light_yellow{
            background: #FBF6E6 ;
            color: #000;
            border: none;
            &.disabled {
                opacity: 1;
                &:active:before,&.yui_button_hover:before {
                    content: none;
                }
            }
        }

        &.topic_light_gray{
            background: #f8f8f8;
            color: $font_color_title;
            border: none;
            &.disabled {
                opacity: 1;
                &:active:before,&.yui_button_hover:before {
                    content: none;
                }
            }

            &.plain {
                background: #fff;
                color: $button_gray_color;
                //border: .5px solid $color_topic_main;
                border:none;
                &:after{
                    content: " ";
                    display: block;
                    background: none;
                    position: absolute;
                    left:0;
                    top:0;
                    width: calc(200% - 1px);
                    height: calc(200% - 1px);
                    border-radius: 12px;
                    border:1px solid $button_gray_color;
                    transform: scale(0.5);
                    transform-origin: left top;
                    box-sizing: border-box;
                }
                &.plain_none{
                    &:after{
                        content:"";
                        display: none;
                    }
                }

            }
        }
        &.topic_disable{
            background: #f2f2f2;
            color: #CCCDCD;
            border: none;
            &.disabled {
                opacity: 1;
                &:active:before,&.yui_button_hover:before {
                    content: none;
                }
            }

            &.plain {
                background: #fff;
                color: #CCCDCD;
                //border: .5px solid $color_topic_main;
                border:none;
                &:after{
                    content: " ";
                    display: block;
                    background: none;
                    position: absolute;
                    left:0;
                    top:0;
                    width: calc(200% - 1px);
                    height: calc(200% - 1px);
                    border-radius: 12px;
                    border:1px solid #CCCDCD;
                    transform: scale(0.5);
                    transform-origin: left top;
                    box-sizing: border-box;
                }
                &.plain_none{
                    &:after{
                        content:"";
                        display: none;
                    }
                }

            }
        }
        &.topic_black{
            background: $font_color_title;
            color: #fff;
            border: none;
            &.disabled {
                opacity: 1;
                &:active:before,&.yui_button_hover:before {
                    content: none;
                }
            }

            &.plain {
                background: #fff;
                color: $font_color_title;
                //border: .5px solid $color_topic_main;
                border:none;
                &:after{
                    content: " ";
                    display: block;
                    background: none;
                    position: absolute;
                    left:0;
                    top:0;
                    width: calc(200% - 1px);
                    height: calc(200% - 1px);
                    border-radius: 12px;
                    border:1px solid $font_color_title;
                    transform: scale(0.5);
                    transform-origin: left top;
                    box-sizing: border-box;
                }
                &.plain_none{
                    &:after{
                        content:"";
                        display: none;
                    }
                }

            }
        }



        &.radius_full {
            border-radius: 50%;
        }

        &.radius_round {
            border-radius: 10em;
            &.plain {
                &:after{
                    border-radius: 10em;
                }

            }
        }

        &.radius_little {
            border-radius: 6px;
        }

        &.size_large {
            width: 306px;
            //line-height: 44px;
            line-height: 1;
            padding-top: 13px;
            padding-bottom: 13px;
            font-size: $font_size_t2;
            text-overflow:ellipsis;
            overflow: hidden;
            white-space: nowrap;
        }

        &.size_small {
            width:$button_small_width;
            //line-height: 29px;
            line-height: 1;
            padding: $button_small_padding;
            font-size: $button_small_fontSize;
            text-overflow:ellipsis;
            overflow: hidden;
            white-space: nowrap;
        }

        &.size_mini {
            width:$button_mini_width;
            font-size: $button_mini_fontSize;
            text-overflow:ellipsis;
            //line-height: 28px;
            line-height: 1;
            padding: $button_mini_padding;
            overflow: hidden;
            white-space: nowrap;

            &.letter_space_middle{
                letter-spacing:  5px;
                text-indent: 5px;
            }
        }


        &.disabled {
            opacity: .5;

            &:active:before,&.yui_button_hover:before {
                content: none;
            }
        }
        &.width_full {
            width: 100%;
        }

        &.width_half {
            width: 50%;
        }

        &.letter_space_middle{
            letter-spacing:  10px;
            text-indent: 10px;
        }

        &>span{
            //vertical-align: middle;
        }

        .yui_button_loading {
            display: inline-block;
            position: relative;
            width: 17px;
            height: 17px;
            margin-right: 5px;
            vertical-align:middle;
        }

        .yui_button_loadingSingle{
            margin-right:0;
            vertical-align:middle;
        }
    }
</style>
