<template>
	<view>
		<u-navbar back-text="返回" title="简单生产领料" :background="background"></u-navbar>
		<u-form ref="testForm">
			<u-form-item :border-bottom="false">
				<p>单号:</p>
				<u-input :focus="focusShipRequest" :border="true" v-model="shipRequestName" 
				placeholder="请输入单号" @confirm="serachMaterialList" /><!-- @blur="pointblur"-->
				<u-button @click="spilitbox" type="primary" size="default">拆分</u-button>
			</u-form-item>
			<u-form-item :border-bottom="false">
				<p>条码:</p>
				<u-input :border="true" v-model="barCode" placeholder="请扫描条码" :focus="focusBarCode"
					@confirm="ship" />
				<switch :checked="ischecked" @change="changeischecked" />
				<p v-show="ischecked">出库</p>
				<p v-show="!ischecked">取消出库</p>
			</u-form-item>
		</u-form>
		<view class="uni-padding-wrap uni-common-mt">
			<uni-segmented-control :current="current" :values="items" :style-type="styleType"
				:active-color="activeColor" @clickItem="clickitem" />
		</view>
		<view>
			<view v-show="current === 0">
				<view class="material">
					<u-form ref="materialform">
						<uni-z-table :style="{'height': tabH+'px'}" :tableData="requestData" :columns="matColumns"
							:showBottomSum="true" :rowNumbers="true" :pagination="true" @onSelect="selectTableRow">
						</uni-z-table>
					</u-form>
				</view>
			</view>

			<view v-show="current === 1">
				<uni-z-table :style="{'height': tabH+'px'}" :tableData="materialKwData" :columns="matLocation"
					:showBottomSum="true" :rowNumbers="true" :pagination="true">
				</uni-z-table>
			</view>


			<view v-show="current === 2">
				<uni-z-table :style="{'height': tabH+'px'}" :tableData="scanData" :columns="materialLocationData"
					:showBottomSum="true" :rowNumbers="true" :pagination="true">
				</uni-z-table>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				shipRequestName: "", //单据号				
				items: ['材料列表', '库位信息', '已出库列表'], //分栏器的选项卡 应发，实发，待发，物料描述，行号
				tabH: 800, //表格的宽度
				ischecked: true, //默认出库
				background: {
					backgroundImage: 'linear-gradient(45deg, rgb(28, 187, 180), rgb(141, 198, 63))'
				}, //返回按钮的样式
				switched: [{
						value: 'Y',
						name: "取消"
					},
					{
						value: 'N',
						name: "入库"
					},
				], //开关数据源
				//分栏器的样式
				styles: [{
						value: 'button',
						text: '按钮',
						checked: true
					},
					{
						value: 'text',
						text: '文字'
					}
				],
				//style:{color: '#2979FF'},
				colors: ['#007aff', '#4cd964', '#dd524d'],
				current: 0,
				colorIndex: 0,
				activeColor: '#007aff',
				styleType: 'text',
				loading: false,
	//-----------------上方是template标签中的分栏器等需要的样式，下方是双向绑定需要使用到的数据
				requestData: [], //材料列表
				materialKwData: [], //库位的信息	
				scanData: [], //已扫描箱
				shipRequestDetailName: "",
				barCode: "", //条码
				focusBarCode: false, //焦点是否被选中
				focusShipRequest: true, //默认焦点在单号
				siteName:"",
				userId:"",
				//对应的材料列表   
				matColumns: [{
						title: '序号',
						field: "SHIPREQUESTDETAILNAME",
						width: 120,
						sort: true,
						align: "left"
					},
					{
						title: '物料编号',
						field: "MATERIALSPECNAME",
						width: 260,
						sort: true,
						align: "left"
					},
					{
						title: '物料描述',
						field: "MATERIALSPECDESCRIPTION",
						width: 280,
						sort: true,
						align: "left"
					},
					{
						title: '应发数量',
						field: "REQUESTQUANTITY",
						width: 150,
						sort: true,
						align: "right"
					},
					{
						title: '实发数量',
						field: "ASSIGNEDQUANTITY",
						width: 150,
						sort: true,
						align: "right"
					},
					{
						title: '待发数量',
						field: "DFQTY",
						width: 150,
						sort: true,
						align: "right"
					}
				],
				
				//对应的相应的库位信息
				matLocation: [{
						title: '仓库',
						field: "ERPLOCATION",
						width: 200,
						sort: true,
						align: "left"
					},
					{
						title: '库位',
						field: "LOCATIONNAME",
						width: 320,
						sort: true,
						align: "left"
					},
					{
						title: '生产日期',
						field: "MAKEDATE",
						width: 400,
						sort: true,
						align: "center"
					},
					{
						title: '库存',
						field: "QTY",
						width: 150,
						sort: true,
						align: "right"
					}
				],

				//对应已出库的表格
				materialLocationData: [{
						title: '行号',
						field: "ROWNO",
						width: 120,
						sort: true,
						align: "right"

					},
					{
						title: '条码编号',
						field: "PACKINGCODE",
						width: 280,
						sort: true,
						align: "left"
					},
					{
						title: '物料编号',
						field: "MATERIALSPECNAME",
						width: 260,
						sort: true,
						align: "left"
					},
					{
						title: '数量',
						field: "QTY",
						width: 150,
						sort: true,
						align: "right"
					},
				]
			}
		},
		
		mounted() {
			this.tabH = this.$GetRemainingHeight(4, 0); //定义表格的高度
			let that=this
			uni.getStorage({
				key:"sitename",
				success(res) {
					that.siteName=res.data
				}
			})
			uni.getStorage({
				key:"userid",
				success(res) {
					that.userId=res.data
				}
			})	
		},
		
		methods: {				
			//点击拆分按钮
			spilitbox() {
				uni.navigateTo({
					url: './SplitBoxPage' //跳转到拆分页面
				})
			},
			
			//设置开关的选中状态
			changeischecked() {
				this.ischecked = !this.ischecked 
				//console.log("选中状态", this.ischecked)
			},
			
			//分栏器的点击事件
			clickitem(e) {
				if (this.current !== e.currentIndex) {
					this.current = e.currentIndex //获取当前选中的index
				}
			},
			
			//焦点初始化，让页面所有的焦点同时只能存在一个
			initfocus() {
				this.focusBarCode = false
				this.focusShipRequest = false
			},
			//获取焦点的公共方法
			getfocus(nextfocus) {
				this.initfocus()
				this[nextfocus]
				this.$nextTick(() => { //vue是数据全部修改后才进行的视图更新，哪nextTick函数就是为了拿到最新的数据，还不懂的可以去百度
					this[nextfocus] = true
				})
			},
			
			//选中table的当前选中行时，对数据进行一系列的操作
			selectTableRow(e) {
				var matId = e.row["MATERIALSPECNAME"];
				this.getmaterialkw(matId);
				this.shipRequestDetailName = e.row["SHIPREQUESTDETAILNAME"]
			},
		
			//扫描单据号输入框-----------回车调用方法
			serachMaterialList() {
				if (this.shipRequestName != "") //为空的话不进行查询操作
				{
					this.getmateriallist() //获取材料信息
					this.getscandata() //获取已扫描箱子
					this.getfocus('focusBarCode')//获取焦点
				} else return
			},
			
			//扫描条码输入框---------------回车调用方法
			ship() {
				if (this.shipRequestName == "") {
					this.$showMessage("请先扫描单号");
					this.getfocus('focusShipRequestName') //焦点移动到单号
					return;
				}
				if (this.barCode == "") {
					this.$showMessage("请扫描条码");
					this.getfocus('focusBarCode') //焦点移动到条码
					return;
				} else {
					this.scanBarCodeShip()
					this.getscandata()//请求已出库列表	
					}
			},
					
			
			//扫描条码出库的真正方法
			scanBarCodeShip() {
				//判断开启取消按钮是否启用
				if(this.ischecked){//如果switch为选中状态，代表出库
					this.$MyRequest('/request/outstock', {
						barCode: this.barCode, //条码
						billNo: this.shipRequestName, //单号
						userId: this.userId, //登录用户
						site: this.siteName, //工厂名称
						detailRowNo: this.shipRequestDetailName, //序号
						flag: this.ischecked //是否出库的标志
					}).then(res=>{
						console.log(res)
					     this.$showMessage(res.data.message) //执行出库后返回的消息
					     this.barCode = ''; //清空条码，继续扫
					     this.getfocus('focusBarCode')//获取焦点，好继续扫描
					}).catch(err=>{
						this.barCode = '';//请空条码
						this.getfocus('focusBarCode')
						this.$showMessage(err)
						})
				}else{//选择器为关闭状态，执行取消出库操作
					uni.showModal({
						title: "提示",
						content: "是否确定取消出库！",
						success: (conf) => {
							if (conf.confirm) {
								//发送取消出库请求
								this.$MyRequest('/request/outstock', {
									barCode: this.barCode, //条码
									billNo: this.shipRequestName, //单号
									userId: this.userId, //登录用户
									site: this.siteName, //工厂名称
									detailRowNo: this.shipRequestDetailName, //序号
									flag: this.ischecked //是否取消出库的标志
								}).then(res=>{						
									this.$showMessage(res.data.message) //执行出库后返回的消息
									this.barCode = ''; //清空条码，继续扫
									this.getfocus('focusBarCode')//获取焦点，好继续扫描	
								}).catch(err=>{this.$showMessage(err)})
				    	} else if (res.cancel) {
								console.log('用户点击取消');
								this.barCode = '';
								this.getfocus('focusBarCode')
							}
						},
					});	
				}
			},
			
			//获取已出库列表方法
			getscandata() {
				this.$MyRequest('/request/getdetail', {
					shipRequestName: this.shipRequestName
				}).then(res => {
					if (res.data.success)
						this.scanData = res.data.resultObj //接数据
				}).catch(err => {
					this.$showMessage(err)
				})
			},
			
			//获取选中当前行的库位信息     
			getmaterialkw(material) {
				this.$MyRequest('/request/getlocation', {
					materialSpecName: material
				}).then(res => {
					if (res.data.success)
						this.materialKwData = res.data.resultObj //接收数据
					else this.$showMessage(res.data.message)
				}).catch(err => {
					this.$showMessage(err)
				})
			},
			
			//获取材料信息
			getmateriallist() {
				this.$MyRequest('/request/getlist', {
					shipRequestName: this.shipRequestName
				}).then(res => {
					if (res.data.success)
						this.requestData = res.data.resultObj //接数据
					else this.$showMessage(res.data.message)
				}).catch(err => {
					this.$showMessage(err)
				})
			},
		}
	}
</script>

<style lang="scss">

</style>