<template>
	<view class="parts-detail">
		<u-navbar back-icon-color="#333333" background="#F4F5F7" titleColor="#333333" :border-bottom="false" title-bold>
		</u-navbar>
		<view class="title-text">
			<text>{{title}}</text>
			<view v-show="showExpress" class="express-view" 
			@click="$u.throttle(handleClickExpress, 500)">
				<text>查看物流信息</text>
				<u-icon name="arrow-right"></u-icon>
			</view>
		</view>
		<view class="content-view">
			<view class="contacts-view" v-if="hasExpress">
				<image class="image-view" :src="shouhuodizhiImage"></image>
				<view class="right-view">
					<view class="contacts-top">
						<text>{{info.express.name}}</text>
						<text class="phone-view">{{info.express.phoneNumber}}</text>
					</view>
					<view class="adress-view">{{info.express.address}}</view>
				</view>
			</view>
			<view class="detail-view">
				<view class="list-content">
					<view class="list-item" v-for="(item, index) in info.items" :key="index">
						<SpareCell :item="item" :noteText="noteText"/>
					</view>
				</view>
				<view class="line-view"></view>
				<view class="detail-info-view">
					<view v-for="(value, key) in detailKey" :key="key">
						<view class="info-item" v-if="detail[key]">
							<view class="detail-left-view">
								<text>{{ value }}</text>
								<text @longpress="handleLongpress(key, detail[key])">
								{{ detail[key] }}</text>
							</view>
							<text class="copy-view" v-if="key == 'orderNumber'"
							@click="$u.throttle(handleClickCopy, 500)">复制</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="bottom-view" v-if="showButton">
			<view class="total-view">
				<text>合计：</text>
				<text class="amount-view">{{total}}</text>
				<text>件</text>
			</view>
			<u-button :custom-style="customStyle" shape="circle" @click="handleClick" type="primary">
				{{buttonText}}
			</u-button>
		</view>
		<view>
			<u-toast ref="uToast" />
		</view>
	</view>
</template>

<script>
	import SpareCell from "@/components/parts/spareCell.vue"
	export default {
		components: {
			SpareCell
		},
		data() {
			return {
				info: {
					items: [],
					express: {},
					status: '0'
				},
				logisticsRecords: [], // 物流
			};
		},
		computed: {
			texts() {
				return {
					'1': '取消申请',
					'10': '',
					'15': '签收',
					'20': '',
					'-2': '',
					'-1': '',
					'100': '',
					'91': ''
				}
			},
			buttonText() {
				return this.texts[this.info.status]
			},
			showButton() {
				return this.info.status == '1' || this.info.status == '15'
			},
			hasExpress() {
				return this.$u.test.isEmpty(this.info.express) ? false : true
			},
			showExpress() {
				return this.$u.test.isEmpty(this.info.express.number) ? false : true
			},
			buttonStyle() {
				return {
					'height': '104rpx',
					'width': '100%',
				}
			},
			// 待签收 15；待发货 10；待审核 1；已取消 -1；已驳回 -2；已签收 20； 100 已完成
			title() {
				return this.titles[String(this.info.status)] || this.info.statusText
			},
			titles() {
				// 待签收 15；  待发货 10；  待审核 1； 已取消 -1；  已驳回 -2； 已签收 20；已完成 100；已核销 91
				 // 已核销展示为已签收
				return {
					'1': '待审核',
					'10': '待发货',
					'15': '待签收',
					'20': '已签收',
					'-2': '已驳回',
					'-1': '已取消',
					'100': '已完成',
					'91': '已签收' // 已核销
				}
			},
			total() { // 合计
				var i = 0
				for (var item of this.info.items) {
					i += item.quantity
				}

				return i
			},
			placeholderImage() {
				return process.uniEnv.qn_base_url + 'morentupian.png'
			},
			shouhuodizhiImage() {
				return process.uniEnv.qn_base_url + 'shouhuodizhi.png'
			},
			customStyle() {
				return {
					'height': '80rpx',
					'width': '200rpx',
				}
			},
			noteText() {
				return this.info.categoryName + '-' + this.info.brandName
			},
			detail() { // 详情
				return {
					'orderNumber': this.info.orderNumber,
					'createTime': this.info.createTime ? this.$u.timeFormat(this.info.createTime, 'yyyy.mm.dd hh:MM:ss') : '',
					'deliveryTime': this.info.express.deliveryTime ? this.$u.timeFormat(this.info.express.deliveryTime, 'yyyy.mm.dd hh:MM:ss') : '',
					'applyRemark': this.info.applyRemark || '',
					'rejectReason': this.info.rejectReason || ''
				}
			},
			detailKey() { // 详情
				return {
					'orderNumber': '申请单号：',
					'createTime': '申请时间：',
					'deliveryTime': '发货时间：',
					'applyRemark': '备      注：',
					'rejectReason': '驳回原因：'
				}
			},
			operateTypes() {
				return {
					'1': 'cancelParts',
					'10': '',
					'15': 'receiveParts',
					'20': '',
					'-2': '',
					'-1': '',
					'100': '',
					'91': ''
				}
			},
			buttonOperateType() {
				return this.operateTypes[this.info.status]
			},
			// 待签收 15 -> 已签收 20； 待审核 1 -> 已取消 -1
			willStatuses() {
				return {
					'1': '-1',
					'10': '',
					'15': '20',
					'20': '',
					'-2': '',
					'-1': '',
					'100': '',
					'91': ''
				}
			},
			willStatus() {
				return this.willStatuses[this.info.status]
			},
		},
		onLoad() {
			getApp().trackPage('仓库配件详情')
			var pages = getCurrentPages();
			if (pages.length >= 2) {
				var page = pages[pages.length - 2];
				this.info = page.info
				this.info.express = this.info.express || {}
			}
		},
		methods: {
			handleClick() {
				if (this.buttonText === '取消申请') {
					uni.showModal({
							title: '提示',
							content: '确定' + this.buttonText + '?',
							success: (res) => {
									if (res.confirm) {
											this.handleClickSure()
									} else if (res.cancel) {
									}
							}
					})
				} else {
					this.handleClickSure()
				}
			},
			handleClickSure() {
				this.$u.api[this.buttonOperateType](this.info.id).then(res => {
					var type = 'error'
					var message = res.message
					if (res.code == 200) {
						type = 'success'
						this.info.status = this.willStatus
					} else {
						console.log(res.message)
					}
					this.$refs.uToast.show({
						title: message,
						type: type,
						duration: 1500,
						callback: ()=> {
							var pages = getCurrentPages();
							if (pages.length >= 2) {
								var page = pages[pages.length - 2];
								page.needRefresh = true
								uni.navigateBack()
							}
						}
					})
					
				})
			},
			// 查看物流
			handleClickExpress() {
				var pages = getCurrentPages();
				if (pages.length >= 1) {
					var page = pages[pages.length - 1];
					page.info = this.info
				}
				uni.navigateTo({
					url: 'pages/mine/warehouse/express'
				})
			},
			imageUrl(item) {
				return item.images ? process.uniEnv.systemUrl.apiUrl + item.images.split(',').shift() : this.placeholderImage
			},
			handleLongpress(key, text) { // 长按复制单号
				if (key == 'orderNumber') {
					uni.setClipboardData({
						data: text,
						success: function() {
							uni.getClipboardData({
							  success: function (res) {
								uni.showToast({
								  title: '复制成功'
								})
							  }
							})
						}
					});
				}
			},
			handleClickCopy() {
				uni.setClipboardData({
					data: this.info.orderNumber,
					success: function() {
						uni.getClipboardData({
						  success: function (res) {
							uni.showToast({
							  title: '复制成功'
							})
						  }
						})
					}
				});
			}
		}
	};
