<template>
    <div class="nus_stepline"
        :class="_getClass()"
        :style="lineStyle">
        <div class="nu_line"
            v-if="isShow"
            :class="innerClass"
            :style="lineBg && lineBg.inStyle">
        </div>
    </div>
</template>

<script>
export default {
    props: {
        /**
         * 线的背景色
         */
        lineBg: {
            type: Object
        },
        /**
         * 线宽
         */
        lineWidth: {
            type: [Number, String]
        }
    },
    computed: {
        /**
         * 获取线的样式
         * @returns {Object} 返回线的样式
         */
        lineStyle () {
            const _that = this;
            return [{
                height: (_that.lineWidth || '') + ''
            }, _that.lineBg && _that.lineBg.outStyle];
        },

        /**
         * 线的className
         * @returns {Object} 返回线的className
         */
        innerClass () {
            return this._getClass('inStyle');
        },
        /**
         * 判断是否显示子线
         * @returns {Boolean} 返回是否显示子线
         */
        isShow () {
            const _that = this;
            const _lineBg = _that.lineBg || {};
            return _that.innerClass || _lineBg.inStyle || !_lineBg.outStyle;
        }
    },
    methods: {
        /**
         * 线的className
         * @param {String} key 属性key
         * @returns {Object} 返回线的className
         */
        _getClass (key) {
            const _that = this;
            key = key || 'outStyle';
            let _lineBg = _that.lineBg;
            let _res = _lineBg && _lineBg[key];
            if (_res instanceof Object) {
                _res = '';
            }
            return _res;
        }
    }
};
</script>

<style lang="scss">
@import '../../../../_assets/style/_iconFont.scss';
@import '../../../../_assets/style/_var.scss';
@import '../../../../_assets/style/_mixin.scss';
.nus_stepline {
    display: inline-block;
    height: 1px;
    flex: 1;
    font-size: 0;
    text-align: left;
    margin: 0 10px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    background-color: $nustep-step-unStart-bg;
    &.nu_end {
        background-color: $nustep-step-actived-bg;
    }
    &.nu_actived {
        background-color: $nustep-step-unStart-bg;
        .nu_line {
            background-color: $nustep-step-actived-bg;
        }
    }
    .nu_line {
        height: 100%;
        width: 50%;
        display: inline-block;
    }
}
</style>
