<template>
	<view class="fullHeight">
		<headers class="fixedheader" :showBack="true">
			<view class="headerName">
				浇筑令详细
			</view>
		</headers>
		<scroll-view :class="{'smallHeight': pageType == 2 || pageType == 1}" :style="{ 'padding-top': statusBarHeight + 45 + 'px' }" scroll-y>
		<view class="form_box p_bt40">
			<!-- <view class="form_item">
				<view class="form_label">混凝土标号：</view>
				<view class="form_vaule">C30</view>
			</view> -->
			<view class="form_item">
				<view class="form_label">楼栋：</view>
				<view class="form_vaule">{{detailData.buildName}}</view>
			</view>
			<view class="form_item">
				<view class="form_label">楼层：</view>
				<view class="form_vaule">{{detailData.floorName}}</view>
			</view>
			<view class="form_item">
				<view class="form_label">施工段：</view>
				<view class="form_vaule">{{detailData.constructionSection}}</view>
			</view>
			<view class="form_item">
				<view class="form_label">分包单位：</view>
				<view class="form_vaule">{{detailData.subpackage}}</view>
			</view>
			<view class="form_item">
				<view class="form_label">搅拌站单位：</view>
				<view class="form_vaule">{{detailData.mixingPlant}}</view>
			</view>
			<view class="form_item">
				<view class="form_label">浇筑日期：</view>
				<view class="form_vaule">{{detailData.pourTime}}</view>
			</view>
		<!-- 	<view class="form_item">
				<view class="form_label">计划方量：</view>
				<view class="form_vaule">5</view>
			</view> -->
			<view v-if="pageType == 1 || pageType == 3" class="form_item" style="border-bottom: 0">
				<view class="form_label">浇筑内容：</view>
			</view>
			<view v-if="pageType == 1 || pageType == 3" class="tables" :class="{'b-bottom': pageType == 3}">
				<view class="t_header">
					<view class="t_title">混凝土标号</view>
					<view class="t_title">种类</view>
					<view class="t_title">方量m³</view>
					<view class="t_title">标养试块组数</view>
				</view>
				<view class="t_content">
					<view class="t_td" v-for="(item,index) in tableData" :key="index">
						<view class="t_input">
							<input disabled :value="item.concreteLabel"  />
						</view>
						<view class="t_input">
							<input disabled :value="item.concreteType"  />
						</view>
						<view class="t_input">
							<input disabled :value="item.squareQuantity"  />
						</view>
						<view class="t_input">
							<input disabled :value="item.standardSampleNum"  />
						</view>
					</view>
				</view>
			</view>
			<view class="form_item" v-if="pageType == 3">
				<view class="form_label">总工审批状态：</view>
				<view class="form_vaule">
					<view class="status status3">已驳回</view>
				</view>
			</view>
			<view class="form_item last_item" v-if="pageType == 3">
				<view class="form_label">驳回原因：</view>
				<view class="form_vaule">
					{{detailData.rejectReason ? detailData.rejectReason:'--'}}
				</view>
			</view>
			<view class="form_item last_item" v-if="pageType == 2">
				<view class="form_label">回弹构件</view>
			</view>
			<view class="header_box detail_item" v-if="pageType == 2">
				<view class="form_box">
					<view class="form_item">
						<text>水平构件</text>
						<view class="form_input">
							<input disabled :value="detailData.horizontalMemberNum ? detailData.horizontalMemberNum:0" />
						</view>
						<text>个</text>
					</view>
					<view class="form_item">
						<text>竖向构件</text>
						<view class="form_input">
							<input disabled :value="detailData.verticalMemberNum ? detailData.verticalMemberNum:0" />
						</view>
						<text>个</text>
					</view>
				</view>
				<view class="form_info">
					注：回弹测量将次数据为标准进行测量，超过3个不合格的构件启动加测功能
				</view>
			</view>
			<view class="form_item last_item b_top" v-if="pageType == 2">
				<view class="form_label">浇筑内容</view>
			</view>
			<view class="table_list detail_table" v-if="pageType == 2">
				<view class="table_item" v-for="(item,index) in tableData" :key="index">
					<view class="item_top">
						<text>混凝土标号：{{item.concreteLabel}}</text>
						<text>方量m³：{{item.squareQuantity}}</text>
					</view>
					<view class="item_center">
						<view>种类：<text>{{item.concreteType}}</text></view>
						<view>标养试块组数：<text>{{item.standardSampleNum}}</text></view>
					</view>
					<view class="item_bottom">
						<text>同条件试块组数：</text>
						<view class="form_input">
							<input :value="item.sameConditionNum" disabled />
						</view>
						<text>组</text>
					</view>
				</view>
			</view>
		</view>
		</scroll-view>
		
		<view class="bottom_nav" v-if="pageType == 2">
			<view class="bottom_nav_item" @click="goPage(1)">值班记录</view>
			<view class="bottom_nav_item" @click="goPage(2)">开始测量</view>
			<view class="bottom_nav_item" @click="goPage(3)">报警记录</view>
			<view class="bottom_nav_item" @click="goPage(4)">试块养护</view>
			<view class="bottom_nav_item" @click="goPage(5)">送检记录</view>
		</view>
		
		<view class="bottom_box" v-if="pageType == 1">
			<view class="bottom_btn error_btn" v-if="isShowBtn2" @click="showDialog">驳回</view>
			<view class="bottom_btn success_btn" v-if="isShowBtn1" @click="showDialog2">通过</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>
					<view class="form-textarea">
						<textarea placeholder="请输入驳回原因" @blur="bindContentBlur"/>
					</view>
				</view>
				<view class="dialog-btn">
					<view class="cancle-btn" @click="cancleReply">取消</view>
					<view class="primary-btn" @click="submitReply2">提交</view>
				</view>
			</template>
		</dialogs>
		
		<dialogs class="formDialog success_dialog" ref="dialogs2">
			<template v-slot:content>
				<view class="dialog-title">
					确定通过该审批
				</view>
				<view class="dialog-content">
					<view class="detail_info">
						审批通过后将推送短信给试验员开始制作试块
					</view>
					<view class="header_box">
						<view class="title">回弹构件</view>
						<view class="form_box">
							<view class="form_item">
								<text>水平构件</text>
								<view class="form_input">
									<input v-model="detailData.horizontalMemberNum" placeholder="请输入" />
								</view>
								<text>个</text>
							</view>
							<view class="form_item">
								<text>竖向构件</text>
								<view class="form_input">
									<input  v-model="detailData.verticalMemberNum" placeholder="请输入" />
								</view>
								<text>个</text>
							</view>
						</view>
						<view class="form_info">
							注：回弹测量将次数据为标准进行测量，超过3个不合格的构件启动加测功能
						</view>
					</view>
					<scroll-view class="scroll_wrap" :scroll-y="true">
						<view class="table_list">
							<view class="table_item" v-for="(item,index) in tableData" :key="index">
								<view class="item_top">
									<text>混凝土标号：{{item.concreteLabel}}</text>
									<text>方量m³：{{item.squareQuantity}}</text>
								</view>
								<view class="item_center">
									<view>种类：<text>{{item.concreteType}}</text></view>
									<view>标养试块组数：<text>{{item.standardSampleNum}}</text></view>
								</view>
								<view class="item_bottom">
									<text>同条件试块组数：</text>
									<view class="form_input">
										<input  v-model="item.sameConditionNum" placeholder="请输入" />
									</view>
									<text>组</text>
								</view>
							</view>
						</view>
					</scroll-view>
				</view>
				<view class="dialog-btn">
					<view class="cancle-btn" @click="cancleReply2">取消</view>
					<view class="primary-btn" @click="submitReply">提交</view>
				</view>
			</template>
		</dialogs>
	</view>
