<!--
@ 作者: 秦东
@ 时间: 2024-07-08 10:43:52
@ 备注: 自定义应用时间轴视图
-->
<script lang='ts' setup>
import { multiViewPage } from '@/api/DesignForm/requestapi'
import FormPageCont from '@/components/DesignForm/tableListPage/formPageCont.vue'
import {
    json2string
} from '@/utils/DesignForm/form'
const props = defineProps({
	data:{
		type:Object,
		default(){
			return {}
		}
	},
	viewLayout:{
		type:Object,
		default(){
			return {}
		}
	},
	columnsFilter:{
		type:Object,
		default(){
			return {}
		}
	},
	searchSend:{
		type:Object,
		default(){
			return {}
		}
	},
	drawerWith:{
		type:Number,
		default:0
	}
});
const svg = `
        <path class="path" d="
          M 30 15
          L 28 17
          M 25.61 25.61
          A 15 15, 0, 0, 1, 15 30
          A 15 15, 0, 1, 1, 27.99 7.5
          L 15 15
        " style="stroke-width: 4px; fill: rgba(0, 0, 0, 0)"/>
      `

const loadTimePage = ref(false)
const noMore = ref(false)
const timeDisabled = computed(() => noMore.value || loadTimePage.value) 
let chuDiNumber = 0
const loadTimeLog = () =>{
	loadTimePage.value = true
	chuDiNumber ++
	// console.log("触底次数",chuDiNumber,loadTimePage.value)
	if(loadTimePage.value){
		props.searchSend.page= chuDiNumber
		searchTimeList(props.searchSend)
	}else{
		loadTimePage.value = false
	}
	
}
const total = ref<number>(0)
const count = ref<number>(0)
const timeInfoList = ref<any[]>([])
/**
@ 作者: 秦东
@ 时间: 2024-07-08 13:11:43
@ 功能: 时间轴数据搜索
*/
const searchTimeList = (val:any,clas?:number) =>{
	loadTimePage.value = true
	// console.log("时间轴数据搜索",val)
	// console.log("时间轴数据搜索--->",props.columnsFilter)
	val.viewClass = {
		class:"time",
        sortWord:"creater_time",
        sort:1,
        startTime:"",
        endTime:"",
        dayType:"",
        mapWord:""
	}
	if(clas && clas != 1){
		// console.log("时间轴数据搜索-11111-->",timeInfoList.value.length)
		if(timeInfoList.value.length > 0){
			val.oldData = json2string(timeInfoList.value)
		}else{
			val.oldData = ""
		}
	}
	
	
	multiViewPage(val)
		.then((data:any) =>{
			// console.log("时间轴数据搜索--1->",data)
			loadTimePage.value = false
			total.value = data.data.total
			count.value = data.data.count
			timeInfoList.value = data.data.list
			if(data.data.count == val.pagesize){
				
				noMore.value = false
			}else{
				noMore.value = true
			}
			
			
		})
		.finally(()=>{
			nextTick(()=>{
				loadTimePage.value = false
			})
		})
}

defineExpose({
	searchTimeList
})
/**
@ 作者: 秦东
@ 时间: 2024-07-09 16:21:03
@ 功能: 判断当前值
*/
const judgeGainVal = (key:string,val:any) => {
	// console.log("判断当前值--1->",val)
	if(val[key]){
		return val[key]
	}
	return ""
	// console.log("判断当前值--3->",val[key])
	// if(val){
	// 	val.forEach((item,index)=>{
	// 		console.log("判断当前值--3->",item,index)
	// 	})
	// }
}
/**
@ 作者: 秦东
@ 时间: 2024-07-09 16:32:06
@ 功能: 要显示得字段
*/
const showWork = computed(() => {
	let ary = [];
	if(props.columnsFilter){
		props.columnsFilter.forEach((item)=>{
			if(item.fieldClass != "-" && item.fieldClass != "__control"){
				ary.push(item)
			}
		})
	}
	return ary
})

/**
@ 作者: 秦东
@ 时间: 2024-04-03 13:24:06
@ 功能: 查看详细内容
*/
const tablePageClass = ref(1)
const lookPageInfoIsShow = ref(false)
const pageInfoCont = ref<any>()
const lookPageInfo = (val:any) => {
	tablePageClass.value = 4;
	pageInfoCont.value = val
	lookPageInfoIsShow.value = true;	
}
</script>
<template>
	<ul v-infinite-scroll="loadTimeLog" class="infinite-list" :infinite-scroll-disabled="timeDisabled">
		

		<el-timeline :reverse="true" class="timeLineStyle" >

			
				<el-timeline-item center  v-for="(item,sunIndex) in timeInfoList" :key="index" :hollow="item.class_type$unit==1" :type="item.class_type$unit==1?'primary':''" :icon="item.class_type$unit==1?'':'MoreFilled'" :size="item.class_type$unit==1?'large':''">
					<div class="timeLeft" v-if="item.class_type$unit==1">
						<table>
							<tr>
								<td rowspan="2">
									<el-text class="leftDay">{{item.day}}</el-text>
								</td>
								<td >
									<el-text>{{item.weekDay}}</el-text>
								</td>
							</tr>
							<tr>
								<td >
									<el-text>{{item.dateTime}}</el-text>
								</td>
							</tr>
						</table>
					</div>
					<div class="leftCont" v-if="item.class_type$unit==1">
						
					</div>
					<el-card  v-if="item.class_type$unit!=1" @click="lookPageInfo(item)">

						<el-descriptions
							class="margin-top"
							title=""
							:column="3"
							border
						>
							<el-descriptions-item v-for="itemField in showWork"  :label="itemField.label" >
								
								{{judgeGainVal(itemField.field,item)}}
							</el-descriptions-item>
						</el-descriptions>

						<!-- <div v-for="itemField in props.columnsFilter" >
							<div v-if="itemField.fieldClass!='-'&&itemField.fieldClass!='__control'">
								{{itemField.label}}:{{judgeGainVal(itemField.field,item)}}
							</div>
						</div> -->
					</el-card>
				</el-timeline-item>
		


			<!-- <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">
					<div v-for="item in props.columnsFilter" >
						<div v-if="item.fieldClass!='-'&&item.fieldClass!='__control'">
							{{item.label}}{{item.fieldClass!='-'}}
						</div>
					</div>
				</el-card>
			</el-timeline-item> -->
		</el-timeline>
		<p class="jichuClass"  
			v-loading="loadTimePage" 
			element-loading-text="Loading..."
    		:element-loading-spinner="svg"
    		element-loading-svg-view-box="-10, -10, 50, 50"
		></p>
    	<p class="jichuClass sizeMove" v-if="noMore">数据已全部展示！</p>
		<FormPageCont v-model:is-show="lookPageInfoIsShow" :drawer-with="props.drawerWith" :page-info="pageInfoCont" :table-page-class="tablePageClass" :oper-state="operState" @getPageData="getPageData" />
	</ul>
</template>
<style  lang='scss' scoped>
.infinite-list {
  	height: calc(100vh - 280px);
	// 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; /* 垂直居中 */
}
.jichuClass{
	width: 100%;
    text-align: center;
}
.sizeMove{
	color: #FF0000;
	font-size: 14px
}
</style>
