import { computed, defineComponent, PropType } from 'vue'

export default defineComponent({
  name: 'StepLoadingItem',
  props: {
    name: {
      type: String,
    },
    status: {
      type: String as PropType<'success'| 'error' | 'loading'>,
      default: 'loading',
    },
    showline: {
      type: Boolean,
    },
  },
  setup(props) {
    const state = computed(() => {
      return props.status
    })

    return () => (
      <div class="sk-step-item sk-flex">
        <div v-show={state.value === 'success'} class="sk-loading-x">
          <i class="sk-icon el-icon-success"></i>
          <div v-show={props.showline} class="sk-step-line success"></div>
        </div>
        <div v-show={state.value === 'error'} class="sk-loading-x is-error">
          <i class="sk-icon el-icon-error"></i>
          <div v-show={props.showline} class="sk-step-line error"></div>
        </div>
        <div v-show={state.value === 'loading'} class="sk-loading-x">
          <div class="sk-icon breathe-div sk-flex sk-center"></div>
          <div v-show={props.showline} class="sk-step-line"></div>
        </div>
        <div class="sk-flex sk-j-center step-item-name">{ props.name }</div>
      </div>
    )
  },
})