<template>
	<view class="zd_container">
		<!-- 物料入库 -->
		<nav-bar :title="title"></nav-bar>
		<view class="zd_content">
			<view class="zd_wrapper">
				<view class="zd-row border-bottom">
					<view class="zd-col-7">
						<span class="filter_label">物料编码</span>
					</view>
					<view class="zd-col-17">
						<input type="text" class="filter_input" v-model="materCode" @tap="toJump">
					</view>
				</view>
				<view class="zd-row border-bottom">
					<view class="zd-col-7">
						<span class="filter_label filter_input_disabled">物料名称</span>
					</view>
					<view class="zd-col-17">
						<input type="text" class="filter_input filter_input_disabled" v-model="materName" disabled>
					</view>
				</view>
				<view class="zd-row border-bottom">
					<view class="zd-col-7">
						<span class="filter_label filter_input_disabled">物料规格</span>
					</view>
					<view class="zd-col-17">
						<input type="text" class="filter_input filter_input_disabled" v-model="materSpec" disabled>
					</view>
				</view>
				<view class="zd-row border-bottom">
					<view class="zd-col-6">
						<span class="filter_label">物料单重</span>
					</view>
					<view class="zd-col-16">
						<NumberInput v-model="singleWeight"/>
					</view>
					<view class="zd-col-2"><span class="filter_unit">KG</span></view>
				</view>
				<view class="zd-row border-bottom">
					<view class="zd-col-7">
						<span class="filter_label">物料批次</span>
					</view>
					<view class="zd-col-17">
						<input type="text" class="filter_input" v-model="materPcsn">
					</view>
				</view>
				<view class="zd-row border-bottom">
					<view class="zd-col-7">
						<span class="filter_label">供应商</span>
					</view>
					<view class="zd-col-17 filter_select">
						<uni-data-select v-model="index" :localdata="options" @change="selectChange"></uni-data-select>
					</view>
				</view>
				<view class="zd-row border-bottom">
					<view class="zd-col-7">
						<span class="filter_label">料桶编码</span>
					</view>
					<view class="zd-col-17 filter_select">
						<!-- <zxz-uni-data-select v-model="index1" filterable :localdata="options1"></zxz-uni-data-select> -->
						<view class="input-wrapper">
							<input 
							class="input-field" 
							v-model="vehicleCode" 
							placeholder="请输入或选择料桶编码" 
							placeholder-class="placeholder"
							@input="onInput"
							/>
							<picker 
							class="picker" 
							mode="selector" 
							:range="vehicleOptions" 
							:value="selectedIndex"
							@change="onPickerChange"
							>
							<view class="picker-trigger">
								<!-- <text class="picker-text">></text> -->
								<text class="uni-icons zd_icon_wraper uniui-bottom" style="color: rgb(153, 153, 153); font-size: 14px;"></text>
							</view>
							</picker>
						</view>
					</view>
				</view>
				<view class="zd-row border-bottom">
					<view class="zd-col-7">
						<span class="filter_label">仓位编码</span>
					</view>
					<view class="zd-col-17 filter_select">
						<uni-data-select v-model="index2" :localdata="options2" @change="selectChange2"></uni-data-select>
					</view>
				</view>
			</view>
		</view>
		<view class="zd-row submit-bar">
			<button class="zd-col-7 button-default" @tap="toEmpty">清空</button>
			<button class="zd-col-7 button-primary" :class="{'button-info': JSON.stringify(currentData) === '{}'}" :disabled="disabled" @tap="toSure">组盘确认</button>
			<button class="zd-col-8 button-primary" :class="{'button-info': JSON.stringify(currentData) === '{}'}" :disabled="disabled" @tap="toSure2">组盘并绑定</button>
		</view>
	</view>
</template>

