<template>
  <div
    class="interface interface-add"
    @click.stop="onClick"
  >
    <slot>
      <img :src="img" />
      <p v-if="loading">
        数据加载中...
        <Icon
          type="ios-loading"
          size="18"
          class="demo-spin-icon-load"
        ></Icon>
      </p>
      <p v-else>{{ title }}</p>
    </slot>
  </div>
</template>

<script>
/**
 * 权限空页面
 */
import { typeOf } from "@/libs/tools";
import { prefix } from "@/libs/config";
export default {
  name: `${prefix}Empty`,
  data() {
    return {
      img: require("@/assets/img/empty.png")
    };
  },
  props: {
    title: String,
    loading: Boolean
  },
  watch: {
    loading(val) {
      if (val) {
      } else {
      }
    }
  },
  methods: {
    onClick() {
      this.$emit("on-click");
    }
  }
};
</script>

<style lang="stylus" scoped>
.demo-spin-icon-load {
  animation: ani-demo-spin 1s linear infinite;
}

.interface {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  height: 100%;
  min-height: 450px;
  max-height: 650px;
  padding: 15px;
  box-sizing: border-box;

  p {
    color: #A3AFC5;
    font-size: 14px;
  }
}
</style>
