<template>
	<view class="zd_container">
		<!-- <nav-bar title="子卷入库"></nav-bar> -->
		<nav-bar :title="title"></nav-bar>
		<view class="zd_content">
			<view class="zd_wrapper" style="padding: 0;">
				<view class="filter_item" style="padding: 14rpx;">
					<view class="filter_label_wraper">
						<span class="filter_label">子卷号</span>
					</view>
					<view class="filter_input_wraper">
						<search-box v-model="val1" @handleChange="handleChange" />
					</view>
				</view>
				<transition
				  name="content"
				  @before-enter="beforeEnter"
				  @enter="enter"
				  @leave="leave"
				>
					<view class="filter_item" v-if="isExpanded">
						<view class="filter_label_wraper">
							<span class="filter_label"></span>
						</view>
						<view class="filter_input_wraper" style="margin-left: 44rpx;">
							<view class="iconfont icon_unchecked" :class="{'icon_checked': isV === '1'}" @tap="isVirtual">&#xe66b;</view>
							<view class="filter_input_wraper_inn_text">直接入库</view>
						</view>
					</view>
				</transition>
				<view class="down_icon">
					<uni-icons :type="iconType" size="24" color="#4e6ef2" style="margin:0 auto;" @click="toggleContent"></uni-icons>
				</view>
			</view>
			<view class="zd_wrapper grid-wraper">
				<view class="slide_new">
					<table>
						<thead>
							<tr>
								<th>木箱码</th>
								<th>子卷容量</th>
								<th>产品描述</th>
								<th>sap批次</th>
								<th>产品规格(幅宽)</th>
								<th>木箱重量</th>
								<th>木箱长</th>
								<th>木箱宽</th>
								<th>木箱高</th>
							</tr>
						</thead>
						<tbody>
							<tr v-for="(e, i) in dataList" :key="i">
								<td>{{e.package_box_sn}}</td>
								<td>{{e.quanlity_in_box}}</td>
								<td>{{e.product_description}}</td>
								<td>{{e.sap_pcsn}}</td>
								<td>{{e.width}}</td>
								<td>{{e.box_weight}}</td>
								<td>{{e.box_length}}</td>
								<td>{{e.box_width}}</td>
								<td>{{e.box_high}}</td>
							</tr>
						</tbody>
					</table>
				</view>
			</view>
		</view>
		<view class="zd-row submitbar">
			<button class="zd-col-6 btn-submit btn-default" @tap="clearUp">清空</button>
			<button class="zd-col-15 btn-submit btn-success" :class="{'btn-info': !arr1.length}" :disabled="disabled" @tap="_zjInBoundConfirm">装箱入库</button>
		</view>
		<up-top ref="UT" :scrollTop="top"></up-top>
	</view>
</template>

<script>
	import NavBar from '@/components/NavBar.vue'
	import SearchBox from '@/components/SearchBox.vue'
	import UpTop from '@/components/upTop.vue'
	import {zjInBound, zjInBoundConfirm} from '@/utils/getData3.js'
	export default {
		components: {
			NavBar,
			SearchBox,
			UpTop
		},
		data() {
			return {
				title: '',
				top: 0,
				val1: '',
				arr1: [],
				dataList: [],
				disabled: false,
				isV: '0',
				isExpanded: false,
				contentHeight: 0
			};
		},
		computed: {
			iconType() {
				return this.isExpanded ? 'up' : 'down'
			}
		},
		onPageScroll(e) {
			this.$refs.UT.topData(e.scrollTop)
		},
		onLoad (options) {
			this.title = options.title
		},
		methods: {
			toggleContent() {
				this.isExpanded = !this.isExpanded
			},
			beforeEnter(el) {
				el.style.height = '0'
				this.$nextTick(() => {
					el.style.height = el.scrollHeight + 'px'
				})
			},
			enter(el, done) {
			  const animation = el.animate(
				[
				  { height: '0', opacity: 0 },
				  { height: el.scrollHeight + 'px', opacity: 1 },
				],
				{
				  duration: 300,
				  easing: 'ease',
				}
			  );
			  animation.onfinish = done
			},
			leave(el, done) {
			  const animation = el.animate(
				[
				  { height: el.scrollHeight + 'px', opacity: 1 },
				  { height: '0', opacity: 0 },
				],
				{
				  duration: 300,
				  easing: 'ease',
				}
			  )
			  animation.onfinish = () => {
				el.style.height = '0'
				done()
			  }
			},
			isVirtual () {
				this.isV = this.isV === '0' ? '1' : '0'
			},
			handleChange (e) {
				let flag = this.arr1.includes(e)
				if (!flag) {
					this._zjInBound(e)
				}
			},
			async _zjInBound (e) {
				try {
					let res = await zjInBound(e)
					this.dataList = [...this.dataList, ...res.content]
					this.arr1.push(e)
				} catch (e) {
					console.log(e)
				}
			},
			clearUp () {
				this.val1 = ''
				this.arr1 = []
				this.dataList = []
				this.disabled = false
				this.isV = '0'
			},
			async _zjInBoundConfirm () {
				this.disabled = true
				if (!this.arr1.length) {
					this.disabled = false
					return
				}
				try {
					let res = await zjInBoundConfirm(this.arr1.join(','), this.isV)
					uni.showToast({
						title: res.message,
						icon: 'none'
					})
					this.clearUp()
				} catch (e) {
					this.disabled = false
				}
			}
		}
	}
</script>