<template>
    <div class="ht-base-circle-fail-demo">
        <ht-base-circle :percent="percent" :stroke-color="color">
            <ht-base-icon v-if="percent == 60" type="LiRa_cross" size="40" style="color:#ed4014"/>
            <span v-else style="font-size:24px">{{ percent }}%</span>
        </ht-base-circle>
        <ht-base-button class="load-btn-box" type="text" @click="minus">{{percent == 60?"加载失败":"开始加载"}}</ht-base-button>
    </div>
</template>

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

