<template>
    <div
        class="nus_badge"
        :class="[styleName && 'nu_badge-' + styleName, themeName && 'nu_theme-' + themeName]"
        @click="_onClick($event)"
        @tap="_onTap($event)">
        <div class="nu_badeg-wrap">
            <span class="nu_badge-pre">
            </span><nu-tag
                class="nu_badge-tag"
                :nameText="nameText">
            </nu-tag><span class="nu_badge-suf">
            </span>
        </div>
    </div>
</template>
<script>
import WidgetTmp from '../_comm/WidgetTmp';
import NuTag from '../tag';
export default {
    extends: WidgetTmp,
    name: 'NuBadge',
    components: {
        NuTag
    },
    props: {
        /**
        * 风格类型(circle:两头圆形;angle:右边有两三角;walk:右边箭头;angleb:下边有两三角)
        */
        themeName: {
            type: String,
            default: ''
        },
        /**
        * 样式类型 fill：有填充
        */
        styleName: {
            type: String
        },
        /**
         * 内容名称
         */
        nameText: {
            type: [String, Number]
        }
    }
};
</script>
<style lang="scss">
@import '../../../_assets/style/_iconFont.scss';
@import '../../../_assets/style/_var.scss';
@import '../../../_assets/style/_mixin.scss';

.nus_badge {
    position: relative;
    display: inline-block;
    box-sizing: border-box;
    font-size: $nubadge-font-size;
    border-radius: 3px;
    color: $nubadge-color;
    border-color: $nubadge-br-color;
    .nu_badeg-wrap{
        padding: 0 2px;
        border: solid 1px;
        position: relative;
        border-color: inherit;
        border-radius: inherit;
    }
    * {
        border-color: inherit;
        &:before,&::after{
            background-color: inherit;
            border-color: inherit;
        }
    }
    .nu_badge-tag{
        border-color: transparent;
        background: none;
        color: inherit;
        font-size: inherit;
        display: block;
        &::before,&::after,::before,::after{
            color: inherit;
            font-size: inherit;
            border-color: transparent !important;
            background: none !important;
        }
    }
    .nu_badge-pre{
        display: none;
    }
    .nu_badge-suf{
        display: none;
    }
    // 填充
    &.nu_badge-{
        &fill {
            color: $nubadge-default-color;
            .nu_badeg-wrap{
                border-radius: inherit;
                border-color: inherit;
                color: inherit;
                background-color: $nubadge-bg-color;
                :before,:after{
                    background-color: $nubadge-bg-color;
                }
            }
            &.nu_theme-arrow{
                .nu_badeg-wrap{
                    background: none;
                    &::before,&::after{
                        background-color: $nubadge-bg-color;
                    }
                }
            }
        }
    }
    &.nu_theme-{
        &circle{ // 圆
            border-radius: 0.8em;
        }
        &angle{ // 右边有两三角
            margin-right: 2em;
            .nu_badeg-wrap{
                border-radius: 0;
                border-right-width: 0;
            }
            .nu_badge-tag {
                margin-right: -1.4em;
            }
            .nu_badge-pre,.nu_badge-suf{
                position: absolute;
                overflow: hidden;
                display: block;
                background: none;
                left: 100%;
                height: calc(50% + 1px);
                width: 2em;
                border: {
                    style: solid;
                    width: 1px;
                    color: inherit;
                    left: none;
                    right-width: 0;
                }
                &:before{
                    content: '';
                    position: absolute;
                    border-right: {
                        style: solid;
                        width: 1px;
                    }
                    right: 0px;
                    height: 100%;
                    width: 200%;
                }
            }
            .nu_badge-pre{
                top: -1px;
                border-bottom-width:0;
                &:before{
                    top: 0;
                    transform-origin: 0 0;
                    transform: skewX(-26deg);
                }
            }
            .nu_badge-suf{
                bottom: -1px;
                border-top-width:0;
                &:before{
                    bottom: 0;
                    transform-origin: 0 100%;
                    transform: skewX(26deg);
                }
            }
        }
        &walk{ // 箭头
            overflow: hidden;
            border-radius: 0;
            .nu_badeg-wrap{
                border-right-width: 0;
                margin-right: 0.3em;
            }
            .nu_badge-suf{
                display: block;
                width: 0.36em;
                height: 0.36em;
                border: solid 1px;
                border-color: inherit;
                border-left-width: 0;
                border-bottom: 0;
                position: absolute;
                left: 100%;
                top: 50%;
                margin-left: -0.19em;
                transform-origin: 50% 50%;
                transform: translateY(-50%) rotateZ(45deg);
                background-color: inherit;
                &::before{
                    content: '';
                    position: absolute;
                    top: 0px;
                    right: calc(100% - 1px);
                    width: 100%;
                    height: 0;
                    border-top: 1px solid;
                    border-color: inherit;
                    transform-origin: 100% 0;
                    transform: rotateZ(45deg);
                }
                &::after{
                    content: '';
                    position: absolute;
                    bottom: 0px;
                    left: 100%;
                    width: 100%;
                    height: 0;
                    border-top: 1px solid;
                    border-color: inherit;
                    transform-origin: 0 1px;
                    transform: rotateZ(45deg);
                }
            }
        }
        &arrow{ // 箭头
            border-radius: 0;
            .nu_badeg-wrap{
                border-right-width: 0;
                border-left-width: 0;
                :before,:after{
                    background: none;
                }
                &::before,&::after{
                    position: absolute;
                    content: '';
                    border:solid 1px;
                    border-color:inherit;
                    border-top-width: 0;
                    border-bottom-width: 0;
                    height: 50%;
                    width: calc(100% - 2px);
                    left: 0;
                }
                &::before{
                    top: 0;
                    transform-origin: 100% 0;
                    transform: skewX(25deg);
                }
                &::after{
                    bottom: 0;
                    transform-origin: 0 100%;
                    transform: skewX(-25deg);
                }
            }
        }
        &angleb{ // 下边两三角
            border-radius: 0;
            overflow: hidden;
            .nu_badeg-wrap{
                border-bottom-width: 0;
                margin-bottom: 50%;
            }
            .nu_badge-tag{
                padding: 0;
            }
            .nu_badge-suf{
                display: block;
                position: absolute;
                padding-top: 50%;
                top: 100%;
                left: -1px;
                right: -1px;
                border-left: solid 1px;
                border-right: solid 1px;
                border-color: inherit;
                &::after,&::before{
                    position: absolute;
                    content: '';
                    width: 50%;
                    top: 0;
                    bottom: 0;
                    border-bottom: solid 1px;
                    border-color: inherit;
                }
                &::before{
                    left: 0;
                    transform-origin: 0 0;
                    transform: skewY(-30deg);
                }
                &::after{
                    right: 0;
                    transform-origin: 100% 0;
                    transform: skewY(30deg);
                }
            }
        }
    }
}
</style>
