<template>
  <view :class="loadingClass">
    <view :class="iconClass" :style="iconStyle">
      <template v-if="type === 'clock'">
        <view v-for="i in 12" :key="i" :class="bem.e('scale')"></view>
      </template>
    </view>

    <view
      v-if="isRenderVisible($slots.default || text)"
      :class="bem.e('text')"
      :style="loadingTextStyle"
    >
      <slot>
        {{ text }}
      </slot>
    </view>
  </view>
</template>

<script lang="ts">
import { defineComponent as _defineComponent } from "vue";
import { computed } from "vue";
import {
  classNames,
  stringifyStyle,
  isRenderVisible,
  createBem
} from "../utils";
import { loadingProps } from "./common";
const __default__ = {
  options: {
    virtualHost: true,
    styleIsolation: "shared"
  }
};
export default /* @__PURE__ */ _defineComponent({
  ...__default__,
  __name: "loading",
  props: loadingProps,
  setup(__props, { expose: __expose }) {
    __expose();
    const props = __props;
    const bem = createBem("loading");
    const loadingClass = computed(() => {
      return classNames(bem.b(), bem.m("vertical", props.vertical));
    });
    const iconClass = computed(() => {
      return classNames(bem.e("icon"), bem.em("icon", props.type));
    });
    const iconStyle = computed(() => {
      return stringifyStyle(
        {
          color: props.color,
          fontSize: props.size
        },
        props.rootClass
      );
    });
    const loadingTextStyle = computed(() => {
      return stringifyStyle(
        { color: props.textColor, fontSize: props.textSize },
        props.rootStyle
      );
    });
    const __returned__ = { props, bem, loadingClass, iconClass, iconStyle, loadingTextStyle, get isRenderVisible() {
      return isRenderVisible;
    } };
    return __returned__;
  }
});
</script>

<style lang="scss">
@use './index.scss';
</style>