<template>
	<view class="container">
		<view class="top_head">
			<view class="top_head1">工单号:{{code}}</view>
			
		</view>
		<view class="content">
			<view class="itemtext mb">
				<input :focus="showPopupBottom" type="text" class="td_input1" v-model="thisId">
				<uni-icons type="scan" size="25" color='#000' class='scan_icon'></uni-icons>
			</view>
			<view class="item_list">
				<t-table border=0>
					<t-tr font-size="16">
						<t-th required>物料名称</t-th>
						<t-th>规格型号</t-th>
						<t-th>主计量单位</t-th>
						<t-th>主单位数量</t-th>
						<t-th required>辅助单位</t-th>
						<t-th required>换算系数</t-th>
						<t-th required>辅单位数量</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>
							<view @click="chooseMaterial(index)">
								<view v-if="item.materiaId">{{item.materiaName}}
									<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>{{item.specification}}</t-td>
						<t-td>{{item.unitUomName}}</t-td>
						<t-td>{{item.materiaCount}}</t-td>
						<t-td>
							<!-- <input type="supportUomName" class="td_input" placeholder="请选择辅单位" v-model="item.supportUomName" @change='toFixed(index)'> -->
							<picker @change="(item0)=>{bindPickerChange(item0,item,index)}" :range="arrayName" >	
									<label class="">{{item.supportUomName?item.supportUomName:"请选择辅单位"}}</label>
							</picker>
						</t-td>
						<t-td>
							<input type="convCoefficient" class="td_input" placeholder="请填写换算系数" v-model="item.convCoefficient" @input='toFixed1(index)'>
						</t-td>
						<t-td>
							<input type="materiaCountSupport" class="td_input" placeholder="请填写辅单位数量" v-model="item.materiaCountSupport" @input='toFixed2(index)'>
						</t-td>
						<t-td>
							<input type="text" class="td_input" placeholder="请填写批次号" :disabled="item.isLot==0" spellcheck ="false" v-model="item.batch">
						</t-td>
						<t-td>{{item.supplierName}}</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>
		<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>

		<!-- 选择物料 -->
		<chooseMaterial v-if="chooseMaterialVisible" @change="getMaterial"></chooseMaterial>
	</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 chooseMaterial from '@/components/system/chooseMaterial.vue'
	export default {
		components: {
			uniIcons,
			tTable,
			tTh,
			tTr,
			tTd,
			chooseMaterial
		},
		data() {
			return {
				thisId: '',
				code: "",
				isCollect: '',
				tableList: [],
				idList: [],
				materialList: [],
				chooseMaterialVisible: false,
				currentIndex: '',
				dispatchItemId:"",
				showPopupBottom: false,
				isDisabled: false,
				arrayName: [],
				array: [],
				index1:0,
			}
		},
		computed: {

		},
		onLoad: function(option) {
			if(option.code&&option.dispatchItemId){
				this.code = option.code;
				this.dispatchItemId=option.dispatchItemId;
			}else{
				uni.navigateTo({
				    url: '/pages/index/index'
				});   
			}
			
		},
		watch: {

		},
		mounted() {
			this.showPopupBottom = true
			this.initScannerModule();
			this.getMaterilalList();
			this.getSpupportUnomName()
		},
		methods: {
			

			// 获取id对应的用料
			getMaterilalList() {
				let id = +this.dispatchItemId
				this.$http.request({
					url: '/apis/workingProcedurePlan/getMaterielByDispatch',
					params: {id:id}
					})
					.then(res => {
						this.isCollect = res.data.isCollect
						this.materialList = res.data.data
						let arr = []
						this.materialList.forEach(item=>{
							arr.push(item.materielId)
						})
						this.idList = arr
						console.log(this.idList)
					})	
			},
			getSpupportUnomName(){
				let type ='uom_type'
				this.$http.request({
					url: '/apis/dict/getDictsByType',
					params: {type:type}
				})
				.then(res=>{
					this.array=res.data.datas
					let arr = []
					this.array.forEach(item=>{
						console.log("item.name"+item.name)
						arr.push(item.name)
					})
					this.arrayName = arr
				})
			},
			
			//换算系数
			toFixed1(index) {
				this.$set(this.tableList[index],'convCoefficient',Number(this.tableList[index].convCoefficient).toFixed(this.tableList[index].quantityAccuracy))
				this.$set(this.tableList[index],'materiaCount',0)
				if(!isNaN(this.tableList[index].convCoefficient)&&!isNaN(this.tableList[index].materiaCountSupport)){
					this.$set(this.tableList[index],'materiaCount',Number(this.tableList[index].materiaCountSupport)*Number(this.tableList[index].convCoefficient).toFixed(this.tableList[index].quantityAccuracy))
				}
			},
			//辅单位数量
			toFixed2(index) {
				this.$set(this.tableList[index],'materiaCountSupport',Number(this.tableList[index].materiaCountSupport).toFixed(this.tableList[index].quantityAccuracy))
				this.$set(this.tableList[index],'materiaCount',0)
				if(!isNaN(this.tableList[index].convCoefficient)&&!isNaN(this.tableList[index].materiaCountSupport)){
					this.$set(this.tableList[index],'materiaCount',Number(this.tableList[index].materiaCountSupport)*Number(this.tableList[index].convCoefficient).toFixed(this.tableList[index].quantityAccuracy))
				}
			},
			
			bindPickerChange:function(e,item,index){
				var indexNew=e.target.value
				let spupportName = this.arrayName[indexNew]
				console.log("======spupportName:"+spupportName)
				this.$set(this.tableList[index],'supportUomName',spupportName)
				let supportUnomId =0
				this.array.forEach(aa =>{
					if(aa.name==spupportName){
						supportUnomId=aa.id
					}
				})
				console.log("======supportUnomId:"+supportUnomId)
				this.$set(this.tableList[index],'supportUom',supportUnomId)
			},
				// 扫码
			 initScannerModule(){
				 
			     var code = "";
			     var lastTime,nextTime;
			     var lastCode,nextCode;
				 var _this = this
			     document.onkeypress = function(e) {
					 
			         nextCode = e.which;
			         nextTime = new Date().getTime();
			 
			         if(lastCode != null && lastTime != null && nextTime - lastTime <= 30) {
			             code += String.fromCharCode(lastCode); 
			         } else if(lastCode != null && lastTime != null && nextTime - lastTime > 100){
			             code = "";
			         }
			 
			         lastCode = nextCode;
			         lastTime = nextTime;

					 console.log(code)
					 if(e.which == 13){
					 			 
					     //2.获取到条形码 code
					 	_this.$http.request({
					 			url: '/apis/materiel/detail',
					 			params: {
					 				id:JSON.parse(code).id
					 			},
					 			method: 'POST'
					 		})
							.then(res => {
								
								console.log(res)
								if (res.data.code == 0) {
									let j = {
										materiaId:res.data.id,
										materiaName:res.data.name,
										specification: res.data.specification?res.data.specification:'',
										unitUomName:res.data.unitUomName,
										supplierName:res.data.supplierName?res.data.supplierName:''
									}
									_this.tableList.push(j)
									_this.showPopupBottom = true
									_this.thisId = ''
									
								}else{
									uni.showToast({
										title: res.data.msg? res.data.msg:'扫码失败',
										icon: 'none',
										duration: 2000
									});
								}
							});
					 }
			     } 
			},
			
			
			//选择物料
			chooseMaterial(index) {
				this.currentIndex = index;
				this.chooseMaterialVisible = true;
			},
			getMaterial(val) {
				this.chooseMaterialVisible = false;
				var flag =1
				if(this.isCollect ==1) {
					flag=0;
					for (var i = 0; i < this.idList.length; i++) {
					    if(this.idList[i]==val.id){
					        console.log(i);
					        flag=1;
					        break;
					    }
					}
				}
				if(flag==0){
					uni.showToast({
						title: '当前使用的物料不是投料计划中的物料，请检查是否有物料品种领用错误',
						icon: 'none',
						duration: 2000
					});
				} else {
					this.$set(this.tableList[this.currentIndex], 'materiaId', val.id)
					this.$set(this.tableList[this.currentIndex], 'quantityAccuracy', val.quantityAccuracy)
					this.$set(this.tableList[this.currentIndex], 'materiaName', val.name)
					this.$set(this.tableList[this.currentIndex], 'specification', val.specification)
					this.$set(this.tableList[this.currentIndex], 'isLot', val.isLot)
					this.$set(this.tableList[this.currentIndex], 'unitUomName', val.unitUomName)
					this.$set(this.tableList[this.currentIndex], 'materiaCount', val.convCoefficient)
					this.$set(this.tableList[this.currentIndex], 'supportUom', val.supportUom)
					this.$set(this.tableList[this.currentIndex], 'supportUomName', val.supportUomName)
					this.$set(this.tableList[this.currentIndex], 'convCoefficient', val.convCoefficient)
					this.$set(this.tableList[this.currentIndex], 'materiaCountSupport',1.000)
					this.$set(this.tableList[this.currentIndex], 'supplierName', val.supplierName)
				}
			},
			//添加
			addData() {
				let j = {}
				this.tableList.push(j)
			},

			//取消
			toBack() {
				uni.navigateBack()
			},
			toDelete(index) {
				let _this = this;
				uni.showModal({
					title: '',
					content: '确定删除吗?',
					success: function(res) {
						if (res.confirm) {
							_this.tableList.splice(index, 1)
						} else if (res.cancel) {}
					}
				});
			},
			//提交
			submit() {
				let flag = true;
				if (this.tableList.length == 0) {
					uni.showToast({
						title: '请先添加物料再提交',
						icon: "none",
						duration: 2000
					});
					flag = false;
				} else {
					this.tableList.forEach(item => {
						if (item.materiaId == undefined) {
							uni.showToast({
								title: '请选择物料',
								icon: "none",
								duration: 2000
							});
							flag = false;
							return
						}
						if (item.materiaCountSupport == undefined) {
							uni.showToast({
								title: '请填写辅单位数量',
								icon: "none",
								duration: 2000
							});
							flag = false;
							return
						} else {
							// let reg_positive_integer = /^[1-9]*[1-9][0-9]*$/; //验证正整数
							// if (!reg_positive_integer.test(item.materiaCount)) {
							// 	uni.showToast({
							// 		title: '数量为大于0的整数',
							// 		icon: "none",
							// 		duration: 2000
							// 	});
							// 	flag = false;
							// 	return
							// }
						}
						if (item.batch == undefined&&item.isLot==1) {
							uni.showToast({
								title: '请填写批号',
								icon: "none",
								duration: 2000
							});
							flag = false;
							return
						}
						
					})
				}
				if (flag) {
					if(this.isDisabled) {
						return
					  }
					this.isDisabled = true
					this.$http.request({
						url: '/apis/mes/materialCollect/submitCollect',
						method: 'post',
						params:{
						dispatchItemId:this.dispatchItemId,
						colletDetails: encodeURIComponent(JSON.stringify(this.tableList))
					},
					}).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/index/index'
									});        
								},1000)
								}else{
									uni.showToast({
									    title:res.data.msg?res.data.msg:'提交失败',
										icon:"none",
									    duration: 2000
									});
								}
						}
					});
				}
			}
		}
	}
</script>

<style scoped>
	.container {
		position: absolute;
		width: 100%;
		height: 100%;
		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;
	}



	.content {
		position: relative;
		width: 100%;
		padding: 20px;
		padding-top: 80px;
		padding-bottom: 80px;
		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; */
	}

	.t-table {
		position: relative;
		height: 100%;
		padding-bottom: 10px;
	}

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

	.t-td {
		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%;
		font-size: 15px;
	}
	.td_input1 {
		position: relative;
		background-color: #fff;
		width: 50%;
		font-size: 15px;
		height: 40px;
	}
	

	uni-button {
		position: relative;
		font-size: 15px;
		height: 95%;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.scan_icon{
		position: absolute;
		right: 51%;
		top: 90px;
	}
	.mb {
		margin-bottom: 10px;
	}
</style>
