<template>
	<view class="content-box">
		<uni-nav-bar fixed="true" statusBar="true" left-icon="back" :title='title' background-color="#F7F9FA"
			color="#000" @clickLeft="back">
		</uni-nav-bar>


		<view class="list_box">
			<u-list @scrolltolower="scrolltolower">
				<view class="card_box">
					<workOrderBom :item='objData' v-if='objData' @handleScan='handleWordScan'></workOrderBom>

					<diagramLast v-if='lastObj' :item='lastObj'>
					</diagramLast>

					<qualityStat :normalQuality='objData.normalQuality' v-if='objData'></qualityStat>

					<u-form labelPosition="left" labelWidth="160" labelAlign="center" style="margin-top: 40rpx;">

						<u-form-item label="合格数量" class="required-form" borderBottom prop="formedNum">
							<input class="uni-input" v-model="formedNum" type='digit'></input>
						</u-form-item>

					</u-form>





				</view>
			</u-list>
		</view>

		<view class="bottom-wrapper">
			<view class="btn_box" @click="save">一键报工</view>
		</view>

	</view>


</template>

<script>
	import {
		getByIdReport,
		jobSave
	} from '@/api/pda/jobBooking.js'

	import {

		junkCount
	} from '@/api/pda/workOrder.js'

	import workOrderBom from '../../feeding/components/workOrderBom.vue'
	import qualityStat from '../components/qualityStat.vue'
	import diagramLast from '../components/diagramLast.vue'
	export default {
		components: {
			workOrderBom,
			qualityStat,
			diagramLast
		},
		data() {
			return {
				title: null,

				objData: null,
				lastObj: null,
				feedCount: null,

				formedNum: 0,
				formedNumLast: 0
			}
		},


		onLoad(options) {
			this.title = options.taskName ? options.taskName + '-报工' : '报工'
			this.id = options.workOrderId
			this.taskId = options.taskId
			this.getList()


		},

		created() {

		},


		methods: {

			handleWordScan() {
				uni.showToast({
					icon: 'none',
					title: '不支持换工单'
				})
			},


			getList() {
				getByIdReport(this.id, this.taskId).then(res => {

					res.workReportInfo = {
						formedNum: null,
						taskId: this.taskId,
						reportType: 3,
						
						formingNum: res.formingNum,
						formingWeight: res.formingWeight,
						formedWeight: res.formedWeight,
						
					}

					this.formedNumLast = res.formedNumLast
					this.formedNum = 0
					res.normalQuality.forEach(f => {
						this.formedNumLast = this.formedNumLast - Number(f.quantity)
						this.formedNum  = this.formedNumLast
					})


					this.lastObj = {
						formedNum: res.formedNumLast,
						taskNameLast: res.taskNameLast,
						unit: res.unit
					}

					this.objData = res


				})
			},
			
			scrolltolower() {},

			save() {

				this.objData.workReportInfo.formedNum = this.formedNum
				console.log(this.objData.workReportInfo)

				if (Number(this.objData.workReportInfo.formedNum) < 0 || this.objData.workReportInfo.formedNum == null) {

					uni.showToast({
						icon: 'none',
						title: '合格数量不能小于0'
					})

					return false
				}

				jobSave(this.objData).then(res => {
					uni.navigateBack()
				})



			}


		}
	}
</script>

<style lang="scss" scoped>
	.content-box {
		height: 100vh;
		overflow: hidden;
		display: flex;
		flex-direction: column;

	}

	.list_box {
		flex: 1;
		overflow: hidden;
		padding: 4rpx 0;

		.u-list {
			height: 100% !important;
		}

		.card_box {
		padding: 16rpx;
		}



	}

	.bottom-wrapper {
		.btn_box {
			width: 750rpx;
			height: 88rpx;
			line-height: 88rpx;
			background: $theme-color;
			text-align: center;
			font-size: 36rpx;
			font-style: normal;
			font-weight: 400;
			color: #fff;
		}
	}


	.operate_box {
		padding: 10rpx 160rpx;

		/deep/ .u-button {
			width: 160rpx;
		}
	}

	/deep/ .uni-input-input {
		border: 2rpx solid #F0F8F2;
		background: #F0F8F2;
		color: $theme-color;
	}
</style>