<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)">{{$t('index.outbound')}}</text>
			</view>
			<view class="box">
				<view class="name">{{item.firstProductName}}</view>
				<view class="message-box">
					<view>
						<text class="message">{{$t('index.order-code')}}:{{item.orderNumber}}</text>
					</view>
					<view>
						<text class="message">{{$t('index.product-code')}}:{{item.firstProductCode}}</text>
					</view>
				</view>
				<view class="receving-date">
					<view class="value">
						{{$t('index.document-type')}}：{{$t('index.chukudan')}}
					</view>
					<view class="value">单据状态：{{item.deliveryStatus === 4 ? '未出库' : '已出库'}}</view>
				</view>
			</view>
		</view>
		<no-data :show="isRecordFlag" :text="$t('index.msg-receive-no')"></no-data>
	</view>
</template>

<script>
	import {
		getNoticeNeedList
	} 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 {
				page: 1,
				rows: 10,
				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: {
			async getRecordLists(orderId) {
				let {
					content
				} = await getNoticeNeedList({
					orderId,
					page: this.page,
					rows: this.rows
				})
				this.recordLists = content.seller
			},
			recevingDetail(id) {
				let userInfo = JSON.parse(uni.getStorageSync('userInfo'))
				if(userInfo.userCurrentPlatName === 'operator') {
					uni.navigateTo({
						url: `/pages/receivingDetail/detail?id=${id}`
					})
				} else {
					uni.navigateTo({
						url: `/pages/receivingDetail/sellerDetail?id=${id}`
					})
				}
			}
		},
		onLoad(options) {
			this.getRecordLists(options.id)
		}
	}
</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;
			}

			.receving {
				font-size: 12px;
				color: #B60001;
			}
		}

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

			.name {
				font-size: 28rpx;
				color: #222;
				font-weight: 500;
			}

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

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

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

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

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