</template>

<script>
import dialogs from '../../../components/dialog/dialog.vue'
export default{
	data(){
		return{
			pageType: 1,
			statusBarHeight: 0,
			tableData:[],
			formData:{
				val1: '50',
				val2: '50'
			},
			isShowBtn1: false,
			isShowBtn2: false,
			detailId: '',
			detailData: {}
		}
	},
	components:{
		dialogs
	},
	onShow(){
		this.statusBarHeight = uni.getStorageSync('systemInfo').statusBarHeight;
		this.projectSn = JSON.parse(uni.getStorageSync('userInfo')).sn
		let arr = JSON.parse(uni.getStorageSync('userInfo')).menuAuthority.menuList.filter(item=>item.menuName == '质量回弹')
		if(arr.length>0){
			let btnList = arr[0].actionList
			console.log(btnList)
			if(btnList){
				btnList.forEach(item=>{
					if(item.actionCode == 'success'){
						this.isShowBtn1 = true
					}
					if(item.actionCode == 'error'){
						this.isShowBtn2 = true
					}
				})
			}
		}
	},
	onLoad(val){
		this.pageType = Number(val.type)
		this.detailId = val.id
		this.selecDetail()
		// console.log(val,132)
	},
	methods:{
		bindContentBlur(e){
			console.log(e.detail.value)
			this.detailData.rejectReason = e.detail.value
		},
		submitReply(){
			// console.log(this.detailData, this.tableData)
			this.detailData.auditState = 2
			delete this.detailData.addTime;
			let that = this
			this.sendRequest({
				url: 'xmgl/massReboundPouringOrder/adoptAudit',
				data: that.detailData,
				method: "POST",
				success(res) {
					console.log(res)
					uni.showToast({
						title: '提交成功！'
					})
					uni.navigateBack({
						
					})
				}
			})
		},
		submitReply2(){
			console.log(this.detailData)
			this.detailData.auditState = 3
			let that = this
			this.sendRequest({
				url: 'xmgl/massReboundPouringOrder/rejectAudit',
				data: that.detailData,
				method: "POST",
				success(res) {
					console.log(res)
					uni.showToast({
						title: '提交成功！'
					})
					uni.navigateBack({
						
					})
				}
			})
		},
		selecDetail(){
			let that = this
			this.sendRequest({
				url: 'xmgl/massReboundPouringOrder/queryById',
				data: {id: that.detailId},
				method: "POST",
				success(res) {
					console.log(res)
					that.detailData = res.result
					res.result.contentList.forEach(item=>{
						item.standardSampleNum = item.squareQuantity%100 ? parseInt(item.squareQuantity/100 + Number(1)):item.squareQuantity/100
					})
					that.tableData = res.result.contentList
				}
			})
		},
		goPage(val){
			switch (val){
				case 1:
					uni.navigateTo({
						url: './addWorkRecord?id='+this.detailId
					})
					break;
				case 2:
					uni.navigateTo({
						url: './qualitySpringback/index?id='+this.detailId
					})
					break;
				case 3:
					uni.navigateTo({
						url: './alarmRecord?id='+this.detailId
					})
					break;
				case 4:
					// uni.scanCode({
					// 	scanType: ['qrCode'],
					// 	success: function (res) {
					// 		console.log('条码类型：' + res.scanType);
					// 		console.log('条码内容：' + res.result);
					// 	}
					// });
					uni.navigateTo({
						url: './testSpecimenList?id='+this.detailId
					})
					break;
				case 5:
					uni.navigateTo({
						url: './inspectionRecord?id='+this.detailId
					})
					break;
				default: 
					break;
			}
		},
		showDialog2(val){
			this.$refs.dialogs2.showFn()
		},
		cancleReply2(){
			this.$refs.dialogs2.hideFn2()
		},
		showDialog(val){
			this.$refs.dialogs.showFn()
		},
		cancleReply(){
			this.$refs.dialogs.hideFn2()
		},
	}
}
</script>

