<template>
	<view class="contianer">
		<nav-bar type="3" title="配料作业"></nav-bar>
		<view class="contianer content">
			<view class="contianer content_wraper">
				<view class="contianer mgt2 grid_wraper">
					<table>
						<tr>
							<th>工单编码</th>
							<th>序号</th>
							<th>物料编码</th>
							<th>物料名称</th>
							<th>产线</th>
							<th>终点编码</th>
							<th>配料桶数</th>
							<th>剩余桶数</th>
							<th>物料重量</th>
							<th>状态</th>
							<th style="text-align: center">操作</th>
						</tr>
						<tr v-for="(e, i) in dataList" :key="i">
							<td>{{ e.mfg_order_name }}</td>
							<td>{{ e.seq_no }}</td>
							<td>{{ e.material_code }}</td>
							<td>{{ e.material_name }}</td>
							<td>{{ e.resource_name }}</td>
							<td>{{ e.next_device_code }}</td>
							<td>{{ e.require_num }}</td>
							<td>{{ e.remain_num }}</td>
							<td>{{ e.qty }}</td>
							<td>{{ e.status }}</td>
							<td>
							<div class="zd-row btn_wraper">
								<button class="grid_button" :class="{'grid_button_disabled': e.checked && disabled1}" :disabled="disabled1" @tap="_sendWork(e)">下发</button>
								<button class="grid_button" :class="{'grid_button_disabled': e.checked && disabled2}" :disabled="disabled2" @tap="openDialog(e)">补发</button>
								<button class="grid_button" :class="{'grid_button_disabled': e.checked && disabled3}" :disabled="disabled3" @tap="_pdaPause(e)">暂停</button>
								<button class="grid_button" :class="{'grid_button_disabled': e.checked && disabled4}" :disabled="disabled4" @tap="_finishWork(e)">完成</button>
							</div>
							</td>
						</tr>
					</table>
				</view>
			</view>
		</view>
		<view class="dialog__wrapper"  :class="dialogVisible ? 'popshow' : 'pophide'">
			<view class="dialog">
				<view class="dialog__body">
					<view class="zd-row filter-item">
						<view class="zd-col-6 filter-label">补发桶数</view>
						<view class="zd-col-17">
							<view class="zd-row">
								<view class="zd-col-2 icon-plus" @tap="decrement">-</view>
								<input type="number" class="zd-col-20 filter-input" v-model.number="inputNumber" @input="handleInput" placeholder="请输入数字">
								<view class="zd-col-2 icon-plus" @tap="increment">+</view>
							</view>
						</view>
					</view>
					<view class="zd-row jcenter button-wrap">
						<button class="zd-col-4 button_cancle" @click="dialogVisible = false">取 消</button>
						<button class="zd-col-4 button_primary" @click="handleConfirm">确 定</button>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import NavBar from '@/components/NavBar.vue'
	// import {queryWorks} from '@/utils/mork2.js'
	import {queryWorks, sendWork, reSendWork, pdaPause, finishWork} from '@/utils/getData2.js'
	export default {
		components: {
			NavBar
		},
		data() {
			return {
				order: '',
				dataList: [],
				pkObj: '',
				disabled1: false,
				disabled2: false,
				disabled3: false,
				disabled4: false,
				dialogVisible: false,
				inputNumber: 1
			};
		},
		mounted () {
			this._queryWorks()
		},
		onLoad (options) {
			this.order = options.order
		},
		methods: {
			decrement () {
				if (this.inputNumber > 1) {
					this.inputNumber -= 1
				}
			},
			increment () {
				this.inputNumber += 1
			},
			handleInput(event) {
				const value = event.target.value
				if (value === "" || Number(value) >= 1) {
					this.inputNumber = Math.floor(Number(value))
				} else {
					this.inputNumber = 1
				}
			},
			async _queryWorks () {
				let res = await queryWorks(this.order)
				this.dataList = [...res]
				this.dataList.map(el => {
					this.$set(el, 'checked', false)
				})
			},
			_sendWork (e) {
			      this.disabled1 = true
			      e.checked = true
				  uni.showModal({
				  	title: '提示',
				  	content: '确定下发任务？',
					cancelColor: '#fff',
				  	confirmColor: '#6fc4e2',
				  	success: (res) => {
				  		if (res.confirm) {
				  			this.__sendWork(e)
				  		} else if (res.cancel) {
				  			this.disabled1 = false
				  			e.checked = false
				  		}
				  	}
				  })
			},
			async __sendWork (e) {
			      try {
			        let res = await sendWork(e.work_code)
			        this._queryWorks()
			        uni.showToast({
						title: res.message,
						icon: 'success'
					})
			        this.disabled1 = false
			        e.checked = false
			      } catch (e) {
			        this.disabled1 = false
			        e.checked = false
			      }
			},
			async _reSendWork (e, num) {
			  this.disabled2 = true
			  e.checked = true
			  try {
				let res = await reSendWork(e.work_code, num)
				this._queryWorks()
				uni.showToast({
					title: res.message,
					icon: 'success'
				})
				this.disabled2 = false
				e.checked = false
			  } catch (e) {
				this.disabled2 = false
				e.checked = false
			  }
			},
			_pdaPause (e) {
			  this.disabled3 = true
			  e.checked = true
			  uni.showModal({
			  	title: '提示',
			  	content: '确定暂停任务？',
				cancelColor: '#fff',
			  	confirmColor: '#6fc4e2',
			  	success: (res) => {
			  		if (res.confirm) {
			  			this.__pdaPause(e)
			  		} else if (res.cancel) {
			  			this.disabled3 = false
			  			e.checked = false
			  		}
			  	}
			  })
			},
			async __pdaPause (e) {
			  try {
				let res = await pdaPause(e.work_code)
				this._queryWorks()
				uni.showToast({
					title: res.message,
					icon: 'success'
				})
				this.disabled3 = false
				e.checked = false
			  } catch (e) {
				this.disabled3 = false
				e.checked = false
			  }
			},
			_finishWork (e) {
			  this.disabled4 = true
			  e.checked = true
			  uni.showModal({
			  	title: '提示',
			  	content: '确定完成任务？',
				cancelColor: '#fff',
			  	confirmColor: '#6fc4e2',
			  	success: (res) => {
			  		if (res.confirm) {
			  			this.__finishWork(e)
			  		} else if (res.cancel) {
			  			this.disabled4 = false
			  			e.checked = false
			  		}
			  	}
			  })
			},
			async __finishWork (e) {
			  try {
				let res = await finishWork(e.work_code)
				this._queryWorks()
				uni.showToast({
					title: res.message,
					icon: 'success'
				})
				this.disabled4 = false
				e.checked = false
			  } catch (e) {
				this.disabled4 = false
				e.checked = false
			  }
			},
			openDialog (e) {
			  this.dialogVisible = true
			  this.inputNumber = 1
			  this.pkObj = e
			},
			handleConfirm () {
			  this.dialogVisible = false
			  this._reSendWork(this.pkObj, this.inputNumber)
			}
		}
	}
</script>

<style lang="stylus" scoped>
.grid_wraper
  height 100%
.btn_wraper
  width 170px
</style>