</script>

<style lang="scss" scoped>
	.parts-detail {
		background-color: #FFFFFF;
		border-radius: 12rpx;
		margin-bottom: 20rpx;
		background-color: #F4F5F7;
		height: 100vh;
		display: flex;
		flex-direction: column;

		.title-text {
			font-size: 48rpx;
			font-weight: bold;
			padding: 0 30rpx 24rpx 30rpx;
			display: flex;
			align-items: flex-end;
			justify-content: space-between;

			.express-view {
				color: #2272FF;
				font-size: 26rpx;
				margin-bottom: 6rpx;
			}
		}

		.content-view {
			margin: 0 30rpx 30rpx 30rpx;
			height: 100%;
			overflow: auto;

			.contacts-view {
				padding: 30rpx;
				background-color: #FFFFFF;
				border-radius: 12rpx;
				margin-bottom: 20rpx;
				display: flex;
				align-items: flex-start;

				.image-view {
					width: 72rpx;
					height: 72rpx;
					flex-shrink: 0;
				}

				.right-view {
					font-size: 26rpx;
					color: #666666;
					padding-left: 30rpx;

					.contacts-top {
						color: #333333;
						font-weight: bold;
						margin-bottom: 4rpx;

						.phone-view {
							padding-left: 30rpx;
						}
					}

					.address-view {
						word-break: break-all;
					}
				}
			}

			.detail-view {
				padding: 30rpx;
				background-color: #FFFFFF;
				border-radius: 12rpx;

				.line-view {
					background-color: #F4F5F7;
					height: 2rpx;
					width: 100%;
					margin-top: 20rpx;
					margin-bottom: 10rpx;
				}

				.list-content {
					margin-top: 10rpx;
					margin-bottom: 10rpx;

					.list-item {
						margin-bottom: 30rpx;
					}
				}

				.detail-info-view {
					.info-item {
						margin-top: 20rpx;
						color: #333333;
						font-size: 26rpx;
						display: flex;
						justify-content: space-between;
						align-items: center;

						.detail-left-view {
							white-space:pre;
						}

						.copy-view {
							color: #2272FF;
							padding-left: 30rpx;
						}
					}
				}
			}
		}

		.bottom-view {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin: 10rpx 30rpx 44rpx 30rpx;

			.total-view {
				font-size: 32rpx;
				font-weight: bold;
				color: #333333;

				.amount-view {
					color: #2272FF;
					padding-right: 14rpx;
				}
			}

		}
	}
</style>
