<template>
	<view>
		<uni-collapse style="width: 100%;">
			<uni-forms ref="form" :modelValue="getCode" class="form">
				<uni-easyinput type="text" prefixIcon="scan"
				class="Number" 
				placeholder="请扫描销售工业条码!" 
				placeholderStyle="color:black"
				v-model="getCode.Industry"
				@iconClick="iconClick('industry')"
				@confirm="getIndustry"
				:focus="focusFoIndustry" 
				clearable
				/>
				<uni-collapse-item :disabled="open" :open="!open" class="uniCollapse">
					<form class="form" >
						<uni-table border stripe emptyText="暂无更多数据" >
							<!-- 表格数据行 -->
							<uni-tr>
								<uni-td align="center" width="30">物料编码</uni-td>
								<uni-td align="center" width="70">{{form.materialCode}}</uni-td>
							</uni-tr>
							<uni-tr>
								<uni-td align="center" width="30">工业条码</uni-td>
								<uni-td align="center" width="70">{{form.Industry}}</uni-td>
							</uni-tr>
							<uni-tr>
								<uni-td align="center" width="30">物料名称</uni-td>
								<uni-td align="center" width="70">{{form.materialName}}</uni-td>
							</uni-tr>
							<uni-tr>
								<uni-td align="center" width="30">规格</uni-td>
								<uni-td align="center" width="70">{{form.specification1}}</uni-td>
							</uni-tr>
						</uni-table>
						<br />
						<uni-easyinput type="text" prefixIcon="scan"
						class="Number" 
						placeholder="请扫描组件二维码!" 
						placeholderStyle="color:black"
						v-model="getCode.computed"
						@iconClick="iconClick('subassembly')"
						@confirm="getSubassembly"
						:focus="focusComputed" 
						clearable
						/>
						<uni-table border stripe emptyText="暂无更多数据" >
							<!-- 表头行 -->
							<uni-tr>
								<uni-th align="center" width="70">编码</uni-th>
								<uni-th align="center" width="30">操作</uni-th>
							</uni-tr>
							<!-- 表格数据行 -->
							<uni-tr v-for="(item,index) in form.list" :key="index">
								<uni-td align="center">{{item.componentCode}}</uni-td>
								<uni-td align="center">
									<u-button @click="deleteList(item)">删除</u-button>
								</uni-td>
							</uni-tr>
						</uni-table>	
					</form>
				</uni-collapse-item>
			</uni-forms>
		</uni-collapse>
			<uni-popup ref="alertDialog" type="dialog">
				<uni-popup-dialog  cancelText="关闭" confirmText="同意" title="通知" :content="'是否删除编码为'+item.componentCode+'的单子'" @confirm="dialogConfirm"
					@close="dialogClose"></uni-popup-dialog>
			</uni-popup>
<!-- 提示信息弹窗 -->
			<uni-popup ref="message" type="message">
				<uni-popup-message :type="msgType" :message="messageText" :duration="2000"></uni-popup-message>
			</uni-popup>
	</view>
</template>

