<template>
    <div class="progress-widget" :class="isSizeCls">
        <slot name="title" v-if="isSizeTitle"></slot>
        <slot name="left"></slot>
        <div class="progress-main">
            <div class="volume-all" :style="widgetStyle" v-if="isVolumeProgress(molecule, denominator)">
                <span v-if="isSizeTitle">
                    {{ isVolumeProgress(molecule, denominator) }}%
                </span>
                <div class="volume-mtrl" v-if="innerMolecule > 0 && molecule > 0" :style="{'width': isVolumeProgress(innerMolecule, molecule) + '%', 'background-color': isBokehState(innerColor)}"></div>
            </div>
            <slot name="additem"></slot>
            <span class="volume-text" :style="{'color': color}" v-if="isSizeTitle">{{ isVolumeProgress(molecule, denominator) }}%</span>
        </div>
        <span class="volume-text-mini" v-if="!isSizeTitle" :style="{'color': progressMiniTextColor}">{{ progressMiniText }}</span>
    </div>
</template>

<script>
export default {
    name: 'L1appLjProgress',
    props: {
        molecule: {
            type: Number
        },
        denominator: {
            type: Number
        },
        innerMolecule: {
            type: Number
        },
        /**进度条颜色 */
        color: {
            type: String,
            default: '#66bb6a'
        },
        // errColor: {
        //     type: String,
        //     default: '#f44336'
        // },
        innerColor: {
            type: String,
            default: '#29b6f6'
        },
        /**是否背景色虚化 */
        bokeh: {
            type: Boolean,
            default: false
        },
        size: {
            type: String,
            default: 'large'
        },
        progressMiniText: {
            type: String,
            default: ''
        },
        progressMiniTextColor: {
            type: String,
            default: '#66bb6a'
        },
    },
    computed: {
        isVolumeProgress(a, b) {
            return function(a, b) {
                return $lj.floatMul($lj.floatDiv(a, b).toFixed(2),  100)
            }
        },
        widgetStyle() {
            let percent = $lj.floatMul($lj.floatDiv(this.molecule, this.denominator).toFixed(2), 100);
            let color = this.bokeh ? $lj.colorHexToRgb_a(this.color, 0.4) : $lj.colorHexToRgb_a(this.color)
            return {
                'width': percent > 100 ? 100 + '%' : percent + '%',
                'background-color': color
            }
        },
        isBokehState(color) {
            return function(color) {
                if (this.bokeh) {
                    return $lj.colorHexToRgb_a(color, 0.4)
                } else {
                    return $lj.colorHexToRgb_a(color)
                }
            }
        },
        isSizeTitle() {
            let bool;
            switch (this.size) {
                case 'mini':
                    bool = false
                    break;
                default:
                    bool = true;
                    break;
            }
            return bool;
        },
        isSizeCls() {
            let cls;
            switch (this.size) {
                case 'mini':
                    cls = 'size-mini'
                    break;
                default:
                    cls = '';
                    break;
            }
            return cls;
        }
    }
};
</script>

<style lang="less" scoped>
@import "../../../../assets/css/lj-style-variable";

.progress-widget {
    position: relative;
    display: flex;
    margin: 2px 16px;
    align-items: center;

    &.size-mini {
        margin: 2px 8px;

        .progress-main {
            height: 4px;
            margin-right: 8px;
        }
        .volume-text-mini {
            flex-shrink: 0;
            position: relative;
            line-height: 14px;
            font-size: 10px;
            font-weight: normal;
        }
        .volume-all {
            line-height: 4px;
            height: 4px;
        }
    }

}

.progress-main {
    position: relative;
    display: flex;
    flex: 1;
    border-radius: 4px;
    height: 16px;
    overflow: hidden;
    text-align: left;

    &::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: #f4f6fa;
    }

    .volume-text {
        position: absolute;
        top: 0;
        left: 4px;
        line-height: 16px;
        font-size: 12px;
        font-weight: 700;
    }

    .volume-all {
        box-sizing: content-box;
        flex-shrink: 0;
        position: relative;
        overflow: hidden;
        z-index: 10;
        line-height: 16px;
        height: 16px;
        font-size: 12px;
        font-weight: 700;
        color: #fff;
        border-right: 2px solid #fff;
        transition: all cubic-bezier(0.075, 0.82, 0.165, 1) 0.4s;
        animation:progress_left_to_right cubic-bezier(0.075, 0.82, 0.165, 1) 0.8s;
        -webkit-animation:progress_left_to_right cubic-bezier(0.075, 0.82, 0.165, 1) 0.8s; /*Safari and Chrome*/

        @keyframes progress_left_to_right
        {
            from { width: 0; }
        }
        @-webkit-keyframes progress_left_to_right /*Safari and Chrome*/
        {
            from { width: 0; }
        }

        span {
            padding-left: 4px;
        }
        .volume-mtrl{
            position: absolute;
            right: 0;
            top: 0;
            bottom: 0;
            border-left: 2px solid #fff;
            box-sizing: content-box;
            z-index: -1;
        }
    }
}
</style>