<script>
	import NavBar from '@/components/NavBar.vue'
	import SearchBox from '@/components/SearchBox.vue'
	import NumberInput from '@/components/NumberInput.vue'
	import {vehiclelist, suppList, structList, combination, groupAndBind} from '@/utils/getData4.js'
	
	export default {
		components: {
			NavBar,
			SearchBox,
			NumberInput
		},
		data() {
			return {
				title: '',
				currentData: {},
				materId: '',
				materCode: '',
				materName: '',
				materSpec: '',
				singleWeight: '',
				materPcsn: '',
				options: [],
				index: '',
				options2: [],
				index2: '',
				// options1: [{text:'t1', value: 't1'}, {text:'t2', value: 't2'}],
				// index1: '',
				vehicleCode: '',
				selectedIndex: 0,
				vehicleOptions: [],
				// vehicleOptions: [
				// 	'TB-001',
				// 	'TB-002',
				// 	'TB-003',
				// 	'TB-004',
				// 	'TB-005',
				// 	'TB-006',
				// 	'TB-007',
				// 	'TB-008'
				// ],
				disabled: false
			};
		},
		onLoad (options) {
			this.title = options.title
			this._suppList()
			this._vehiclelist()
			this._structList()
		},
		onShow () {
			if (this.$store.getters.publicObj !== '') {
				this.currentData = this.$store.getters.publicObj
				// 赋值
				this.materCode = this.currentData.material_code
				this.materName = this.currentData.material_name
				this.materSpec = this.currentData.material_spec
				this.singleWeight = this.currentData.single_weight
				this.materPcsn = this.currentData.pcsn
				this.materId = this.currentData.material_id
				this.$store.dispatch('setPublicObj', '')
			}
		},
		methods: {
			async _structList () {
				try {
					let res = await structList()
					if (res) {
						this.options2 = res.data
					} else {
						this.options2 = []
					}
				} catch (e) {
					this.options2 = []
				}
			},
			selectChange2 (e) {
				this.index2 = e
			},
			onInput(e) {
				// console.log('输入内容:', e.detail.value)
			},
			onPickerChange(e) {
				const index = e.detail.value
				this.selectedIndex = index
				this.vehicleCode = this.vehicleOptions[index]
			},
			selectChange (e) {
				this.index = e
			},
			selectChange1 (e) {
				this.index1 = e
			},
			async _suppList () {
				try {
					let res = await suppList()
					if (res) {
						this.options = res.data
					} else {
						this.options = []
					}
				} catch (e) {
					this.options = []
				}
			},
			/** 料桶编码下拉框*/
			async _vehiclelist () {
				try {
					let res = await vehiclelist()
					if (res) {
						this.vehicleOptions = res.data.map(item => item.value);
					} else {
						this.vehicleOptions = []
					}
				} catch (e) {
					this.vehicleOptions = []
				}
			},
			toJump () {
				uni.navigateTo({
					url: '/pages/common/mater-list?title=查询物料'
				})
			},
			toEmpty () {
				this.materCode = ''
				this.materName = ''
				this.materSpec = ''
				this.singleWeight = ''
				this.materPcsn = ''
				this.materId = ''
				this.currentData = {}
				this.index = ''
				this.vehicleCode = ''
				this.index2 = ''
				this.disabled = false
				this._vehiclelist()
				this._structList()
			},
			toSure () {
				this.disabled = true
				if (JSON.stringify(this.currentData) === '{}') {
					this.disabled = false
					return
				}
				if (Number(this.singleWeight) > 2000) {
					uni.showModal({
						title: '提示',
						content: '输入的重量'+ Number(this.singleWeight) +'过大，是否继续？',
						confirmColor: '#ff6a00',
						success: (res) => {
							if (res.confirm) {
								this._combination()
							} else if (res.cancel) {
								this.disabled = false
							}
						}
					})
				} else {
					this._combination()
				}
			},
			async _combination () {
				try {
					let selobj = this.options.find(item => item.value === this.index)
					let res = await combination(this.vehicleCode, this.materPcsn, this.materId, selobj.value, selobj.text, this.singleWeight)
					uni.showToast({
						title: res.message,
						icon: 'none'
					})
					this.toEmpty()
					this.disabled = false
				} catch (e) {
					this.disabled = false
				}
			},
			toSure2 () {
				this.disabled = true
				if (JSON.stringify(this.currentData) === '{}') {
					this.disabled = false
					return
				}
				if (Number(this.singleWeight) > 2000) {
					uni.showModal({
						title: '提示',
						content: '输入的重量'+ Number(this.singleWeight) +'过大，是否继续？',
						confirmColor: '#ff6a00',
						success: (res) => {
							if (res.confirm) {
								this._groupAndBind()
							} else if (res.cancel) {
								this.disabled = false
							}
						}
					})
				} else {
					this._groupAndBind()
				}
			},
			async _groupAndBind () {
				try {
					let selobj = this.options.find(item => item.value === this.index)
					let res = await groupAndBind(this.vehicleCode, this.materPcsn, this.materId, selobj.value, selobj.text, this.singleWeight, this.index2)
					uni.showToast({
						title: res.message,
						icon: 'none'
					})
					this.toEmpty()
					this.disabled = false
				} catch (e) {
					this.disabled = false
				}
			}
		}
	}
</script>

<style lang="stylus">
.input-container {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 30rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
  margin-bottom: 40rpx;
}

.input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
//   border: 2rpx solid #e0e0e0;
  border-radius: 12rpx;
  overflow: hidden;
  transition: border-color 0.3s;
}

.input-wrapper:focus-within {
  border-color: #007AFF;
}

.input-field {
  flex: 1;
  height: 80rpx;
//   padding: 0 24rpx;
  font-size: 28rpx;
  color: #333;
}

.placeholder {
  color: #999;
  font-size: 28rpx;
}

.picker {
  width: 80rpx;
  height: 80rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f8f8f8;
  border-left: 2rpx solid #e0e0e0;
}

.picker-trigger {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.picker-text {
  font-size: 24rpx;
  color: #666;
}

.hint {
  margin-top: 20rpx;
  font-size: 24rpx;
  color: #999;
  text-align: center;
}

.result-section {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 40rpx;
  display: flex;
  flex-direction: column;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
}

.result-label {
  font-size: 28rpx;
  color: #666;
  margin-bottom: 16rpx;
}

.result-value {
  font-size: 36rpx;
  font-weight: bold;
  color: #007AFF;
}

.history-section {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 30rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
}

.history-title {
  font-size: 28rpx;
  color: #333;
  margin-bottom: 24rpx;
  display: block;
}

.history-list {
  display: flex;
  flex-wrap: wrap;
  gap: 20rpx;
}

.history-item {
  background-color: #f0f8ff;
  border-radius: 12rpx;
  padding: 16rpx 24rpx;
  border: 1rpx solid #cce5ff;
}

.history-code {
  font-size: 26rpx;
  color: #007AFF;
}
</style>