<style lang="scss" scoped>
	.fixedheader{
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 2;
	}
	.form_box{
		// padding-bottom: 80rpx;
		.form_item{
			height: 45px;
			border-bottom: 1rpx solid #E7E7E7;
			display: flex;
			align-items: center;
			padding: 0 30rpx;
			font-size: 28rpx;
			.form_label{
				color: rgba(42, 43, 91, 0.6);
				width: 40%;
			}
			.form_vaule{
				flex: 1;
				.status{
					font-size: 20rpx;
					color: #fff;
					padding: 0 10rpx;
					height: 32rpx;
					display: inline-block;
					border-radius: 14rpx;
				}
				.status1{
					background: #44D7B5;
				}
				.status2{
					background: #F68053;
				}
				.status3{
					background: #F65352;
				}
			}
		}
		.last_item{
			border-bottom: 0;
			height: auto;
			padding-top: 20rpx;
			align-items: flex-start;
			.form_label{
				white-space: nowrap;
			}
			.form_vaule{
				word-break: break-all;
			}
		}
	}
	.bottom_nav{
		background: rgba(#5181F6,0.1);
		display: flex;
		position: fixed;
		bottom: 0;
		left: 0;
		align-items: center;
		height: 152rpx;
		width: 100%;
		justify-content: space-around;
		.bottom_nav_item{
			width: 100rpx;
			height: 100rpx;
			border: 1rpx solid rgba(81, 129, 246, 0.6);
			border-radius: 50%;
			background: #fff;
			font-size: 28rpx;
			color: #5181F6;
			box-shadow: 0px 2px 4px 0px rgba(81, 129, 246, 0.3);
			text-align: center;
			padding: 10rpx;
			box-sizing: border-box;
		}
	}
	.bottom_box{
		position: fixed;
		bottom: 0rpx;
		left: 0;
		display: flex;
		align-items: center;
		width: 100%;
		height: 140rpx;
		justify-content: center;
		align-items: flex-start;
		padding-top: 20rpx;
		background: #fff;
		.bottom_btn{
			height: 100rpx;
			width: 280rpx;
			border-radius: 50rpx;
			text-align: center;
			line-height: 100rpx;
			font-size: 40rpx;
		}
		.error_btn{
			color: #F65352;
			border: 1rpx solid #F65352;
			margin-right: 80rpx;
		}
		.success_btn{
			color: #fff;
			background: #5181F6;
		}
	}
	
	.formDialog{
		/deep/.dialogContent{
			width: 90%;
			top: auto;
			left: 50%;
			bottom: 30rpx;
			transform: translate(-50%, 0);
			border-radius: 16px;
		}
		.dialog-title{
			padding: 0 40rpx ;
			font-weight: 600;
			padding-top: 40rpx;
			margin-bottom: 16rpx;
			font-size: 36rpx;
		}
		.dialog-content{
			padding: 0 40rpx;
			.form-label{
				color: rgba(#30305F,0.8);
				font-size: 28rpx;
				margin-bottom: 16rpx;
			}
			.detail_info{
				color: rgba(#30305F,0.8);
				font-size: 28rpx;
				// height: 200rpx;
			}
			.form-textarea{
				flex: 1;
				width: 100%;
				height: 154rpx;
				border: 1px solid #D6D6DF;
				// overflow: auto;
				background: rgba(#9EA3AF,0.05);
				border-radius: 18rpx;
				margin-bottom: 84rpx;
				/deep/uni-textarea{
					width: 100%;
					height: 100%;
					padding: 26rpx 28rpx;
					box-sizing: border-box;
					font-size: 28rpx;
					.uni-textarea-compute{
						width: 100%;
						height: 100%;
						overflow: auto;
					}
				}
			}
		}
		.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: 25px;
				border: 1rpx solid rgba(#30305F,0.3);
				margin-right: 112rpx;
			}
			.primary-btn{
				height: 100rpx;
				width: 236rpx;
				text-align: center;
				line-height: 100rpx;
				border-radius: 25px;
				color: #fff;
				background: #5181F6;
			}
		}
	}
	.b-bottom{
		border-bottom: 1px solid #E7E7E7;
	}
	.tables{
		padding: 0 30rpx;
		font-size: 28rpx;
		// margin-bottom: 32rpx;
		padding-bottom: 28rpx;
		.t_header{
			display: flex;
			font-size: 24rpx;
			.t_title{
				flex: 1;
				text-align: center;
				line-height: 48rpx;
			}
		}
		.t_content{
			border-top: 1px solid #e7e7e7;
			border-left: 1px solid #e7e7e7;
			.t_td{
				display: flex;
				.t_input{
					flex: 1;
					height: 60rpx;
					text-align: center;
					border-right: 1px solid #e7e7e7;
					border-bottom: 1px solid #e7e7e7;
					uni-input{
						height: 100%;
						font-size: 28rpx;
					}
				}
			}
		}
	}
	.success_dialog{
		.dialog-content{
			height: calc(90vh - 200rpx);
			padding: 0;
			.detail_info{
				margin-bottom: 16rpx;
				padding: 0 40rpx;
			}
			
			.scroll_wrap{
				height: calc(100% - 316rpx);
				position: relative;
			}
			.scroll_wrap::after{
				content: '';
				position: absolute;
				pointer-events: none;
				left: 0;
				bottom: 0;
				width: 100%;
				height: 100rpx;
				background: linear-gradient(to top, #fff, rgba(255,255,255,0));
			}
		}
	}
	.header_box{
		height: 222rpx;
		width: calc(100% - 80rpx);
		margin: 0 auto;
		background: rgba(#E7E7E7, 0.3);
		border-radius: 8rpx;
		padding-left: 28rpx;
		padding-top: 18rpx;
		box-sizing: border-box;
		font-size: 28rpx;
		margin-bottom: 36rpx;
		.title{
			color: rgba(49, 50, 97,1);
			font-weight: 600;
		}
		.form_box{
			display: flex;
			align-items: center;
			.form_item{
				flex: 1;
				padding: 0;
				border: 0;
				height: 80rpx;
				uni-input{
					width: 110rpx;
					font-size: 28rpx;
					height: 44rpx;
					border: 1px solid #e7e7e7;
					text-align: center;
					margin: 0 8rpx;
					border-radius: 6rpx;
				}
			}
		}
		.form_info{
			font-size: 24rpx;
			padding-right: 24rpx;
			color: rgba(#30305F, 0.5);
		}
	}
	.table_list{
		padding-bottom: 50rpx;
		padding-top: 22rpx;
		.table_item{
			margin: 0 auto;
			height: 214rpx;
			width: calc(100% - 80rpx);
			padding-top: 28rpx;
			padding-left: 24rpx;
			border-radius: 5px;
			background-color: #fff;
			box-shadow: 0px 2px 11px 0px rgba(212, 220, 236, 0.65);
			box-sizing: border-box;
			margin-bottom: 22rpx;
			font-size: 28rpx;
			.item_top{
				display: flex;
				font-weight: 600;
				margin-bottom: 12rpx;
				uni-text{
					flex: 1;
				}
			}
			.item_center{
				display: flex;
				font-size: 24rpx;
				color: rgba(#313261, 0.6);
				margin-bottom: 22rpx;
				uni-view{
					flex: 1;
				}
				uni-text{
					color: rgba(#313261, 1);
				}
			}
			.item_bottom{
				display: flex;
				align-items: center;
				uni-input{
					width: 144rpx;
					height: 40rpx;
					border: 1px solid #e7e7e7;
					text-align: center;
					font-size: 28rpx;
					margin-right: 46rpx;
					border-radius: 6rpx;
				}
			}
		}
	}
	.detail_item{
		margin-top: 14rpx;
		height: 180rpx;
		.form_box{
			.form_item{
				height: 72rpx;
			}
			.form_input{
				uni-input{
					border: 0;
					background: #fff;
				}
			}
		}
		
	}
	.b_top{
		border-top: 1px solid #e7e7e7;
	}
	.detail_table{
		.table_item {
			.item_bottom{
				uni-input{
					border: 0;
					background-color: #F9F9F9;
				}
			}
		}
	}
	.smallHeight{
		height: calc(100% - 152rpx);
		box-sizing: border-box;
	}
	.p_bt40{
		padding-bottom: 80rpx;
	}
</style>
