<template>
	<view class="container">
		<view class="top_head">
			<view class="top_head1">报工单号:{{item_info.code}}</view>
		</view>
		<view class="info_container">
				<view class="info_item" border_right>
					<view class="info_item_name">工序名</view>
					<view class="info_item_value">{{item_info.processName}}</view>
				</view>
				<view class="info_item" border_right>
					<view class="info_item_name">供应商</view>
					<view class="info_item_value" v-if="item_info.supplierName">{{item_info.supplierName}}</view>
					<view class="info_item_value" v-else>--</view>
				</view>
				<view class="info_item" border_right>
					<view class="info_item_name">产品名称</view>
					<view class="info_item_value">{{item_info.materielName}}</view>
				</view>
				<view class="info_item" border_right>
					<view class="info_item_name">规格型号</view>
					<view class="info_item_value">{{item_info.specification}}</view>
				</view>
				<view class="info_item" border_right>
					<view class="info_item_name">主计量单位</view>
					<view class="info_item_value">{{item_info.unitUomlName}}</view>
				</view>
				<view class="info_item" border_right>
					<view class="info_item_name">辅助单位</view>
					<view class="info_item_value">{{item_info.supportUomName}}</view>
				</view>
				<view class="info_item" border_right>
					<view class="info_item_name">换算系数</view>
					<view class="info_item_value">{{item_info.convCoefficient}}</view>
				</view>
				<view class="info_item" border_right>

				</view>
				<view class="info_item" border_right>
					<view class="info_item_name">报检数量(主单位)</view>
					<view class="info_item_value">{{item_info.checkCount}}</view>
				</view>
				<view class="info_item" border_right>
					<view class="info_item_name">报检数量(辅单位)</view>
					<view class="info_item_value">{{item_info.checkCountSupport}}</view>
				</view>
				<view class="info_item" border_right>
					<view class="info_item_name" required>合格数量(主单位)</view>
					<view class="info_item_value">{{item_info.conformityCount}}</view>
				</view>
				<view class="info_item" border_right>
					<view class="info_item_name" required>合格数量(辅单位)</view>
					<view class="info_item_value "><input class="info_item_input" type="number" placeholder="请输入合格数量" v-model="item_info.conformityCountSupport" @input='toFixed1'/></view>
				</view>
				<view class="info_item" border_right>
					<view class="info_item_name">返工数量(主单位)</view>
					<view class="info_item_value">{{item_info.reworkCount}}</view>
				</view>
				<view class="info_item" border_right>
					<view class="info_item_name">返工数量(辅单位)</view>
					<view class="info_item_value "><input class="info_item_input" type="number" placeholder="请输入返工数量" v-model="item_info.reworkCountSupport" @input='toFixed2'/></view>
				</view>
				<view class="info_item" border_right>
					<view class="info_item_name">报废数量(主单位)</view>
					<view class="info_item_value">{{item_info.scrapCount}}</view>
				</view>
				<view class="info_item" border_right>
					<view class="info_item_name">报废数量(辅单位)</view>
					<view class="info_item_value "><input class="info_item_input" type="number" placeholder="请输入报废数量" v-model="item_info.scrapCountSupport" @input='toFixed3'/></view>
				</view>
		</view>
		<view class="line_text">检查明细</view>
		<view class="table_container">
			<t-table border=0>
				<t-tr font-size="16">
					<t-th style="min-width:150px;max-width: 150px;">不良原因</t-th>
					<t-th>不良数量</t-th>
					<t-th required  style="min-width:150px;max-width: 150px;">检验项目</t-th>
					<t-th>检验方法</t-th>
					<t-th style="max-width:70px;min-width:70px">是否必检</t-th>
					<t-th style="max-width:70px;min-width:70px">单位</t-th>
					<t-th>目标值</t-th>
					<t-th >实际检验值</t-th>
					<t-th required>检验结果</t-th>
					<t-th>处理方式</t-th>
					<t-th style="max-width:80px;min-width:80px">操作</t-th>
				</t-tr>
				<t-tr font-size="15" v-for="(item,index) in tableList" :key="index">
					<t-td  style="min-width:150px;max-width: 150px;">
						<view  @click="chooseRejectsReason(index)">
							<view v-if="item.rejectsReason"><span style="display: inline-block;line-height: 15px; font-size:15px;max-width:80%;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">{{item.rejectsReasonName}}</span>
								<uni-icons type="arrowdown"  size="25"></uni-icons>
							</view>
							<view v-else>选择不良原因<uni-icons type="arrowdown" size="25"></uni-icons>
							</view>
						</view>
					</t-td>
					<t-td><input type="number" class="td_input" placeholder="不良数量" v-model="item.rejectsCount" @change='toFixed4(index)'></t-td>
					<t-td  style="min-width:150px;max-width: 150px;">
						<view  @click="chooseCheckProject(item,index)">
							<view v-if="item.projectId"><span style="display: inline-block;line-height: 17px; font-size:15px;max-width:100%;overflow-y: hidden; text-overflow: ellipsis;">{{item.project}}</span>
								<uni-icons type="arrowdown"  size="25" v-if='!item.old'></uni-icons>
							</view>
							<view v-else>选择检验项目<uni-icons type="arrowdown" size="25"></uni-icons>
							</view>
						</view>
					</t-td>
					<t-td>{{item.method}}</t-td>
					<t-td style="max-width:70px;min-width:70px">
						<view v-if="item.old">
							<view v-if="item.whetherCheck==1">是</view>
							<view v-else-if="item.whetherCheck==0">否</view>
						</view>
						<view v-else>
							<checkbox-group @change="checkboxChange($event,index)">
							<checkbox value="1" :checked="item.whetherCheck==1" />
							</checkbox-group>
							</view>
						
					</t-td>
					<t-td style="max-width:70px;min-width:70px"><input type="text" class="td_input" v-model="item.unit" placeholder="单位"/></t-td>
					<t-td><input type="number" class="td_input" placeholder="目标值" v-model="item.normn"></t-td>
					<t-td><input  class="td_input" placeholder="实际检验值" v-model="item.actualValue"></t-td>
					<t-td>
						<view>
							  <picker class="picker_"  @change="bindPickerResult($event, index)"  :range="arrayResult">
							         <view class="picker_input" v-if="item.qualified">{{item.qualified}}</view>
									  <view class="picker_input" v-else>请选择</view>
							    </picker>
						</view>
					</t-td>
					<t-td>
						<view>
							  <picker class="picker_"  @change="bindPickerProcessMode($event, index)"  :range="arrayProcessMode">
							         <view class="picker_input" v-if="item.process_mode">{{item.process_mode}}</view>
									  <view class="picker_input" v-else>请选择</view>
							    </picker>
						</view>
					</t-td>
					<t-td style="max-width:80px;min-width:80px">
						<view @click="toDelete(index)">
							<button type="warn">删除</button>
						</view>
					</t-td>
				</t-tr>
			</t-table>
		</view>
		<uni-icons type="plus" size="35" class="plus_icon" color="#2b6ab9" @click="addData"></uni-icons>
		<view class="bottom_btn_container">
			<view class="bottom_btn_out">
				<view class="bottom_btn"  @click="toBack">取消</view>
					<!-- <view class="bottom_btn"  style="background-color: #eae68bdb;">暂存</view> -->
					<!-- <view class="bottom_btn"  @click="submit">提交</view> -->
					<button class="bottom_btn"  @click="submit" :disabled="isDisabled">提交</button>
				</view>
			</view>
		
			<!-- 选择检验项目 -->
			<chooseCheckProject v-if="chooseCheckProjectVisible" @change="getCheckProject"></chooseCheckProject>
			
			<!-- 选择不良原因 -->
			<chooseRejectsReason v-if="chooseRejectsReasonVisible" @change="getRejectsReason"></chooseRejectsReason>
			
		</view>
