<template>
    <view :class="['expert-tag', tagItem.color, solid ? 'solid' : '', widthAuto ? 'width-auto' : '']">
        {{tagItem.name}}
    </view>
</template>

<script>
/**
 * @file tag
 * @author caiyouliang
 */

export default {
    config: {
        component: true
    },
    props: {
        tagItem: {
            type: Object,
            default: {}
        },
        solid: {
            type: Boolean,
            default: false
        },
        widthAuto: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
        };
    }
};
</script>
<style lang="less" scoped>
    .expert-tag {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 5px;
        font-size: 10px;
        line-height: .18rem;
        width: .6rem;
        box-sizing: border-box;
        height: .18rem;
        border-radius: .8rem;
        white-space: normal;
        &.width-auto {
            width: auto;
            white-space: nowrap;
            padding: 0 4px;
        }
        &.blue {
            border: 1px solid rgba(72,154,246, 0.2);
            color: #489AF6;
            &.solid {
                border: 1px solid transparent;
                color: #fff;
                background-color: #489AF6;
            }
        }
        &.gray {
            border: 1px solid transparent;
            background-color: #F5F5F5;
            color: #999999;
            &.solid {
                border: 1px solid transparent;
                color: #fff;
                background-color: #CACACA;;
            }
        }
        &.orange {
            border: 1px solid rgba(255,111,97, 0.2);
            color: #ff6050;
            &.solid {
                border: 1px solid transparent;
                color: #fff;
                background-color: #ff6050;
            }
        }
        &.orange-light {
            border: 1px solid rgba(255, 142, 67, 0.2);
            color: #FF8E43;
            &.solid {
                border: 1px solid transparent;
                color: #fff;
                background-color: #FF8E43;
            }
        }
    }
</style>


