<template>
  <ul class="ant-timeline" v-if="list && list.length" :style="{paddingTop: list.length == 1 ? '24px' : '10px'}" >
    <li class="ant-timeline-item" :style="{padding: list.length > 1 ? '0 0 10px' : '0px'}" v-if="list.length >= 1">
      <div class="ant-timeline-item-tail" v-if="list.length > 1"></div>
      <div class="ant-timeline-item-head ant-timeline-item-head-blue"><!----></div>
      <div class="ant-timeline-item-content">
        <div class="flex-row-center-start">
          <span style="color: rgb(153, 153, 153);">{{list[0].createTime}}</span>
          <span style="color: rgb(51, 51, 51);margin-left: 10px;">{{list[0].operatorName}}</span>
          <span style="color: #333;" v-if="list[0].datingClueFollowStage">-{{followStageList.find((find) => find.value === list[0].datingClueFollowStage)?.label}}</span>
          <span style="color: #faa19d;margin-left: 16px;" v-if="list[0].remark">{{list[0].remark}}</span>
        </div>
      </div>
    </li>
    <li class="ant-timeline-item" :style="{padding: list.length > 2 ? '0 0 10px' : '0px'}" v-if="list.length >= 2">
      <div class="ant-timeline-item-tail" v-if="list.length > 2"></div>
      <div class="ant-timeline-item-head ant-timeline-item-head-blue"><!----></div>
      <div class="ant-timeline-item-content">
        <div class="flex-row-center-start">
          <span style="color: rgb(153, 153, 153);">{{list[1].createTime}}</span>
          <span style="color: rgb(51, 51, 51);margin-left: 10px;">{{list[1].operatorName}}</span>
          <span style="color: #333;" v-if="list[1].datingClueFollowStage">-{{followStageList.find((find) => find.value === list[1].datingClueFollowStage)?.label}}</span>
          <span style="color: #faa19d;margin-left: 16px;" v-if="list[1].remark">{{list[1].remark}}</span>
        </div>
      </div>
    </li>
    <li class="ant-timeline-item" style="padding: 0px;" v-if="list.length >= 3">
      <div class="ant-timeline-item-head ant-timeline-item-head-blue"><!----></div>
      <div class="ant-timeline-item-content">
        <div class="flex-row-center-start">
          <span style="color: rgb(153, 153, 153);">{{list[2].createTime}}</span>
          <span style="color: rgb(51, 51, 51);margin-left: 10px;">{{list[2].operatorName}}</span>
          <span style="color: #333;" v-if="list[2].datingClueFollowStage">-{{followStageList.find((find) => find.value === list[2].datingClueFollowStage)?.label}}</span>
          <span style="color: #faa19d;margin-left: 16px;" v-if="list[2].remark">{{list[2].remark}}</span>
        </div>
      </div>
    </li>
  </ul>
  <div class="flex-row-center-center" style="padding: 8px;" v-else>
    <span style="color: #999;">暂无数据</span>
  </div>
</template>
<script>
import { followStageList } from '/@/enums/customerEnum'
export default {
  name: 'Timeline',
  props: {
    list: { // 时间轴内容数组
      type: Array,
      default: () => {
        return []
      }
    },
  },
  data() {
    return {
        followStageList
    };
  },
}
</script>
  