<template>
	<view class="page">
		<StickyNavBar>
			<NavBar :title="$t('选择库存')"></NavBar>
            <view class="info">{{ info.materialNo }}|{{ info.materialName }}</view>
		</StickyNavBar>
        <ContentLoadingMore class="cardbox" :loadmore='true' :list='goodsList'>
			<view class="cardContent" v-for="(item, index) in goodsList">
				<view class="listItemTitle" @click="handleClick(item)">
					<view>
						<view class="item">{{$t('库房/储位：{0}|{1}', [ item.ml002 , item.ml003 ])}}</view>
						<view class="item">{{$t('库存数：{0}pcs', [ item.ml005 ])}}</view>
						<view class="item">{{$t('出货数：')}}<uni-easyinput
                            v-model="item.outQuantity"
                            placeholder=""
                        ></uni-easyinput></view>
					</view>
				</view>
			</view>
		</ContentLoadingMore>
        <BottomBtn :btnArr="btnArr" @getBtnHandle="getBtnHandle"></BottomBtn>
	</view>
</template>

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

    import ContentLoadingMore from '@/components/ContentLoadingMore/index.vue';
    import BottomBtn from '@/components/BottomBtn/index.vue';
	import StickyNavBar from '@/components/StickyNavBar/index.vue';
	import lhmx from './components/lhmx.vue';
	import kcmx from './components/kcmx.vue';
	export default {
		components: {
			StickyNavBar,
            ContentLoadingMore,
            BottomBtn,
			lhmx,
			kcmx
		},
		data() {
			return {
				current: 0,
                info: {},
                goodsList: [],
                btnArr: [
                    {
                        style: '',
                        type: 'warning',
                        text: i18n.t('返回'),
                        way: 'goBack'
                    },
                    {
                        style: '',
                        type: 'primary',
                        text: i18n.t('提交'),
                        way: 'goSubmit'
                    }
                ]
			};
		},
		computed: {},
		onLoad(option) {
			if (option && option.info) {
                this.info = JSON.parse(decodeURIComponent(option.info))
                this.$u.api
				.getforinvmlinfo({
					ml001: this.info.materialNo
				}).then(({data}) => {
                    if (data) {
                        data.forEach(element => {
                            element['outQuantity'] = 0
                        });
                        this.goodsList = data
                    }
                })
			}
		},
		watch: {

		},
		created() {},
		methods: {
            getBtnHandle(row) {
                this[row.way]();
            },
            goBack() {
                uni.navigateBack();
            },
            goSubmit() {
                if (this.goodsList.length === 0) {
                return;
                }
                const data = JSON.parse(JSON.stringify(this.goodsList));

                uni.$emit('sendkcData', data, this.info);
                uni.navigateBack();
            },
			handleTabChange(index) {
				this.current = index;
			}
		}
	};
</script>

<style lang="scss" scoped>
	page {
		background: #f8f8f8;
	}
    .info {
        height: 120rpx;
        padding: 0 20rpx;
        line-height: 120rpx;
    }

	.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: 0 20rpx;
		margin-top: 20rpx;
	}

	.cardContent {
		border-radius: 8px;
		background: #fff;
		margin-top: 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;
            display: flex;
			font-weight: 500;
            align-items: center;
			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>