<template>
	<view class="page">
		<view class="listItemTitle">
			<view @click="handleDetail(null)">
				<view class="item">{{$t('交货单：{0}', [ applyNo ])}}</view>
			</view>
		</view>
		<view class="listBottom">
			<view class="bottomTitle">
				<view class="desc">{{$t('拣货明细')}}</view>
			</view>
			<view  class="bottomBox">
				<view class="bottomItem" v-for="(ele, idx) in goodlist" :key="ele.materialNo+idx" >
                    <view class="box-top">
                        <view class="left">
                            <view class="items">{{ ele.materialNo }}|{{ ele.materialName }}</view>
                            <view class="items">{{$t('计划出库日期：{0}', [ ele.planOutDate ])}}</view>
                        </view>
                        <view class="right">
                            <u-icon name="plus" color="#000" size="32" @click="addKC(ele)"></u-icon>
                            <view class="items">{{outQuantity(ele.materialNo, ele.deliverQuantity)}}/{{ele.deliverQuantity}}pcs</view>
                        </view>
                    </view>
					<view class="detail-box">
                        <template v-for="(item, index) in list">
                            <view class="detail-line-wrap" v-if="item.materialNo === ele.materialNo && item.deliverQuantity === ele.deliverQuantity && item.outQuantity"  :key="item.materialNo + '444' + index" @click="handleDetail(item)">
                                <view class="detail-line">
                                    <text>{{item.warehouse}}|{{item.location}}</text>
                                    <text style="margin-left: auto">{{item.outQuantity}}pcs</text>
                                </view>
                            </view>
                        </template>
                    </view>
				</view>
			</view>
		</view>

		<BottomBtn :btnArr="btnArr" @getBtnHandle="getBtnHandle"></BottomBtn>
	</view>
</template>

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

import StickyNavBar from '@/components/StickyNavBar/index.vue';
import ContentLoadingMore from '@/components/ContentLoadingMore/index.vue';
import BottomBtn from '@/components/BottomBtn/index.vue';
export default {
	components: {
		StickyNavBar,
		ContentLoadingMore,
		BottomBtn
	},
	props: {
		order: {
			type: String
		},
	},
	data() {
		return {
			r1:'',
			number: 0,
			totalNum: 0,
            show: false,
			applyNo: '',
			wxparams: '',
            list: [],

            goodlist: [],
			btnArr: [
				{
					style: '',
					type: 'warning',
					text: i18n.t('返回'),
					way: 'goBack'
				},
				{
					style: '',
					type: 'primary',
					text: i18n.t('确认'),
					way: 'goSubmit'
				}
			],
			isFocus: false,
			show: true,
		};
	},
    computed: {
    },
    created () {
        uni.$on('sendkcData', (data, info) => {
            data.forEach((vvvv) => {
                if (vvvv.outQuantity) {
                    this.list.push({
                        "deliverQuantity": info.deliverQuantity,
                        "location": vvvv.ml003,
                        "materialName": info.materialName,
                        "materialNo": info.materialNo,
                        "outQuantity": vvvv.outQuantity,
                        "planOutDate": info.planOutDate,
                        "unit": info.unit,
                        "warehouse": vvvv.ml002
                    })
                }
            })
        });
        if(this.order) {
            this.$u.api
				.stockSaleOutList({
					saleOutNo: this.order
				})
				.then(({data}) => {
					if (data && data.applyNo) {
						this.applyNo = data.applyNo
                        this.list = data.data
                        data.data.forEach(v => {
							this.goodlist.push({
								"materialName": v.materialName,
								"deliverQuantity": v.deliverQuantity,
								"materialNo": v.materialNo,
								"planOutDate": v.planOutDate,
								"unit": v.unit
							})
                        })
					}
				});
        }
    },

    beforeDestroy() {
    // 移除监听事件，防止内存泄漏
    uni.$off('sendkcData');
    },
	methods: {
        handleDetail(item){
            this.$emit('kcdetail', item)
        },
        goBack() {
            uni.navigateBack();
        },
        goSubmit() {
            if (this.list.length === 0) {
                return;
            }
            const arr = this.list.filter(v => v.outQuantity)
            if (arr.length === 0) {
                return;
            }
            this.$u.api.confirmStock({
                applyNo: this.applyNo,
                data: arr
            }).then(res => {
                if (res.success) {
                    this.$u.toast(i18n.t('提交成功'))
					setTimeout(()=>{
						uni.navigateBack()
					}, 300)
                    
                }
            })
        },
        addKC(ele) {
            uni.navigateTo({
                url: `/pages/saleck/selectCK?info=${encodeURIComponent(JSON.stringify(ele))}`
            });
        },
        getBtnHandle(row) {
            this[row.way]();
        },
        deliverQuantity(materialNo) {
            const y = JSON.parse(JSON.stringify(this.list))
            const arr = y.filter(i => i.materialNo = materialNo)
            return arr.reduce((pre, cur) => pre + Number(cur.deliverQuantity), 0)
        },
        outQuantity(materialNo, deliverQuantity) {
            const y = JSON.parse(JSON.stringify(this.list))
            const arr = y.filter(i => i.materialNo === materialNo && i.deliverQuantity === deliverQuantity)
            const num = arr.reduce((pre, cur) => pre + (cur.outQuantity ? Number(cur.outQuantity) : 0), 0)
            return isNaN(num) ? 0 : num
        },
		deleGonds(row, idx) {
			this.$emit('deleGonds', row, idx);
		}
	}
};
</script>

<style lang="scss" scoped>
.page {
	background: #fff;
}
.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;
	}
}
.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 {
    background: #f3f3f5;
    height: calc(100vh - 290rpx);
    overflow: auto;
	.bottomTitle {
		height: 80rpx;
		position: relative;
        background: #fff;
		.desc {
			color: #000;
			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;
        min-height: calc(100% - 520rpx);
        overflow: auto;
		.bottomItem {
			background: #fff;
            border: 1px solid #d4d7dc;
            border-radius: 5px;
			
			margin-bottom: 20rpx;
			position: relative;
			.items {
				color: #333;
				font-size: 24rpx;
				line-height: 40rpx;
				::v-deep .uni-easyinput{
					width: 200rpx;
				}
			}
            .box-top {
                padding: 20rpx;
                display: flex;
                justify-content: space-between;
                
                .right {
                    text-align: right;
                }
            }
            .detail-box {
                padding: 20rpx;
                background: #fff;
                
            }
            .detail-line-wrap {
                &:first-child {
                    border-top: 1px solid #d4d7dc;
                }
            }
            .detail-line {
                background: rgb(243, 243, 245);
                display: flex;
                padding: 0px 10rpx;
                border: 1px solid #d4d7dc;
                height: 80rpx;
                line-height: 80rpx;
                border-radius: 5px;
                margin-top: 10px;
                
            }
		}
	}
}
::v-deep .u-sticky {
	top: 0 !important;
	background: #fff;
}
.boxBtn {
	position: absolute;
	bottom: 10rpx;
	right: 10rpx;
}
.checkedBox{
	text-align: right;
}
::v-deep .uni-checkbox-input-disabled:before{
	color: #007aff !important;
}
</style>
