<template>
	<view class='container'>
		<tui-list-cell :lineLeft="false">
			<view class="tui-item-box">
				<view class="tui-msg-box">
					<image src="../../static/stockin.png" class="tui-msg-pic" mode="widthFix"></image>
					<view class="tui-msg-item">
						<view v-if="info" class="tui-msg-name">请先拍照再确认明细信息</view>
					</view>
				</view>
			</view>
		</tui-list-cell>
		<tui-list-cell :lineLeft="false">
			<view class="tui-item-box">
				<view class="tui-msg-box">
					<view v-if="tableData" class="tui-msg-item">
						<button v-if="tableData.length > 0" @click="checkIn()">确认入库执行</button>
					</view>
					<view class="tui-msg-item" style="margin-left: 10px;">
						<button v-if="imgList && imgList.length > 0"
							@click="pickImage()">已选择{{imgList.length}}张图片</button>

						<button v-else @click="pickImage()">请拍照</button>
					</view>
				</view>
			</view>
		</tui-list-cell>
		<view class="uni-container" v-if="tableData">
			<uni-table ref="table" :loading="loading" border stripe emptyText="暂无更多数据">
				<uni-tr>
					<uni-th width="150" align="center">条码号</uni-th>
					<uni-th align="center">毛重 + 件数</uni-th>
					<uni-th width="204" align="center">操作</uni-th>
				</uni-tr>
				<uni-tr v-for="(item, index) in tableData" :key="index">
					<uni-td>
						<view class="name">{{ item.CNTRNO }}</view>
					</uni-td>
					<uni-td align="center">{{ item.KGS }}|{{ item.ACCEPT_PKGS == null? item.PKGS : item.ACCEPT_PKGS }}</uni-td>
					<uni-td>
						<view class="uni-group">
							<button class="uni-button" size="mini" type="primary" v-if="!item.ISEXECUTE"
								@click="edit(item)">修改</button>
							<button class="uni-button" size="mini" type="warn" v-if="!item.ISEXECUTE"
								@click="del(item)">删除</button>
						</view>
					</uni-td>
				</uni-tr>
			</uni-table>
		</view>
		<template v-if="info">
			<uni-card :title="info.GOODSNAME">
				<view class="example">
					<uni-forms ref="form" label-position="left">
						<uni-forms-item label="条码号" name="CNTRNO">
							<uni-easyinput type="text" :disabled="true" v-model="info.CNTRNO" />
						</uni-forms-item>
						<uni-forms-item label="原箱号" name="OLD_CNTRNO">
							<uni-easyinput type="text" v-model="info.OLD_CNTRNO" :disabled="true" />
						</uni-forms-item>
						<uni-forms-item label="封号" name="SEALNO">
							<uni-easyinput type="text" v-model="info.SEALNO" :disabled="true" />
						</uni-forms-item>
						<uni-forms-item v-if="areaList" label="库位" name="AREACODE">
							<uni-data-select v-model="info.AREACODE" :localdata="areaList" @change="change"
								label="库位选择">
							</uni-data-select>
						</uni-forms-item>
						<uni-forms-item label="毛重(千克)" name="KGS">
							<uni-easyinput type="number" v-model="info.KGS" placeholder="请输入毛重" />
						</uni-forms-item>
						<uni-forms-item label="净重(千克)" name="NETWEIGHT">
							<uni-easyinput type="number" v-model="info.NETWEIGHT" placeholder="请输入净重" />
						</uni-forms-item>
						<uni-forms-item label="体积(立方米)" name="CBM">
							<uni-easyinput type="number" v-model="info.CBM" placeholder="请输入体积" />
						</uni-forms-item>
						<uni-forms-item label="件数" name="PKGS">
							<uni-easyinput type="number" v-model="info.PKGS" placeholder="请输入件数" />
						</uni-forms-item>
						<uni-forms-item label="规格型号" name="GOODSMODEL">
							<uni-easyinput type="text" v-model="info.GOODSMODEL" :disabled="true"
								placeholder="请输入规格型号" />
						</uni-forms-item>
						<uni-forms-item label="箱型" name="CTNALL">
							<uni-easyinput type="text" v-model="info.CTNALL" :disabled="true" placeholder="请输入箱型" />
						</uni-forms-item>
						<uni-forms-item label="计费单位" name="STORAGEUNIT">
							<uni-easyinput type="text" v-model="info.STORAGEUNIT" :disabled="true"
								placeholder="请输入计费单位" />
						</uni-forms-item>
						<uni-forms-item label="计费数量" name="STORAGEUNITCOUNT">
							<uni-easyinput type="number" v-model="info.STORAGEUNITCOUNT" placeholder="请输入计费数量" />
						</uni-forms-item>
					</uni-forms>
					<!-- <button v-if="isCheck" @click="addTable()">添加信息</button> -->
					<button @click="addTable()">添加信息</button>
				</view>
			</uni-card>
		</template>

	</view>

