<template>
	<view class="detail">
		<view class="base-info module">
			<view class="title">派工单（编号： #33）</view>
			<view class="cont">
				<view class="item">
					<view class="label">产品状态：</view>
					<view class="val yjd">{{statusMap[detailInfo.status]}}</view>
				</view>
				<view class="item">
					<view class="label">产品名称：</view>
					<view class="val">{{detailInfo.productName}}</view>
				</view>
				<view class="item">
					<view class="label">派工工序：</view>
					<view class="val">{{detailInfo.procedureName}}</view>
				</view>
				<view class="item">
					<view class="label">任务编号：</view>
					<view class="val">{{detailInfo.code}}</view>
				</view>
				<view class="item">
					<view class="label">完成时限：</view>
					<view class="val">{{detailInfo.startWorkTime | formatDate}} ～
						{{detailInfo.endWorkTime | formatDate}}</view>
				</view>

				<view class="item">
					<view class="label">派工数量：</view>
					<view class="val">{{detailInfo.processingProductAmount}}</view>
				</view>
				<view class="item">
					<view class="label">预计工时：</view>
					<view class="val">{{detailInfo.predictWorkTime}}</view>
				</view>
				<view class="item">
					<view class="label">总报工产量：</view>
					<view class="val">{{detailInfo.reportAmount}}</view>
				</view>

				<view class="item">
					<view class="label">总实际工时：</view>
					<view class="val">{{detailInfo.workTime}}</view>
				</view>

			</view>
		</view>
		<block v-if="isStaff">
			<view class="module bgInfo">
				<view class="item">
					<view class="label">派工产量</view>
					<view class="val">{{detailInfo.processingProductAmount}}</view>
				</view>
				<view class="item">
					<view class="label">总报工产量</view>
					<view class="val">{{detailInfo.reportAmount}}</view>
				</view>
				<view class="item">
					<view class="label">剩余数量</view>
					<view class="val">{{reportAmountMax}}</view>
				</view>
			</view>
			<view class="pg-info module">
				<view class="title">报工</view>
				<view class="cont">
					<view class="item">
						<view class="label">生产部门：</view>
						<view class="val">{{userInfo.deptName}}</view>
					</view>
					<view class="item">
						<view class="label">生产人员：</view>
						<view class="val">{{userInfo.nickname}}</view>
					</view>
					<view class="item" v-if="detailInfo.workStatus == 'END'">
						<view class="label">报工完成数量：</view>
						<view class="val">
							<uni-number-box type="number" :max="reportAmountMax" min="0" v-model="reportAmount" />
							<!-- <input class="uni-input" type="number" v-model="reportAmount" placeholder="请输入数量" /> -->
						</view>
					</view>
				</view>
			</view>
		</block>
		<block v-else>
			<view class="pg-info module">
				<view class="title">报工</view>
				<view class="cont">
					<view class="item">
						<view class="label">生产部门：</view>
						<view class="val">{{userInfo.deptName}}</view>
					</view>
					<view class="item">
						<view class="label">生产人员：</view>
						<view class="val">{{userInfo.nickname}}</view>
					</view>
					<view class="item" v-if="detailInfo.workStatus == 'END'">
						<view class="label">报工完成数量：</view>
						<view class="val">
							<uni-number-box type="number" :max="reportAmountMax" min="0" v-model="reportAmount" />
						</view>
					</view>
				</view>
			</view>
			<view class="pg-info module" v-if="detailInfo.workStatus == 'END'">
				<view class="title">质检信息</view>
				<view class="cont">
					<view class="item">
						<view class="label">合格数量：</view>
						<view class="val">
							<uni-number-box type="number" :max="reportAmountMax" min="0" v-model="qualifiedAmount" />
							<!-- <input class="uni-input" type="number" v-model="qualifiedAmount" placeholder="请输入数量" /> -->
						</view>
					</view>
					<view class="item">
						<view class="label">不合格数量：</view>
						<view class="val">
							<uni-number-box type="number" :max="reportAmountMax" min="0" v-model="unqualifiedAmount" />
							
							<!-- <input class="uni-input" type="number" v-model="unqualifiedAmount" placeholder="请输入数量" /> -->
						</view>
					</view>
					<view class="item">
						<view class="label">报废数量：</view>
						<view class="val">
							<uni-number-box type="number" :max="reportAmountMax" min="0" v-model="scrapAmount" />
							<!-- <input class="uni-input" type="number" v-model="scrapAmount" placeholder="请输入数量" /> -->
						</view>
					</view>
					<view class="item">
						<view class="label">返修数量</view>
						<view class="val">
							<uni-number-box type="number" :max="reportAmountMax" min="0" v-model="repairAmount" />
							<!-- <input class="uni-input" type="number" v-model="repairAmount" placeholder="请输入数量" /> -->
						</view>
					</view>
				</view>
			</view>
		</block>
		<block v-if="isStaff">
			<block v-if="detailInfo.workStatus == 'END'">
				<view class="pg-info module">
					<view class="title">领料退回量</view>
					<view class="cont">
						<view class="item" v-for="item in llArr" :key="item.id">
							<view class="label">{{item.productName}}：</view>
							<uni-number-box type="number" :max="reportAmountMax" min="0" v-model="item.num" />
							<!-- <input class="uni-input val" type="number" v-model="item.num" placeholder="请输入数量" /> -->
						</view>
					</view>
				</view>
				<view class="pg-info module">
					<view class="title">加工损耗量</view>
					<view class="cont">
						<view class="item" v-for="item in tlArr" :key="item.id">
							<view class="label">{{item.productName}}：</view>
							<uni-number-box type="number" :max="reportAmountMax" min="0" v-model="item.num" />
							<!-- <input class="uni-input val input" type="number" v-model="item.num" placeholder="请输入数量" /> -->
						</view>
					</view>
				</view>
			</block>
			<view class="action">
				<view class="start item" v-if="detailInfo.workStatus == 'DEFAULT'" @click="handleStart">开始生产</view>
				<view class="end item" v-if="detailInfo.workStatus == 'START'" @click="handleEnd">结束生产</view>
				<view class="tjbg item" v-if="detailInfo.workStatus == 'END'" @click="handleBg">提交报工</view>
			</view>
		</block>
		<block v-else>
			<view class="action">
				<view class="start item" v-if="detailInfo.workStatus == 'DEFAULT'" @click="handleStart">开始质检</view>
				<view class="end item" v-if="detailInfo.workStatus == 'START'" @click="handleEnd">结束质检</view>
				<view class="tjbg item" v-if="detailInfo.workStatus == 'END'" @click="handleBg">保存并提交</view>
			</view>
		</block>
	</view>
