<template>
  <li class="el-timeline-item">
    <div class="el-timeline-item__tail"></div>

    <div
      v-if="!$slots.dot"
      class="el-timeline-item__node"
      :class="[
        `el-timeline-item__node--${size || ''}`,
        `el-timeline-item__node--${type || ''}`,
      ]"
      :style="`${
        $ELEMENT.isYzw ? 'border-color:' : 'background-color:'
      }${color}`"
    >
      <div
        ref="leftTimestamp"
        v-if="!hideTimestamp && placement === 'left'"
        class="el-timeline-item__timestamp is-left"
      >
        {{ timestamp }}
      </div>
      <i v-if="icon" class="el-timeline-item__icon" :class="icon"></i>
    </div>
    <div v-if="$slots.dot" class="el-timeline-item__dot">
      <slot name="dot"></slot>
    </div>

    <div class="el-timeline-item__wrapper">
      <div v-if="!hideTimestamp && placement === 'top'" class="el-timeline-item__timestamp is-top">
        {{ timestamp }}
      </div>

      <div v-if="title" class="el-timeline-item__title">
        {{ title }}
      </div>
      <div class="el-timeline-item__content">
        <slot></slot>
      </div>

      <div v-if="!hideTimestamp && placement === 'bottom'" class="el-timeline-item__timestamp is-bottom">
        {{ timestamp }}
      </div>
    </div>
  </li>
</template>

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

  inject: ['timeline'],

  props: {
    timestamp: String,

    hideTimestamp: {
      type: Boolean,
      default: false
    },

    placement: {
      type: String,
      default: 'bottom'
    },

    type: String,

    color: String,

    size: {
      type: String,
      default: 'normal'
    },
    title: {
      type: String,
      default: ''
    },

    icon: String
  },
  mounted() {
    this.placement === 'left' && this.updateParentLongestChildWidth();
  },
  methods: {
    updateParentLongestChildWidth() {
      const width = this.$refs.leftTimestamp.offsetWidth;
      const parentElement = this.$parent.$el;
      if (
        !parentElement.style.marginLeft ||
        width > parseInt(parentElement.style.marginLeft, 10)
      ) {
        parentElement.style.marginLeft = width + 10 + 'px';
        parentElement.style.paddingInlineStart = 0;
      }
    }
  }
};
</script>
