<template>
	<view>
		<u-tabs :list="tabList" :is-scroll="false" :current="current" @change="handleTabChange"></u-tabs>
		<lhmx :order="order" :currentKc="currentKc" @kcdetail="(v) => currentKc = v" v-show="tabList[current].comName === 'lhmx'"></lhmx>
		<kcmx :order="order" :currentKc="currentKc" @kcdetail="(v) => currentKc = v" v-show="tabList[current].comName === 'kcmx'"></kcmx>
	</view>
</template>

<script>
import i18n from '../../lang/index'

	import StickyNavBar from '@/components/StickyNavBar/index.vue';
	import lhmx from './components/lhmx.vue';
	import kcmx from './components/kcmx.vue';
	export default {
		components: {
			StickyNavBar,
			lhmx,
			kcmx
		},
		data() {
			return {
				current: 0,
                order: '',
                currentKc: null,
				tabList: [{
					name: i18n.t('拣货明细'),
					comName: 'lhmx'
				}, {
					name: i18n.t('库存明细'),
					comName: 'kcmx'
				}],
			};
		},
		computed: {},
		onLoad(option) {
			if (option && option.order) {
				this.order = option.order
			}
		},
		watch: {

		},
		created() {},
		methods: {
			handleTabChange(index) {
				this.current = index;
			}
		}
	};
</script>

<style lang="scss" scoped>
	page {
		background: #f8f8f8;
	}

	.headerTitle {
		padding: 20rpx;
		font-weight: 600;

		.items {
			line-height: 40rpx;
		}
	}

	.btn {
		padding: 20rpx;
		background: #fff;

		.topSearch {
			margin-bottom: 20rpx;
		}
	}

	.bottomBtn {
		position: sticky;
		padding: 20rpx;
		display: flex;
		justify-content: space-between;
		background: #fff;
		bottom: 0rpx;
		margin-top: 20rpx;

		.u-btn {
			width: 300rpx;
		}
	}

	.blue {
		color: #3f9dcc;
	}

	.total {
		background: #fff;
		color: #000;
		padding: 0rpx 40rpx;
		display: flex;
		justify-content: space-between;
		font-size: 32rpx;

		.line {
			margin: 0px 10rpx;
		}
	}

	.cardbox {
		min-height: calc(100vh - 480rpx);
		padding: 0rpx 20rpx;
		margin-top: 20rpx;
	}

	.cardContent {
		border-radius: 8px;
		background: #fff;
		margin-bottom: 20rpx;
	}

	.listItemTitle {
		display: flex;
		justify-content: space-between;
		padding: 20rpx;
		border-bottom: 2px solid #f8f8f8;

		.u-btn {
			width: 150rpx;
			margin: 0px;
			margin-top: 10rpx;
		}

		.item {
			line-height: 50rpx;
			color: #333;
			font-size: 28rpx;
			font-weight: 500;
			word-break: break-all;
			font-weight: 600;
		}
	}

	.listBottom {
		.bottomTitle {
			height: 80rpx;
			position: relative;

			.desc {
				color: #bbb;
				font-size: 24rpx;
				line-height: 80rpx;
				padding-left: 20rpx;
			}

			.topIcons {
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%, -50%);
				color: #aaa;
			}
		}

		.bottomBox {
			padding: 20rpx;

			.bottomItem {
				background: #f8f8f8;
				padding: 20rpx;
				margin-bottom: 20rpx;

				.items {
					color: #333;
					font-size: 24rpx;
					height: 40rpx;
					line-height: 40rpx;
				}
			}
		}
	}

	/deep/ .u-sticky {
		top: 0 !important;
		background: #fff;
	}

	.checkedCase {
		margin-top: 10rpx;
	}
</style>