<template>
	<li class="upanapp-timeline-item">
		<div :class="['upanapp-timeline-item-color', {'upanapp-timeline-item-head': !isFirst,'upanapp-timeline-item-head-first': isFirst }]" :style="headStyle">
			<ua-icon v-show="isFirst && $parent.isShowIcon" type="success_no_circle" class="upanapp-timeline-item-checked"></ua-icon>
		</div>
		<div class="upanapp-timeline-item-tail" :style="tailStyle"></div>
		<div class="upanapp-timeline-item-content">
			<slot></slot>
		</div>
	</li>
</template>

<script>
import UaIcon from '../icon'

export default {
  name: 'ua-timeline-item',
  data () {
    return {
      isLast: true,
      isFirst: true,
      headStyle: { backgroundColor: this.$parent.color }
    }
  },
  mounted () {
    this.$parent.setChildProps()
  },
  beforeDestroy () {
    // this will be null
    const $parent = this.$parent
    this.$nextTick(() => {
      $parent.setChildProps()
    })
  },
  components: {
    UaIcon
  },
  computed: {
    tailStyle () {
      return this.isLast ? { display: 'none', backgroundColor: this.$parent.color } : { display: 'block', backgroundColor: this.$parent.color }
    }
  }
}
</script>

