<template>
  <div class="el-result">
    <div :class="['el-result__icon', `el-result__icon__${icon}`]">
      <template v-if="!isCustomize">
        <slot name="icon">
          <component :is="iconElement" :num="iconNumber" :class="iconElement" />
        </slot>
      </template>
      <i class="el-result__customize-icon" :class=[customizeIcon] v-if="isCustomize"></i>
    </div>
    <div v-if="title || $slots.title" class="el-result__title">
      <slot name="title">
        <p>{{ title }}</p>
      </slot>
    </div>
    <div v-if="subTitle || $slots.subTitle" class="el-result__subtitle">
      <slot name="subTitle">
        <p>{{ subTitle }}</p>
      </slot>
    </div>
    <div v-if="$slots.extra" class="el-result__extra">
      <slot name="extra"></slot>
    </div>
  </div>
</template>
<script>
import IconSuccess from './icon-success.vue';
import IconError from './icon-error.vue';
import IconWarning from './icon-warning.vue';
import IconInfo from './icon-info.vue';
import IconNumber from './icon-number.vue';

const IconMap = {
  success: 'icon-success',
  warning: 'icon-warning',
  error: 'icon-error',
  info: 'icon-info',
  number: 'icon-number'
};

export default {
  name: 'ElResult',
  data() {
    return {
      isCustomize: false
    }
  },
  components: {
    [IconSuccess.name]: IconSuccess,
    [IconError.name]: IconError,
    [IconWarning.name]: IconWarning,
    [IconInfo.name]: IconInfo,
    [IconNumber.name]: IconNumber,
  },
  props: {
    title: {
      type: String,
      default: ''
    },
    subTitle: {
      type: String,
      default: ''
    },
    icon: {
      type: String,
      default: 'info'
    },
    iconNumber: {}
  },
  computed: {
    customizeIcon() {
      if (this.isCustomize) {
        return `el-icon-${this.icon}`
      } else {
        return '';
      }
    },
    iconElement() {
      const icon = this.icon;
      this.isCustomize = !Boolean(IconMap[icon]);
      return icon && IconMap[icon];
    }
  }
};
</script>
