<template>
    <div :class="wrapClasses">
        <div  
            v-show="visible" 
            :class="`${prefixCls}-mask ${prefixCls}-mask-${mask && theme}`" 
            :style="{ 'z-index': 1000 + handleGetIndex() }"></div>
        <transition name="fade">
            <div 
                v-show="visible" 
                :class="innerClasses"
                :style="{ 'z-index': 1000 + handleGetIndex() }">
                <div :class="loadingClasses">
                    <!-- <Icon type="loading" size="20px"/> -->
                    <i :class="`${prefixCls}-dot-item`"></i>
                    <i :class="`${prefixCls}-dot-item`"></i>
                    <i :class="`${prefixCls}-dot-item`"></i>
                    <i :class="`${prefixCls}-dot-item`"></i>
                </div>
                <div>{{text}}</div>
            </div>
        </transition>
    </div>
</template>
<script>
    import Icon from '../../base/icon/'
    import { t } from '../../../locale/'
    import { oneOf } from '../../../utils/assist'
    import { transferIndex, transferIncrease } from '../../../utils/transfer-queue'
    
    const prefixCls = 'yy-loading'
    export default {
        name: 'YYLoading',
        components: {
            Icon
        },
        props: {
            value: {
                type: Boolean,
                default: false
            },
            mask: {
                type: Boolean,
                default: false
            },
            theme: {
                validator (value) {
                    return oneOf(value, ['dark', 'light'])
                },
                default: 'dark'
            },
            text: {
                type: String,
                default: function() {
                    return t('loading')
                }
            }
        },
        data() {
            return {
                prefixCls: prefixCls,
                visible: this.value,
                instanceTheme: this.theme,
                instanceText: this.text
            }
        },
        computed: {
            wrapClasses() {
                return `${prefixCls}-wrapper`
            },
            loadingClasses() {
                return `${prefixCls}`
            },
            innerClasses() {
                return [
                    `${prefixCls}-inner`,
                    `${prefixCls}-inner-${this.instanceTheme}`
                ]
            }
        },
        watch: {
            value (value) {
                this.visible = value
            },
            text (value) {
                this.instanceText = value
            }
        },
        methods: {
            handleGetIndex () {
                transferIncrease()
                return transferIndex
            }
        }
    }
</script>


