<template>
	<view class="container">
		<view class="top_head">
			<view class="top_head1">工序计划单号:{{ info.workOrderNo }}</view>
			<view class="top_head2">
				<span>产品名称:{{ info.materielName }}</span>|<span>规格型号:{{ info.specification }}</span>|<span>工序名:{{
					info.processName }}</span>|<span>已派/待派/计划数量:{{ info.alreadyCount }}/{{ leftCount }}/{{
						info.planCount }}</span>
			</view>
		</view>
		<view class="content">
			<view class="item_list" v-for="(items, index) in dataList" :key='index'>
				<view class="select_out" @click="chooseUser(index)">
					<span class="select_text" required v-if="items.operator">{{ items.operatorName }}</span>
					<span class="select_text" required v-else-if="info.isOutsource == 0">选择操作工</span>
					<span class="select_text" required v-else-if="info.isOutsource == 1">选择业务员</span>
					<uni-icons type="arrowdown" size="26"></uni-icons>
				</view>
				<view class="select_out" @click="chooseDevice(index)" v-if="info.isOutsource == 0">
					<span class="select_text" v-if="items.deviceId">{{ items.deviceName }}</span>
					<span class="select_text" v-else>选择设备</span>
					<uni-icons type="arrowdown" size="26"></uni-icons>
				</view>
				<view class="select_out" @click="chooseSpplier(index)" v-else-if="info.isOutsource == 1">
					<span class="select_text" required v-if="items.supplierId">{{ items.spplierName }}</span>
					<span class="select_text" required v-else>选择供应商</span>
					<uni-icons type="arrowdown" size="26"></uni-icons>
				</view>
				<view class="input_out">
					<span class="input_text" required>生产数量：</span>
					<input class="input_view" type="number" v-model="items.planCount" placeholder="请填写"
						@change='toFixed1(index)' />
				</view>
				<view class="select_out">
					<view class="date_text" required>计划开工日期</view>
					<view class="date_value">
						<span v-if="items.startTime">{{ items.startTime }}</span>
						<span v-else>选择日期</span>
						<uni-icons type="arrowdown" size="20" class="date_arrowdown"></uni-icons>
					</view>
					<picker class="picker_date" mode="date" :value="items.startTime" :start="startDate"
						@change="bindStartDateChange($event, index)">
					</picker>
				</view>
				<view class="select_out">
					<view class="date_text" required>计划完工日期</view>
					<view class="date_value">
						<span v-if="items.endTime">{{ items.endTime }}</span>
						<span v-else>选择日期</span>
						<uni-icons type="arrowdown" size="20" class="date_arrowdown"></uni-icons>
					</view>
					<picker class="picker_date" mode="date" :value="items.endTime" :start="startDate"
						@change="bindEndDateChange($event, index)">
					</picker>
				</view>
				<view class="input_out">
					<span class="input_text">备注：</span>
					<input class="input_view" type="text" v-model="items.remark" placeholder="请填写" />
				</view>
				<uni-icons type="minus-filled" size="30" class="delete_icon" color="#ff5151"
					@click="deletData(index)"></uni-icons>
			</view>
			<uni-icons type="plus" size="35" class="plus_icon" color="#2b6ab9" @click="addData"></uni-icons>
		</view>
		<view class="bottom_btn_container">
			<view class="bottom_btn_out">
				<view class="bottom_btn" @click="toBack">取消</view>
				<!-- <view class="bottom_btn"  style="background-color: #eae68bdb;">暂存</view> -->
				<!-- <view class="bottom_btn"  @click="submit">提交</view> -->
				<button class="bottom_btn" @click="submit" :disabled="isDisabled">提交</button>
			</view>
		</view>

		<!-- 选择操作工 -->
		<chooseUserMulti v-if="chooseUserVisible" @change="getUser"></chooseUserMulti>
		<!-- 选择设备 -->
		<chooseDeviceSingle v-if="chooseDeviceVisible" @change="getDevice" :device_type='device_type'>
		</chooseDeviceSingle>
		<!-- 选择供应商 -->
		<chooseSpplierSingle v-if="chooseSpplierVisible" @change="getSpplier"></chooseSpplierSingle>
	</view>
</template>

