<template>
	<view class="fullHeight bgWhite">
		<headers :showBack="true" class="fixedHeaderBox">
			<view class="headerName">
				{{titleList[searchForm.opType-1]}}
			</view>
		</headers>
		<view class="fixedHeaderPageContent" :style="{ 'padding-top': (statusBarHeight+52) + 'px' }">
			
		
		<!-- <scroll-view scroll-y="true" class="pageContent" :refresher-triggered="triggered" @refresherrefresh="onRefresh" @refresherrestore="onRestore" @scrolltolower="loadMore" refresher-enabled="true"  @refresherabort="onAbort"   :refresher-threshold="50" scroll-with-animation="true" > -->
			<view v-for="(item,index) in list" :key="index" class="listBox" :class="(searchForm.opType==1||searchForm.opType==6)?'listBox2':item.operateType==1?'grey':''">
				<view class="item" style="color: rgba(72, 141, 236, 1);font-size: 13px;" v-show="searchForm.opType==6">
					<text class="label" style="color: rgba(72, 141, 236, 1);font-size: 15px;">养护超期提醒：</text> {{item.createTime}}
				</view>
				<view class="item">
					<text class="label">试块编号：</text> {{item.sampleNo}}
				</view>
				<view class="item">
					<text class="label">样品类型：</text> {{item.sampleTypeName}}
				</view>
				<view class="item">
					<text class="label">成型时间：</text> {{item.formingTime}}
				</view>
				<view class="item">
					<text class="label">入室时间：</text> {{item.addTime?item.addTime:item.sampleAddTime}}
				</view>
				<view class="item">
					<text class="label">养护周期：</text> {{item.curingPeriod}} 天
				</view>
				<view class="item"  v-show="searchForm.opType!=6">
					<text class="label">样品数量：</text> {{item.sampleNum}}
				</view>
				<view class="item" v-show="item.inspectionNo">
					<text class="label">送检编号：</text> {{item.inspectionNo}}
				</view>
				<view class="item" v-show="item.inspectionTime">
					<text class="label">送检时间：</text> {{item.inspectionTime}}
				</view>
				<view class="operateBox" v-show="searchForm.opType==2">
					<view class="leftBtn" @click="operateFn(item,1)">
						作废
					</view>
					<view class="rightBtn" @click="sendToCheck(item)">
						送检
					</view>
				</view>
				<view class="operateBox" v-show="searchForm.opType==3">
					<view class="leftBtn" @click="checkFn(item,2)">
						检验不合格
					</view>
					<view class="rightBtn" @click="checkFn(item,1)">
						检验合格
					</view>
				</view>
				<view class="operateBtn" v-show="searchForm.opType==1" @click="operateFn(item,1)">
					作<br>废
				</view>
				<view class="operateBtn" v-show="searchForm.opType==6" @click="deleteFn(item)">
					删<br>除
				</view>
				<view class="statusBox" v-show="searchForm.opType==4||searchForm.opType==5">
					<image src="/static/markRoomImg/buhegei.png" class="statusImg" v-show="item.qualifiedType==2"></image>
					<image src="/static/markRoomImg/hegei.png" class="statusImg" v-show="item.qualifiedType==1"></image>
					<image src="/static/markRoomImg/zuofei.png" class="statusImg" v-show="item.operateType==1"></image>
				</view>
			</view>
			<view class="placeholderBox" v-show="list.length==0">
				<image src="/static/noData.png" class="noDataImg"></image>
				<view class="text">
					暂无数据
				</view>
			</view>
			
		<!-- </scroll-view> -->
		</view>
		<view class="loadMoreBox" v-if="isLoadMore">
			<uni-load-more :status="loadStatus" iconType="auto"></uni-load-more>
		</view>
		<dialogs ref="dialogs">
			<!-- <template v-slot:title>
				{{isAdd?'添加':'编辑'}}
			 </template> -->
			 <template v-slot:content>
				 <view class="formBox2">
				 	<form @submit="formSubmit">
				 		<view class="uni-form-item">
				 			<view class="uni-form-label">
				 				<text class="star">*</text>送检编号
				 			</view>
				 			<view class="uni-form-input">
				 				<input class="uni-input" placeholder-class="cl" name="inspectionNo" v-model="form.inspectionNo" placeholder="请输入" />
				 			</view>
				 		</view>
						<view class="uni-form-item">
							<view class="uni-form-label">
								<text class="star">*</text>送检时间
							</view>
							<view class="uni-form-input" style="overflow: hidden;">
								<picker class="datePickerBox datePickerBox1" mode="date" :value="form.date" @change="bindDateChange">
									<view class="uni-input cl" v-if="!form.date">选择日期</view>
										<view class="uni-input " v-else>{{form.date}}</view>
									</picker>
								<picker class="datePickerBox datePickerBox2" mode="time" :value="form.time" start="00:00" end="23:59" @change="bindTimeChange">
									<view class="uni-input cl" v-if="!form.time">选择时间</view>
										<view class="uni-input" v-else>{{form.time}}</view>
									</picker>
								</picker>
							</view>
						</view>
				 		<button form-type="submit" type="primary" class="btn submitBtn">送检</button>
						<view class="closeBtn" @click="closeDialogFn">
							关闭
						</view>
				 	</form>
				 </view>
			 </template>
			
		</dialogs>
	</view>
