<template>
    <transition :name="animate"
                @after-leave="handleAfterLeave">
        <div v-show="visible"
             :class="loadingClass">
            <i :class="iconClass"></i>
            <p :class="`${prefix}-loading__message`">{{message}}</p>
        </div>
    </transition>
</template>

<script>
// import Color from 'color';
import { prefix, prefixMixins } from 'jdd-design/utils';
export default {
    name: `${prefix}-base-loading`,
    mixins: [prefixMixins],
    props: {
        message: String,
        animate: {
            type: String,
            default: 'ani-fade'
        },
        opacity: {
            type: Number,
            default: 0.6,
            validator(value) {
                return value > 0 && value <= 1;
            }
        },
        closeFunc: Function
    },
    data() {
        return {
            visible: false
        };
    },
    computed: {
        loadingClass() {
            let clsNames = [`${prefix}-loading`];
            return clsNames;
        },
        iconClass() {
            let clsNames = [`${prefix}-loading__icon`];
            clsNames.push(`${prefix}-icon-loading`);
            return clsNames;
        }
    },
    methods: {
        handleAfterLeave() {
            this.$destroy(true);
            this.$el.parentNode.removeChild(this.$el);
            this.closeFunc && this.closeFunc(this);
        },
        close() {
            this.visible = false;
        }
    }
};
</script>
