<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.th001 }}</text>
				</view>
				<view>
					<text class="underline">{{ info.th005 }}</text>
				</view>
			</view>
			<view>
				<view>
					<text class="underline">{{ info.th002 }}</text>
				</view>
				<view>
					<text class="underline">{{ info.ma003 }}</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.ti004}}</text>
						<view>
							<text style="color: #006400">{{item.ti019}}</text>
							<text style="color: #8b008b; margin-left: 40rpx">{{item.ti022}}</text>
						</view>
					</view>
					<view>
						<text>{{item.ti005}}</text>
						<text></text>
					</view>
					<view>
						<text>{{$t('库位')}}</text>
						<text><text>{{ calckw(item.ti060) }}</text></text>
					</view>
					<view>
						<text>{{$t('进货数量')}}</text>
						<text><text>{{item.ti007}}</text><text style="margin-left:20rpx">{{item.ti008}}</text></text>
					</view>
					<view>
						<text>{{$t('报废数量')}}</text>
						<text><text>{{item.ti021}}</text><text style="margin-left:20rpx">{{item.ti008}}</text></text>
					</view>
					<view>
						<text>{{$t('工单单号')}}</text>
						<text>{{item.ti014}}</text>
					</view>
					<view>
						<text>{{$t('批号')}}</text>
						<text>{{item.ti010}}</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));
			data.moctis.forEach(element => {
				if(typeof element.ti060 === 'string') {
					element.ti060 = element.ti060.trim()
				}
			});
			this.chargaArr = data.moctis
			this.info = data
		}
	},
    data() {
      return {
        chargaArr: [],
		loading: false,
		info: null
      };
    },
    created() {
    },
    methods: {
		editCard(row, index) {
			uni.navigateTo({
              url: '/pages/mocthgetforputon/Edit?info=' + encodeURIComponent(JSON.stringify(this.info)) + '&index=' + index
            });
		},
		calckw(str){
			if(!str) return i18n.t('库位')
			if(typeof str === 'string' && !str.trim()) {
				return i18n.t('库位')
			}
			return str
		},
		submit(){
			const purcdPrintParamsList = this.chargaArr.map(v => ({ti001: v.ti001, ti002: v.ti002, ti003: v.ti003, ti060: v.ti060}))
			this.$u.api.mocthputon({
				th001: this.info.th001,
				th002: this.info.th002,
				moctis: purcdPrintParamsList
			})
			.then(res => {
				if (res.success) {
					this.$u.toast(i18n.t('提交成功'));
					setTimeout(()=> {
						this.goMypage('pages/mocthgetforputon/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;
		}
	}
  }
  ::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>
  