<style scoped>
  .el-step__head.is-text.is-process,.el-step__head.is-text.is-wait {
    background: none;
    border: none;
    color: #00b234!important;
    font-weight: 700;
  }
  .el-step__icon>* {
    margin-left: -3px;
  }
  .el-step__line{
    top: 50px;
    left: 33px;
    border: 1px dashed;
    background: #a3e6bb;
  }
  .el-step__title,.el-step__description{
    width: 185px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .el-step__icon {
    background: url("./img/icon_map_list.png") no-repeat !important;
    background-size: 100% 100%;
  }
  .btn_cls {
    color: #00b234;
  }
</style>
<template>
  <div
    style="padding: 20px; height: 110px"
    class="el-step"
    :style="[style,  isLast ? '' : { marginRight: - $parent.stepOffset + 'px' }]"
    :class="['is-' + $parent.direction]">
    <div
      class="el-step__head"
      :class="['is-' + currentStatus, { 'is-text': !icon }]">
      <div
        class="el-step__line"
        :style="isLast ? '' : { marginRight: $parent.stepOffset + 'px' }"
        :class="['is-' + $parent.direction, { 'is-icon': icon }]">
        <i class="el-step__line-inner" :style="lineStyle"></i>
      </div>

      <span class="el-step__icon">
        <slot
          v-if="currentStatus !== 'success' && currentStatus !== 'error'"
          name="icon">
          <i v-if="icon" :class="['el-icon-' + icon]"></i>
          <div v-else>{{ index + 1 }}</div>
        </slot>
        <i
          v-else
          :class="['el-icon-' + (currentStatus === 'success' ? 'check' : 'close')]">
        </i>
      </span>
    </div>
    <div
      style="width: 255px"
      class="el-step__main clearfix"
      :style="{ marginLeft: mainOffset }">
      <div
        :title="title"
        class="el-step__title"
        ref="title"
        :class="['is-' + currentStatus]">
        <slot name="title" >{{ title }}</slot>
      </div>
      <div style="float: left">
        <div
          :title="description"
          class="el-step__description"
          :class="['is-' + currentStatus]">
          <slot name="description" >{{ description }}</slot>
        </div>
      </div>
      <div style="float: right">
        <el-button v-for="(btn, key) in buttons" style="display: block; margin: 0" :class="key==1 && 'btn_cls'" :key="btn.id" type="text" @click="btn.functionName(info)">
          <i class="fa fa-street-view" v-if="key == 0"></i>
          <!--<i class="fa fa-map-marker" v-if="key == 0"></i>-->
          <i class="fa fa-th-large" v-if="key == 1"></i>
          {{btn.text}}
        </el-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ElStep',

  props: {
    title: String,
    icon: String,
    description: String,
    status: String,
    info: Object,
    buttons: Array
  },

  data () {
    return {
      index: -1,
      lineStyle: {},
      mainOffset: 0,
      internalStatus: ''
    }
  },

  beforeCreate () {
    this.$parent.steps.push(this)
  },

  beforeDestroy () {
    const steps = this.$parent.steps
    const index = steps.indexOf(this)
    if (index >= 0) {
      steps.splice(index, 1)
    }
  },

  computed: {
    currentStatus () {
      return this.status || this.internalStatus
    },
    prevStatus () {
      const prevStep = this.$parent.steps[this.index - 1]
      return prevStep ? prevStep.currentStatus : 'wait'
    },
    isLast: function () {
      const parent = this.$parent
      return parent.steps[parent.steps.length - 1] === this
    },
    style: function () {
      const parent = this.$parent
      const isCenter = parent.center
      const len = parent.steps.length

      if (isCenter && this.isLast) {
        return {}
      }

      const space = (typeof parent.space === 'number'
        ? parent.space + 'px'
        : parent.space
          ? parent.space
          : 100 / (isCenter ? len - 1 : len) + '%')
      if (parent.direction === 'horizontal') {
        return { width: space }
      } else {
        if (!this.isLast) {
          return { height: space }
        }
      }
    }
  },

  methods: {
    updateStatus (val) {
      const prevChild = this.$parent.$children[this.index - 1]

      if (val > this.index) {
        this.internalStatus = this.$parent.finishStatus
      } else if (val === this.index && this.prevStatus !== 'error') {
        this.internalStatus = this.$parent.processStatus
      } else {
        this.internalStatus = 'wait'
      }

      if (prevChild) prevChild.calcProgress(this.internalStatus)
    },

    calcProgress (status) {
      let step = 100
      const style = {}

      style.transitionDelay = 150 * this.index + 'ms'
      if (status === this.$parent.processStatus) {
        step = this.currentStatus !== 'error' ? 50 : 0
      } else if (status === 'wait') {
        step = 0
        style.transitionDelay = (-150 * this.index) + 'ms'
      }

      style.borderWidth = step ? '1px' : 0
      this.$parent.direction === 'vertical'
        ? style.height = step + '%'
        : style.width = step + '%'

      this.lineStyle = style
    }
  },

  mounted () {
    const parent = this.$parent

    if (parent.direction === 'horizontal') {
      if (parent.alignCenter) {
        this.mainOffset = -this.$refs.title.getBoundingClientRect().width / 2 + 16 + 'px'
      }
    }

    const unwatch = this.$watch('index', val => {
      this.$watch('$parent.active', this.updateStatus, { immediate: true })
      unwatch()
    })
  }
}
</script>
