Vue.component('common-loading', {
    template: `<div v-if="show" style="width: 100vw;height: 100vh;position: fixed;top: 0;left: 0;display: flex;align-items: center;justify-content: center"
                    :style="{'background-color':loadingStyle.ModalBgColor,'z-index':zIndex}">
                   <div style="width:130px;height: 130px;display: flex;align-items: center;justify-content: center;flex-direction: column;border-radius: 5px"
                        :style="{'background-color': loadingStyle.messageBgColor}">
                        <i class="el-icon-loading" :style="{'color':loadingStyle.messageColor}"></i>
                        <p style="font-size: 14px" :style="{'color':loadingStyle.messageColor}">{{message}}</p>
                   </div>
               </div>`,
    props: {
        'show': {
            type: Boolean,
            default: false,
        },//是否显示
        'message': {
            type: String,
            default: '',
        },//提示文字
        'loadingStyle': {
            type: Object,
            default: () => {
                return {
                    ModalBgColor: 'rgba(0,0,0,0.5)',
                    messageColor: '#409EFF',
                    messageBgColor: '#ffffff',
                }
            },
        },
    },
    data() {
        return {
            zIndex: 1,
        }
    },
    methods: {
        setZIndex() {
            let zIndex = [...document.all].reduce((r, e) => Math.max(r, +window.getComputedStyle(e).zIndex || 0), 0);
            console.log(zIndex);
            this.zIndex = zIndex;
        }
    },
    created() {
        this.setZIndex();
    },
    watch: {
        show(n) {
            if (n) {
                this.setZIndex();
            }
        }
    }
});