<template>
	<view>
		<uni-collapse>
			<uni-forms ref="form" :modelValue="formData" :rules="rules">
				<uni-collapse-item title="套装明细单" :open="true">
					<uni-forms-item label="套装编码" :labelWidth='80' name="suitCode">
						<uni-easyinput suffixIcon="scan" @iconClick="scanBar" @confirm="scanBarCode" type="text"
							v-model="formData.suitCode" />
					</uni-forms-item>
					<uni-row :gutter="20">
						<uni-col :span="12" style="text-align: center;">
							<button type="primary" size="mini" @click="addDetail">添加</button>
						</uni-col>
						<uni-col :span="12" style="text-align: center;">
							<button type="success" size="mini" @click="reset">重置</button>
						</uni-col>
					</uni-row>
				</uni-collapse-item>

				<uni-collapse-item title="套装明细项信息" :open="true">
					<uni-swipe-action>
						<uni-swipe-action-item :rightOptions="rightOptions" :key="index"
							v-for="(item, index) in formData.mesProductSuitDetailList"
							@click="(data) => clickDetail(index,data)">
							<uni-badge :text="index+1" type="primary"></uni-badge>
							<uni-card :is-shadow="false" is-full>
								<div><strong>物料编码</strong>:{{item.materialCode}}</div>
								<div><strong>物料名称</strong>:{{item.materialName}}</div>
								<div><strong>批号</strong>:{{item.batchNo}}</div>
								<div><strong>箱号</strong>:{{item.lotNo}}</div>
								<div><strong>件号</strong>:{{item.pieceNo}}</div>
								<div><strong>数量</strong>:{{item.num}}</div>
								<div><strong>单位</strong>:{{item.unitId}}</div>
								<div><strong>备注</strong>:{{item.remark}}</div>
							</uni-card>
						</uni-swipe-action-item>
					</uni-swipe-action>
				</uni-collapse-item>
			</uni-forms>
		</uni-collapse>
		<u-button type="primary" @click="submit">提交</u-button>

		<u-popup :show="show" @close="close">
			<div style="min-height: 50vh;">
				<div style="font-size: 16px;color:#606266; margin-top: 10px;">工单</div>
				<uni-easyinput style="margin-top: 10px;" suffixIcon="scan" @iconClick="scanBar1" type="text" focus
					v-model="pwoCode" @confirm="scanBarPwoCode" />
				<uni-card :is-shadow="false" is-full v-for="item in pwoList" :key="item.id" :border="false">
					<div><strong>目标产品编码</strong>:{{item.ptNoTar}}</div>
					<div><strong>目标产品名称</strong>:{{item.ptTitleTar}}</div>
					<div><strong>批号</strong>:{{item.batchNo}}</div>
					<div><strong>数量</strong>:{{item.num}}</div>
					<div><strong>状态</strong>:<uni-tag :text="pwotag(item.status)" type="warning"></uni-tag></div>
				</uni-card>
				<u-button type="primary" v-show="pwoList.length>0" @click="pickPwo">选中</u-button>
			</div>

		</u-popup>

	</view>

</template>