</template>

<script>
	import headers from "../../../../components/headers/headers.vue"
	import uniLoadMore from "../../../../components/uni-load-more/uni-load-more.vue"
	import dialogs from "../../../../components/dialog/dialog.vue"
	export default {
		components:{headers,dialogs,uniLoadMore},
		data() {
			return {
				list:[],
				titleList:['养护中','到期样品','送检中样品','历史养护台账','历史送检台账','超期提醒'],
				searchForm:{
					opType:1,
					devSn:'',
					endTime:'',
					pageNo:1,
					pageSize: 5,
					projectSn:'',
					startTime:''
				},
				loadStatus:'more',//加载样式：more-加载前样式，loading-加载中样式，nomore-没有数据样式
				isLoadMore:false,  //是否加载中
				form:{
					inspectionNo:'',
					date:'',time:''
				},
				itemId:'',
				// triggered: false,
				// _freshing: false,
				//   isLoading:true,//加载中
				  // totalSize:0,
				  statusBarHeight:0
			};
		},
		onLoad(options) {
			this.statusBarHeight=uni.getStorageSync('systemInfo').statusBarHeight
			this.searchForm.projectSn = JSON.parse(uni.getStorageSync('projectDetail')).projectSn
			this.searchForm.opType=parseInt(options.opType)
			this.searchForm.devSn=options.devSn
			this.loadData()
			// this._freshing = false;  
			// setTimeout(() => {  
			// 	this.triggered = true;//触发onRefresh来加载自己的数据，如果不用这种方式，不要在此改变triggered的值  
			// 	this.loadData()
			// }, 1000) 
		},
		
		onReachBottom() {
			if(!this.isLoadMore){  //此处判断，上锁，防止重复请求
				this.isLoadMore=true
				this.searchForm.pageNo+=1
				this.loadData()
			}
		},
		onPullDownRefresh() {
			this.searchForm.pageNo=1
			this.list=[]
			this.loadData()
		},
		mounted() {
			
		},
		methods:{
	// 		async loadMore(){
	// 			console.log('loadMore')
	// 			 if(this.totalSize == this.list.length || this.isLoading){
	// 				 return
	// 			 }
	// 			 this.searchForm.pageNo += 1
	// 			 await this.loadData()
	// 		},
	// 		// 自定义下拉刷新控件被下拉
	// 		async onPulling(e) {
	// 			console.log('onPulling')
	// 			this.triggered = true; // 需要重置
				
	// 		},

	// 　　　　　　// 自定义下拉刷新被触发
	// 		async onRefresh() {
	// 			console.log('onRefresh')
	// 			if (this._freshing) return;
	// 			this._freshing = true;
	// 			if (!this.triggered) this.triggered = true; //界面下拉触发，triggered可能不是true，要设为true
	// 			const isRefresh = true
				
	// 			this.triggered = false;
	// 			this._freshing = false;
	// 			this.searchForm.pageNo == 1
	// 			this.list=[]
	// 			await this.loadData(isRefresh)
	// 		},
	// 		// 自定义下拉刷新被复位
	// 		onRestore() {
	// 			console.log('onRestore')
	// 			this.triggered = false; // 需要重置
	// 		},
	// 		// 自定义下拉刷新被中止
	// 		onAbort() {
	// 		console.log('onAbort')
	// 			this.triggered = false;
	// 		},
			bindDateChange: function(e) {
				this.form.date = e.target.value
			},
			bindTimeChange: function(e) {
				this.form.time = e.target.value
			},
			closeDialogFn(){
				this.$refs.dialogs.hideFn()
			},
			checkFn(item,qualifiedType){
				var params = {};
				params.qualifiedType = qualifiedType
				params.id=item.id
				this.editFn(params)
			},
			sendToCheck(item){
				this.form={
					inspectionNo:'',
					date:'',time:''
				}
				this.itemId=item.id
				this.$refs.dialogs.showFn()
			},
			formSubmit(e){
				if(this.form.inspectionNo==''){
					uni.showToast({
						title:'请输入送检编号',
						icon:'none'
					})
					return false
				}
				if(this.form.date==''||this.form.time==''){
					uni.showToast({
						title:'请选择送检时间',
						icon:'none'
					})
					return false
				}
				var params={id:this.itemId}
				params.inspectionNo=this.form.inspectionNo
				params.inspectionTime=this.form.date+' '+this.form.time
				params.operateType=2
				this.editFn(params)
			},
			operateFn(item,operateType){
				var params = {};
				params.operateType = operateType
				params.id=item.id
				this.editFn(params)
			},
			editFn(params){
				var that = this
				this.sendRequest({
					url: "xmgl/standardSampleRecord/edit",
					data: params,
					method: "POST",
					success(res){
						uni.showToast({
							title:'操作成功！'
						})
						that.closeDialogFn()
						that.list=[]
						that.loadData()
					}
				})
			},
			deleteFn(item){
				var that = this
				this.sendRequest({
					url: "xmgl/standardSampleNotice/delete",
					data: {id:item.id+''},
					method: "DELETE",
					header:{
						'content-type': "application/x-www-form-urlencoded"
					},
					success(res){
						uni.showToast({
							title:'操作成功！'
						})
						that.list=[]
						that.loadData()
					}
				})
			},
			loadData(){
				console.log('loadData')
				this.isLoading=true
				var that = this
				var url = "xmgl/standardSampleRecord/selectStandardSamplePageList"
				if(this.searchForm.opType==6){
					url = "xmgl/standardSampleNotice/selectStandardSampleNoticePageList"
				}
				// that.loadStatus='loading'
				this.sendRequest({
					url: url,
					data: this.searchForm,
					method: "POST",
					success(res){
						// that.isLoading=false
						// that.totalSize=res.result.total
						that.list=that.list.concat(res.result.records)
						if(res.result.records.length<that.searchForm.pageSize){  //判断接口返回数据量小于请求数据量，则表示此为最后一页
							  that.isLoadMore=true                                             
							  that.loadStatus='nomore'
						}else{
							  that.isLoadMore=false
							  // that.loadStatus='more'
						}
						uni.stopPullDownRefresh()
						console.log('that.isLoadMore',that.isLoadMore)
					},
					error(res){
						 // uni.showToast({title:res.data.msg,icon:'none'})
						  that.isLoadMore=false
						  that.isLoading=false
						  // that.loadStatus='more'
						  if(that.searchForm.pageNo>1){
								that.searchForm.pageNo-=1
						  }
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
// .fixedHeaderPageContent{
// 	position: relative;
// }
.listBox{
	box-shadow: 0px 2px 16px 0px rgba(212, 220, 236, 0.69);
	padding: 15px;
	font-size: 14px;
	font-weight: 400;
	color: #2A2B5B;
	position: relative;
	border-radius: 10px;
	margin: 10px 15px 10px;
	.item{
		margin-bottom: 5px;
	}
	.label{
		color: rgba(55, 45, 102, 0.6);
	}
	&.grey{
		.item{
			opacity: 0.4;
		}
	}
}
.listBox2{
	width: calc(100% - 90px);
}
.statusBox{
	position: absolute;
	right: 10px;
	top: 10px;
	.statusImg{
		width: 76px;
		height: 52px;
	}
}
.operateBox{
	border-top: 1px solid rgba(42, 43, 91, 0.1);
	padding-top: 15px;
	margin-top: 15px;
	text-align: center;
	.leftBtn,.rightBtn{
		width: 130px;
		height: 31px;
		border-radius: 20px;
		font-size: 14px;
		line-height: 31px;
	}
	.leftBtn{
		color: rgba(42, 43, 91, 1);
		border: 1px solid rgba(42, 43, 91, 0.4);
		margin-right: 13px;
		display: inline-block;
		vertical-align: top;
	}
	.rightBtn{
		background-color: rgba(43, 141, 243, 1);
		color: white;
		display: inline-block;
		vertical-align: top;
	}
}
.operateBtn{
	width: 30px;
	position: absolute;
	right: -30px;
	background-color: RGBA(207, 209, 211, 1);
	top: 10px;
	border-top-right-radius: 10px;
	border-bottom-right-radius: 10px;
	height: calc(100% - 20px);
	display: flex;
	align-items: center;
	justify-content: center;
	color: white;
}
.closeBtn{
	font-size: 15px;
	color: rgba(42, 43, 91, 0.5);
	padding: 10px 0;
	text-align: center;
}
.datePickerBox{
	float: left;
}
.datePickerBox1{
	width: calc(58% - 0px);
	// margin-right: 5px;
}
.datePickerBox2{
	width: 42%;
}
</style>
