<template>
  <div :class="['mm-steps-item', statusClass, {'mm-steps-item--custom' : icon}]">
    <div class="mm-steps-item-tail"></div>
    <div class="mm-steps-item-icon">
      <ui-icon
        v-if="icon && icon !== 'loading' && !dot"
        :size="iconSize"
        :class="'mm-steps-icon'"
        :name="icon"></ui-icon>
      <ui-loading
        v-if="icon === 'loading' && !dot"
        :size="iconSize"
        :color="iconColor"
        :stroke-width="4"></ui-loading>
      <span
        v-if="!icon && !dot"
        class="mm-steps-icon">
        <ui-icon
          v-if="statusIcon"
          :size="iconSize"
          :name="statusIcon"></ui-icon>
        <span v-else>
          {{ index + 1 }}
        </span>
      </span>
      <span
        v-if="dot"
        class="mm-steps-icon">
        <span class="mm-steps-icon--dot"></span>
      </span>
      <div class="mm-steps-popover">
        <slot
          name="popover"></slot>
      </div>
    </div>
    <div class="mm-steps-item-content">
      <div class="mm-steps-item-title">
        <slot name='title'>
          {{ title }}
        </slot>
      </div>
      <div class="mm-steps-item-description">
        <slot name='description'>
          {{ description }}
        </slot>
      </div>
    </div>
  </div>
</template>

<script>
import Icon from "../icon"
import Loading from "../loading"

const SIZE_LIST = {
  small: "0.8rem",
  default: "1rem",
  custom: "1.625rem",
}

const TYPE_LIST = {
  wait: {
    color: "rgba(0,0,0,.25)",
  },
  finish: {
    color: "#1890ff",
    icon: "check",
  },
  process: {
    color: "#1890ff",
  },
  error: {
    color: "#f5222d",
    icon: "close",
  },
}

export default {
  name: "mm-step",
  components: {
    "ui-icon": Icon,
    "ui-loading": Loading,
  },
  props: {
    title: {
      type: String,
      default: "",
    },
    description: {
      type: String,
      default: "",
    },
    icon: {
      type: String,
      default: "",
    },
    index: Number,
  },
  computed: {
    status() {
      return this.index === this.$parent.currentIndex
        ? this.$parent.status
        : this.index > this.$parent.currentIndex
          ? "wait"
          : "finish"
    },
    dot() {
      return this.$parent.pdot
    },
    iconSize() {
      if (this.icon) {
        return SIZE_LIST["custom"]
      }
      return SIZE_LIST[this.$parent.size]
    },
    iconColor() {
      return TYPE_LIST[this.status].color
    },
    statusIcon() {
      return TYPE_LIST[this.status].icon
    },
    statusClass() {
      return `mm-steps-item--${this.status}`
    },
  },
  methods: {},
}
</script>
