<template>
  <el-timeline class="th-timeline" v-bind="props" v-on="$listeners">
    <el-timeline-item
      v-for="(item, index) in data"
      :key="index"
      placement="top"
      :timestamp="item[timestamp]"
      :style="{cursor: isClick?'pointer':''}"
      @click.native="onClick(item,index)"
    >
      <!-- eslint-disable vue/no-v-html -->
      <span v-html="item[content]">{{ item[content] }}</span>
      <template slot="dot">
        <!-- <th-icon icon="node" size="medium"/> -->
        <img src="./img/point.png" />
      </template>
    </el-timeline-item>
  </el-timeline>
</template>
<script>
import ThIcon from '../../icon/src/main'
export default {
  name: 'ThTimeline',
  component: {
    ThIcon
  },
  props: {
    // 时间线属性
    props: {
      type: Object,
      default: () => ({})
    },
    // 数据
    data: {
      type: Array,
      default: () => []
    },
    // 时间字段
    timestamp: {
      type: String,
      default: 'timestamp'
    },
    // 内容字段
    content: {
      type: String,
      default: 'content'
    },
    // 是否可点击
    isClick: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    onClick(item, index) {
      this.$emit('click', item, index)
    }
  }
}
</script>
