<template>
  <div :class="classNames">
    <div :class="wrapperClassNames">
      <span>
        <div
          v-if="!loadingIcon"
          class="hive-loading__icon-default"
        >
          <span />
          <span />
          <span />
          <span />
        </div>
        <div
          v-else
          class="hive-loading__indicator"
        >
          <Icon :icon="loadingIcon" />
        </div>
      </span>
      <div
        v-if="text"
        class="hive-loading__text"
      >
        {{ this.text }}
      </div>
    </div>
    <div :class="this.loading ? 'hive-loading--blur' : ''">
      <!-- @slot content 内容 -->
      <slot />
    </div>
  </div>
</template>

<script>
import Icon from '../icon';
const name = 'hive-loading';

export default {
  name,
  components: {
    Icon
  },
  props: {
    /**
     * 是否加载状态
     */
    loading: {
      type: Boolean,
      default: true
    },
    /**
     * type='block'用于容器级加载，容器需设置 position='relative'
     * @member block
     */
    type: String,
    /**
     * 加载中的文案
     */
    text: String,
    /**
     * 加载中的指示图案
     * @member icon图标列表
     */
    loadingIcon: String
  },
  data() {
    return {
      classNames: this.getclassNames(true),
      wrapperClassNames: this.getWrapperClassName()
    };
  },
  watch: {
    loading() {
      this.wrapperClassNames = this.getWrapperClassName();
    }
  },
  methods: {
    getclassNames(loading) {
      return [
        name,
        {
          [`${name}--block`]: this.type === 'block'
        }
      ];
    },
    getWrapperClassName() {
      return [
        `${name}__wrapper`,
        {
          [`${name}__wrapper--hasText`]: this.text,
          [`${name}__wrapper--closed`]: !this.loading
        }
      ];
    }
  }
};
</script>