</template>

<script>
	import {
		getToken
	} from '@/utils/auth'
	import {
		produceDetailApi,
		produceOperateApi,
		produceReportApi
	} from '@/api/task-detail'
	export default {
		components: {},
		data() {
			return {
				id: '',
				status: '',
				reportAmount: 0,
				detailInfo: {},
				statusText: '已开工',
				llArr: [],
				tlArr: [],
				qualifiedAmount: 0,
				unqualifiedAmount: 0,
				scrapAmount: 0,
				repairAmount: 0
			};
		},
		computed: {
			userInfo() {
				return this.$store.state.user.userInfo || {};
			},
			isLogin() {
				return !!getToken()
			},
			statusMap() {
				return this.$store.state.user.statusMap || {};
			},
			isStaff() {
				const produceGroupType = this.$store.state.user.userInfo.produceGroupType || '’';
				return produceGroupType == 'PROCESS'
			},
			isQC() {
				const produceGroupType = this.$store.state.user.userInfo.produceGroupType || '’';
				return produceGroupType == 'QC'
			},
			produceGroupType() {
				const produceGroupType = this.$store.state.user.userInfo.produceGroupType || '’';
				return produceGroupType
			},
			reportAmountMax() {
				return this.detailInfo.processingProductAmount - this.detailInfo.reportAmount
			}
		},
		//时间戳的处理
		filters: {
			formatDate: function(value) {
				var date = new Date();
				date.setTime(value);
				var month = date.getMonth() + 1;
				var hours = date.getHours();
				if (hours < 10)
					hours = "0" + hours;
				var minutes = date.getMinutes();
				if (minutes < 10)
					minutes = "0" + minutes;
				var time = date.getFullYear() + "-" + month + "-" + date.getDate() +
					" " + hours + ":" + minutes;
				return time;
			}
		},
		onShow() {
			if (!this.isLogin) {
				uni.navigateTo({
					url: '/pages/login'
				})
			}
		},
		onLoad(option) {
			this.status = option.status
			this.id = option.id
			this.statusText = this.statusMap[this.status] || '已开工',
				this.initData()
		},
		methods: {
			handleSQ() {
				this.$refs.drawer.$refs.showLeft.open()
			},
			handleStart() {
				const params = {
					operate: 'START',
					taskId: this.id,
					taskType: this.produceGroupType
				}
				produceOperateApi(params).then(res => {
					const {
						code,
						data,
						msg
					} = res
					uni.navigateTo({
						url: `/pages/bg-detail/index?id=${this.id}&status=${this.status}`
					});
				})
			},
			handleEnd() {
				const params = {
					operate: 'END',
					taskId: this.id,
					taskType: this.produceGroupType
				}
				produceOperateApi(params).then(res => {
					const {
						code,
						data,
						msg
					} = res
					uni.navigateTo({
						url: `/pages/bg-detail/index?id=${this.id}&status=${this.status}`
					});
				})
			},
			// 提交报工
			handleBg() {
				let params = {}
				if (this.isStaff) {
					const processDetailList = []
					this.detailInfo.detailList.forEach(e => {
						const objLl = this.llArr.find(q => q.id == e.id)
						const objTl = this.tlArr.find(q => q.id == e.id)
						const obj = {
							id: e.id,
							productId: e.productId,
							returnAmount: objLl.num,
							lossAmount: objTl.num
						}
						processDetailList.push(obj)
					})
					params = {
						taskType: this.produceGroupType,
						taskId: this.id,
						reportAmount: this.reportAmount,
						processDetailList
					}
				} else {
					const qcDetail = {
						qualifiedAmount: this.qualifiedAmount,
						unqualifiedAmount: this.unqualifiedAmount,
						scrapAmount: this.scrapAmount,
						repairAmount: this.repairAmount
					}
					params = {
						taskType: this.produceGroupType,
						taskId: this.id,
						reportAmount: this.reportAmount,
						qcDetail
					}
				}
				produceReportApi(params).then(res => {
					const {
						code,
						data,
						msg
					} = res
					uni.navigateTo({
						url: `/pages/task-list/index`
					});
				})
			},
			initData() {
				const taskType = this.$store.state.user.userInfo.produceGroupType
				const params = {
					id: this.id,
					taskType
				}
				produceDetailApi(params).then(res => {
					const {
						code,
						data,
						msg
					} = res
					this.llArr = data.detailList.map(e => {
						const obj = {
							id: e.id,
							productId: e.productId,
							productName: e.productName,
							num: 0
						}
						return obj
					})
					this.tlArr = data.detailList.map(e => {
						const obj = {
							id: e.id,
							productId: e.productId,
							productName: e.productName,
							num: 0
						}
						return obj
					})
					this.detailInfo = data
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.detail {
		width: 100%;
		height: 100%;
		background: #fff;

		.module {
			margin: 20rpx;
			padding: 20rpx;
			background: #fff;
			border-radius: 20rpx;
			box-shadow: 0px 0px 8px 0px rgba(161, 161, 177, 0.12);

			.title {
				font-size: 28rpx;
				font-weight: 600;
				padding-bottom: 8px;
				color: #0D0D26;
				border-bottom: 1px solid #eaeef1;
			}

			.cont {
				background: #FAFAFD;
				padding: 20rpx;
				margin: 20rpx 0 10rpx;

				.item {
					margin: 20rpx 0;
					display: flex;

					.label {
						color: #95969D;
						margin-right: 20rpx;
						font-size: 28rpx;
						width: 140rpx;

						&.name {
							color: #356899;
							font-size: 36rpx;
						}
					}

					.val {
						color: #0D0D26;
						font-size: 28rpx;

						&.yjd {
							background: #E8FFEA;
							color: #356899;
							font-size: 24rpx;
							padding: 6rpx 10rpx;
						}
					}

					.uni-input {
						border-bottom: 1px solid #95969D;
						padding-bottom: 10rpx;
					}
				}
			}

			&.bgInfo {
				display: flex;
				justify-content: space-around;

				.item {
					flex: 1;
					text-align: center;

					.label {
						font-size: 24rpx;
						color: #95969D;
					}

					.val {
						font-size: 32rpx;
						color: #0D0D26;
						margin-top: 10rpx;

					}
				}
			}

		}

		.popup {
			.table {
				width: 400rpx;
			}
		}

		.action {
			border-top: 1px solid #95969D;
			padding: 20rpx 0;
			width: 100%;
			margin: 40rpx auto;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.item {
				flex: 1;
				color: #fff;
				margin: 0 40rpx;
				padding: 10px 0;
				font-weight: 600;
				border-radius: 20rpx;
				font-size: 32rpx;
				text-align: center;
				display: flex;
				align-items: center;
				justify-content: center;

				&.bg {
					background-color: #409eff;
				}

				&.llsq {
					background-color: #FF7D00;
				}

				&.next {
					background-color: #356899;
				}

				&.start {
					background-color: #FF7D00;
				}

				&.end {
					background-color: #356899;
				}

				&.tjbg {
					background-color: #409eff;
				}

			}

		}
	}
</style>