<!--
 * @Description: 
 * @Autor: Heloise
 * @Date: 2022-05-23 16:02:50
 * @LastEditors: Heloise
 * @LastEditTime: 2022-09-28 14:48:47
-->
<template>
  <li class="el-timeline-item" :class="[`el-timeline-${styleType || ''}-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="{
        backgroundColor: color,
      }"
    >
      <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 class="el-timeline-item__content">
        <div v-if="styleType === 'log'">
          <el-card v-if="logType === 'dispatch'">
            <div class="el-timeline-card-div">
              <el-text-tooltip
                type="button"
                :content="getLogTxt(item)"
                width="calc(100% - 52px)"
              ></el-text-tooltip>
              <span class="el-timeline-card-p">{{
                item.operateTime ? item.operateTime : "-"
              }}</span>
            </div>
            <p class="el-timeline-card-p">
              操作人：{{ item.operateName ? item.operateName : "-" }}
            </p>
          </el-card>
          <el-card v-else>
            <p class="el-timeline-card-date">
              调度时间：{{ item.operateTime ? item.operateTime : "-" }}
            </p>
            <p class="el-timeline-card-state">
              调度状态：<span
                :class="item.state === '正常' ? 'normal' : 'error'"
                >{{ item.state }}</span
              >
            </p>
          </el-card>
        </div>
        <div v-else>
          <slot></slot>
        </div>
      </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'
    },

    icon: String,

    styleType: String,

    item: Object,

    logType: {
      // 调度日志（dispatch）、操作日志（operate）
      type: String,
      default: 'operate'
    }
  },

  methods: {
    getLogTxt(item) {
      let txt = '';
      if (item.operateAction) {
        if (item.operateLog) {
          txt = `${item.operateAction}：${item.operateLog}`;
        } else {
          txt = '操作项：' + item.operateAction;
        }
      } else if (item.operateLog) {
        txt = item.operateLog;
      } else {
        txt = '-';
      }
      return txt;
    }
  }
};
</script>
