<template>
	<view>
		<view class="margin-tb">
		</view>
		
		<view class="sict-step">
			 <ul>
				<li >
					<view class="step"  :class="count>0?'step-li':'step-none'">1</view>
					<view class="step-title">报名</view>
					<p style="min-height: 100upx;">
						<view class="notice margin-tb-sm">
							<view  v-show="count>0">
								<view class="notice-item  margin-top-sm" v-for="(item,index) in registerList" :key="index" @click="viewNoticeDetail(item)"
								 hover-class="cell-hover" :hover-stay-time="50">
									<view style="display: inline-block;width: 100%;">
										<view class="left-content  text-left fl" >{{item.title}}</view>
										<view class="right-content text-right text-xs fr" style="width:140upx">{{ item.sendTime }}</view>
									</view>
								</view>
							</view>
						</view>
					</p>
				</li>
				<li>
					<view class="step"  :class="count>1?'step-li':'step-none'">2</view>
					<view class="step-title">血液检查</view>
					<p style="min-height: 100upx;">
						<view class="notice" >
							<view  v-show="count>1">
								<view class="notice-item  margin-top-sm" v-for="(item,index) in bloodList" :key="index" @click="viewNoticeDetail(item)"
								 hover-class="cell-hover" :hover-stay-time="50">
									<view style="display: inline-block;width: 100%;">
										<view class="left-content  text-left fl" >{{item.title}}</view>
										<span class="right-content text-right text-xs basis-sm fr"  style="width:140upx">{{ item.sendTime }}</span>
									</view>
								</view>
							</view>
						</view>
					</p>
				</li>
				<li>
					<view class="step" :class="count>2?'':'step-none'">3</view>
					<view class="step-title">风险评估</view>
					<p style="min-height: 100upx;">
						<view class="notice">
							<view>
								<view class="notice-item  margin-top-sm" v-for="(item,index) in riskEvaluationList" :key="index" @click="viewNoticeDetail(item)"
								 hover-class="cell-hover" :hover-stay-time="50">
									<view style="display: inline-block;width: 100%;">
										<view class="left-content  text-left fl" >{{item.title}}</view>
										<view class="right-content text-right text-xs fr" style="width:140upx">{{ item.sendTime }}</view>
									</view>
								</view>
							</view>
						</view>
					</p>
				</li>
				<li>
					<view class="step"  :class="count>3?'':'step-none'">4</view>
					<view class="step-title">内镜检查</view>
					<p style="min-height: 100upx;">
						<view class="notice" v-show="count>3">
							<view>
								<view class="notice-item  margin-top-sm" v-for="(item,index) in gastricList" :key="index" @click="viewNoticeDetail(item)"
								 hover-class="cell-hover" :hover-stay-time="50">
									<view style="display: inline-block;width: 100%;">
										<view class="left-content  text-left fl" >{{item.title}}</view>
										<view class="right-content text-right text-xs fr" style="width:140upx">{{ item.sendTime }}</view>
									</view>
								</view>
							</view>
						</view>
					</p>
				</li>
				<li>
					<view class="step" :class="count>4?'':'step-none'">5</view>
					<view class="step-title">随访</view>
					<p  style="min-height: 130upx;">
						<view class="notice" v-show="count>4">
							<view>
								<view class="notice-item  margin-top-sm" v-for="(item,index) in followUpList" :key="index" @click="viewNoticeDetail(item)"
								 hover-class="cell-hover" :hover-stay-time="50">
									<view style="display: inline-block;width: 100%;">
										<view class="left-content  text-left fl" >{{item.title}}</view>
										<view class="right-content text-right text-xs fr" style="width:140upx">{{ item.sendTime }}</view>
									</view>
								</view>
							</view>
						</view>
					</p>
				</li>
			</ul>
		</view>
			
	</view>
</template>

