<template>
  <div class="zCalendar__line_contanier flexbox font12">
    <div class="zCalendar-line__title" v-if="isShowTitle&&dataList&&dataList.length">日程：</div>
    <ul class="el-timeline" v-if="dataList&&dataList.length>0">
      <li class="el-timeline-item" v-for="(activity, index) in dataList" :key="index" :style="'padding-bottom:'+itemPaddingBottom+'px'">
        <ts-row type="flex">
          <ts-col :flex="1.5">
            <div class="el-timeline-item__timestamp font12">{{activity.time}}</div>
          </ts-col>
          <ts-col :flex="3">
            <div class="el-timeline-item__tail"></div>
            <div
              class="el-timeline-item__node el-timeline-item__node--normal el-timeline-item__node--primary"
            >
              <!-- <i class="el-timeline-item__icon el-icon-more"></i> -->
            </div>
            <div class="el-timeline-item__wrapper">
              <div class="el-timeline-item__content">{{activity.content}}</div>
            </div>
          </ts-col>
        </ts-row>
      </li>
    </ul>
    <tsEmpty v-else description="-暂无日程数据-" :imageStyle="{width:'80%',height:'100%'}"></tsEmpty>
    <!-- <p v-else class="no_data height100" style="width:100%">暂无日程数据</p> -->
  </div>
</template>
<script>
import _ from 'lodash'
export default {
  name: 'biCalendarTimeLine',
  props: {
    isShowTitle:{  //是否显示标题
      type:Boolean,
      default:true
    },
    itemPaddingBottom:{
      type:Number,
      default:10
    },
    dataList:{
      type:Array,
      default:()=>{
        return []
      }
    }
  },
  data() {
    return {
    }
  },
  computed: {},

  created() {},
  mounted() {},
  methods: {},
  watch: {}
}
</script>
<style  lang="less" scoped>
.zCalendar__line_contanier {
  position: relative;
  height: 100%;
  width: 100%;
  .layui-timeline-title {
    margin: 0;
    font-size: 12px;
  }
  .layui-timeline-item {
    margin-bottom: 5px;
  }
  .el-timeline {
    width: 100%;
    overflow: hidden;
    overflow-y: auto;
    .el-timeline-item {
      
      .el-timeline-item__tail {
        height: calc(100% + 35px);
      }
      .el-timeline-item__content {
        color: #606266;
        font-size: 12px;
      }
      .el-timeline-item__node--primary {
        background-color: var(--button_color)  !important;
      }
      .el-timeline-item__timestamp {
        float: right;
        padding-right: 22px;
      }
    }
  }
  .zCalendar-line__title {
    padding: 5px 5px 0 5px;
    width: 20px;
  }
}
</style>
