<template>
  <div class="bgo-empty">
    <div class="bgo-empty__image">
      <slot name="image">
        <img :src="imageUrl">
      </slot>
    </div>
    <div class="bgo-empty__description">
      <slot name="description">
        {{description}}
      </slot>
    </div>
    <div>
      <slot></slot>
    </div>
  </div>
</template>

<script>
import ImageEmpty from "../../assets/images/empty/empty.png";
import ImageNetwork from "../../assets/images/empty/network.png";
import ImageServer from "../../assets/images/empty/server.png";
import ImageSearch from "../../assets/images/empty/search.png";
import ImageAuthority from "../../assets/images/empty/authority.png";

const PRESET_IMAGE = {
  empty: ImageEmpty,
  authority: ImageAuthority,
  search: ImageSearch,
  network: ImageNetwork,
  server: ImageServer,
};

export default {
  name: "BgoEmpty",
  props: {
    image: {
      type: String,
      default: "empty",
    },
    description: {
      type: String,
    },
  },
  computed: {
    imageUrl() {
      return PRESET_IMAGE[this.image] || this.image;
    },
  },
};
</script>

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