<template>
    <div class="ht-base-circle-demo">
        <ht-base-circle :percent="percent" :stroke-color="color">
            <ht-base-icon v-if="percent == 100" type="LiRa_check2" size="40" style="color:#19be6b"/>
            <span v-else style="font-size:24px">{{ percent }}%</span>
        </ht-base-circle>
        <ht-base-button class="load-btn-box" type="text" @click="add">{{percent == 100?"加载成功":"开始加载"}}</ht-base-button>
    </div>
</template>

<script>
    export default {
        name: 'HtBaseCircleDemo',
        data() {
            return {
                percent: 0
            }
        },
        computed: {
            color() {
                let color = '#228EF8';
                if (this.percent == 100) {
                    color = '#19be6b';
                }
                return color;
            }
        },
        methods: {
            add() {
                setInterval(() => {
                    if (this.percent >= 100) {
                        return false;
                    }
                    this.percent += 2;
                }, 100)
            }
        }
    }
</script>
<style lang="less">
    .ht-base-circle-demo {
        .load-btn-box {
            width: 112px;
            display: block;
            text-align: center;
        }
    }
</style>

