<template>
    <div class="ht-base-progress-modal-demo">
        <div style="display: inline-block;padding: 10px;">
            <ht-base-button @click="progressModal1">弹窗进度条-默认</ht-base-button>
            <ht-base-modal v-model="modal1" className="progressModal">
                <div style="display: flex">
                    <span style="text-align: center;flex: 1">{{percent1}}%</span>
                </div>
                <ht-base-progress :percent="percent1" hide-info>
                </ht-base-progress>
                <div slot="footer">
                    <ht-base-button type="primary" @click="ok1">{{startText1}}</ht-base-button>
                    <ht-base-button @click="cancel1" v-bind:disabled="disabled1">取消</ht-base-button>
                </div>
            </ht-base-modal>
        </div>
        <div style="display: inline-block;padding: 10px;">
            <ht-base-button @click="progressModal2">弹窗进度条-气泡</ht-base-button>
            <ht-base-modal v-model="modal2" className="progressModal">
                <div ref="tips">
                    <ht-base-badge :text="percent2.toString()+'%'" class="ht-base-badge-tooltip" bubble>
                        <slot>
                            <span class="ht-base-badge-arrowTop"></span>
                        </slot>
                    </ht-base-badge>
                </div>
                <ht-base-progress :percent="percent2" hide-info></ht-base-progress>
                <div slot="footer">
                    <ht-base-button type="primary" @click="ok2">{{startText2}}</ht-base-button>
                    <ht-base-button @click="cancel2" v-bind:disabled="disabled2">取消</ht-base-button>
                </div>
            </ht-base-modal>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'HtBaseProgressModalDemo',
        data() {
            return {
                modal1: false,
                percent1: 0,
                startText1: '开始',
                disabled1: false,
                modal2: false,
                percent2: 0,
                startText2: '开始',
                disabled2: false,
                timer1: null,
                timer2: null,
            }
        },
        methods: {
            ok1() {
                this.disabled1 = true;
                clearInterval(this.timer1);
                this.timer1 = setInterval(this.increase1, 100);
                if (this.startText1 === '完成') {
                    clearInterval(this.timer1);
                    this.timer1 = null;
                    this.modal1 = false;
                }
            },
            increase1() {
                let percent1 = this.percent1 + 2;
                if (percent1 > 100) {
                    percent1 = 100;
                }
                this.percent1 = percent1;
                if (percent1 == 100) {
                    this.startText1 = '完成';
                }
            },
            cancel1() {
                this.modal1 = false;
            },
            progressModal1() {
                this.modal1 = true;
            },
            progressModal2() {
                this.modal2 = true;
            },
            ok2() {
                this.disabled2 = true;
                clearInterval(this.timer2);
                this.timer2 = setInterval(this.increase2, 100);
                if (this.startText2 === '完成') {
                    clearInterval(this.timer2);
                    this.modal2 = false;
                }
            },
            cancel2() {
                this.modal2 = false;
            },
            increase2() {
                let percent2 = this.percent2 + 2;
                this.$refs.tips.style.marginLeft = percent2 + '%';
                if (percent2 > 100) {
                    percent2 = 100;
                }
                this.percent2 = percent2;
                if (percent2 == 100) {
                    this.startText2 = '完成';
                }
            },
        },
        beforeDestroy() {
            clearInterval(this.timer1);
            clearInterval(this.timer2);
        }
    }
</script>
<style lang="less">
    .ht-base-progress-modal-demo {
        .ht-base-badge-tooltip {
            background-color: #2d8cf0;
            z-index: 100;
            margin-left: -5px;
            .ht-base-badge-arrowTop {
                width: 0;
                height: 0;
                border-width: 7px 5px;
                border-style: solid;
                border-color: #2d8cf0 #ffffff #ffffff #ffffff;
                position: absolute;
                top: 10px;
                left: -5px
            }
        }
    }
</style>

