<template>
	<view class="zd_container">
		<nav-bar :title="title"></nav-bar>
		<view class="zd_content">
			<view class="zd_wrapper grid-wraper">
				<view class="slide_new">
					<table>
						<thead>
							<tr>
								<th class="fontcol1">工单编号</th>
								<th>计划数量</th>
								<th>实际数量</th>
								<th>计划重量</th>
								<th>实际重量</th>
								<th>物料标识</th>
								<th>泥料编码</th>
								<th>批次号</th>
								<th>生产日期</th>
								<th>载具类型</th>
								<th>点位编码</th>
								<th>点位名称</th>
								<th>区域编码</th>
								<th>区域名称</th>
								<th>工单状态</th>
							</tr>
						</thead>
						<tbody>
							<tr v-for="(e, i) in dataList" :key="i" @click="toChose(e)" :class="{'checked': e.workorder_code === pkId}">
								<td class="fontcol1">{{e.workorder_code}}</td>
								<td>{{e.plan_qty}}</td>
								<td>{{e.real_qty}}</td>
								<td>{{e.plan_weight}}</td>
								<td>{{e.real_weight}}</td>
								<td>{{e.material_ratio}}</td>
								<td>{{e.raw_material_code}}</td>
								<td>{{e.produce_order}}</td>
								<td>{{e.produce_date}}</td>
								<td>{{e.vehicle_type}}</td>
								<td>{{e.point_code}}</td>
								<td>{{e.point_name}}</td>
								<td>{{e.region_code}}</td>
								<td>{{e.region_name}}</td>
								<td>{{['未生产', '已下发', '生产中', '暂停', '完成', '暂存中'][Number(e.workorder_status) - 1]}}</td>
							</tr>
						</tbody>
					</table>
				</view>
			</view>
		</view>
		<view class="zd-row submit-bar">
			<button class="zd-col-7 button-primary" :class="{'button-info': !pkId}" :disabled="disabled1" @tap="_hnOrderFinish">工单完成</button>
			<button class="zd-col-7 button-primary" :class="{'button-info': !pkId}" @tap="toPop">料盅入库</button>
			<button class="zd-col-7 button-primary" @tap="toPop1">呼叫空蛊</button>
		</view>
		<view class="zd_content msg_wrapper" :class="show ? 'popshow' : 'pophide'">
			<view class="pop-line"></view>
			<view class="msg_content">
				<view class="zd-row border-bottom">
					<view class="zd-col-5">
						<span class="filter_label">载具编码</span>
					</view>
					<view class="zd-col-19">
						<search-box
						v-model="val1"
						/>
					</view>
				</view>
				<view class="zd-row border-bottom">
					<view class="zd-col-5">
						<span class="filter_label">创建时间</span>
					</view>
					<view class="zd-col-19">
						<view class="example-body">
							<uni-datetime-picker type="datetime" v-model="datetimesingle" @change="changeLog" />
						</view>
					</view>
				</view>
			</view>
			<view class="zd-row submit-bar">
				<button class="zd-col-7 button-default" @tap.stop="closePop">关闭</button>
				<button class="zd-col-7 button-default" @tap.stop="clearUp">清空</button>
				<button class="zd-col-7 button-primary" :class="{'button-info': !val1 || !datetimesingle}" :disabled="disabled2" @tap="_hnmlTask">料盅入库</button>
			</view>
		</view>
		<view v-if="show" class="msg_mask"></view>
		<view class="zd_content msg_wrapper" :class="show1 ? 'popshow' : 'pophide'">
			<view class="pop-line"></view>
			<view class="msg_content">
				<view class="zd-row">
					<view class="zd-col-24">
						<span class="filter_label">确定是否呼叫空蛊？</span>
					</view>
				</view>
			</view>
			<view class="zd-row submit-bar">
				<button class="zd-col-11 button-default" @tap.stop="show1 = false">关闭</button>
				<button class="zd-col-11 button-primary" :disabled="disabled3" @tap="_hnqkTask">确定</button>
			</view>
		</view>
		<view v-if="show1" class="msg_mask"></view>
	</view>
</template>

<script>
	import NavBar from '@/components/NavBar.vue'
	import SearchBox from '@/components/SearchBox.vue'
	import {hnWorkOrder,hnOrderFinish,hnmlTask,hnqkTask} from '@/utils/getData2.js'
	export default {
		components: {
			NavBar,
			SearchBox
		},
		data() {
			return {
				dataList: [],
				pkId: '',
				disabled1: false,
				disabled2: false,
				disabled3: false,
				show: false,
				val1: '',
				datetimesingle: '',
				show1: false
			};
		},
		onLoad (options) {
			this.title = options.title
		},
		created () {
			this._hnWorkOrder()
		},
		methods: {
			changeLog(e) {
				console.log('----change事件:', e);
			},
			/** grid */
			async _hnWorkOrder () {
				let res = await hnWorkOrder()
				this.dataList = [...res]
			},
			toChose (e) {
				this.pkId = this.pkId === e.workorder_code ? '' : e.workorder_code
			},
			async _hnOrderFinish () {
				this.disabled1 = true
				if (!this.pkId) {
					this.disabled1 = false
					return
				}
				try {
					let res = await hnOrderFinish(this.pkId)
					this.pkId = ''
					this.disabled1 = false
					this._hnWorkOrder()
					uni.showToast({
						title: res.message,
						icon: 'none'
					})
				} catch (e) {
					this.disabled1 = false
				}
			},
			toPop () {
				if (this.pkId) {
					this.show = true
				}
			},
			closePop () {
				this.show = false
				this.clearUp()
			},
			clearUp () {
				this.val1 = ''
				this.datetimesingle = ''
			},
			async _hnmlTask () {
				this.disabled2 = true
				if (!this.val1 || !this.datetimesingle) {
					this.disabled2 = false
					return
				}
				try {
					let res = await hnmlTask(this.pkId, this.val1, this.datetimesingle)
					this.disabled2 = false
					this.pkId = ''
					this.closePop()
					this._hnWorkOrder()
					uni.showToast({
						title: res.message,
						icon: 'none'
					})
				} catch (e) {
					this.disabled2 = false
				}
			},
			toPop1 () {
				this.show1 = true
			},
			async _hnqkTask () {
				this.disabled3 = true
				try {
					let res = await hnqkTask()
					this.show1 = false
					this.disabled3 = false
					this._hnWorkOrder()
					uni.showToast({
						title: res.message,
						icon: 'none'
					})
				} catch (e) {
					this.disabled3 = false
				}
			},
		}
	}
</script>

<style lang="stylus">
@import '../../common/style/mixin.styl';
.msg_wrapper
	height auto
	min-height 30%
</style>
