<template>
  <div class="mm-empty">
    <template v-if="customRender">
      <custom-render :image="image" :desc="desc" :custom-render="customRender"></custom-render>
    </template>
    <template v-else>
        <div class="mm-empty-image">
        <slot
          name="image">
          <img
            v-if="image"
            :src="image" />
          <render-image
            v-else
            :type="type"></render-image>
        </slot>
      </div>

      <div class="mm-empty-desc">
        <slot
          name="desc">
          <span>
            {{ desc }}
          </span>
        </slot>
      </div>

      <div
        v-if="$slots.default"
        class="mm-empty-footer">
        <slot></slot>
      </div>
    </template>
  </div>
</template>

<script>
import { t } from "../../locale"
import EmptyIcon from "./empty-icon"
import config from "../../managers/config"

config.defaults({
  "Empty.visibleArrow": false,
  "Empty.type": "default",
  "Empty.renderImage": undefined,
  "Empty.customRender": false,
})

export default {
  name: "mm-empty",
  components: {
    RenderImage: {
      props: EmptyIcon.props,
      render(h) {
        const renderImage = config.get("Empty.renderImage")

        if (typeof renderImage === "function") {
          return renderImage(h, this.type)
        }

        return h(EmptyIcon, {
          props: {
            type: this.type,
          },
        })
      },
    },
    CustomRender: {
      props: {
        image: {
          type: String,
        },
        desc: {
          type: String,
          default() {
            return t("ui.empty.emptyText")
          },
        },
        customRender: {
          type: Function,
        }
      },
      render(h) {
        return this.customRender(h, {
          image: this.image,
          desc: this.desc,
        })
      },
    },
  },
  props: {
    type: {
      type: String,
      default: () => config.get("Empty.type"),
      validator(value) {
        return ["default", "small"].includes(value)
      },
    },
    image: {
      type: String,
    },
    desc: {
      type: String,
      default() {
        return t("ui.empty.emptyText")
      },
    },
    customRender: {
      type: [Boolean,Function],
      default() {
        return config.get("Empty.customRender")
      },
    }
  },
}
</script>