<script>
	export default {
		data() {
			return {
				count:0,
				noticeList:[],
				registerList:[], 
				bloodList: [],
				riskEvaluationList: [],
				gastricList: [],
				followUpList: [],
			}
		},
		onLoad(option) {
			this.getInfo(option.sampleId)
		},
		methods: {
			getInfo(sampleId) {
				if(this.$store.getters.token){
					const data = {
						params: {
							pageNum: 1,
							pageSize: 10000,
							sampleId:sampleId
						}
					}
					this.$http.get(`/gastric-cancer-data/mini/program/notice/mine/page`, data).then(res => {
						const d = res.data
						if (d.code == 1) {
							if( d.object.notices.register&& d.object.notices.register.length>0){
								this.count = 1
								this.registerList = d.object.notices.register
								
								this.registerList.forEach(item=>{
									item.sendTime = item.sendTime?item.sendTime.split(" ")[0]:''
								})
							}
							
							if(d.object.notices.blood && d.object.notices.blood.length>0){
								this.count = 2
								this.bloodList = d.object.notices.blood
								this.bloodList.forEach(item=>{
									item.sendTime = item.sendTime?item.sendTime.split(" ")[0]:''
								})
							}
							
							if(d.object.notices.riskEvaluation && d.object.notices.riskEvaluation.length>0){
								this.count = 3
								this.riskEvaluationList = d.object.notices.riskEvaluation
								this.riskEvaluationList.forEach(item=>{
									item.sendTime = item.sendTime?item.sendTime.split(" ")[0]:''
								})
							}
							
							if(d.object.notices.gastric && d.object.notices.gastric.length>0){
								this.count = 4
								this.gastricList = d.object.notices.gastric
								this.gastricList.forEach(item=>{
									item.sendTime = item.sendTime?item.sendTime.split(" ")[0]:''
								})
							}
							
							if(d.object.notices.followUp && d.object.notices.followUp.length>0){
								this.count = 5
								this.followUpList = d.object.notices.followUp
								this.followUpList.forEach(item=>{
									item.sendTime = item.sendTime?item.sendTime.split(" ")[0]:''
								})
							}
							// this.noticeList = d.object.list
						}
					}).catch(err => {
						console.log(err)
					})
				}
			},
			// 查看公告/通知详情
			viewNoticeDetail(item) {
				uni.navigateTo({
					url: `/personModule/notice/detail?id=${item.id}&type=notice`
				})
			},
		}
	}
</script>

<style lang="scss">
	.noneInfo{
		margin-top:150upx;
		.noneInfoImg{
			background-image: url('../../static/noneInfo.png');
			height: 128upx;
			background-position: center;
			background-repeat: no-repeat;
		}
	}
	
	.sict-step{
		padding-bottom: 30upx;
		// #ifndef MP-WEIXIN
			padding-bottom: 120upx;
		// #endif
		.step-title{
			position: absolute;
			text-align: right;
			top:20upx;
			font-size: 30upx;
			left:34upx;
		}
		
		.notice-item { 
			 padding:10upx 20upx; 
		}
		
		ul {
	        margin: 0 auto;
			padding-left:36upx;
	    }
		
	    li {
	        position: relative;
	        margin: 0 40upx;
			padding-top: 20upx;
			padding-left: 70upx;
	        list-style: none;
	        border-left: 2upx solid #ccc;
	    }
		
	    li:before {
	        content: "";
	        display: block;
	        position: absolute;
	        margin-left: -12upx;
	        top: 16upx;
			left: -10upx;
			width: 38upx;
			height: 38upx;
			line-height: 50upx;
	        text-align: center;
			// border:2upx solid #ccc;
	        font-size: 28upx;
	        border-radius: 50%;
	    }
		
		.step{
			position: absolute;
			left: -20upx;
			height: 40upx;
			width: 40upx;
			line-height: 40upx;
			color:#409eff;
			text-align: center;
			background-color: rgb(242,242,242);	
			border:2upx solid #409eff;
			border-radius: 50%;
		}
		
		.step ~ .step-title{
			color:#409eff;
		}
		
		.step-none{
			color:#ccc;
			border:2upx solid #ccc;
		}
		
		.step-none ~ .step-title{
			color:#ccc;
		}
		li{
			.notice{
				margin: 0;
				margin-top:30upx;
				padding:20upx ;
				.notice-item{
					padding:16upx 20upx; 
					padding-bottom: 8upx;
				}
			}
		}
	}
</style>
