<template>
    <div :class="wrapClasses" :style="styles">
        <slot v-if="!value || value.length==0"></slot>
        <span class="ht-base-status-tip-item" v-for="(item,index) in value" :key="index">{{item}}</span>
    </div>
</template>

<script>
    const prefixCls = 'ht-base-status-tip';

    export default {
        name: 'HtBaseStatusTip',
        props: {
            value: {
                type: Array,
            },
            width: {
                type: [String, Number],
                default:'auto'
            }
        },
        computed: {
            wrapClasses() {
                return `${prefixCls}`;
            },
            styles() {
                let width = this.width.toString();
                if (width.charAt(width.length - 1) === '%') {
                    width = this.width;
                } else {
                    width = this.width + 'px';
                }
                return {
                    width: width,
                }
            }
        },
    }
</script>
<style>
    .ht-base-status-tip {

    }
</style>

