<template>
    <div
        class="nus_button"
        :class="[radius && 'nu_radius-' + radius,styleName && 'nu_btn-' + styleName||'',disabled && 'nu_disabled'||'', issubNameText && 'nu_subNameText']"
        :style="imgUrl && {backgroundImage:'url('+imgUrl+')'}"
        @click="_onClick($event)"
        @tap="_onTap($event)">
        <slot>
            {{ valueText }}
        </slot>
        <slot
            name="hook_subNameText">
            {{ subNameText }}
        </slot>
    </div>
</template>

<script>
import FormTemp from '../_comm/FormTmp';
export default {
    extends: FormTemp,
    name: 'NuButton',
    props: {
        /**
         * 样式
         */
        imgUrl: {
            type: String,
            default: ''
        },
        /**
         * 内容文字
         */
        nameText: {
            type: String,
            default: ''
        },
        /**
         * 小字
         */
        subNameText: {
            type: String,
            default: ''
        },
        /**
         * 样式默认为无边框有背景(fill:无边框有背景,hollow:有边框无背景)
         */
        styleName: {
            type: String,
            default: 'fill'
        },
        /**
         * 圆角（normal:正常圆角；all: 全圆角）
         */
        radius: {
            default: 'normal'
        }
    },
    computed: {
        /**
         * 判断是否有副标题
         * @returns {Boolean}
         */
        issubNameText() {
            let _that = this;
            let _subNameText = _that.$slots && _that.$slots.hook_subNameText;
            return !!_that.subNameText || (_subNameText && !!_subNameText.length);
        },
        /**
         * 获取主标题
         * @returns {String}
         */
        valueText() {
            let _that = this;
            return _that.nameText || _that.value || (!_that.imgUrl && '提交') || '　　';
        }
    },
    data() {
        return {
            /**
             * 是否禁用
             */
            myDisable: false
        };
    }
};
</script>

<style lang="scss">
@import '../../../_assets/style/_iconFont.scss';
@import '../../../_assets/style/_var.scss';
@import '../../../_assets/style/_mixin.scss';

.nus_button{
    // -webkit-tap-highlight-color: rgba(0, 0, 0, 0.03);
    display: inline-block;
    border-color: $nubutton-br-color;
    text-align: center;
    vertical-align: middle;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 100% 100%;
    outline: none;
    user-select: none;
    line-height: 2;
    padding: 5px 5px;
    white-space: nowrap;
    cursor: pointer;
    &.nu_subNameText{
        line-height: 1.2;
        padding: 6px 5px 5px 5px;
    }
    .nus_tag{
        display: block;
        border-color: transparent;
        color: inherit;
    }
    &.nu_btn{
        @at-root #{&}-{
            &fill{
                background-color: $nubutton-fill-bg-color;
                color: $nubutton-fill-color;
            }
            &hollow{
                color: $nubutton-color;
                position: relative;
                &:before {
                    content: '\20';
                    position: absolute;
                    left: -50%;
                    top: -50%;
                    right: -50%;
                    bottom: -50%;
                    border: {
                        style:solid;
                        width: 1px;
                        color: inherit;
                    };
                    transform-origin: 50% 50%;
                    transform: scale(0.5);
                    border-radius: inherit;
                    // margin-top: -1px; // 和实心的在一起的时候会大所以去掉
                }
                &.nu_disabled{
                    color: $nubutton-disabled-color;
                    background: none;
                }
            }
        }
    }
    &.nu_radius{
        @at-root #{&}-{
            &normal{
                border-radius: $nubutton-radius;
                &.nu_btn-hollow{
                    border-radius: $nubutton-radius * 2;
                }
            }
            &all{
                border-radius: $nubutton-radius-all;
                &.nu_btn-hollow{
                    border-radius: $nubutton-radius-all * 2;
                }
            }
        }
    }
    &.nu_disabled{
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
        color: $nubutton-fill-color;
        border-color: $nubutton-disabled-fill-bg-color;
        filter: grayscale(100%);
        filter: gray;
        &.nu_btn{
            @at-root #{&}-{
                &fill{
                    background-color: $nubutton-disabled-fill-bg-color;
                }
            }
        }
        &:active {
            opacity: 1;
        }
    }
    &:active {
        opacity: 0.8;
    }
}
</style>
