<template>
	<view class="">
		<uni-popup ref="popup" :maskClick="false">
			<view class="uni-flex uni-column pop_customer">
				<view class="" style="padding:10rpx">
					<view class="uni-flex u-col-center uni-row space-between" style="padding: 10rpx 10rpx 20rpx 10rpx">
						<view class="" style="font-size: 35rpx;">
							{{title}}
						</view>
						<image style="width: 35rpx;height: 35rpx;" src="/static/icons/icons_close.svg"
							@click="closeRequestPopup()"></image>
					</view>
					<view class='split_line'></view>
					<view class="uni-flex uni-column" style="background-color: white; ">
						<view class="uni-flex uni-column">

							<view class="title " style="display: flex; align-items: center;padding: 10rpx;">
								<text style=" flex-shrink: 0;width: 25%;">生产线：</text>
								<view class="customerBorder" @click="showSelectLine">
									{{productionLineName}}
								</view>
								<u-select v-model="showProductLineSelect" mode="single-column" :list="productLineList"
									@confirm="confirmSelectLine"></u-select>

								<view class="">
									<image src="/static/icons/down.svg" mode=""
										style=" width: 40rpx;height: 40rpx;margin-left: 20rpx;" @click="showSelectLine">
									</image>
								</view>
							</view>


							<view class='split_line'></view>

							<view class="title " style="display: flex;align-items: center;padding: 10rpx;">
								<text style=" flex-shrink: 0; width: 25%;">物料代码：</text>
								<view class="customerBorder">
									{{itemCode}}
								</view>
								<u-select v-model="showItemCodeSelect" mode="single-column" :list="itemCodeList"
									@confirm="confirmSelectItem"></u-select>
								<view class="">
									<image src="/static/icons/down.svg" mode=""
										style=" width: 40rpx;height: 40rpx;margin-left: 20rpx;"
										@click="showSelectItemCode">
									</image>
								</view>
							</view>
							<view class='split_line'></view>

							<view class="title " style="display: flex;align-items: center;padding: 10rpx;">
								<text style=" flex-shrink: 0; width: 25%;">批次：</text>
								<uni-easyinput v-model="batch"></uni-easyinput>
								<view class="">
									<image src="" mode="" style=" width: 40rpx;height: 40rpx;margin-left: 20rpx;"
										@click="showSelectLine">
									</image>
								</view>
							</view>
							<view class='split_line'></view>
							<view class="title " style="display: flex;align-items: center;padding: 10rpx;">
								<text style=" flex-shrink: 0; width: 25%;">计划数量：</text>
								<view class="customerBorder">
									{{planQty}}
								</view>
								<view class="">
									<image src="" mode=""
										style=" width: 40rpx;height: 40rpx;margin-left: 20rpx;"
										>
									</image>
								</view>
							</view>
							<view class='split_line'></view>
							<view class="title " style="display: flex;align-items: center;padding: 10rpx;">
								<text style=" flex-shrink: 0; width: 25%;">包装规格：</text>
								<view class="customerBorder">
									{{packUnit}}
								</view>
								<u-select v-model="showPackUnitSelect" mode="mutil-column-auto" :list="packUnitList"
									@confirm="confirmSelectPackUnit"></u-select>
								<view class="">
									<image src="/static/icons/down.svg" mode=""
										style=" width: 40rpx;height: 40rpx;margin-left: 20rpx;"
										@click="showSelectPackUnit">
									</image>
								</view>
							</view>

							<view class='split_line'></view>
						</view>
					</view>
				</view>
				<view class="uni-flex uni-row hide_border">
					<button class="btn_edit_big_cancle" hover-class="btn_edit_big_after" @click="cancel()">取消</button>
					<button class="btn_edit_big_confirm" hover-class="btn_edit_big_after" @click="confirm()">确认</button>
				</view>
			</view>
		</uni-popup>
		<comMessage ref="comMessage"></comMessage>
	</view>
</template>

