<template>
    <div :class="classes([type, { vertical }])">
        <span :class="classes('spinner', type)" :style="style">
            <span v-if="type==='spinner'">
                <i v-for="( item, index ) in 12" :key="index"></i>
            </span>
            <svg v-if="type==='circular'" :class="classes('circular')" viewBox="25 25 50 50">
                <circle cx="50" cy="50" r="20" fill="none" />
            </svg>
        </span>
        <span v-if="$slots.default" :class="classes('text')" :style="style">
          <slot></slot>
        </span>
    </div>
</template>
<script>
import { classesMixin } from '../../common/mixins/classname';
let classMixin = classesMixin('loading');
export default {
    name: "h-loading",
    mixins: [ classMixin ],
    props: {
        size: [String],
        textSize: [String, Number],
        vertical: Boolean,
        type: {
            type: String,
            default: 'circular'
        },
        color: {
            type: String,
            default: '#c9c9c9'
        }
    },
    computed: {
        style() {
            const { color, size, type } = this;
            const style = { color };
             if (size) {
                const iconSize = size;
                style.width = iconSize;
                style.height = iconSize;
            }
            return style;
        }
    }
}
</script>
<style lang="less" scoped>
@import './index.less';
</style>