<template>
  <div
    class="mm-result"
    :class="{
      [`mm-result-${status}`]: status
    }">
    <div
      v-if="icon || status || $slots.icon"
      class="mm-result-icon"
      :class="{
        'mm-result-image': hasException,
      }">
      <component
        :is="ExceptionComponent"
        v-if="hasException"></component>
      <slot
        v-else
        name="icon">
        <icon :name="icon || status"></icon>
      </slot>
    </div>

    <div
      v-if="title || $slots.title"
      class="mm-result-title">
      <slot name="title">
        {{ title }}
      </slot>
    </div>

    <div
      v-if="subtitle || $slots.subtitle"
      class="mm-result-subtitle">
      <slot name="subtitle">
        {{ subtitle }}
      </slot>
    </div>

    <div
      v-if="$slots.default"
      class="mm-result-content">
      <slot></slot>
    </div>

    <div
      v-if="$slots.extra"
      class="mm-result-extra">
      <slot name="extra"></slot>
    </div>
  </div>
</template>

<script>
import Icon from "../icon"
import NoFound from "./no-found"
import ServerError from "./server-error"
import Unauthorized from "./unauthorized"

export const ExceptionMap = {
  "404": NoFound,
  "500": ServerError,
  "403": Unauthorized,
}
export const status = ["success", "error", "info", "warning"]
const exceptionKeys = Object.keys(ExceptionMap)
export const exception = exceptionKeys.concat(exceptionKeys.map(Number))

export default {
  name: "mm-result",
  components: {
    Icon,
  },
  props: {
    title: {
      type: String,
    },
    subtitle: {
      type: String,
    },
    status: {
      type: [String, Number],
      default: "info",
      validator() {
        return status.concat(exception)
      },
    },
    icon: {
      type: String,
    },
  },
  computed: {
    hasException() {
      return exception.includes(this.status)
    },

    hasStatus() {
      return !this.hasException && status.includes(this.status)
    },

    ExceptionComponent() {
      return this.hasException && ExceptionMap[this.status]
    },
  },
}
</script>
