<template>
    <transition name="fade">
        <div class="modal-container" @touchstart.stop.prevent="" v-show="visible">
            <div class="modalInfo" v-if="icon === 'info'">
                <div class="msg">{{msg}}</div>
            </div>
            <div class="modal" v-else>
                <!-- <img class="icon" src="../../assets/icon_info.png" v-if="icon === 'info'"> -->
                <img class="icon" src="../../assets/icon_success.png" v-if="icon === 'success'">
                <progressbar v-else-if="icon === 'loading'" style="margin-bottom:12px"></progressbar>
                <div class="msg">{{msg}}</div>
            </div>

        </div>
    </transition>
</template>
<script>
import progressbar from '../progressbar'
export default {
    name: 'progress-dialog',
    created() { },
    mounted() {
        this.visible = true
        this.startTimer()
    },
    data() {
        return {
            msg: '',
            type: 'info',
            timer: null,
            duration: 2000,
            visible: false
        }
    },
    computed: {
        icon() {
            if (['info', 'success', 'warning', 'loading'].indexOf(this.type) !== - 1) {
                return this.type
            } else {
                return 'info'
            }
        }
    },
    methods: {
        startTimer() {
            if (this.duration > 0) {
                this.timer = setTimeout(() => {
                    this.close()
                }, this.duration)
            }
        },
        restartTimer() {
            clearTimeout(this.timer)
            this.startTimer()
        },
        close() {
            this.visible = false
            this.$el.addEventListener('transitionend', this.destroyView)
        },
        destroyView() {
            this.$el.removeEventListener('transitionend', this.destroyView)
            this.$destroy(true)
            this.$el.parentNode.removeChild(this.$el)
        }
    },
    components: {
        progressbar
    }
}

</script>
<style lang="less" scoped>
.modal-container {
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: 500;
}
.modalInfo {
    position: fixed;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.7);
    border-radius: 0.08rem;
    padding: 0.16rem 0.4rem;
    .msg {
        width: 100%;
        line-height: 0.4rem;
    }
    z-index: 550;
}
.modal {
    width: 2.4rem;
    height: 2.4rem;
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 1.6rem;
    margin: auto;
    background: rgba(0, 0, 0, 0.7);
    border-radius: 0.2rem;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    .icon {
        width: 1.2rem;
    }
}

.msg {
    color: #fff;
    font-size: 0.28rem;
    width: 80%;
    text-align: center;
}

.fade-enter,
.fade-leave-active {
    opacity: 0;
}

.fade-enter-active,
.fade-leave-active {
    transition: all 0.5s;
}
</style>