<script>
	import {
		getIssueJobByProductionline,
		getPlaneInfoByproductLine,
		getPackUnitByItemCode
	} from '@/api/request2.js';
	import {
		getPackUnitName,
		getUomInfo
	} from '@/common/directory.js';

	import {
		getCurrDate,
		getBatch8
	} from '@/common/basic.js';

	import uom from '@/mycomponents/qty/uom.vue'
	import packQty from '@/mycomponents/qty/packQty.vue'
	import balanceStatus from '@/mycomponents/status/balanceStatus.vue'
	import winScanItem from '@/mycomponents/scan/winScanItem.vue'

	export default {
		components: {
			uom,
			balanceStatus,
			winScanItem,
			packQty,
		},
		data() {
			return {
				itemCode: '请选择物料信息',
				uom: "",
				planQty: 0,
				number: "",
				productLineCode: "",
				showProductLineSelect: false,
				productLineList: [],
				productionLineName: "请选择生产线",
				productionLineCode: "",
				batch: "",
				packUnit: "请选择包装规格",
				showPackUnitSelect: false,
				itemCodeList: [],
				showItemCodeSelect: false,
				packUnitList: [{
						value: 1,
						label: '中国',
						children: [{
								value: 2,
								label: '广东',

							},
							{
								value: 5,
								label: '广西',

							}
						]
					},
					{
						value: 8,
						label: '美国',
						children: [{
								value: 9,
								label: '纽约',

							},
							{
								value: 10,
								label: '华盛顿',

							}
						]
					}
				]

			}
		},
		props: {
			title: {
				type: String,
				default: '开工阶段'
			},
			itemCodeTypeList: {
				type: Array,
				default: []
			},
		},
		methods: {
			openRequestPopup() {
				this.initData();
				this.batch = getBatch8()
				this.$refs.popup.open('bottom')
			},
			initData() {
				this.itemCode = '请选择物料信息';
				this.uom = ""
				this.planQty = 0
				this.number = ""
				this.productLineCode = ""
				this.showProductLineSelect = false
				this.productLineList = []
				this.productionLineName = "请选择生产线"
				this.productionLineCode = ""
				this.batch = ""
				this.packUnit = "请选择包装规格"
				this.showPackUnitSelect = false
				// this.packUnitList = []
				this.itemCodeList = []
				this.showItemCodeSelect = false
			},

			closeRequestPopup() {
				this.$refs.popup.close()
			},
			itemCodeLoseFocus() {
				this.itemCodeFocus = false;
			},

			confirm() {
				if (this.productionLineName == "请选择生产线") {
					this.showErrorMessage("请选择生产线")
					return
				}

				if (!this.batch) {
					this.showErrorMessage("请输入批次例如:20200101")
					return
				}

				if (this.itemCode == "请选择物料信息") {
					this.showErrorMessage("请选择物料信息")
					return
				}

				if (this.itemCode == "请选择包装规格") {
					this.showErrorMessage("请选择包装规格")
					return
				}

				this.callback();
			},

			callback() {
				let item = {
					productionLineName: this.productionLineName,
					productionLineCode: this.productionLineCode, //生产线
					itemCode: this.itemCode,
					uom: this.uom,
					batch: this.batch,
					packUnit: "packUnit",
					planQty: this.planQty,
					number: this.number

				};
				this.closeRequestPopup();
				this.$emit("confirm", item);
			},

			showErrorMessage(message, type) {
				setTimeout(r => {
					this.$refs.comMessage.showErrorMessage(message, res => {})
				})
			},
			cancel(e) {
				this.closeRequestPopup();
			},

			confirmSelectLine(data) {
				this.productionLineName = data[0].label
				this.productionLineCode = data[0].value
			},

			showSelectLine() {
				if (this.productLineList.length == 0) {
					uni.showLoading({
						title: "加载中",
						mask: true
					})
					getIssueJobByProductionline().then(res => {
						uni.hideLoading()
						if (res.data && res.data.length > 0) {
							res.data.forEach(item => {
								item.label = item.name
							})
							this.productLineList = res.data
							this.showProductLineSelect = true
						} else {
							this.showErrorMessage('未查找到生产线信息');
						}

					}).catch(error => {
						uni.hideLoading()
						this.showErrorMessage(error);
					})
				} else {
					this.showProductLineSelect = true
				}


			},
			showSelectItemCode() {
				if (!this.productionLineCode) {
					this.showErrorMessage('请先选择生产线');
					return;
				}

				if (this.itemCodeList.length == 0) {
					console.log("当天", getCurrDate())
					uni.showLoading({
						title: "加载中",
						mask: true
					})
					getPlaneInfoByproductLine(this.productionLineCode, getCurrDate()).then(res => {
						uni.hideLoading()
						if (res.data && res.data.length > 0) {
							res.data.forEach(item => {
								item.label = item.itemCode
							})
							this.itemCodeList = res.data
							this.showItemCodeSelect = true
						} else {
							this.showErrorMessage('未查找到物料信息');
						}

					}).catch(error => {
						uni.hideLoading()
						this.showErrorMessage(error);
					})
				} else {
					this.showItemCodeSelect = true
				}

			},
			confirmSelectItem(data) {
				this.itemCode = data[0].label
				var item = this.itemCodeList.find(res => res.itemCode == this.itemCode)
				this.uom = item.uom
				this.planQty = item.planQty
				this.number = item.number
			},

			showSelectPackUnit() {
				if (this.packUnitList.length == 0) {
					if (this.itemCode == "请选择物料信息") {
						this.showErrorMessage('请先选择物料');
						return;
					}

					uni.showLoading({
						title: "加载中",
						mask: true
					})
					getPackUnitByItemCode(this.itemCode).then(res => {
						uni.hideLoading()
						if (res.data && res.data.list.length > 0) {
							res.data.list.forEach(item => {
								item.value = item.packUnit
								item.label = getPackUnitName(item.packUnit) + "(" + item.packQty + this
									.getUomInfo(item.uom) + ")";
							})
							// this.packUnitList = res.data.list
							this.showPackUnitSelect = true
						} else {
							this.showErrorMessage('未查找到包装信息');
						}

					}).catch(error => {
						uni.hideLoading()
						this.showErrorMessage(error);
					})
				} else {
					this.showPackUnitSelect = true
				}

			},

			confirmSelectPackUnit(data) {

				let pack = this.packUnitList.filter(r => r.packUnit == data[0].value)[0];
				// this.packUnit = pack.packQty;
				this.packUnit = data[0].label

			},
			getUomInfo(uom) {
				let item = getUomInfo(uom);
				if (item == '') {
					return uom;
				} else {
					return item.label
				}
			},





		}
	}
</script>

<style lang="scss">
	.title {
		font-size: 30rpx;
	}

	.customerBorder {
		width: 100%;
		border: 1rpx solid lightgray;
		border-radius: 5rpx;
		padding: 15rpx;
	}
</style>