<template>
	<view class="page_wrap fullHeight">
		<view class="fixedheader">
			<headers :showBack="true">
			<view class="headerName">
				试块列表
			</view>
		</headers>
		</view>
		
		<view class="smallHeight" :style="{ 'padding-top': ((statusBarHeight * 2) + 45) * 1.5 + 'rpx' }">
			<view class="content">
				<scroll-view class="smallHeight content_list"  scroll-y>
					<view style="padding-top: 36rpx;padding-bottom: 90px" v-if="listData.length>0">
						<view class="list_item" v-for="(item,index) in listData" :key="index">
							<view class="status">
								<image v-if="item.sampleState == 2" src="../../../static/betonManage/status1.png"></image>
								<image v-if="item.sampleState == 1" src="../../../static/betonManage/status2.png"></image>
								<image v-if="item.sampleState == 3" src="../../../static/betonManage/status3.png"></image>
							</view>
							<view class="item_info">
								<view style="margin-bottom: 20rpx" @click="goPage(item.id)">
									<view class="flex">
										<view class="left">
											<view class="info_item"><text style="color: #948EAD">试块名称：</text>{{item.sampleName}}</view>
											<view class="info_item"><text style="color: #948EAD">实验室：</text>{{item.laboratoryName}}</view>
											<view class="info_item"><text style="color: #948EAD">入库时间：</text>{{item.putStorageTime}}</view>
											<view class="info_item" v-if="item.sampleState == 3"><text style="color: #948EAD" >出库时间：</text>{{item.inspectionTime}}</view>
										</view>
										<view class="right">
											<view class="info_item"><text style="color: #948EAD">养护周期(天)：</text>{{item.curingPeriod}}</view>
											<view class="info_item"><text style="color: #948EAD">试验负责人：</text>{{item.laboratoryDirector}}</view>
											<view class="info_item"><text style="color: #948EAD">入库人：</text>{{item.createUserName}}</view>
											<view class="info_item" v-if="item.sampleState == 3"><text style="color: #948EAD">送检结果：</text><text :style="{color: item.qualifiedType == 2 ? '#F56C6C':''}">{{item.qualifiedType == 1 ? '正常':'异常'}}</text></view>
										</view>
									</view>
								</view>
								<view class="bottom_box" v-if="item.dataType == 1">养护已到期，<text style="color: #5181F6" @click="goDetection(item.id)">点击出库送检</text></view>
								<view class="bottom_box" v-if="item.sampleState == 2">送检中，<text style="color: #5181F6" @click="sendRecord(item.id)">点击上传送检报告</text></view>
								<view class="bottom_box" v-if="item.sampleState == 1 && item.dataType != 1">当前已养护<text style="color: #5181F6">{{item.maintainDayNum}}天</text></view>
								<view class="bottom_box" v-if="item.sampleState == 3"><text style="color: #5181F6" @click="showFile(item)">送检报告下载</text></view>
							</view>
						</view>
					
						
					</view>
					<view class="no_data" v-else>
						<image src="../../../static/noData.png"></image>
						<view>暂无数据</view>
					</view>
				</scroll-view>
				<view class="addForm_btn" @click="goAdd">入库</view>
			</view>
		</view>
		<dialogs class="formDialog" ref="dialogs">
			<template v-slot:content>
				<view class="dialog-title">
					上传送检报告
				</view>
				<view class="dialog-content">
					<view class="form_label">
						送检报告
						<view class="add_btn" @click="uploadImage">
							<uni-icons2 type="plus-filled" color="#5181F6" size="18"></uni-icons2>
							上传
						</view>
					</view>
					<view class="file_list">
						<view class="file_item" v-for="(item,index) in form.inspectionReport" :key="index">
							<image :src="url_config+'image/'+item.url" @click="previewImage(url_config+'image/'+item.url)"></image>
							<view style="display: flex;"><text class="img_name">{{item.name}}</text>   <text>{{item.createTime}}</text></view>
							<uni-icons2 type="trash" color="#F56C6C" @click="deleteImg(index)"></uni-icons2>
						</view>
					</view>
					<view class="form_item">
						<view class="form_label">
							送检结果
						</view>
						<radio-group @change="radioChange">
							<label class="uni-list-cell uni-list-cell-pd" style="margin-right: 20rpx">
						        <view>
									<radio value="1" :checked="form.qualifiedType == 1" />
						        </view>
						        <view>正常</view>
						    </label>
							<label class="uni-list-cell uni-list-cell-pd">
							    <view>
									<radio value="2" :checked="form.qualifiedType == 2" />
							    </view>
							    <view>异常</view>
							</label>
						</radio-group>
					</view>
				</view>
				
				<view class="dialog-btn">
					<view class="cancle-btn" @click="cancleReply">取消</view>
					<view class="primary-btn" @click="submitReply">提交</view>
				</view>
			</template>
		</dialogs>
		
		<dialogs class="formDialog" ref="dialogs2">
			<template v-slot:content>
				<view class="dialog-title">
					下载送检报告
				</view>
				<view class="dialog-content">
					<view class="file_list">
						<view class="file_item" v-for="(item,index) in fileList" :key="index+'_'+item.createTime">
							<image :src="url_config+'image/'+item.url" @click="previewImage(url_config+'image/'+item.url)"></image>
							<view style="display: flex;"><text class="img_name">{{item.name}}</text>   <text>{{item.createTime}}</text></view>
							<!-- <uni-icons2 type="trash" color="#F56C6C" @click="deleteImg(index)"></uni-icons2> -->
							<view style="display: flex;">
								<image v-if="!item.progress" style="width: 30rpx;height: 30rpx;" src="../../../static/betonManage/downLoad.png" @click="downLoad(item,index)"></image>
								<!-- <text v-if="item.progress" style="color: #F56C6C;">{{item.progress}}%</text> -->
								<image v-if="item.progress" style="width: 50rpx;height: 17px;" src="../../../static/betonManage/downLoad_success.png" @click="previewImage(url_config+'image/'+item.url)"></image>
								<!-- <view style="text-indent: -9999px;">{{item.progress}}</view> -->
							</view>
						</view>
					</view>
					
				</view>
			</template>
		</dialogs>
	</view>
