<template>
  <li class="el-timeline-item" 
    :class="[`el-timeline-item_${direction}`, {'el-timeline-hori-li': direction === 'horizontal'}]">
    <!-- 横向并且向上排布 -->
    <div
      v-if="direction === 'horizontal' && wrapperDirection === 'top'"
      class="el-timeline-item__wrapper"
      :class="[`el-timeline-item__wrapper--${wrapperDirection}`]"
      :ref="`el-timeline-item__wrapper--${wrapperDirection}--${index}`"
      style="top: calc(-100% - 16px)"
    >
      <div class="el-timeline-item__content">
        <img
          v-if="!hideImg && wrapperDirection === 'top' && imgUrl"
          class="el-timeline-item__img"
          :src="imgUrl"
          :style="imgStyle"
          alt=""
        />
        <div class="el-timeline-item__box" v-if="!divideTimeStamp" :class="direction === 'horizontal'?'el-timeline-hori-box':''">
          <div
            v-if="!hideTimestamp && placement === 'top'"
            class="el-timeline-item__timestamp is-top"
          >
            {{ timestamp }}
          </div>
          <div class="el-timeline-item__title">
            <slot></slot>
          </div>
          <div class="el-timeline-item__subText">
            {{ subText }}
          </div>
          <div
            v-if="!hideTimestamp && placement === 'bottom'"
            class="el-timeline-item__timestamp is-bottom"
          >
            {{ timestamp }}
          </div>
        </div>
      </div>
    </div>

    <!-- 垂直并且向右 -->
    <div
      class="el-timeline-item_node__timestamp"
      :style="icon ? { top: '-4px' } : ''"
      v-if="
        direction === 'vertical' &&
        wrapperDirection === 'right' &&
        divideTimeStamp
      "
    >
      {{ timestamp }}
    </div>
    <div
      class="el-timeline-item__tail"
      v-if="direction === 'vertical'"
      :style="[
        { borderLeftStyle: borderStyle },
        icon ? { top: '14px', height: 'calc(100% - 18px)' } : '',
      ]"
    ></div>
    <div
      class="el-timeline-item_horizontal__tail"
      :style="[{ borderTopStyle: borderStyle }]"
      v-else
    ></div>

    <div
      v-if="!$slots.dot && !icon"
      class="el-timeline-item__node"
      :class="[
        `el-timeline-item__node--${size || ''}`,
        `el-timeline-item__node--${type || ''}`,
      ]"
      :style="[
        {
          backgroundColor: color,
        },
      ]"
    ></div>
    <i
      v-if="icon"
      class="el-timeline-item__icon"
      :class="icon"
      :style="[
        {
          color,
        },
        direction === 'horizontal'
          ? {
              top: '-3px',
              left: '-3px',
            }
          : '',
      ]"
    ></i>
    <div v-if="$slots.dot" class="el-timeline-item__dot">
      <slot name="dot"></slot>
    </div>
    <div
      v-if="
        (direction === 'horizontal' && wrapperDirection === 'bottom') ||
        direction === 'vertical'
      "
      class="el-timeline-item__wrapper"
      :class="[`el-timeline-item__wrapper--${wrapperDirection}`]"
      :style="icon ? { top: '-5px' } : ''"
      :ref="`el-timeline-item__wrapper--${wrapperDirection}--${index}`"
    >
      <div class="el-timeline-item__content">
        <img
          v-if="
            !hideImg && imgUrl && ['bottom', 'right', 'left'].includes(wrapperDirection)
          "
          class="el-timeline-item__img"
          :src="imgUrl"
          :style="imgStyle"
          alt=""
        />
        <div class="el-timeline-item__box" :class="direction === 'horizontal'?'el-timeline-hori-box':''">
          <div
            v-if="!hideTimestamp && placement === 'top'"
            class="el-timeline-item__timestamp is-top"
          >
            {{ timestamp }}
          </div>
          <div class="el-timeline-item__title">
            <slot></slot>
          </div>
          <div class="el-timeline-item__subText">
            {{ subText }}
          </div>
          <div
            v-if="!hideTimestamp && placement === 'bottom' && !divideTimeStamp"
            class="el-timeline-item__timestamp is-bottom"
            :class="[`el-timeline-item__timestamp--${wrapperDirection}`]"
          >
            {{ timestamp }}
          </div>
        </div>
        <!-- <img
          v-if="!hideImg && imgUrl && wrapperDirection === 'left'"
          class="el-timeline-item__img"
          :src="imgUrl"
          :style="imgStyle"
          alt=""
        /> -->
      </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",
    },

    icon: String,

    direction: {
      type: String,
      default: "vertical",
    },

    imgUrl: {
      type: String,
      default: "",
    },

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

    wrapperDirection: {
      type: String,
      default: "right",
    },

    index: {
      type: Number,
      default: 0,
    },

    imgStyle: {
      type: Object,
      default: () => {},
    },

    subText: {
      type: String,
      default: "",
    },

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

    borderStyle: {
      type: String,
      default: "solid",
    },
  },
  mounted() {
    this.renderTimelineStyle(
      `el-timeline-item__wrapper--${this.wrapperDirection}--${this.index}`
    );
  },
  methods: {
    renderTimelineStyle(key) {
      this.$nextTick(() => {
        if (this.wrapperDirection === "top") {
          const height = this.$refs[key].offsetHeight + 13;
          this.$refs[key].style.top = `-${height}px`;
        }
      });
    },
  },
};
</script>
