<template>
	<view style="background: white;">
		<view class="search-box">
			<shopping-search ref="shoppingSearch" :placeholder="$t('index.enter')+$t('index.order-code')"
				@search="onSearch" @screen="onScreen" />
		</view>
		<view class="container">
			<view class="content-box" v-for="item in dataList" :key="item.id">
				<view class="content-message-box">
					<view class="li-box">
						<view class="li">{{$t('index.order-code')}}：<text
								style="color: #222;">{{item.orderNumber}}</text></view>
						<view class="li">{{$t('index.first-product-name')}}：<text
								style="color: #222;">{{item.firstProductName}}</text>
						</view>
						<view class="li">{{$t('index.contract-up')}}：<text
								style="color: #222;">{{item.upperreaches}}</text></view>
						<view class="li">{{$t('index.contract-down')}}：<text
								style="color: #222;">{{item.downstream || $t('index.none')}}</text>
						</view>
						<view class="li">{{$t('index.order-type')}}：<text
								style="color: #222;">{{item.deliveryType === 1 ? $t('index.delivery') : $t('index.pickup-self')}}</text>
						</view>
					</view>
				</view>
				<view class="message-box">
					<view class="li">{{$t('index.peisongshijian')}}：<text
							style="color: #222;">{{item.ladingDate || $t('index.none')}}</text>
					</view>
					<view class="submit-btn" v-if="item.operationStatus !== 0">
						<view class="btn" @click="onRouterPage(item.id)">
							{{item.ladingType === 1 ? $t('index.receive-sure') : $t('index.shenqingtihuo')}}
						</view>
					</view>
				</view>
				<view class="statue-box">
					<view style="width: 100%;height: 100%;position: relative;">
						<image style="width: 100%;height: 100%;" :src="web('icon_yanhuo_no.png')"></image>
					</view>
					<view style="position: absolute;top: 12rpx;left: 20rpx;right: 20rpx;">
						{{item.deliveryStatus | statusOptionValue}}
					</view>
				</view>
			</view>
		</view>
		<no-data :show="isNoData"></no-data>
		<uni-load-more :status="listStatus"></uni-load-more>

		<uni-popup ref="popup" type="right" @maskClick="statusKey = -1" :safe-area="false">
			<view class="handle-list">
				<view class="title">{{$t('index.tongzhidanzhuangtai')}}</view>
				<view class="list-box">
					<view class="status" :class="{'active': item.key === statusKey}" v-for="item in statusList"
						:key="item.key" @click="statusKey = item.key">{{item.value}}</view>
				</view>
				<view class="btn-box">
					<view @click="onReset" class="btn reset">{{$t('index.reset')}}</view>
					<view @click="onConfirm" class="btn confirm">{{$t('index.sure')}}</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		Moment
	} from '@/utils/moment.js'
	import {
		getDeliveryNoticeApi
	} from '@/config/api.js'
	import ShoppingSearch from '../../components/shopping-search/shopping-search.vue';
	import noData from '../../components/no-data/no-data.vue';

	import VueI18n from 'vue-i18n'
	import messages from '@/locale/index.js'
	import {
		web
	} from '@/utils/util.js'

	let i18nConfig = {
		locale: uni.getLocale(),
		messages
	}
	const i18n = new VueI18n(i18nConfig)

	export default {
		name: 'delivery',
		components: {
			ShoppingSearch,
			noData
		},
		data() {
			return {
				page: 1,
				rows: 10,
				serachValue: '',
				dataList: [],
				listStatus: 'more',
				statusKey: -1,
				statusList: [{
						key: 1,
						value: i18n.t('index.yishouhuo')
					},
					{
						key: 2,
						value: i18n.t('index.weiti')
					},
					{
						key: 3,
						value: i18n.t('index.yichuku')
					},
					{
						key: 4,
						value: i18n.t('index.weichuku')
					},
					{
						key: 5,
						value: i18n.t('index.weishouhuo')
					}
				]
			}
		},
		filters: {
			statusOptionValue(key) {
				let deliveryStatusOption = [{
						key: 1,
						value: i18n.t('index.yishouhuo')
					},
					{
						key: 2,
						value: i18n.t('index.weiti')
					},
					{
						key: 3,
						value: i18n.t('index.yichuku')
					},
					{
						key: 4,
						value: i18n.t('index.weichuku')
					},
					{
						key: 5,
						value: i18n.t('index.weishouhuo')
					}
				]
				return deliveryStatusOption.find(item => item.key === key).value
			}
		},

		computed: {
			isNoData() {
				return this.dataList.length === 0
			}
		},
		methods: {
			web(name) {
				return web(name)
			},
			onSearch(val) {
				this.serachValue = val
				this.page = 1
				this.onDataList()
			},
			onScreen() {
				this.$refs.popup.open()
			},
			async onDataList(refresh = false) {
				let {
					content
				} = await getDeliveryNoticeApi({}, {
					params: {
						page: this.page,
						rows: this.rows,
						orderNumber: this.serachValue,
						deliveryStatus: this.statusKey === -1 ? '' : this.statusKey
					}
				})
				content.content.forEach(item => {
					let downstream = item.contractList.find(type => type.platformType === 'buyer')
					let upperreaches = item.contractList.find(type => type.platformType !== 'buyer')
					item['upperreaches'] = upperreaches ? upperreaches.contractNum : ''
					item['downstream'] = downstream ? downstream.contractNum : ''
				})
				if (this.page === 1) {
					this.dataList = content.content
				} else {
					this.dataList = [...this.dataList, ...content.content]
				}
				if (this.page >= content.totalPages) {
					this.listStatus = 'noMore'
				} else {
					this.page++
					this.listStatus = 'more'
				}
				if (refresh) uni.stopPullDownRefresh()
			},
			onReset() {
				this.serachValue = ''
				this.statusKey = -1
				this.page = 1
				this.onDataList()
				this.$refs.popup.close()
			},
			onConfirm() {
				this.page = 1
				this.onDataList()
				this.$refs.popup.close()
			},
			onRouterPage(id) {
				uni.navigateTo({
					url: `/pages/receivingDetail/index?id=${id}`
				});
			}
		},
		onLoad() {
			this.onDataList()
		},
		onPullDownRefresh() {
			this.page = 1
			this.onDataList(true)
		},
		onReachBottom() {
			if (this.listStatus === 'noMore') return
			this.listStatus = 'loading'
			this.onDataList()
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background: #fff;
	}

	.search-box {
		padding: 20rpx;
		background-color: #fff;
	}

	.container {
		padding: 0 20rpx;

		.content-box {
			position: relative;
			border: 1px solid #f2f2f2;
			margin-top: 40rpx;
			padding: 40rpx 30rpx;
			padding-bottom: 0;
			background-color: #fff;

			.content-message-box {
				display: flex;
				padding-bottom: 40rpx;
				border-bottom: 1px solid #f2f2f2;

				.li-box {
					flex: auto;

					.li {
						line-height: 60rpx;
						font-size: 28rpx;
						color: #93989e;
					}
				}


			}

			.message-box {
				height: 144rpx;
				font-size: 28rpx;
				color: #93989e;
				display: flex;
				align-items: center;
				justify-content: space-between;
			}

			.submit-btn {
				text-align: right;

				.btn {
					height: 72rpx;
					font-size: 15px;
					font-weight: 500;
					padding: 0 50rpx;
					color: #fff;
					line-height: 72rpx;
					display: inline-block;
					background-color: #B60001;
				}
			}

			.statue-box {
				position: absolute;
				top: 0;
				right: 0;
				flex: none;
				width: 78rpx;
				height: 146rpx;
				line-height: 32rpx;
				font-size: 28rpx;

				font-size: 28rpx;
				color: #fff;
				text-align: center;
			}
		}
	}

	.handle-list {
		background-color: #fff;
		border-radius: 5px 0 0 5px;
		margin-top: 30%;
		width: 400rpx;

		.title {
			line-height: 80rpx;
			font-size: 28rpx;
			text-align: center;
			color: #B60001;
			border-bottom: 1rpx solid #f1f2fa;
		}

		.list-box {
			display: flex;
			flex-wrap: wrap;
			align-content: flex-start;
			height: 400rpx;
			padding: 30rpx;

			.status {
				box-sizing: border-box;
				width: 150rpx;
				height: 60rpx;
				text-align: center;
				line-height: 60rpx;
				border: 1rpx solid #d7d7d7;
				font-size: 28rpx;
				color: #B60001;
				margin-bottom: 40rpx;

				&:nth-child(2n + 1) {
					margin-right: 40rpx;
				}

				&.active {
					border-color: #02a7f0;
				}
			}
		}

		.btn-box {
			display: flex;
			border-top: 1rpx solid #f1f2fa;

			.btn {
				width: 50%;
				height: 80rpx;
				line-height: 80rpx;
				text-align: center;
				font-size: 32rpx;
			}

			.reset {
				color: #1abc9c;
			}

			.confirm {
				color: #02a7f0;
			}
		}
	}
</style>