<script>
	import uniIcons from '@/components/uni-icons/uni-icons.vue'
	import chooseUserMulti from '@/components/system/chooseUserMulti.vue'
	import chooseDeviceSingle from '@/components/system/chooseDeviceSingle.vue'
	import chooseSpplierSingle from '@/components/system/chooseSpplier.vue'
	export default {
		components: {
			uniIcons,
			chooseUserMulti,
			chooseDeviceSingle,
			chooseSpplierSingle
		},
		data() {
			return {
				targetList: [],
				device_type: '',
				chooseUserVisible: false,
				chooseDeviceVisible: false,
				chooseSpplierVisible: false,
				isDisabled: false,
				currentIndex: 0,
				id: "",
				deptId: "",
				info: {},
				leftCount: "",
				planStartTime: '',
				planEndTime: '',
				planCount: '',
				dataList: [
					// 	{
					// 	operator: "",
					// 	operatorName: "",
					// 	planCount:"",
					// },
				],
			}
		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},
		onLoad: function(option) {
			const id = JSON.parse(decodeURIComponent(option.id));
			this.id = id;
			this.getInfo();
		},
		mounted() {
			let _this = this;
			uni.getStorage({
				key: 'userInfo',
				success: function(res) {
					_this.deptId = res.data.deptId
				},
				fail: function(res) {
					uni.redirectTo({
						url: '../login/login'
					});
				}
			});
		},
		methods: {
			toFixed1(index) {
				this.$set(this.dataList[index], 'planCount', Number(this.dataList[index].planCount).toFixed(this.info.quantityAccuracy))
			},
			//获取基础信息
			getInfo() {
				this.$http.request({
					url: '/apis/mes/dispatch/sendButton',
					method: 'post',
					params: {
						planItemId: this.id
					},
				}).then(res => {
					if (res) {
						if (res.data.code == 0) {
							this.info = res.data;
							this.leftCount = res.data.planCount - res.data.alreadyCount;
							this.device_type = res.data.deviceType ? res.data.deviceType : '';
							this.planCount = res.data.planCount ? res.data.planCount : '';
							this.planStartTime = res.data.planStartTime ? res.data.planStartTime : '';
							this.planEndTime = res.data.planEndTime ? res.data.planEndTime : ''
						}
					}
				});
			},

			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			//选择开始日期
			bindStartDateChange: function(e, index) {
				this.currentIndex = index;
				this.$set(this.dataList[this.currentIndex], "startTime", e.target.value)
			},
			//选择完成日期
			bindEndDateChange: function(e, index) {
				this.currentIndex = index;
				this.$set(this.dataList[this.currentIndex], "endTime", e.target.value)
			},
			//添加派工
			addData() {
				let j = {
					startTime: this.planStartTime.substr(0, 10),
					endTime: this.planEndTime.substr(0, 10),
					planCount: this.leftCount
				}
				this.dataList.push(j)
			},
			//删除派工
			deletData(index) {
				let _this = this;
				uni.showModal({
					title: '',
					content: '确定删除吗?',
					success: function(res) {
						if (res.confirm) {
							_this.dataList.splice(index, 1)
						} else if (res.cancel) {}
					}
				});
			},
			getUser(val) {
				this.chooseUserVisible = false
				if (val) {
					let nameArr = []
					let idArr = []
					val.forEach(item => {
						nameArr.push(item.NAME)
						idArr.push(item.userId)
					})
					this.$set(this.dataList[this.currentIndex], "operator", idArr.toString())
					this.$set(this.dataList[this.currentIndex], "operatorName", nameArr.toString())
				}
			},
			getDevice(val) {
				this.chooseDeviceVisible = false;
				if (val) {
					this.$set(this.dataList[this.currentIndex], "deviceId", val.id)
					this.$set(this.dataList[this.currentIndex], "deviceName", val.name)
				}

			},
			getSpplier(val) {
				this.chooseSpplierVisible = false;
				if (val) {
					this.$set(this.dataList[this.currentIndex], "supplierId", val.id)
					this.$set(this.dataList[this.currentIndex], "spplierName", val.unit_name)
				}

			},
			//选择操作工
			chooseUser(index) {
				this.currentIndex = index,
					this.chooseUserVisible = true;
			},
			//选择设备
			chooseDevice(index) {
				this.currentIndex = index,
					this.chooseDeviceVisible = true;
			},
			//选择供应商
			chooseSpplier(index) {
				this.currentIndex = index,
					this.chooseSpplierVisible = true;
			},
			//取消
			toBack() {
				uni.navigateBack()
			},
			//提交
			submit() {
				let flag = true;
				if (this.dataList.length == 0) {
					uni.showToast({
						title: '请先添加派工再提交',
						icon: "none",
						duration: 2000
					});
					flag = false;
				} else {
					this.dataList.forEach(item => {
						//验证操作工必填
						if (item.operator == undefined) {
							let text = this.info.isOutsource == 1 ? "请选择业务员" : "请选择操作工"
							uni.showToast({
								title: text,
								icon: "none",
								duration: 2000
							});
							flag = false;
							return
						}
						//验证(供应商)必填
						if (item.supplierId == undefined && this.info.isOutsource == 1) {
							uni.showToast({
								title: '请选择供应商',
								icon: "none",
								duration: 2000
							});
							flag = false;
							return
						}
						//验证生产数量必填且大于0
						if (item.planCount == undefined) {
							uni.showToast({
								title: '请填写生产数量',
								icon: "none",
								duration: 2000
							});
							flag = false;
							return false
						} else {
							// let reg_positive_integer = /^[1-9]*[1-9][0-9]*$/;//验证正整数
							// if(!reg_positive_integer.test(item.planCount)){
							// 	uni.showToast({
							// 	    title: '生产数量为大于0的整数',
							// 		icon:"none",
							// 	    duration: 2000
							// 	});
							// flag=false;
							// 	return
							// }
							if (item.planCount <= 0) {
								uni.showToast({
									title: '生产数量要大于0',
									icon: "none",
									duration: 2000
								});
								flag = false;
								return
							}
						}
						//验证计划开工时间必填
						if (item.startTime == undefined) {
							uni.showToast({
								title: '请选择计划开工日期',
								icon: "none",
								duration: 2000
							});
							flag = false;
							return
						}
						//验证计划完工时间必填
						if (item.endTime == undefined) {
							uni.showToast({
								title: '请选择计划完工日期',
								icon: "none",
								duration: 2000
							});
							flag = false;
							return
						}
					})
					//验证生产数量总数不能大于待派数量
					if (!flag) {
						return
					}
					let num = 0;
					this.dataList.forEach(item => {
						num = parseInt(num) + parseInt(item.planCount)
					})
					if (num > this.leftCount) {
						uni.showToast({
							title: '生产总数量不能大于待派数量',
							icon: "none",
							duration: 2000
						});
						return
					}
					if (this.isDisabled) {
						return
					}
					this.isDisabled = true
					this.$http.request({
						url: '/apis/mes/dispatch/submitDispatchDetail',
						method: 'post',
						params: {
							planItemId: this.id,
							dispatchDetal: encodeURIComponent(JSON.stringify(this.dataList))
						},
					}).then(res => {
						if (res) {
							let _this = this;
							if (res.data.code == 0) {
								setTimeout(function() {
									uni.navigateTo({
										url: '/pages/dispatch/index'
									});
									// _this.$router.replace({ path: "/pages/dispatch/index" });
									uni.showToast({
										title: '提交成功',
										icon: "none",
										duration: 2000
									});
								}, 0)
								this.isDisabled = false
							} else {
								this.isDisabled = false
								uni.showToast({
									title: res.data.msg ? res.data.msg : '提交失败',
									icon: "none",
									duration: 2000
								});
							}
						}
					});
				}
			}
		}
	}
