<template>
    <view class="page mocto">
      <StickyNavBar>
        <NavBar :title="$t('领料单信息')" right="checkbox" @clickRight="submit"></NavBar>
		
      </StickyNavBar>
	  	<u-form ref="form" :modelValue="info" :labelWidth="140" style="margin-left:20rpx;margin-right:20rpx;padding-bottom:0"> 
			<u-form-item prop="tc001" :label="$t('领料单别')">
				<input
				v-model="info.tc001"
				type="text"
				placeholder=""
				/>
			</u-form-item>
		</u-form>
		<view class="info">
			<view>
				<view style="width: 120rpx;">{{$t('工单')}}</view>
				<view style="width: 130rpx;">{{$t('产品品号')}}</view>
				<view style="width: 130rpx;">{{$t('产品品名')}}</view>
			</view>
			<view>
				<view>
					<text class="underline">{{ info.ta001 }}</text>
				</view>
				<view>
					<text class="underline">{{ info.ta006 }}</text>
				</view>
                <view>
					<text class="underline">{{ info.ta034 }}</text>
				</view>
			</view>
			<view style="margin-left: -88rpx;">
				<view>
					<text class="underline">{{ info.ta002 }}</text>
				</view>
                <view>
				</view>
			</view>
		</view>
		<u-form ref="form" :modelValue="form" :labelWidth="140" style="margin-left:20rpx;margin-right:20rpx;padding-bottom:0"> 
			<u-form-item prop="ck" :label="$t('仓库')">
				<input
				v-model="form.ck"
				@input="filterCK"
				type="text"
				placeholder=""
				/>
			</u-form-item>
			<u-form-item prop="lyts" :label="$t('领用套数')">
				<input
				v-model="form.lyts"
				type="text"
				@input="calcTS"
				placeholder=""
				/>
			</u-form-item>
		</u-form>
      <ContentLoadingMore class="cardbox" :list="chargaArr">
        <view class="cardContent" v-for="(item, index) in chargaArr" :key="index">
			<view class="cardItem" @click="editCard(item, index)" v-if="!item.batch && item.show">
				<view class="cardLeft">
					<view class="boxindex">{{index+1}}</view>
				</view>
				<view class="cardRight">
					<view class="itemtitle">
						<text>{{item.tb006}}</text>
						<view>
							<text style="color: #006400">{{item.quantity}}</text>
						</view>
					</view>
					<view>
						<text>{{item.tb003}}</text>
						<text></text>
					</view>
					<view>
						<text>{{$t('品名')}}</text>
						<text><text style="margin-right:20rpx">{{item.tb012}}</text></text>
					</view>
					<view>
						<text>{{$t('库位')}}</text>
						<text><text>{{item.te025}}</text></text>
					</view>
					<view>
						<text>{{$t('需领数量')}}</text>
						<text><text>{{item.tb004}}</text></text>
					</view>
					<view>
						<text>{{$t('已领数量')}}</text>
						<text><text>{{item.tb005}}</text></text>
					</view>
					<view>
						<text>{{$t('领料数量')}}</text>
						<text>{{item.quantity}}</text>
					</view>
				</view>
			</view>
        </view>
      </ContentLoadingMore>
	  <button
		:loading="loading"
		size="medium"
		type="primary"
		style="width:98%;margin-top: 50rpx"
		@click="submit()"
	>
		<span>{{$t('确定')}}</span>
	</button>
    </view>
  </template>
  
  <script>
