<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="receving" @click="recevingDetail(item.id)">对账</text>
			</view>
			<view class="box">
				<view class="name">{{item.firstProductName}}</view>
				<view class="message-box">
					<text class="message">首商品编码:{{item.firstProductCode}}</text>
				</view>
				<view class="message-box">
					<text class="message">出库单号:{{item.deliveryNumber}}</text>
				</view>
				<view class="receving-date">
					<text class="message">发货日期:{{item.createDate}}</text>
					<text class="message">单据状态:{{item.deliveryStatus === 1 ? '提货' : '发货'}}</text>
				</view>
			</view>
		</view>
		<no-data :show="isRecordFlag" :text="$t('index.msg-receive-no')"></no-data>
	</view>
</template>

<script>
	import {
		getDeliveryNoticeByOrder
	} 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 {
				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) {
				getDeliveryNoticeByOrder({
					ladingType: row.type === 'deliver' ? 1 : 2,
					orderId: row.id
				}).then(({
					content
				}) => {
					this.recordLists = content
				})
			},
			recevingDetail(id) {
				uni.navigateTo({
					url: `/pages/receivingDetail/reconciliation?id=${id}`
				})
			},
			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;

				.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;
				margin-top: 20rpx;

				.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>