</script>

<style scoped>
>>>.dialog_out .search_text uni-input {
	position: relative;
	float: left;
	margin-right: 15px;
	/* width: 150px; */
	height: 30px;
	line-height: 30px;
	border: 1px solid #d4d4d4;
	border-radius: 2px;
	padding: 0 4px;
	box-sizing: border-box;
}

>>>.select-tab .select-tab-item uni-text,
>>>.select-tab-fixed-top .select-tab-item uni-text {
	font-size: 16px !important;
}

.container {
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: #f3f3f3;
	box-sizing: border-box;
}

.top_head {
	position: fixed;
	top: var(-window-top);
	width: 100%;
	height: 60px;
	background-color: #007AFF;
	color: #fff;
	padding-left: 20px;
	box-sizing: border-box;
	padding-top: 10px;
	z-index: 1;
}

.top_head1 {
	font-size: 15px;
	line-height: 19px;
}

.top_head2 {
	font-size: 14px;
	line-height: 20px;
}

.top_head2 span {
	margin: 0 10px;
}

.top_head2 span:first-child {
	margin-left: 0;
}

.content {
	/* position: relative; */
	height: 100%;
	width: 100%;
	padding: 20px;
	padding-top: 80px;
	padding-bottom: 90px;
	/* max-height: 100%; */
	overflow: auto;
	box-sizing: border-box;
}

