<template>
    <div class="ht-base-progress-demo">
        <div class="ht-base-success-progress">
            <ht-base-progress :percent="percentSuccess" @click="loadStartSuccess"/>
            <a @click="loadStartSuccess">{{loadTextSuccess}}</a>
        </div>
        <div>
            <ht-base-progress :percent="percentException" :status="status"/>
            <a @click="loadStartException">{{loadTextException}}</a>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'HtBaseProgressDemo',
        data() {
            return {
                status: 'normal',
                percentSuccess: 0,
                percentException: 0,
                loadTextSuccess: '开始加载',
                loadTextException: '开始加载',
                timer1: null,
                timer2: null
            }
        },
        methods: {
            loadStartSuccess() {
                this.timer1 = setInterval(this.increaseSuccess, 100);
            },
            loadStartException() {
                this.timer2 = setInterval(this.increaseException, 100);
            },
            increaseSuccess() {
                let percentSuccess = this.percentSuccess + 2;
                if (percentSuccess > 100) {
                    percentSuccess = 100;
                }
                this.percentSuccess = percentSuccess;
                if (this.percentSuccess == 100) {
                    this.loadTextSuccess = '加载成功';
                    clearInterval(this.timer1);
                    this.timer1 = null;
                }
            },
            increaseException() {
                let percentException = this.percentException + 2;
                percentException = 70;
                this.percentException = percentException;
                this.loadTextException = '加载失败';
                this.status = 'wrong';
                clearInterval(this.timer2);
            },

        },
        beforeDestroy() {
            clearInterval(this.timer1);
            clearInterval(this.timer2);
        }
    }
</script>
<style lang="less">
    .ht-base-progress-demo {
        .ht-base-success-progress {
            margin-bottom: 5px;
        }
    }
</style>

