<template>
	<view class="content">
		<nav-bar :inner2="true" @goIn="goIn" title="物料查询"></nav-bar>
		<view class="search-confirm-wrap">
			<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 search-item-btns">
					<button class="confirm-button" @tap="_materialQuery">查询</button>
					<button class="confirm-button" :class="{'confirm-button_disabled': !pkId}" @tap="toSure">确认</button>
				</view>
			</view>
		</view>
		<view class="grid-wrap">
			<table class="grid-table">
				<thead>
					<tr>
						<th>选择</th>
						<th>编码</th>
						<th>名称</th>
						<th>规格</th>
						<th>系列</th>
					</tr>
				</thead>
				<tbody>
					<tr v-for="e in dataList" :key="e.material_uuid"  @click="toRadio(e)">
						<td>
							<view class="iconfont icon-check" :class="{'icon-checked': pkId === e.material_id}"></view>
						</td>
						<td>{{e.material_code}}</td>
						<td>{{e.material_name}}</td>
						<td>{{e.material_spec}}</td>
						<td>{{e.class_name}}</td>
					</tr>
				</tbody>
			</table>
		</view>
	</view>
</template>

<script>
	import NavBar from '@/components/NavBar.vue'
	import {materialQuery} from '@/utils/getData2.js'
	export default {
		components: {
			NavBar
		},
		data() {
			return {
				val1: '',
				dataList: [],
				pkId: '',
				pkObj: {}
			};
		},
		methods: {
			goIn () {
				uni.navigateTo({
					url: `/pages/management/hcxcheck`
				})
			},
			async _materialQuery () {
				let res = await materialQuery(this.val1)
				this.dataList = [...res]
			},
			toRadio (e) {
			  this.pkId = this.pkId === e.material_id ? '' : e.material_id
			  this.pkObj = this.pkId === e.material_id ? e : {}
			},
			toSure () {
				if (!this.pkId) {
					return
				}
				this.$store.dispatch('setPublicObj', this.pkObj)
				uni.navigateBack()
			}
		}
	}
</script>

<style lang="stylus">
.grid-wrap
	height: calc(100% - 137px); /** 42+ 15*4+ 35 */
</style>