<script>
	import {
		listMesProductSuitDetail,
		getMesProductSuitDetail,
		delMesProductSuitDetail,
		addMesProductSuitDetail,
		updateMesProductSuitDetail
	} from "@/api/mes/productSuitDetail";
	import {
		getPwo,
		listPwo,
		pwoAtificialClose,
		handleIn,
		listCirculateBalance
	} from "@/api/mes/pwoDraw.js";
	import {
		listMesProductSuit,
		getMesProductSuit,
		delMesProductSuit,
		addMesProductSuit,
		updateMesProductSuit
	} from "@/api/mes/productSuit";
	export default {
		mounted() {},
		data() {
			return {
				pwoList: [],
				show: false,
				pwoCode: null,
				formData: {
					id: null,
					suitCode: null,
					mesProductSuitDetailList: [],
				},
				oldmesProductSuitDetailList: [],
				rightOptions: [{
					text: '删除',
					style: {
						backgroundColor: '#ff2a17'
					}
				}, ],
				rules: {
					suitCode: {
						rules: [{
							required: true,
							errorMessage: '请输入套装编码!'
						}]
					},
				}
			}
		},
		methods: {
			reset() {
				this.formData.mesProductSuitDetailList = this.oldmesProductSuitDetailList;
			},
			deleteDetail(index) {
				this.formData.mesProductSuitDetailList.splice(index, 1);
			},
			clickDetail(itemIndex, {
				position,
				index
			}) {
				if (index == 0) {
					this.deleteDetail(itemIndex);
				}
			},
			close() {
				this.pwoCode = null;
				this.pwoList = [];
				this.show = false;
			},
			scanBarCode() {
				if (this.formData.suitCode) {
					let obj = {
						suitCode: this.formData.suitCode
					}
					listMesProductSuit(obj).then(async res => {
						if (res.rows.length != 0) {
							this.formData.id = res.rows[0].id;
							listMesProductSuitDetail({
								suitId: this.formData.id
							}).then(async res => {
								if (res.rows.length != 0) {
									this.oldmesProductSuitDetailList = res.rows;
									this.formData.mesProductSuitDetailList = [...res.rows]
								} else {
									this.formData.mesProductSuitDetailList = [];
									this.$modal.msg("该套装查无明细！");
								}
							});
						} else {
							this.$modal.msg("未查到该套装！");
						}
					})
				} else {
					this.$modal.msg("请输入套装编码！");
				}
			},
			scanBar() {
				const _this = this;
				uni.scanCode({
					scanType: ['barCode', 'qrCode'],
					success: function(res) {
						_this.formData.suitCode = res.result;
						_this.scanBarCode();
					}
				});
			},
			scanBar1() {
				const _this = this;
				uni.scanCode({
					scanType: ['barCode', 'qrCode'],
					success: function(res) {
						_this.pwoCode = res.result;
						_this.scanBarPwoCode();
					}
				});
			},
			addcancel() {
				this.addshow = false;
			},
			pickPwo() {
				const _this = this;
				if (_this.pwoList.length > 0) {

					if (_this.formData.id && _this.formData.suitCode) {

						let obj = {
							suitId: _this.formData.id,
							suitCode: _this.formData.suitCode,
							materialCode: _this.pwoList[0].ptNoTar,
							materialName: _this.pwoList[0].ptTitleTar,
							batchNo: _this.pwoList[0].batchNo,
							num: _this.pwoList[0].planNum
						}
						addMesProductSuitDetail(obj).then(async res => {
							_this.$modal.msgSuccess("添加套装明细成功!");
							_this.scanBarCode();
							_this.pwoCode = null;
							_this.pwoList = [];
							_this.show = false;
						});
					} else {
						_this.$modal.msg("请先输入套装编码并查询明细！")
					}
				} else {
					_this.$modal.msg("请先输入工单并查询！")
				}
			},
			scanBarPwoCode() {
				if (this.pwoCode) {
					let obj = {
						pwoCode: this.pwoCode
					}
					listPwo(obj).then(res => {
						if (res.rows.length > 0) {
							this.pwoList = res.rows
						} else {
							this.$modal.msg("未找到该工单！")
						}
					});
				}
			},
			addDetail() {
				if (this.formData.suitCode && this.formData.suitCode != '' && this.formData.id) {
					this.show = true;
				} else {
					this.$modal.msg("请先输入套装编码并查询明细！")
				}
			},
			pwotag(status) {
				switch (Number(status)) {
					case 1:
						return '计划中';
						break;
					case 2:
						return '已生成作业';
						break;
					case 3:
						return '已投料';
						break;
					case 4:
						return '已领料';
						break;
					case 5:
						return '已开工';
						break;
					case 6:
						return '暂停';
						break;
					case 7:
						return '已完成';
						break;
					case 8:
						return '结案';
						break;
					case 9:
						return '取消';
						break;
					case 10:
						return '待入库';
						break;
					case 11:
						return '待转出';
						break;
					case 12:
						return '已转出';
						break;
					case 13:
						return '其他';
						break;
					default:
						return '无';
						break;
				}
			},
			submit() {
				const _this = this;
				_this.$refs.form.validate().then(res => {
					uni.showModal({
						title: '提示',
						content: '您确定修改该套装吗？',
						success: function(res) {
							if (res.confirm) {
								if (_this.formData.id && _this.formData.suitCode) {
									_this.$modal.loading('提交中')
									updateMesProductSuitDetail(_this.formData).then(async res => {
										_this.$modal.closeLoading();
										_this.$modal.msgSuccess("修改套装成功!");
										setTimeout(() => {
											_this.$tab.switchTab(
												"/pages/work/index");
										}, 500);
									});
								} else {
									_this.$modal.msg("请先输入套装编码并查询明细！")
								}
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
				});
			}
		}
	}
</script>

<style>
</style>