<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="toSearch">查询</button>
					<button class="confirm-button" :class="{'confirm-button_disabled': checkArr.length === 0}" :disabled="disabled" @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>
						<th>物料编码</th>
						<th>物料名称</th>
					</tr>
				</thead>
				<tbody>
					<tr v-for="e in dataList" :key="e.material_id" :class="{'checked': e.checked}">
						<td>
							<view class="iconfont icon_unchecked" :class="{'icon_checked': e.checked}" @tap="toCheck(e)">&#xe608;</view>
						</td>
						<td>{{e.order_line_code}}</td>
						<td>{{e.material_spec}}</td>
						<td>{{e.sale_qty}}</td>
						<td><input type="number" class="search-input-l" :class="{'bgr': e.bgr === true}" v-model="e.in_qty"></td>
						<td>{{e.material_code}}</td>
						<td>{{e.material_name}}</td>
					</tr>
				</tbody>
			</table>
		</view>
		<uni-load-more color="#007AFF" iconType="circle" :status="status" :icon-size="14" :content-text="contentText" v-if="dataList.length > 0"/>
	</view>
</template>

<script>
	import NavBar from '@/components/NavBar.vue'
	import SearchBox from '@/components/SearchBox.vue'
	import {orderSearch} from '@/utils/getData2.js'
	export default {
		components: {
			NavBar,
			SearchBox
		},
		data() {
			return {
				val1: '',
				dataList: [],
				pkId: '',
				disabled: false,
				reload: false,
				status: 'more',
				contentText: {
					contentdown: '查看更多',
					contentrefresh: '加载中',
					contentnomore: '没有更多'
				},
				totalCount: 0,
				pageNum: 1,
				pageSize: 10,
				checkArr: []
			};
		},
		methods: {
			toSearch () {
			  this.dataList = []
			  this.pageNum = 1
			  this._orderSearch()
			},
			/** 初始化查询 */
			async _orderSearch () {
				let res = await orderSearch(this.pageNum + '', this.pageSize + '', this.val1)
				this.totalCount = res.totalElements
				if (res.totalElements > 0) {
					res.content.map(el => {
						this.$set(el, 'checked', false)
						this.$set(el, 'bgr', false)
						this.$set(el, 'in_qty', '0.000')
					})
					const dataMap = res.content
					this.dataList = this.reload ? dataMap : this.dataList.concat(dataMap)
					this.reload = false
				} else {
					this.dataList = []
				}
				if (this.totalCount == this.dataList.length) {
					this.reload = false
					this.status = 'noMore'
				}
			},
			onReachBottom () {
				if (this.totalCount > this.dataList.length) {
					this.status = 'loading'
					setTimeout(() => {
						this.pageNum++
						this._orderSearch()
					}, 1000)
				} else { //停止加载
					this.status = 'noMore'
				}
			},
			async toSure () {
				let flag = false
			    this.dataList.map(el => {
					if (el.checked && (Number(el.in_qty) < 0 || el.in_qty === '')) {
						this.$set(el, 'bgr', true)
						flag = true
					}
				})
				if (flag) {
					return
				}
				if (this.checkArr.length) {
					this.$store.dispatch('setPublicArr', this.checkArr)
					uni.redirectTo({
						url: '/pages/management/FinishedInStore'
					})
				}
			},
			toCheck (e) {
				e.checked = !e.checked
				this.checkArr = this.dataList.filter(i => { return i.checked === true })
			},
			goIn () {
				uni.redirectTo({
					url: '/pages/management/FinishedInStore'
				})
			}
		}
	}
</script>

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