<template>
    <view :style="'display:' + displayStyle + ';'" :class="'wx_loading_view ' + extClass" :animation="animationData" id="wx_loading_view">
        <view v-if="type === 'dot-white'" class="loading wx_dot_loading wx_dot_loading_white"></view>
        <view v-else-if="type === 'dot-gray'" class="loading wx_dot_loading"></view>
        <view v-else-if="type === 'circle'" class="weui-loadmore">
            <view class="weui-loading"></view>
            <view class="weui-loadmore__tips">{{ tips }}</view>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            animationData: {},
            animationInstance: {},
            displayStyle: 'none'
        };
    },
    options: {
        addGlobalClass: true
    },
    props: {
        extClass: {
            type: String,
            default: ''
        },
        show: {
            // 默认显示出来
            type: Boolean,

            default: true
        },
        animated: {
            type: Boolean,
            default: false
        },
        duration: {
            // 过渡动画时间
            type: Number,
            default: 350
        },
        type: {
            type: String,
            default: 'dot-gray' // 取值dot-white、dot-gray、circle
        },

        tips: {
            // type是circle的时候才有效
            type: String,
            default: '加载中'
        }
    },
    methods: {
        attached() {
            const data = this;
            const animationInstance = uni.createAnimation({
                duration: data.duration,
                timingFunction: 'ease'
            });
            this.setData({
                animationInstance
            });
            this.computedStyleFun(this.show, this.animated);
        },

        computedStyleFun(show, animated) {
            if (!show) {
                if (!animated) {
                    this.setData({
                        displayStyle: 'none'
                    });
                } else {
                    this.startAnimationFun();
                }
            } else {
                this.setData({
                    displayStyle: ''
                });
            }
        },

        startAnimationFun() {
            setTimeout(() => {
                const data = this;
                const animation = data.animationInstance;
                animation.height(0).step();
                this.setData({
                    animationData: animation.export()
                });
            }, 0);
        }
    },
    mounted() {
        // 处理小程序 attached 生命周期
        this.attached();
    },
    created: function () {},
    watch: {
        show: {
            handler: function (newValue) {
                this.computedStyleFun(newValue, this.animated);
            },

            immediate: true
        },

        animated: {
            handler: function (newValue) {
                this.computedStyleFun(this.show, newValue);
            },

            immediate: true
        }
    }
};

/***/
</script>
<style>
.wx_loading_view {
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}
.loading {
    color: rgba(255, 255, 255, 0.9);
    font-size: 17px;
    text-align: center;
}
.loading_view_translation {
    transition: height 0.2s 0.3s ease;
}
</style>