import i18n from '../../lang/index'

  import StickyNavBar from "@/components/StickyNavBar/index.vue";
  import ContentLoadingMore from "@/components/ContentLoadingMore/index.vue";
  export default {
    components: {
      StickyNavBar,
      ContentLoadingMore,
    },
	onLoad(option) {
		if (option.info) {
			let data = JSON.parse(decodeURIComponent(option.info));
			if(data.moctes && data.moctes.length > 0){
				data.moctes.forEach(element => {
					element['tb005'] = 1
					if (!element['quantity']) {
						element['quantity'] =  this.minus(element['tb004'], element['tb005'])
					}
					element['te025'] = element['te025'] ? element['te025'].trim() : ''
					element['show'] = true
				});
			}
			this.chargaArr = data.moctes
			this.info = data
		}
	},
    data() {
      return {
        chargaArr: [],
        chargaArrEdit: [],
		loading: false,
		form: {
			ck: null,
			lyts: null
		},
		info: null
      };
    },
    created() {
    },
    methods: {
		filterCK(e){
			console.log('e', e.detail.value)
			if(!e.detail.value) {
				this.chargaArr.forEach(item => {
					item.show = true
				})
			} else {
				this.chargaArr.forEach(item => {
					item.show = false
					if(item.tb009 && item.tb009.indexOf(e.detail.value) > -1) {
						item.show = true
					}
					
				})
			}
		},
		minus(a, b){
			return parseFloat((a - b).toFixed(6))
		},
		calcTS(e) {
			if (!e.detail.value) {
				this.chargaArr.forEach((item,index) => {
					if(this.chargaArrEdit && this.chargaArrEdit.length > 0) {
						// 如果清空就赋值上次手动修改的值
						item.quantity = this.chargaArrEdit[index]['quantity']
					} else {
						item.quantity = this.minus(item['tb004'], item['tb005'])
					}
				})
			} else {
				this.chargaArr.forEach((item,index) => {
					let number = 0
					number = (item['tb004'] / (this.info.ta015 || 1)) * e.detail.value
					item.quantity = Math.round(number * 1000000) / 1000000
				})
			}
			
		},
		getValue(data) {
			this.chargaArr = data.moctes
			this.chargaArrEdit = JSON.parse(JSON.stringify(data.moctes))
			this.info = data
		},
		editCard(row, index) {
			uni.navigateTo({
              url: '/pages/moctcforcreate/Edit?info=' + encodeURIComponent(JSON.stringify(this.info)) + '&index=' + index
            });
		},
		submit(){
			const arr = this.chargaArr.filter(v=>v.show)
			const purcdPrintParamsList = arr.map(v => ({quantity: v.quantity, tb003: v.tb003, tb006: v.tb006, te010: v.te010, te025: v.te025, te008:v.tb009}))
			this.$u.api.moctccreate({
				ta001: this.info.ta001,
				ta002: this.info.ta002,
				tc001: this.info.tc001,
        warehouse: this.form.ck,
				moctes: purcdPrintParamsList
			})
			.then(res => {
				if (res.success) {
					this.$u.toast(i18n.t('提交成功'));
					setTimeout(()=> {
						this.goMypage('pages/moctcforcreate/Main')
					}, 200)
				}
			})
		}
    },
  };
  </script>
  
  <style lang="scss" scoped>
  .page{
	background: #fff;
  }
  .cardbox {
    padding: 0rpx 20rpx;
  }
  .cardContent {
    background: #fff;
	padding: 10rpx 15rpx;
	.cardItem {
		display: flex;
	}
	.cardLeft{
		padding-right: 40rpx;
		padding-top: 40rpx;
		.boxindex {
			border: 1px solid #aaaaaa;
			padding: 15rpx 10rpx;
			font-size: 21px;
    		border-radius: 5px;
			color: #4a6865;
			background: #a1e3dc;
		}
	}
	.cardRight {
		color: #787878;
		font-size: 17px;
		width: 100%;
		border-bottom: 1px solid #f5f5f5;
		padding-bottom: 20rpx;
		padding-top: 10rpx;
		.itemtitle{
			font-weight: 600;
			font-size: 19px;
		}
		&>view{
			width: 100%;
			display: flex;
			justify-content: space-between;
		}
	}
  }
  /deep/ .u-sticky {
    top: 0 !important;
    background: #fff;
  }
  .info {
	display: flex;
	line-height: 42px;
	padding: 20rpx 20rpx;
	padding-top: 0;
	padding-bottom: 0;
	font-size: 16px;
	border-bottom: 1px solid #f5f5f5;
	.underline {
		border-bottom: 1px solid #d5d5d5;
		padding-bottom: 0px;
    	line-height: 40px;
		font-weight: 500;
		margin-left: 20rpx;
		font-size: 18px;
	}
  }
  .mocto {
	/deep/ .u-border-bottom:after {
		border-bottom-width: 0 !important;
	}
  }
  
  </style>
  