<!--
@ 作者: 秦东
@ 时间: 2024-07-08 10:43:52
@ 备注: 自定义应用时间轴视图
-->
<script lang='ts' setup>

const props = defineProps({
	data:{
		type:Object,
		default(){
			return {}
		}
	},
	viewLayout:{
		type:Object,
		default(){
			return {}
		}
	},
	columnsFilter:{
		type:Object,
		default(){
			return {}
		}
	}
});


const loadTimePage = ref(false)
const noMore = ref(false)
const timeDisabled = computed(() => noMore.value || loadTimePage.value) 
let chuDiNumber = 0
const loadTimeLog = () =>{
	noMore.value = true
	chuDiNumber ++
	console.log("触底次数",chuDiNumber)
}

/**
@ 作者: 秦东
@ 时间: 2024-07-08 13:11:43
@ 功能: 时间轴数据搜索
*/
const searchTimeList = (val:any) =>{
	console.log("时间轴数据搜索",val)
	console.log("时间轴数据搜索--->",props.columnsFilter)
	val.viewClass = {
		class:"time",
        sortWord:"creater_time",
        sort:1,
        startTime:"",
        endTime:"",
        dayType:"",
        mapWord:""
	}
}

defineExpose({
	searchTimeList
})
</script>
<template>
	<ul v-infinite-scroll="loadTimeLog" class="infinite-list" :infinite-scroll-disabled="timeDisabled">
	{{viewLayout}}
		<el-timeline :reverse="true" class="timeLineStyle">
			<el-timeline-item center  v-for="(item,index) in props.data" :key="index" :hollow="index%3==0" :type="index%3==0?'primary':''" :icon="index%3==0?'':'MoreFilled'" :size="index%3==0?'large':''">
				<div class="timeLeft" v-if="index%3==0">
					<table>
						<tr>
							<td rowspan="2">
								<el-text class="leftDay">88</el-text>
							</td>
							<td >
								<el-text>星期三</el-text>
							</td>
						</tr>
						<tr>
							<td >
								<el-text>8888/88</el-text>
							</td>
						</tr>
					</table>
				</div>
				<div class="leftCont" v-if="index%3==0">
					
				</div>
				<el-card  v-if="index%3!=0">
					<h4>Update Github template</h4>
					<p v-for="item in props.columnsFilter">{{item.fieldClass}}</p>
				</el-card>
			</el-timeline-item>
		</el-timeline>
		<p v-if="loadTimePage">Loading...</p>
    	<p v-if="noMore">数据已全部展示！</p>
	</ul>
</template>
<style  lang='scss' scoped>
.infinite-list {
  	height: calc(100vh - 345px);
	// height:100px;
  	padding: 10px 0 0 0;
  	margin: 20px 0 0 0;
  	list-style: none;
  	overflow: auto
}
.timeLineStyle{
	margin: 0 0 0 120px;
}
.timeLeft{
	position: absolute;
	left: -120px;
}
.leftCont{
	height:40px;
}
.leftDay{
	font-size:30px;
	padding: 0 5px 0 0;
	vertical-align: middle; /* 垂直居中 */
}
</style>