</template>

<script>
import dialogs from '../../../components/dialog/dialog.vue'
export default{
	data(){
		return{
			statusBarHeight: 0,
			form:{
				inspectionReport: [],
				qualifiedType: 1,
				sampleState: 3
			},
			detailId: '',
			listData: [],
			fileList: []
		}
	},
	
	components:{
		dialogs
	},
	onShow(){
		this.statusBarHeight = uni.getStorageSync('systemInfo').statusBarHeight;
		this.loadData()
	},
	onLoad(options){
		this.detailId = options.id
		this.loadData()
	},
	methods:{
		downLoad(item,index){
			let that = this
			// this.fileList.forEach((itm,idx)=>{
			// 	if(index == idx){
			// 		itm.progress = 100
			// 	}
				
			// })
			// this.fileList.splice(index, 1,item)
			// this.fileList = this.fileList
			// // item.progress = true
			// this.$forceUpdate()
			// console.log(item.progress)
			// url_config+'image/'+item.url
			const downloadTask = uni.downloadFile({
			    url: this.url_config+'image/'+item.url,
			    success: (res) => {
			        if (res.statusCode === 200) {
			            console.log('下载成功');
						// item.progress = true
						uni.saveImageToPhotosAlbum({
						    filePath: this.url_config+'image/'+item.url,
						    success: function () {
						        // item.progress = 100
								// console.log(that.fileList[index])
								that.$forceUpdate()
						    }
						});
			        }
			    }
			});
			
			downloadTask.onProgressUpdate((res) => {
			    console.log('下载进度' + res.progress);
			    // console.log('已经下载的数据长度' + res.totalBytesWritten);
			    // console.log('预期需要下载的数据总长度' + res.totalBytesExpectedToWrite);
				// that.fileList[index].progress = res.progress
				// console.log(that.fileList)
				that.fileList.forEach((itm,idx)=>{
					if(index == idx){
						itm.progress = res.progress
					}
					
				})
				that.fileList.splice(index, 1,item)
				that.$forceUpdate()
			    // 满足测试条件，取消下载任务。
			    // if (res.progress > 50) {
			    //     downloadTask.abort();
			    // }
			});
		},
		showFile(val){
			this.$refs.dialogs2.showFn()
			this.fileList = JSON.parse(val.inspectionReport)
			this.fileList.forEach(item=>{
				item.progress = 0
			})
		},
		radioChange(e){
			console.log(e)
			this.form.qualifiedType = Number(e.detail.value)
		},
		getNowTime() {
		      let dateTime
		      let yy = new Date().getFullYear()
		      let mm = new Date().getMonth() + 1
		      let dd = new Date().getDate()
		      let hh = new Date().getHours()
		      let mf = new Date().getMinutes() < 10 ? '0' + new Date().getMinutes()
		        :
		        new Date().getMinutes()
		      let ss = new Date().getSeconds() < 10 ? '0' + new Date().getSeconds()
		        :
		        new Date().getSeconds()
		      dateTime = yy + '-' + mm + '-' + dd + ' ' + hh + ':' + mf + ':' + ss
		      console.log(dateTime)
		      return dateTime
		    },
		//上传附件
		uploadImage() {
			var that = this
			uni.chooseImage({
				// count: 5 - that.imageList.length,
				success(res) {
					const tempFilePaths = res.tempFilePaths;
					uni.uploadFile({
						url: that.url_config + 'upload/image', //仅为示例，非真实的接口地址
						filePath: tempFilePaths[0],
						name: 'files',
						success: (uploadFileRes) => {
							let data = {
								name: res.tempFiles[0].name,
								url: JSON.parse(uploadFileRes.data).data[0].imageUrl,
								createTime: that.getNowTime()
							};
							that.form.inspectionReport.push(data)
							console.log(that.form.inspectionReport)
							// console.log(res.tempFiles[0].name)
							
							// that.imageList.push(data)
						}
					});
				}
			})
		},
		//删除附件
		deleteImg(val) {
			let that = this;
			uni.showModal({
				title: '提示',
				content: '确定删除该附件吗?',
				success: function(res) {
					if (res.confirm) {
						that.form.inspectionReport.splice(val,1)
					} else if (res.cancel) {
						console.log('用户点击取消');
					}
				}
			});
		
		},
		
		//预览图片
		previewImage(url) {
			uni.previewImage({
				urls: [url]
			})
		},
		goDetection(id){
			let that = this
			this.sendRequest({
				url: 'xmgl/massReboundSampleStorageRecord/updateInspectionBatch',
				data: {ids: id},
				method: "POST",
				success(res) {
					console.log(res)
					uni.showToast({
						title: '送检成功！'
					})
					that.loadData()
				}
			})
		},
		loadData(){
			let that = this
			this.sendRequest({
				url: 'xmgl/massReboundSampleStorageRecord/selectList',
				data: {pouringId: this.detailId},
				method: "POST",
				success(res) {
					console.log(res)
					that.listData = res.result
				}
			})
		},
		goPage(id){
			uni.navigateTo({
				url: './testSpecimenDetail?id='+id
			})
		},
		cancleReply(){
			this.form = {
				inspectionReport: [],
				qualifiedType: 1,
				sampleState: 3
			}
			this.$refs.dialogs.hideFn2()
		},
		submitReply(){
			if(this.form.inspectionReport.length<1){
				uni.showToast({
					title: '请上传送检报告',
					icon: 'none'
				})
				return false;
			}
			let params = this.form
			params.inspectionReport = JSON.stringify(this.form.inspectionReport)
			let that = this
			console.log(params)
			this.sendRequest({
				url: 'xmgl/massReboundSampleStorageRecord/edit',
				data: params,
				method: "POST",
				success(res) {
					console.log(res)
					uni.showToast({
						title: '上传成功！'
					})
					that.cancleReply()
					that.loadData()
				}
			})
			// this.$refs.dialogs.hideFn2()
		},
		sendRecord(id){
			this.form.id = id
			this.$refs.dialogs.showFn()
		},
		goAdd(){
			// uni.navigateTo({
			// 	url: './addInspectionRecord'
			// })
			uni.navigateTo({
				url: './addTestSpecimen?id=' + this.detailId
			})
		}
	}
}
</script>