<script>
	import {
		getMaterial,
	} from	"@/api/mes/material.js";
	import {
		getSubassembly,
		insertSubassembly,
		deletSubassembly
	} from "@/api/mes/wmsPieceOutRecord.js"
	export default {
		data() {
		    return {
				//工业条码自动聚焦
				focusFoIndustry:true,
				focusComputed:false,
				//解析的码数据
				getCode:{
					//工业条码
					Industry:null,
					//组件
					computed:null,
				},
				//控制明细区是否展开
				open:true,
				//获取到的数据
				form:{
					list:[{
						name:1,
						id:3
					},{
						name:2,
						id:4
					}]
				},
				//要删除的信息
				item:{},
				//提示信息
				messageText:null,
				msgType:'info'
		    }
		},
		methods: {
			/**
			 * 扫码方法
			 * @param {Object} value {industry || number }
			 */
			iconClick(value){
				const _this = this;
				uni.scanCode({
					// 是否只能从相机扫码，不允许从相册选择图片
					onlyFromCamera:true,
					// 扫码类型
					scanType: ['barCode', 'qrCode'],
					success: function(res) {
						value === 'industry' ? _this.getIndustry(res.result) : value;
						value === 'subassembly' ? _this.getSubassembly(res.result) : value;
					}
				})
			},
			/**
			 * 扫描工业条码
			 * @param {Object} pieceBarcode 解析到的条码数据
			 */
			async getIndustry(pieceBarcode){
				const _self = this;
				//判断工业条码里面是否有,号，逗号后面是九位数
				_self.focusComputed = false;
				if(pieceBarcode ==undefined || pieceBarcode == null|| pieceBarcode.length < 11) return
				if(pieceBarcode.indexOf(',') === -1 ||pieceBarcode.split(',').length !=2 ||pieceBarcode.split(',')[1].length != 9){
					this.updateMessage('error','该工业条码不符合规范')
					return 
				}
				try{
					
					//获取物料信息
					const {materialCode,materialName,specification1} = await fnGetMaterial(pieceBarcode);
					 //获取组件信息
					const list = await this.getSubassemblyList(pieceBarcode)
					 //把所有信息存入form中
					 _self.form = Object.assign({},{materialCode,materialName,specification1,list,Industry:pieceBarcode})
					 _self.open = false
					 _self.focusComputed = true;
				}catch(e){
					//TODO handle the exception
					_self.updateMessage('error','未查到相关数据')
					_self.form = Object.assign({})
				}
				 
				/**
				 * 通过id获取物料信息
				 * @param {Object} pieceBarcode 扫描的工业条码
				 */
				async function fnGetMaterial(pieceBarcode){
					//从pieceBarcode截取逗号前面的数据用作id
					const id = parseInt(pieceBarcode.split(',')[0]);
					let data = [];
					await getMaterial(id).then(function(res){
						data = res.data
					})
					return data;
				}
			},
			/**
			 * 扫描组件条码
			 * @param {Object} code
			 */
			async getSubassembly(componentCode){
				const _self = this;
				// _self.focusComputed = false;
				//判断条码是否符合规范
				if(componentCode === null || componentCode ==='' ||componentCode === undefined) return _self.focusComputed = true
				
				//查询组件表是否有这个组件，没有则添加，有则结束
				if(!await fnInsertSubassembly(this.form.Industry,componentCode))  {
					_self.focusComputed = true
					return _self.updateMessage('warn','该组件已被扫描')
				}
				//重新查询数据
				const list = await _self.getSubassemblyList(_self.form.Industry)
				
				//把所有信息存入form中
				_self.form = Object.assign({},_self.form,{list});
				_self.getCode.computed = null;
				_self.focusComputed = true
				/**
				 * 查询组件表是否有这个组件，没有则添加 
				 * @param {Object} Industry
				 * @param {Object} componentCode
				 */
				async function fnInsertSubassembly(Industry,componentCode){
					let data = false;
					await insertSubassembly(Industry,componentCode).then(res=>{
						data = true
					})
					return data
				}
			},
			/**
			 * 通过工业条码查询组件信息
			 * @param {Object} pieceBarcode
			 */
			async getSubassemblyList(pieceBarcode){
				let data = [];
				await getSubassembly(pieceBarcode).then(res => {
					data = res.data
				})
				return data
			},
			/**
			 * 删除明细
			 * @param {Object} 要删除明细的数据
			 */
			deleteList(item){
				this.item = item
				this.$refs.alertDialog.open()
			},
			/**
			 * 弹出框确认按钮
			 */
			async dialogConfirm(){
				const _self = this;
				await deletSubassembly(this.item.id).then(async res => {
					this.$refs.alertDialog.close()
					this.updateMessage('success','删除成功')
					//重新查询数据
					const list = await this.getSubassemblyList(_self.form.Industry)
					
					//把所有信息存入form中
					_self.form = Object.assign({},_self.form,{list})
				})
			},
			/**
			 * 弹出框取消按钮
			 */
			dialogClose(){
				this.updateMessage('info','取消删除')
			},
			/**控制提示框的类型和文字
			 * @param {Object} type {'info'：消息，'success'：'成功‘，'error':'失败','warn':'警告'}
			 * @param {Object} text
			 */
			updateMessage(type,text){
				this.messageText = text
				this.msgType = type
				this.$refs.message.open()
			}
		}
	}
</script>

<style>
	page{
		padding-top: 10px;
		background-color: #ffffff ;
	}
</style>
<style scoped lang="scss">
	.form {
		width: 90%;
		margin: 0 auto;
		color: black;
		font-size:40rpx;
	}
	.form text {
		margin-left: 20%;
	}
	
</style>