<template>
    <view class="page">
      <StickyNavBar>
        <NavBar :title="$t('到货单打印信息')" right="checkbox" @clickRight="submit"></NavBar>
      </StickyNavBar>
	  <view class="info">
			<view>
				<view>{{$t('到货单')}}</view>
				<view>{{$t('供应商')}}</view>
			</view>
			<view>
				<view>
					<text class="underline">{{ info.cc001 }}</text>
				</view>
				<view>
					<text class="underline">{{ info.cc005 }}</text>
				</view>
			</view>
			<view>
				<view>
					<text class="underline">{{ info.cc002 }}</text>
				</view>
				<view>
					<text class="underline">{{ info.cc012 }}</text>
				</view>
			</view>
		</view>
      <ContentLoadingMore class="cardbox" :list="chargaArr">
        <view class="cardContent" v-for="(item, index) in chargaArr" :key="index">
			<view class="cardItem" @click="editCard(item, index)">
				<view class="cardLeft">
					<view class="boxindex">{{index+1}}</view>
				</view>
				<view class="cardRight">
					<view class="itemtitle">
						<text>{{item.cd004}}</text>
						<text>{{effectiveLabelCount(item)}}</text>
					</view>
					<view>
						<text>{{item.cd005}}</text>
						<text></text>
					</view>
					<view>
						<text>{{$t('到货数量')}}</text>
						<text><text>{{item.cd008}}</text><text style="margin-left:20rpx">{{item.cd007}}</text></text>
					</view>
					<view>
						<text>{{$t('采购单号')}}</text>
						<text>{{item.cd011}}</text>
					</view>
					<view v-if="item.mb073 != null && item.mb073 !== ''">
						<text>{{$t('每箱数量')}}</text>
						<text>{{item.mb073}}</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.purcds && data.purcds.length) {
				data.purcds.forEach(element => {
					element['count'] = this.calcLabelCount(element.cd008, element.mb073);
				});
			}
			this.chargaArr = data.purcds
			this.info = data
		}
	},
    data() {
      return {
        chargaArr: [],
		loading: false,
		info: null
      };
    },
    created() {
    },
    methods: {
		/** 根据每箱数量计算标签个数：有每箱数量则 ceil(到货数量/每箱数量)，否则为 1 */
		calcLabelCount(cd008, mb073) {
			const qty = Number(cd008) || 0;
			const perBox = mb073 != null && mb073 !== '' ? (typeof mb073 === 'number' ? mb073 : parseInt(mb073, 10)) : 0;
			if (perBox > 0 && qty > 0) return Math.ceil(qty / perBox);
			return 1;
		},
		effectiveLabelCount(item) {
			return this.calcLabelCount(item.cd008, item.mb073);
		},
		editCard(row, index) {
			uni.navigateTo({
              url: '/pages/abnormal/abnormalRemoveEdit?info=' + encodeURIComponent(JSON.stringify(this.info)) + '&index=' + index
            });
		},
		submit(){
			const purcdPrintParamsList = this.chargaArr.map(v => {
				const mb073 = v.mb073 != null && v.mb073 !== '' ? (typeof v.mb073 === 'number' ? v.mb073 : parseInt(v.mb073, 10)) : null;
				const count = this.calcLabelCount(v.cd008, v.mb073);
				return { cd001: v.cd001, cd002: v.cd002, cd003: v.cd003, count, mb073 };
			})
			this.$u.api.purccprint({
				purcdPrintParamsList: purcdPrintParamsList,
				udf01: this.info.udf01
			})
			.then(res => {
				if (res.success) {
					this.$u.toast(i18n.t('提交成功'));
					setTimeout(()=> {
						this.goMypage('pages/abnormalRemove/abnormalRemove')
					}, 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;
		}
	}
  }
  ::v-deep .u-sticky {
    top: 0 !important;
    background: #fff;
  }
  .info {
	display: flex;
	line-height: 42px;
	padding: 20rpx 20rpx;
	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;
	}
  }
  </style>
  