<template>
    <div class="nus_tritag"
        :class="[myAlign]"
        v-if="nameText"
        :data-text="nameText">
    </div>
</template>
<script>

export default {
    props: {
        /**
         * 对齐方式
         */
        align: {
            type: [String, Array],
            default: 'tr'
        },
        /**
         * 三角标签文字
         */
        nameText: {
            type: [String, Number],
            default: ''
        }
    },
    computed: {
        myAlign() {
            let align = (this.align || 'tr').toLowerCase();
            let res = 'tr';
            switch (align) {
                case 'tl':
                case 'tr':
                case 'bl':
                case 'br':
                    res = align;
                    break;
                default:
                    console.warn('align参数只支持：tl、tr、bl、br');
                    break;
            }
            return 'nu_align-' + res;
        }
    }
};
</script>
<style lang="scss">
@import '../../../_assets/style/_iconFont.scss';
@import '../../../_assets/style/_var.scss';
@import '../../../_assets/style/_mixin.scss';

.nus_tritag {
    position: absolute;
    color: $nutritag-color;
    width: $nutritag-width;
    overflow: hidden;
    &::after {
        content: attr(data-text);
        position: absolute;
        font-size: $nutritag-font-size;
        text-align: center;
        letter-spacing: 1px;
        white-space: nowrap;
        z-index: 9;
        transform-origin: 50% 50%;
    }
    &::before {
        content: '';
        display: block;
        width: 100%;
        height: 0;
        padding-top: 100%;
        background-color: $nutritag-bg-color;
    }
    &.nu_align-{
        &tl,&tr{
            top: 0;
            &::before{
                transform-origin: 0 0;
            }
        }
        &tl{
            left: 0;
            &::after {
                top: 33%;
                left: 32%;
                transform: translate(-50%,-50%) rotate(-45deg);
            }
            &::before {
                transform: skewX(-45deg);
            }
        }
        &tr{
            top: 0;
            right: 0;
            &::after {
                top: 34%;
                left: 66%;
                transform: translate(-50%,-50%) rotate(45deg);
            }
            &::before {
                transform: skewX(45deg);
            }
        }
        &bl,&br{
            bottom: 0;
            &::before{
                transform-origin: 100% 100%;
            }
        }
        &bl{
            left: 0;
            &::after {
                top: 64%;
                left: 36%;
                transform: translate(-50%,-50%) rotate(45deg);
            }
            &::before {
                transform: skewX(45deg);
            }
        }
        &br{
            right: 0;
            &::after {
                top: 64%;
                left: 63%;
                transform: translate(-50%,-50%) rotate(-45deg);
            }
            &::before {
                transform: skewX(-45deg);
            }
        }
    }
}
</style>