</template>

<script>
	import uniIcons from '@/components/uni-icons/uni-icons.vue'
	import tTable from '@/components/t-table/t-table.vue';
	import tTh from '@/components/t-table/t-th.vue';
	import tTr from '@/components/t-table/t-tr.vue';
	import tTd from '@/components/t-table/t-td.vue';
	import chooseCheckProject from '@/components/system/chooseCheckProject.vue'
	import chooseRejectsReason from '@/components/system/chooseRejectsReason.vue'
	export default {
		components: {
			uniIcons,
			tTable,
			tTh,
			tTr,
			tTd,
			chooseCheckProject,
			chooseRejectsReason
		
		},
		data() {
			return {
				chooseCheckProjectVisible:false,
				chooseRejectsReasonVisible:false,
				isDisabled: false,
				item_info:"",
				id:"",
				currentIndex: 0,
				tableList: [],
				arrayResult:[],
				result_list:[],//检验结果
				arrayProcessMode:[],
				process_mode_list:[],//处理方式
			}
		},
		computed: {
		
		},
		onLoad: function (option) {
		    this.id=option.id ;
			if(this.id){
				this.getInfo();
				this.initiate();
			}
		},
		mounted() {
			
		},
		methods: {
			toFixed1() {
				
				this.$set(this.item_info,'conformityCountSupport',Number(this.item_info.conformityCountSupport).toFixed(this.item_info.quantityAccuracy))
				this.$set(this.item_info,'conformityCount',Number(this.item_info.conformityCountSupport)*Number(this.item_info.convCoefficient).toFixed(this.item_info.quantityAccuracy))
				this.item_info.conformityCount = this.item_info.conformityCount.toFixed(this.item_info.quantityAccuracy)
			},
			toFixed2() {
				this.$set(this.item_info,'reworkCountSupport',Number(this.item_info.reworkCountSupport).toFixed(this.item_info.quantityAccuracy))
				this.$set(this.item_info,'reworkCount',Number(this.item_info.reworkCountSupport)*Number(this.item_info.convCoefficient).toFixed(this.item_info.quantityAccuracy))
				this.item_info.reworkCount = this.item_info.reworkCount.toFixed(this.item_info.quantityAccuracy)
			},
			toFixed3() {
				this.$set(this.item_info,'scrapCountSupport',Number(this.item_info.scrapCountSupport).toFixed(this.item_info.quantityAccuracy))
				this.$set(this.item_info,'scrapCount',Number(this.item_info.scrapCountSupport)*Number(this.item_info.convCoefficient).toFixed(this.item_info.quantityAccuracy))
				this.item_info.scrapCount = this.item_info.scrapCount.toFixed(this.item_info.quantityAccuracy)
			},
			toFixed4(index) {
				this.$set(this.tableList[index],'rejectsCount',Number(this.tableList[index].rejectsCount).toFixed(this.item_info.quantityAccuracy))
			},
			initiate(){
				//获取处理方式下拉
				this.$http.request({
					url: '/apis/dict/getDictsByType',
					method: 'post',
					params: {
						type: "process_mode"
					},
				}).then(res => {
					if (res) {
						if (res.data.code == 0) {
							this.process_mode_list=res.data.datas;
							this.process_mode_list.forEach(item=>{
								this.arrayProcessMode.push(item.name);
							})
						}
					}
				});
				this.$http.request({
					url: '/apis/dict/getDictsByType',
					method: 'post',
					params: {
						type: "check_result"
					},
				}).then(res => {
					if (res) {
						if (res.data.code == 0) {
							this.result_list=res.data.datas;
							this.result_list.forEach(item=>{
								this.arrayResult.push(item.name);
							})
						}
					}
				});
			},
			//是否检验
			checkboxChange(e,index){
				let value = e.detail.value;
				if(value.length==0){
					this.$set(this.tableList[index],'whetherCheck',0)
				}else{
						this.$set(this.tableList[index],'whetherCheck',1)
				}
			},
			//获取基础信息
			getInfo(){
				this.$http.request({
					url: '/apis/mes/reportCheck/buttonOfCheck',
					method: 'post',
					params: {
						reportId: this.id
					},
				}).then(res => {
					if (res) {
						if (res.data.code == 0) {
							this.item_info=res.data.HeadDetail;
							this.item_info.checkCount = this.item_info.checkCount.toFixed(this.item_info.quantityAccuracy)
							this.item_info.checkCountSupport = this.item_info.checkCountSupport.toFixed(this.item_info.quantityAccuracy)
							res.data.BadyDetail.forEach(item=>{
								item.old=true;
								item.whetherCheck=item.whetherCheck;
								item.rejectsCount=item.rejectsCount==undefined?0:item.rejectsCount
							})
							this.tableList=res.data.BadyDetail;
						}
					}
				});
			},
			
			chooseCheckProject(item,index){
				if(item.old){
					return
				}
				this.currentIndex=index;
				this.chooseCheckProjectVisible = true;
			},
			getCheckProject(val) {
				this.chooseCheckProjectVisible = false;
				if(val){
				this.$set(this.tableList[this.currentIndex], 'projectId', val.id)
				this.$set(this.tableList[this.currentIndex], 'project', val.name)
				this.$set(this.tableList[this.currentIndex], 'method', val.method)
				this.$set(this.tableList[this.currentIndex], 'whetherCheck', 0)
				}
			},
			chooseRejectsReason(index){
				this.currentIndex=index;
				this.chooseRejectsReasonVisible = true;
			},
			getRejectsReason(val) {
				this.chooseRejectsReasonVisible = false;
				if(val){
				this.$set(this.tableList[this.currentIndex], 'rejectsReason', val.id)
				this.$set(this.tableList[this.currentIndex], 'rejectsReasonName', val.name)
				}
			},
		  bindPickerResult: function(e,index) {
				this.$set(this.tableList[index], 'qualified',this.arrayResult[e.target.value] )
				this.$set(this.tableList[index], 'result',this.result_list[e.target.value].id )
		        },
				bindPickerProcessMode: function(e,index) {
				this.$set(this.tableList[index], 'process_mode',this.arrayProcessMode[e.target.value] )
				this.$set(this.tableList[index], 'dispose',this.process_mode_list[e.target.value].id )
		        },
			//添加
			addData(){
				let j={rejectsCount:0}
				this.tableList.push(j)
			},
		toDelete(index) {
			let _this = this;
			uni.showModal({
				title: '',
				content: '确定删除吗?',
				success: function(res) {
					if (res.confirm) {
						_this.tableList.splice(index, 1)
					} else if (res.cancel) {}
				}
			});
		},
			//取消
			toBack(){
				uni.navigateBack()
			},
			//提交
			submit(){
				let flag=true;
				// item_info
				if(!this.item_info.conformityCount){
					uni.showToast({
					    title: '请填写合格数量(辅单位)',
						icon:"none",
					    duration: 2000
					});
					flag=false;
					return
				}
				if(this.tableList.length==0){
					uni.showToast({
					    title: '请先添加检查明细再提交',
						icon:"none",
					    duration: 2000
					});
					flag=false;
					return
				}
				let rejectsCount=0;
				this.tableList.forEach(item=>{
					if(item.projectId==undefined){
						uni.showToast({
						    title: '请选择检验项目',
							icon:"none",
						    duration: 2000
						});
						flag=false;
						return
					}
					if(item.result==undefined){
						uni.showToast({
						    title: '请选择检验结果',
							icon:"none",
						    duration: 2000
						});
						flag=false;
						return
					}
					//不良数量的总计
					rejectsCount=rejectsCount+parseFloat(item.rejectsCount);
				})
				if(flag){
					if(rejectsCount!=parseFloat(this.item_info.reworkCountSupport)+parseFloat(this.item_info.scrapCountSupport)){
						uni.showToast({
						    title: '不良数量必须等于返工数量(辅单位)+报废数量(辅单位)之和',
							icon:"none",
						    duration: 2000
						});
						return
					}
					
					let a=this.item_info.conformityCount?this.item_info.conformityCount:0;
					let b=this.item_info.reworkCount?this.item_info.reworkCount:0;
					let c=this.item_info.scrapCount?this.item_info.scrapCount:0;
					let d=parseFloat(a)+parseFloat(b)+parseFloat(c);
					if(d!=this.item_info.checkCount){
						uni.showToast({
							title: '合格数量、返工数量、报废数量的总和必须等于报检数量',
							icon: "none",
							duration: 2000
						});
						return
					}
					let param={
						processReportId:this.id,
						supplierId:this.item_info.supplierId?this.item_info.supplierId:"",
						materiaId:this.item_info.materielId?this.item_info.materielId:"",
						conformityCount:this.item_info.conformityCount?this.item_info.conformityCount:"",
						reworkCount:this.item_info.reworkCount?this.item_info.reworkCount:"",
						scrapCount:this.item_info.scrapCount?this.item_info.scrapCount:"",
						checkCount:this.item_info.checkCount?this.item_info.checkCount:"",
						conformityCountSupport:this.item_info.conformityCountSupport?this.item_info.conformityCountSupport:"",
						reworkCountSupport:this.item_info.reworkCountSupport?this.item_info.reworkCountSupport:"",
						scrapCountSupport:this.item_info.scrapCountSupport?this.item_info.scrapCountSupport:"",
						checkCountSupport:this.item_info.checkCountSupport?this.item_info.checkCountSupport:"",
						bodyDetail:encodeURIComponent(JSON.stringify(this.tableList) )
					}
					if(this.isDisabled) {
						return
					  }
					this.isDisabled = true
					this.$http.request({
						url: '/apis/mes/reportCheck/submitAddOrChange',
						method: 'post',
						params:param,
					}).then(res => {
						this.isDisabled = false
						if (res) {
							let _this=this;
							if (res.data.code == 0) {
								uni.showToast({
								    title:'提交成功',
									icon:"none",
								    duration: 2000
								});
								setTimeout(function(){       
									uni.navigateTo({
									    url: '/pages/processCheck/index'
									});        
								},1000)
								}else{
									uni.showToast({
									    title:res.data.msg?res.data.msg:'提交失败',
										icon:"none",
									    duration: 2000
									});
								}
						}
					});
				}
			}
		}
	}
