<template>
	<view class="container">
		<view class="list-box" v-for="item in recordLists" :key="item.id">
			<view class="title-box">
				<text class="date">{{item.lastUpdateDate}}</text>
				<!-- <text class="count">发货数量：11</text>
				<text class="count">本次收货：11</text> -->
			</view>
			<view class="box" v-for="product in item.productInfos" :key="product.id">
				<view class="name">{{product.productName}}</view>
				<view class="message-box">
					<text class="message">{{$t('index.product-code')}}:{{product.productCode}}</text>
					<text class="message">{{$t('index.product-spec')}}:{{product.varieties}}</text>
				</view>
				<view class="receving-date">
					<text class="message">{{$t('index.number')}}:{{product.count}}</text>
					<text class="message">{{$t('index.send-num-this')}}:{{product.sendGoodsCount}}</text>
					<text class="message">{{$t('index.received-num-this')}}:{{product.receiveGoodsCount}}</text>
					<!-- <view class="flex-box">
						<view class="value" v-for="(value, key) in product.sendBranchNumber" :key="key">批次号：{{value}}</view>
					</view>
					<view class="flex-box">
						<view class="value" v-for="(value, key) in product.sendGoodsCount" :key="key">发货数量：{{value}}</view>
					</view>
					<view v-if="!isEdit" class="flex-box">
						<view class="value" v-for="(value, key) in product.receiveGoodsCount" :key="key">提货数量：{{value}}</view>
					</view> -->
				</view>
			</view>
			<view class="upload-box" v-if="item.sendFileList && item.sendFileList.length">
				<view class="upload-title">{{$t('index.send-annex-list')}}</view>
				<view class="upload">
					<view v-for="files in item.sendFileList" :key="files.id" class="name-list"
						@click="previewImage(files)">{{files.fileName}}</view>
				</view>
			</view>
			<view class="upload-box" v-if="item.receiveFileList && item.receiveFileList.length">
				<view class="upload-title">{{$t('index.receive-annex-list')}}</view>
				<view class="upload">
					<view v-for="files in item.receiveFileList" :key="files.id" class="name-list"
						@click="previewImage(files)">{{files.fileName}}</view>
				</view>
			</view>
		</view>
		<no-data :show="isRecordFlag" :text="$t('index.msg-receive-no')"></no-data>
	</view>
</template>

<script>
	import {
		getSendGoodsByOrder
	} from '@/config/api.js'
	import noData from '../../components/no-data/no-data.vue';
	import serverConfig from '@/config/server_config.js'
	export default {
		name: 'receivingRecord',
		data() {
			return {
				isLoad: true,
				recordLists: []
			}
		},
		components: {
			noData
		},
		computed: {
			isRecordFlag() {
				return this.recordLists.length === 0
			}
		},
		// filters: {
		// 	getImage(id) {
		// 		return `${serverConfig.baseURL}/api/file/file/download/viewPdfById?fileId=${id}`
		// 	}
		// },
		methods: {
			getRecordLists(row) {
				getSendGoodsByOrder({
					ladingType: row.type === 'deliver' ? 1 : 2,
					orderId: row.id
				}).then(({
					content
				}) => {
					let data = content.filter(item => item.receiveGoodsStatus === 1)
					data.forEach(item => {
						item['productInfos'] = JSON.parse(item.productInfo)
					})
					this.recordLists = data
					this.isLoad = false
				})
			},
			previewImage(item) {
				if (['jpg', 'png'].includes(item.fileType)) {
					const urls = `${serverConfig.baseURL}/api/file/file/download/viewPdfById?fileId=${item.id}`
					uni.previewImage({
						current: 0,
						urls: [urls]
					})
				} else {
					wx.downloadFile({
						url: `${serverConfig.baseURL}/api/file/file/download/viewPdfById?fileId=${item.id}`,
						success: function(res) {
							var filePath = res.tempFilePath;
							wx.openDocument({
								filePath: filePath,
								fileType: item.fileType,
								success: function(res) {
									console.log(res);
								},
								fail: function(res) {
									console.log(res);
								}
							})
						},
						fail: function(res) {
							console.log('文件下载失败');
						},
						complete: function(res) {},
					})
				}
			}
		},
		onLoad(options) {
			this.getRecordLists(options)
		}
	}
</script>

<style lang="scss" scoped>
	.list-box {
		margin-top: 20rpx;
		padding: 0 30rpx 20rpx;
		background-color: #fff;

		.title-box {
			height: 84rpx;
			padding-left: 30rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			position: relative;
			border-bottom: 1rpx solid #D5E2F3;

			&::before {
				content: " ";
				position: absolute;
				top: 25rpx;
				left: 0;
				width: 8rpx;
				height: 34rpx;
				background-color: #B60001;
				border-radius: 4rpx;
			}

			// .date {
			// 	font-size: 34rpx;
			// 	color: #B60001;
			// }

			// .count {
			// 	margin-left: 40rpx;
			// 	font-size: 28rpx;
			// 	color: #99A0AF;
			// }
			.receving {
				font-size: 12px;
				color: #B60001;
			}
		}

		.box {
			padding: 20rpx 20rpx 0 20rpx;
			border: 1rpx solid #D5E2F3;
			border-radius: 20rpx;
			margin-top: 20rpx;

			.name {
				font-size: 28rpx;
				color: #B60001;
			}

			.message-box {
				display: flex;
				flex-wrap: wrap;
				padding-bottom: 20rpx;

				.message {
					font-size: 12px;
					color: #99A0AF;
					margin-top: 20rpx;

					&:not(:last-child) {
						margin-right: 30rpx;
					}
				}
			}

			.receving-date {
				padding: 20rpx 0;
				color: #99A0AF;
				font-size: 12px;
				line-height: 1;
				border-top: 1rpx solid #D5E2F3;
				display: flex;
				justify-content: space-between;

				.flex-box .value:not(:first-child) {
					margin-top: 10rpx;
				}
			}
		}
	}

	.upload-box {
		margin-top: 20rpx;

		.upload-title {
			font-size: 28rpx;
			color: #B60001;
		}

		.upload {
			margin-top: 20rpx;
			// display: flex;
			// justify-content: space-between;

			// &::after {
			// 	content: " ";
			// 	width: 210rpx;
			// 	height: 0;
			// 	overflow: hidden;
			// }

			// .thumb {
			// 	width: 210rpx;
			// 	height: 210rpx;
			// 	border-radius: 20rpx;
			// }

			.name-list {
				font-size: 28rpx;
				color: #B60001;
				word-break: break-all;
				padding: 10rpx 0;
			}
		}
	}
</style>