<template>
    <div class="ht-base-title" :class="className">
        <ht-base-icon :type="icon" v-if="icon" />
        <span :class="htBaseTitleBg" v-else></span>
        <div :class="htBaseTitleColor"><slot></slot></div>
    </div>
</template>

<script>
    const prefix = 'ht-base-title-';

    export default {
        name: 'HtBaseTitle',
        props: {
            border: {
                type: [Boolean, String],
                default: 'dash'
            },
            icon: {
                type: String
            },
            align: {
                type: String,
                default: 'left'
            },
            level:{
                type:String,
                default:'one'
            }
        },
        data(){
            return{
                htBaseTitleBg:'ht-base-title-bg-one',
                htBaseTitleColor:'ht-base-title-color-one'
            }
        },
        computed: {
            className() {
                let borderClass;
                let positionClass = `${prefix}${this.align}`;
                switch(this.border) {
                    case true:
                    case 'dash':
                        borderClass = `${prefix}dash`;
                        break;
                    case 'solid':
                        borderClass = `${prefix}solid`;
                        break;
                    case false:
                    default:
                        break;
                }
                return [borderClass, positionClass];
            }
        },
        created() {
            if (this.level === 'two') {
                this.htBaseTitleBg = '';
                this.htBaseTitleColor = 'ht-base-title-color-two';
            }
        }
    }
</script>
<style>

</style>

