<template>
  <div class="uif-step-status-item" :class="classes">
    <div class="clearfix">
      <u-step-status-dot></u-step-status-dot>
      <div class="uif-step-status-icon">
        <u-icon :type="icon"></u-icon>
      </div>
      <u-step-status-dot></u-step-status-dot>
    </div>
    <div class="uif-step-status-title">{{data.title}}</div>
    <div class="uif-step-status-desc">{{data.desc}}</div>
  </div>
</template>

<script>
import UIcon from '@uif/hq/src/components/icon'
import UStepStatusDot from './step-status-dot'
export default {
  components: {UStepStatusDot, UIcon},
  props: {
    data: {
      type: Object,
      default () {
        return {}
      }
    }
  },
  computed: {
    icon () {
      switch (this.data.status) {
        case 2:
          return 'check-circle-large'
        case -1:
          return 'circle-x'
      }
      return 'empty'
    },
    classes () {
      return {
        'uif-step-status-success': this.data.status === 2,
        'uif-step-status-progress': this.data.status === 1,
        'uif-step-status-error': this.data.status === -1
      }
    }
  }
}
</script>
