<template>
	<view class="content">
		<nav-bar title="缓存线出箱异常"></nav-bar>
		<view class="search-wrap">
			<view class="search-item">
				<label class="search-label">缓存线</label>
				<view class="filter_input_wraper">
					<input type="text" class="search-input-l" v-model="val1">
				</view>
			</view>
			<view class="search-item">
				<label class="search-label">车号</label>
				<view class="filter_input_wraper">
					<input type="text" class="search-input-l" v-model="val2">
				</view>
			</view>
		</view>
		<view class="confirm-button-wrap">
			<button class="confirm-button" :disabled="disabled0" @click="toSearch()">查询</button>
			<button class="confirm-button" :disabled="disabled1" @click="toSure">确认</button>
		</view>
		<view class="grid-wrap">
			<table class="grid-table">
				<thead>
					<tr>
						<th>选择</th>
						<th>指令号</th>
						<th>任务号</th>
						<th>起点</th>
						<th>终点</th>
						<th>状态</th>
						<th>agv车号</th>
						<th>物料类型</th>
						<th>优先级</th>
						<th>时间</th>
					</tr>
				</thead>
				<tbody>
					<tr v-for="e in dataList" :key="e.inst_uuid"  @click="toRadio(e)">
						<td>
							<view class="iconfont icon-check" :class="{'icon-checked': pkId === e.inst_uuid}"></view>
						</td>
						<td>{{e.inst_no}}</td>
						<td>{{e.task_no}}</td>
						<td>{{e.start_devicecode}}</td>
						<td>{{e.next_devicecode}}</td>
						<td>{{e.inst_status_name}}</td>
						<td>{{e.carno}}</td>
						<td>{{e.material_type_name}}</td>
						<td>{{e.priority}}</td>
						<td>{{e.create_time}}</td>
					</tr>
				</tbody>
			</table>
		</view>
	</view>
</template>

<script>
	import NavBar from '@/components/NavBar.vue'
	// import {queryInstraction, instOperation} from '@/utils/api.js'
	export default {
		components: {
			NavBar
		},
		data() {
			return {
				dataList: [],
				keyword: '',
				startPoint: '',
				endPoint: '',
				pkId: '',
				disabled0: false,
				disabled1: false
			};
		},
		mounted () {
			this.queryInstraction(this.keyword, this.startPoint, this.endPoint)
		},
		methods: {
			onNavigationBarButtonTap(e) {
			    uni.redirectTo({
			        url: '/pages/index/index'
			    });
			},
			toSearch () {
			  this.pkId = ''
			  this.dataList = []
			  this.disabled0 = true
			  this.queryInstraction()
			},
			toSure (type) {
			  if (this.pkId) {
				this.disabled1 = true
				this.instOperation(type)
			  } else {
				uni.showToast({
					title: '请查询后进行选择',
					icon: 'none'
				})
			  }
			},
			toRadio (e) {
			  this.pkId = this.pkId === e.inst_uuid ? '' : e.inst_uuid
			}
		}
	}
</script>

<style lang="stylus" scoped>
@import '../../common/style/mixin.styl';
.content1
	flex-direction column
	justify-content flex-start
	padding 30rpx
	box-sizing border-box
.icon-check
	_wh(44rpx, 44rpx)
	background-color #ffffff
	border-radius 50%
	margin 0 auto
.icon-checked
	background-color $red
</style>