</template>

<script>
	export default {
		data() {
			return {
				isshow: false,
				isbinding: true,
				key: '',
				temp: '',
				info: null,
				loading: false,
				areaList: [],
				imgList: [],
				tempArea: '',
				tableData: [],
			}
		},
		onReady() {
			// 需要在onReady中设置规则
			// this.$refs.form.setRules(this.rules)
		},
		onLoad: function(option) {
			var _this = this
			// _this.isCheck = false
			// console.log('跳转信息：', JSON.parse(decodeURIComponent(option.info)))
			if (option.info) {
				let $info = JSON.parse(decodeURIComponent(option.info))
				_this.info = JSON.parse(JSON.stringify($info))
				_this.temp = JSON.parse(JSON.stringify($info))
				// _this.getAreaList(_this.info.WMSPLANID)
				_this.getInfo()
			}
		},
		onShow: function() {
			var _this = this

			_this.getInfo()
		},
		// onUnload() {
		// 	// 移除监听事件      
		// 	uni.$off('scancodedata')
		// },
		// onHide() {
		// 	// 移除监听事件
		// 	uni.$off('scancodedata')
		// },
		methods: {
			change(e) {
				// console.log('e:',e);
				var _this = this
				_this.$set(_this.info, 'AREACODE', e)
				_this.tempArea = e
			},
			getInfo: function() {
				uni.showLoading()
				this.tui.request("/StockIn/GetStockInDoGoods?id=" + this.info.WMSPLANID, "GET", null, false, false,
						false)
					.then((
						res) => {
						console.log(res)
						if (res.Code == 0) {
							this.tableData = res.Data[0]
							this.areaList = res.Data[1]
							// console.log(this.list)
							uni.hideLoading()
						} else if (res.Code == -1) {
							this.tui.toast(res.Message, 2000, 'none')
						}
					}).catch((err) => {
						this.tui.toast('异常:' + err, 2000, 'none')
						uni.hideLoading()
					})
			},
			getAreaList: function(id) {
				let postData = {
					planId: id
					//CNTRNO: "12279191023582"
				}
				console.log(postData)
				uni.showLoading()
				this.tui.request("/StockIn/GetAreaCodeList", "POST", postData, false, false,
					false).then((
					res) => {
					console.log(res)
					if (res.Code == 0) {
						this.areaList = res.Data
						console.log('库位', this.areaList)
						uni.hideLoading()
					} else if (res.Code == -1) {
						this.tui.toast(res.Message, 2000, 'none')
					}
				}).catch((err) => {
					this.tui.toast('异常:' + err, 2000, 'none')
					uni.hideLoading()
				})
			},
			addTable: function() {
				console.log('重复检测', this.info.CNTRNO)
				let key = this.tableData.findIndex(item => {
					if (item.CNTRNO == this.info.CNTRNO) {
						return true
					}
				})
				console.log('重复检测', key)
				if (key == -1) {
					this.tableData.push(this.info)
					this.$set(this, 'info', {})
					this.temp.AREACODE = this.tempArea
					let _temp = JSON.parse(JSON.stringify(this.temp))
					this.$set(this, 'info', _temp)
				} else {
					this.tui.toast('请勿重复添加', 2000, 'none')
				}
			},
			edit: function(data) {
				let key = this.tableData.findIndex(item => {
					if (item.CNTRNO == data.CNTRNO) {
						return true
					}
				})
				this.tableData.splice(key, 1)
				this.$set(this, 'info', {})
				this.$set(this, 'info', data)
			},
			del: function(data) {
				let key = this.tableData.findIndex(item => {
					if (item.CNTRNO == data.CNTRNO) {
						return true
					}
				})
				this.tableData.splice(key, 1)
				this.$set(this, 'info', {})
				this.temp.AREACODE = this.tempArea
				let _temp = JSON.parse(JSON.stringify(this.temp))
				this.$set(this, 'info', _temp)
			},
			checkIn: function() {
				uni.showLoading()
				this.$refs.form.validate().then(res => {
					uni.hideLoading()
					// console.log('表单数据信息：', res);
					let postData = {
						GID: this.info.GID,
						WMSPLANID: this.info.WMSPLANID,
						CNTRNO:this.info.CNTRNO,
						InfoFiles: this.imgList,
						Goods: this.tableData
					}
					this.tui.request("/StockIn/StockInBatch", "POST", postData, false, false, false)
						.then((
							res) => {
							console.log(res)
							if (res.Code == 0) {
								this.tui.toast(res.Message, 2000, 'success')
								uni.navigateBack();
							} else if (res.Code == -1) {
								this.tui.toast(res.Message, 2000, 'none')
							}
						}).catch((err) => {
							this.tui.toast('异常:' + err, 2000, 'none')
						})
				}).catch(err => {
					uni.hideLoading()
					this.tui.toast('请检查表单!', 2000, 'none')
				})

			},
			pickImage: function() {
				console.log('==== picker  ====')
				uni.chooseImage({
					count: 1, //可选择数量，默认9
					sizeType: ['original'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['camera'], //从相册选择或从使用相机 
					success: (temp) => {
						// const tempFilePaths = res.tempFilePaths;
						const files = temp.tempFiles;
						// console.log(files[0])
						var path = files[0].path
						
						var filename = path.replace(/(.*\/)*([^.]+).*/ig,"$2")+".jpg"
						uni.showLoading()
						uni.uploadFile({
							url: this.tui.uploadUrl(), //仅为示例，非真实的接口地址
							fileType:"image",//ZFB必填,不然报错
							filePath: temp.tempFilePaths[0],//这个就是我们上面拍照返回或者先中照片返回的数组
							name: 'files',
							success: res => {
								console.log(res) 
								this.imgList.push({name: filename ,url:JSON.parse(res.data).data + filename})
								console.log(this.imgList)
								uni.hideLoading();
							},
							fail(err) {
								console.log(err)
								// this.tui.toast('上传失败', 2000, 'none')
								uni.hideLoading();
							}
						});
					}

				})
			}
		}
	}
</script>

<style>
	/* @import '../../static/style/thorui.css'; */
	.tui-msg-box {
		display: flex;
		align-items: center;
	}

	.example {
		padding: 15px;
		background-color: #fff;
	}

	.button-group {
		margin-top: 15px;
		display: flex;
		justify-content: space-around;
	}

	.form-item {
		display: flex;
		align-items: center;
	}

	.button {
		display: flex;
		align-items: center;
		height: 35px;
		margin-left: 10px;
	}

	.tui-msg-pic {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		display: block;
		margin-right: 24rpx;
		flex-shrink: 0;
	}

	.tui-msg-item {
		max-width: 500rpx;
		/* min-height: 100rpx; */
		overflow: hidden;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.tui-msg-name {
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		font-size: 45rpx;
		line-height: 2;
		justify-content: space-between;
		color: #262b3a;
	}

	.tui-item-box {
		width: 100%;
		display: flex;
		align-items: center;
	}

	.tui-list-cell_name {
		padding-left: 20rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.tui-ml-auto {
		margin-left: auto;
	}

	.tui-right {
		margin-left: auto;
		margin-right: 34rpx;
		font-size: 26rpx;
		color: #999;
	}

	.tui-logo {
		height: 52rpx;
		width: 52rpx;
		flex-shrink: 0;
	}
</style>

<style lang='scss'>
	.fr-right-blue {
		float: right;
		font-family: 微软雅黑;
		color: #4977E7;
	}

	.fr-left-blue {
		float: left;
		font-family: 微软雅黑;
		color: #4977E7;
	}

	.fr-right-green {
		float: right;
		font-family: 微软雅黑;
		color: #11AE11;
	}

	.color-999 {
		color: #999;
	}

	.color-red {
		color: red;
	}

	.fr-right {
		float: right;
		font-family: 微软雅黑;
		color: #999;
	}

	.list-card {
		margin: 20upx 0;
		background-color: #ffffff;
		/* font-size: 28upx; */
		transform: all 1s;

		.card-head {
			padding: 20upx;
			height: 80upx;
			font-size: 35upx;
			box-sizing: border-box;
			border-bottom: 2upx solid #f5f5f5;
		}

		.card-body {
			padding: 20upx;
			display: flex;
			flex-wrap: wrap;

			text {
				width: 50%;
				font-size: 32upx;
				line-height: 55upx;
			}
		}

		.card-foot {
			height: 88upx;
			/* margin: 20upx 0; */
			padding: 0 20upx;
			border-top: 2upx solid #f5f5f5;
			border-bottom: none;
			line-height: 88upx;

			.btn {
				height: 60upx;
				font-size: 28upx;
				line-height: 60upx;
				margin: 14upx 0;
			}
		}
	}

	.tui-searchbox {
		padding: 30rpx 0;
		box-sizing: border-box;
		display: flex;
		align-items: center;
	}

	.tui-search-input {
		width: 100%;
		height: 66rpx;
		border-radius: 35rpx;
		padding: 0 30rpx;
		box-sizing: border-box;
		background: #f2f2f2;
		display: flex;
		align-items: center;
		flex-wrap: nowrap;
	}

	.tui-input {
		flex: 1;
		color: #333;
		padding: 0 16rpx;
		font-size: 28rpx;
	}

	.tui-input-plholder {
		font-size: 28rpx;
		color: #b2b2b2;
	}

	.fr-btn {
		float: right;
		height: 60upx;
		font-size: 28upx;
		line-height: 60upx;
		margin: 14upx 0;
	}

	;

	.uni-group {
		display: flex;
		align-items: center;
	}
</style>
-->
