<template>
    <div :class="{y_progress:1,y_progress_disRound:disRound,y_progress_secondary:topic == 'secondary'}"
         v-if="uiShow || type !='page'"
         :style="'height:'+height+';' + background">
        <div :class="{y_progress_wrap:1,y_progress_disRoundWrap:disRoundWrap}" :style="width+backgroundProgress"></div>
    </div>
</template>

<script>
    export default {
        name: "yProgress",
        computed: {
            background() {
                return "background:" + (this.bg) + ";";
            },
            backgroundProgress() {
                return "background:" + (this.bgProgress) + ";";
            },
            width() {
                return "width:" + (this.per) + "%;";
            }
        },
        data() {
            return {
                autoAst: "",
                per: 0,
                uiShow:false,
            }
        },
        props: {
            bgProgress: "",
            bg:"",
            disBeginSwf: Boolean,
            disRound: Boolean,
            disRoundWrap: Boolean,
            height: "",
            loading: Boolean,
            percent: "",
            topic: "",
            type: "",
        },
        methods: {
            fnAutoAst(per, ast){
                const self = this;
                return new Promise((resolve, reject) => {
                    self.autoAst = setTimeout(t => {

                        self.per = per;
                        resolve();
                    }, ast)
                })
            },
            fnAuto() {
                const self = this;
                self.fnAutoAst(70, 200)
                    .then(res => {
                        return self.fnAutoAst(70, 200);
                    }, () => {})
                    .then(res => {
                        return self.fnAutoAst(90, 200);
                    }, () => {})
                    .then(res => {
                        return self.fnAutoAst(92, 300);
                    }, () => {})
                    .then(res => {
                        return self.fnAutoAst(94, 400);
                    }, () => {})
                    .then(res => {
                        return self.fnAutoAst(96, 500);
                    }, () => {})
                    .then(res => {
                        return self.fnAutoAst(98, 600);
                    }, () => {})
            }
        },
        beforeMount() {
            if (this.disBeginSwf) {
                this.per = this.percent;
            }
        },
        mounted() {
            const self = this;
            if (self.type == 'page') {
                //self.fnAuto();
            } else {
                setTimeout(t => {
                    self.per = self.percent;
                }, 50)
            }
        },
        watch:{
            loading(){
                const self = this;
                if(this.type == 'page'){
                    if(this.loading){
                        this.per = 0;
                        setTimeout(function(){

                            self.uiShow = true;
                            self.per = 0;
                            self.fnAuto();
                        })
                    }
                    else{
                        clearTimeout(this.autoAst);
                        self.fnAutoAst(100,20).then(res=>{
                            self.fnAutoAst(100,200).then(res=>{
                                self.uiShow = false;
                            },error=>{})
                        },error=>{});
                    }
                }
            }
        }
    }
</script>

<style lang="scss">

    @import "../css/var.scss";


    .y_progress {
        display: flex;
        height: 12px;
        border-radius: 6px;
        background: $progress_bg;

        &.y_progress_disRound {
            border-radius: 0;
        }

        .y_progress_disRoundWrap {
            border-radius: 0;
        }

        &.y_progress_secondary {
            .y_progress_wrap {
                background: $color_topic_secondary;
            }
        }
    }

    .y_progress_wrap {
        background: $progress_bg_current;
        border-radius: 6px;
        transition: all .2s;
    }
</style>