<style lang="scss" scoped>
	
	.fixedheader{
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 2;
	}
	.smallHeight{
		height: 100%;
		box-sizing: border-box;
	}
	.content{
		height: 100%;
		// background: #fff;
	}
	.content_list{
		background: #fff;
		height: 100%;
		.list_item{
			// height: 150rpx;
			display: flex;
			align-items: center;
			padding: 30rpx 30rpx;
			padding-bottom: 0;
			padding-right: 0px;
			box-sizing: border-box;
			width: 90%;
			margin: 0 auto;
			margin-bottom: 30rpx;
			border-radius: 10rpx;
			box-shadow: 0px 4rpx 11px 0px rgba(212, 220, 236, 0.65);
			position: relative;
			.status{
				position: absolute;
				right: 0;
				top: 10rpx;
				uni-image{
					width: 134rpx;
					height: 108rpx;
				}
			}
			uni-checkbox{
				:deep(.uni-checkbox-input){
					margin-right: 12rpx;
					width: 36rpx;
					height: 36rpx;
					border-radius: 50%;
				}
				:deep(.uni-checkbox-input-checked){
					background-color: rgb(0, 122, 255);
				}
				:deep(.uni-checkbox-input-checked:before){
					color: #fff;
				}
			}
			
			.left{
				flex: 1;
				font-size: 28rpx;
				margin-right: 10rpx;
			}
			.right{
				flex: 1;
				font-size: 28rpx;
			}
			.info_item{
				margin-bottom: 4rpx;
			}
			
			.item_info{
				// margin-bottom: 20rpx;
				padding-top: 36rpx;
				flex: 1;
			}
			.bottom_box{
				width: 100%;
				height: 76rpx;
				line-height: 76rpx;
				text-align: center;
				font-size: 28rpx;
				background-image: linear-gradient(to right, rgba(81, 129, 246,0), rgba(81, 129, 246, 0.1),rgba(81, 129, 246,0));
			}
		}
		.flex{
			display: flex;
		}
	}
	.addForm_btn{
		width: 88%;
		height: 100rpx;
		line-height: 100rpx;
		font-size: 40rpx;
		background: #4181FE;
		color: #fff;
		border-radius: 50rpx;
		text-align: center;
		position: fixed;
		bottom: 40rpx;
		left: 50%;
		transform: translateX(-50%);
	}
	.formDialog{
		:deep(.dialogContent){
			width: 90%;
			top: auto;
			left: 50%;
			bottom: 30rpx;
			transform: translate(-50%, 0);
			border-radius: 30rpx;
		}
		.dialog-title{
			padding: 0 40rpx ;
			font-weight: 600;
			padding-top: 40rpx;
			margin-bottom: 60rpx;
			font-size: 36rpx;
		}
		.dialog-content{
			padding: 0 40rpx;
			padding-bottom: 40rpx;
			.form_label{
				color: #2A2B5B;
				font-size: 30rpx;
				// margin-bottom: 16rpx;
				position: relative;
				.add_btn{
					display: flex;
					align-items: center;
					position: absolute;
					right: 10rpx;
					top: 0;
					font-size: 28rpx;
					color: #5181F6;
					.uni-icons{
						margin-right: 10rpx;
					}
				}
			}
			.file_list{
				margin-top: 24rpx;
				margin-bottom: 34rpx;
				.file_item{
					display: flex;
					font-size: 24rpx;
					color: rgba(42, 46, 63, 0.8);
					margin-bottom: 20rpx;
					uni-text{
						line-height: 44rpx;
						margin-right: 20rpx;
					}
					uni-image{
						width: 44rpx;
						height: 44rpx;
						margin-right: 10rpx;
					}
				}
			}
			.form_item{
				display: flex;
				justify-content: space-between;
				align-items: center;
				uni-radio-group{
					display: flex;
					.uni-list-cell{
						display: flex;
						align-items: center;
						font-size: 28rpx;
						:deep(.uni-radio-input){
							height: 28rpx;
							width: 28rpx;
							font-size: 28rpx;
						}
					}
				}
			}
			
		}
		.dialog-btn{
			width: 100%;
			height: 94rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			padding-bottom: 60rpx;
			.cancle-btn{
				height: 100rpx;
				width: 236rpx;
				text-align: center;
				line-height: 100rpx;
				background: #fff;
				color: rgba(#30305F, 0.6);
				border-radius: 50rpx;
				border: 1rpx solid rgba(#30305F,0.3);
				margin-right: 112rpx;
			}
			.primary-btn{
				height: 100rpx;
				width: 236rpx;
				text-align: center;
				line-height: 100rpx;
				border-radius: 50rpx;
				color: #fff;
				background: #5181F6;
			}
		}
	}
	.img_name{
		display: block;
		width: 200rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.no_data{
		text-align: center;
		color: rgba(0,0,0,0.5);
		padding-top: 100rpx;
		uni-image{
			width: 328rpx;
			height: 260rpx;
			display: block;
			margin: 0 auto;
			margin-bottom: 40rpx;
		}
	}
</style>
