<template>
  <transition name="loading">
    <div
      v-if="show"
      class="loading"
    >

      <div
        v-if="type === 'line'"
        class="spinner">
        <div class="rect1" />
        <div class="rect2" />
        <div class="rect3" />
        <div class="rect4" />
        <div class="rect5" />
      </div>

      <div v-else>
        <div class="loading-mark" />
        <div
          class="loading-toast"
          :style="{
            position: position
          }"
        >
          <i class="loading-loading" />
          <p
            v-if="text"
            class="loading-text"
          >
            {{ text || 'loading' }}<slot />
          </p>
        </div>
      </div>
    </div>
  </transition>
</template>

<script>
import create from '../utils/create-basic';
export default create({
  name: 'loading',
  props: {
    show: Boolean,
    text: {
      type: String,
      default: '请求中..'
    },
    type: {
      type: String,
      default: 'circle'
    },
    position: String,
    transition: {
      type: String
    }
  },
  watch: {
    show (val) {
      this.$emit('update:show', val)
    }
  }
})
</script>
