<template>
<div class="xp-progress-bar">
    <el-progress
        class="xp-progress-bar-percent"
        :stroke-width='18'
        :percentage="percent"
        :status="progressStatus"
        :show-text="false">
    </el-progress>
    <i class="el-icon-caret-top xp-progress-bar-icon"
        v-if="percent"
        :class="`triangle-content triangle-${progressStatus}`"
        :style="{left: percent * 0.9 + '%'}">
    </i>
    <p class="xp-progress-bar-text" :style="{paddingLeft: percent * 0.9 + '%'}">{{text}}</p>
</div>
</template>

<script>
/**
 * @file 渐变方形进度条
 * @author zhangping15
 * @date 2018-05-19
 */

export default {
    name: 'progress-bar',
    data() {
        return {
            percent: 0,
            text: ''
        };
    },
    mounted() {
        this.getData();
    },
    methods: {
        getData() {
            this.$http.get('./progress/getbarpercent', {
                params: {}
            }).then(res => {
                this.percent = res.data.percent;
                this.text = res.data.info;
            });
        }
    },
    computed: {
        progressStatus() {
            let percent = this.percent;
            if (percent > 0 && percent <= 40) {
                return 'warn';
            }
            else if (percent > 40 && percent <= 60) {
                return 'exception';
            }
            else if (percent > 60 && percent <= 100) {
                return 'success';
            }
            else {
                return 'null';
            }
        }
    }
};
</script>

<style lang="less" src="./index.less">

</style>
