<!-- 初始化标签 -->
<template>
	<view class="container-wrap">
		<uni-nav-bar title="新建标签" :status-bar="true" background-color="#3F92F9" color="#FFF">
			<view slot="left">
				<u-icon name="account-fill" color="#FFF" size="35"></u-icon>
			</view>
			<view slot="right" @tap="$utils.back()">
				<span style="color: #FFFFFF;">返回</span>
			</view>
		</uni-nav-bar>
		<view class="container">
			<scroll-view
				scroll-y="true" 
				style="height: calc(100vh - 150rpx);padding-bottom: 50rpx;">
				<view class="form">
					<view class="title">
						物料信息
					</view>
					<view class="row flex-start">
						<view class="label">物料编号：</view>
						<view class="value">{{ query.code }}</view>
					</view>
					<view class="row flex-start">
						<view class="label">物料名称：</view>
						<view class="value">{{ query.name }}</view>
					</view>
					<view class="row flex-start">
						<view class="label">物料分类：</view>
						<view class="value">{{ query.categoryCode }}</view>
					</view>
					<view class="row flex-start">
						<view class="label">门幅：</view>
						<view class="value">{{ query.width }}</view>
					</view>
					<view class="row flex-start">
						<view class="label">克重：</view>
						<view class="value">{{ query.unitWeight }}</view>
					</view>
					<view class="btn">
						<u-button throttleTime="300" type="default" @click="toChoose(query,3)"> + 选择物料</u-button>
					</view>
					<view class="row" style="margin-top: 40rpx;">
						<view class="label">选择仓库：</view>
						<view class="value">
							<my-select @change="selectHandle"></my-select>
						</view>
					</view>
					<view class="row">
						<view class="label">物料长度：</view>
						<u-input v-model="quantity" type="number" :adjustPosition="true" :border="true" border-color="#000" placeholder="请输入物料长度"/>
					</view>
				</view>
			</scroll-view>
			<view class="footer">
				<my-fixed-button text="绑定RFID标签" :customClick="true" @click="bind"></my-fixed-button>
			</view>
		</view>
	</view>
</template>

<script>
	import DateFormat from '../../js_sdk/xfl-DateFormat/DateFormat.js';
	export default {
		data() {
			return {
				type: 1, // 当前页面类型 1打印二维码标签 2绑定RFID标签
				query:[],
				quantity: '',
				plcCode: 1
			}
		},
		onLoad(option) {
			// 获取当前页面类型
			this.type = option.type || 1
			// 获取选中的物料
			uni.$on('materialcfm', res => {
				console.log(res)
				this.query = res[0]
			})
			uni.$on('clear', res => {
				// this.query = {}
				this.quantity = ''
			})
		},
		onUnload() {
			uni.$off('materialcfm')
			uni.$off('clear')
		},
		onShow() {
			
		},
		methods: {
			bind() {
				if(!this.query.code) {
					return this.$msg.showToast('请选择物料！')
				}
				if(!this.quantity) {
					return this.$msg.showToast('请输入物料长度！')
				}
				let data = {
					materialCode: this.query.code,
					quantity: this.quantity,
					plcCode: this.plcCode
				}
				this.$utils.open(`/pages/tag/tag-init-scan?data=${this.$utils.object2Code(data)}`)
			},
			/* 下拉选择 */
			selectHandle(data) {
				console.log(data)
				this.plcCode = data.newVal
			},
			// 获取物料
			toChoose(item,type){
				let items = JSON.stringify(this.query);
				// #ifdef H5
					items = encodeURIComponent(JSON.stringify(this.query));
				// #endif
				this.$utils.open(`/pages/material-tree/material-tree?arr=${items}&type=${type}`)
			},
			clear(){
				this.query=[];
				this.isChoose=[]
			}
		}
	}
</script>

<style lang="scss" scoped>
@import '../../static/css/mycss.scss';
.container-wrap {
	background-color: #FFFFFF;
	.container {
		.form {
			padding: 0 50rpx;
			.title {
				padding: 30rpx 0;
				font-size: 36rpx;
				font-weight: bold;
				text-align: center;
			}
			.row {
				padding-bottom: 10rpx;
				position: relative;
				&:last-child {
					padding-bottom: 0;
				}
				.label {
					font-size: 28rpx;
				}
				.value {
					flex: 1;
				}
				// &.bottom-line {
				// 	&::after {
				// 		content: '';
				// 		display: block;
				// 		width: 100%;
				// 		border-bottom: 1px solid #000000;
				// 	}
				// }
			}
			.btn {
				padding: 20rpx 0;
			}
		}
	}
}
/deep/ .u-select__body__picker-view__item {
	.u-line-1 {
		font-size: 36rpx;
	}
}
/deep/ .u-select__header__btn {
	font-size: 36rpx;
}
</style>