.item_list {
	position: relative;
	width: 100%;
	height: calc((100% - 128px) / 8);
	display: flex;
	justify-content: space-around;
	align-items: center;
	margin-bottom: 16px;
}

.select_out {
	position: relative;
	width: calc((100% - 90px - 30px) / 6);
	height: 100%;
	line-height: calc((100% - 128px) / 8);
	border: 1px solid #a0a0a0;
	border-radius: 5px;
	font-size: 14px;
	/* padding-right:  calc((100% -15px * 6 - 25px) / 5 / 7 ); */
	padding-right: 10px;
	box-sizing: border-box;
	text-align: right;
	color: #333;
	white-space: nowrap;
	overflow: hidden;
}

.input_out {
	position: relative;
	width: 15% !important;
	/* width: calc((100% -15px * 6 - 25px) / 6); */
	height: 100%;
	line-height: 34px;
	font-size: 14px;
	border-radius: 5px;
	padding: 0 10px;
	background-color: #d3dfef;
	box-sizing: border-box;
	color: #333;
}

.uni-icon-arrowdown {
	position: absolute;
	right: 30px;
	height: 26px;
	top: 0;
	bottom: 0;
	margin: auto;
	color: #8a8989;
}

.select_text {
	position: absolute;
	margin: auto;
	top: 0;
	bottom: 0px;
	display: block;
	align-items: center;
	justify-content: center;
	width: calc(100% - 50px);
	height: 16px;
	font-size: 16px;
	line-height: 16px;
	padding-left: 4px;
	box-sizing: border-box;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	text-align: center;
}

.select_text[required]:before {
	position: relative;
	content: "*";
	color: red;
	left: 0;
	top: 0;
}

.input_text {
	position: absolute;
	margin: auto;
	top: 0;
	bottom: 0px;
	display: block;
	height: 16px;
	font-size: 16px;
	line-height: 16px;
}

.input_text[required]:before {
	position: relative;
	content: "*";
	color: red;
	left: 0;
	top: 0;
}

.input_view {
	position: absolute;
	width: 200rpx;
	right: 10px;
	height: 70%;
	top: 15%;
	left: 100px;
	box-sizing: border-box;
	font-size: 14px;
	background-color: #f3f3f3;
}

.date_text {
	height: 50%;
	width: 100%;
	text-align: center;
	font-size: 13px;
	line-height: 13px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.date_text[required]:before {
	position: relative;
	content: "*";
	color: red;
	left: 0;
	top: 0;
}

.date_value {
	position: relative;
	width: 100%;
	height: 50%;
	font-size: 13px;
	line-height: 13px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.date_arrowdown {
	font-weight: bold;
	margin-left: 10px;
	right: 20px;
}

.picker_date {
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
}

.plus_icon {
	margin: auto;
	display: flex;
	justify-content: center;
	font-weight: bold;
	width: 50px;
}

.bottom_btn_container {
	position: fixed;
	bottom: 0;
	width: 100%;
	left: 0;
	height: 70px;
	background-color: #dadada;
}

.bottom_btn_out {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
}

.bottom_btn {
	position: relative;
	margin: 0 10px;
	/* width: 30%; */
	width: 30%;
	height: 60px;
	line-height: 60px;
	text-align: center;
	font-size: 25px;
	color: #333;
	top: 5px;
	letter-spacing: 4px;
	border-radius: 4px;
}

.bottom_btn:nth-child(1) {
	background-color: #fff;
	border: 2px solid #007AFF;
	color: #007AFF;
	box-sizing: border-box;
	/* box-shadow: 3px 3px 10px rgba(160, 160, 159,0.2) inset,-3px -3px 10px rgba(160, 160, 159,0.2) inset; */
}

.bottom_btn:nth-child(2) {
	color: #fff;
	background-color: #007AFF;
	/* box-shadow: 3px 3px 10px rgba(16, 36, 177,0.2) inset,-3px -3px 10px rgba(16, 36, 177,0.2) inset; */
}
</style>