</script>

<style scoped>
	.itemtext {
		position: relative;
		float: right;
		right: 15px;
		width: 50%;
		min-height: 50px;
		line-height: 20px;
		color: #333;
		padding-top: 15px;
		padding-bottom: 15px;
		box-sizing: border-box;
		text-align: right;
	}
	.iteminput{
		position: absolute;
		font-size: 14px;
		left: 0;
		background-color: #f1f1f1;
		height:60%;
		width: 80%;
		top: 20%;
		padding: 0 6px;
		box-sizing: border-box;
		/* width: 100%;
		text-align: right;
		background-color: #ccc;
		box-sizing: border-box; */
	}
	.InputRightMargin{
		padding-right:25px;
	}
	.myarrowright {
		font-size: 16px !important;
		position: absolute;
		right: 50%;
		line-height: 50px !important;
		top: 0;
	}
	.myarrowright {
		font-size: 16px !important;
		position: absolute;
		right: 10px;
		line-height: 50px !important;
		top: 0;
	}
	.pickerItem_{
		position: absolute;
		width: 100%;
		height: 100%;
		left: 0;
		top: 0;
	}
	.container {
		position: absolute;
		width: 100%;
		height: 100%;
		padding-bottom: 80px;
		overflow: auto;
		background-color: #f3f3f3;
		box-sizing: border-box;
	}

	.top_head {
		position: fixed;
		top: var(-window-top);
		width: 100%;
		height: 60px;
		background-color: #007AFF;
		color: #fff;
		padding-left: 20px;
		box-sizing: border-box;
		z-index: 1;
	}

	.top_head1 {
		font-size: 15px;
		line-height: 60px;
	}
	.info_container{
		position: relative;
		display: flex;
		justify-content: center;
		align-items: center;
		 flex-wrap:wrap;
		    width: calc(100% - 40px);
		margin: auto;
		margin-top: 80px;
		font-size: 15px;
	}
	.info_item {
		position: relative;
		display: flex;
		width: 50%;
		height: 50px;
		color: #666;
		line-height: 50px;
		box-sizing: border-box;
	}
	.info_container .info_item:nth-of-type(1),.info_container .info_item:nth-of-type(2),.info_container .info_item:nth-of-type(5),.info_container .info_item:nth-of-type(6),.info_container .info_item:nth-of-type(9),.info_container .info_item:nth-of-type(10){
		background-color: #cae1fb;
	}
	.info_container .info_item:nth-of-type(3),.info_container .info_item:nth-of-type(4),.info_container .info_item:nth-of-type(7),.info_container .info_item:nth-of-type(8),.info_container .info_item:nth-of-type(11),.info_container .info_item:nth-of-type(12){
		background-color: #fff;
	}
	
	[border_right]{
		border-right: 1px solid #d8d8d8;
	}
	.info_item_name{
		width: 40%;
		text-align: center;
	}
	.info_item_value{
		position: relative;
		width: 60%;
		text-align: left;
		padding-left: 20px;
		color: #333;
	}
	.info_item_input{
		position: absolute;
		font-size: 14px;
		left: 0;
		background-color: #f1f1f1;
		height:60%;
		width: 80%;
		top: 20%;
		padding: 0 6px;
		box-sizing: border-box;
	}
	
	.content {
		position: relative;
		width: 100%;
		padding: 20px;
		padding-top: 80px;
		padding-bottom: 60px;
		max-height: 100%;
		overflow: auto;
		box-sizing: border-box;
	}

	.plus_icon{
		margin: auto;
		display: flex;
		justify-content: center;
		font-weight: bold;
		width: 50px;
	}
	
	.bottom_btn_container{
		position: fixed;
		bottom:0;
		width:100%;
		left: 0;
		height: 70px;
		background-color: #dadada;
	}
	.bottom_btn_out{
		position: relative;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.bottom_btn{
		position: relative;
		margin: 0 10px;
		/* width: 30%; */
		width: 30%;
		height: 60px;
		line-height: 60px;
		text-align: center;
		font-size: 25px;
		color: #333;
		top:5px;
		letter-spacing: 4px;
		border-radius: 4px;
	}
	.bottom_btn:nth-child(1){
		background-color: #fff;
		border: 2px solid #007AFF;
		color: #007AFF;
		box-sizing: border-box;
		/* box-shadow: 3px 3px 10px rgba(160, 160, 159,0.2) inset,-3px -3px 10px rgba(160, 160, 159,0.2) inset; */
	}
	.bottom_btn:nth-child(2){
		color: #fff;
		background-color: #007AFF;
		/* box-shadow: 3px 3px 10px rgba(16, 36, 177,0.2) inset,-3px -3px 10px rgba(16, 36, 177,0.2) inset; */
	}

	.bottom_btn:nth-child(3){
		color: #fff;
		background-color: #007AFF;
		/* box-shadow: 3px 3px 10px rgba(16, 36, 177,0.2) inset,-3px -3px 10px rgba(16, 36, 177,0.2) inset; */
	}
	
	.line_text{
		position: relative;
		    width: calc(100% - 40px);
		margin: auto;
		margin-top: 20px;
		font-size: 15px;
		color: #333;
		
	}
	.table_container{
		position: relative;
		    width: calc(100% - 40px);
		margin: auto;
		margin-top: 20px;
		font-size: 15px;
		color: #333;
		
	}
	.t-table {
		position: relative;
		height: 100%;
		padding-bottom: 10px;
	}

	.t-table .t-tr {
		border-bottom: 1px solid #c3c3c3;
	}

	.t-td {
		position: relative;
		padding: 8px;
		box-sizing: border-box;
		width: calc((100% - 560px) / 5);
	}

	.t-tr {
		height: calc(100% / 11);
	}

	.t-th {
		padding: 8px 0;
		box-sizing: border-box;
		width: calc((100% - 560px) / 5);
		background-color: #c6ddf7;
	}
	.td_input {
		background-color: #fff;
		width: 80%;
		height: 100%;
		font-size: 15px;
	}

	uni-button {
		position: relative;
		font-size: 15px;
		height: 95%;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.picker_,.picker_input{
		position: absolute;
		width: 80%;
		height: 60%;
		left: 10%;
		top: 20%;
		display: flex;
		background-color: #e6e6e6;
		align-items: center;
		justify-content: center;
	}
	.picker_{
		border: 1px solid #dadada;
	}
	.picker_input{
		width: 80%;
		height: 60%;
		left: 10%;
		top: 20%;
		overflow: hidden;
		
	}
	.info_item_name[required]:before{
		position: relative;
		content: "*";
		color: red;
	}
</style>
