<template>
	<div>
		<u-popup :show="show"  :round="10"  mode="bottom" :safeAreaInsetBottom="false" @close="close" zIndex="10078" :customStyle="popupStyle">
			<view class="bigBox" :style="{'margin-top':'-20rpx'}" @touchstart="start" @touchmove.stop.prevent="move" @touchend="end" ref="op">
				<scroll-view class="scroll-view" :scroll-y="true">
					<div class="order_flow" >
						<div class="close_icon" @click="close">
							<u-icon name="close-circle" color="#666666" size="28" :top="-3"></u-icon>
						</div>
						<div class="code">取单码 {{ orderInfo.orderNum }}</div>
						<!-- <image mode="scaleToFill" :src="qrCode" class="qr_code"></image> -->
						<div class="qr_code_readly" v-if="!showMask">
							<image mode="scaleToFill" :src="qrCode" class="qr"></image>
						</div>
						<div class="qr_code" v-else>
							<image :src="'/static/imgs/erweimazhedang.png'" class="qr"></image>
						</div>
						<!-- <view class="status_text" v-if="showMask">——制作完成后才能扫哦——</view> -->
						<div class="flow_describe">
							<view class="titleBox">
								<view class="qrcodeTitle">
									<view class="title">扫码流程</view>
									<view class="icon">
										<u-icon name="question-circle" color="#999999" :size="getPx(34)"></u-icon>
									</view>
								</view>
								<view class="right" @click="goShow()">
										<view class="Text">
											<view>查看实景演示</view>
											<image class="arrow" :style="{'height':'18rpx','width':'10rpx'}"  :src="'../../static/imgs/jiantouhui.png'" />
										</view>
								</view>
							</view>

							<image :mode="'aspectFit'" class="flow_img" :src="'/static/imgs/saomaliucheng.png'"></image>
						</div>

					</div>
					<div class="flow_describe_tips">
						<view class="title">注意事项</view>
						<view class="text">
							<view>
								<view>1.&nbsp;冷饮拍完照记得搅拌哦~搅拌3圈风味更佳</view>
								<view>2.&nbsp;吸管请到两边窗口自取</view>
								<view>3.&nbsp;热饮小心烫嘴!</view>
								<view>4.&nbsp;对出品任何不满请联系客服退款或重做</view>
							</view>
							<image :mode="'aspectFit'" class="tips_img" :src="'/static/imgs/jiaoban.png'" />
						</view>
					</div>
				</scroll-view>

			</view> 
		</u-popup>
	</div>
</template>

<script>
export default {
	data() {
		return {
			orderInfo: {},
			qrCode: '',
			show: false,
			clientYStart:0,
			clientYEnd:0,
			bigBox:{},
			popupStyle:{
				'transform':'translate(0rpx, 0rpx)'
			}
		}
	},
	computed: {
		// 0 创建未校验 
		// 1 未支付 
		// 2 已支付 
		// 3 支付制作中 
		// 4 制作完成未取 
		// 5 取餐中 
		// 6 正常完成 
		// 7 待取超时 
		// 8 未支付取消 
		// 9 支付后制作前取消 
		// 10 制作中取消 
		// 11 制作完成取消 
		// 12 退款中
		// 13 退款失败
		// 14 部分退款 
		// 15 已退款 
		// 50 其他人工干预状态
		showMask() {
			return ['2', '3'].indexOf(this.orderInfo.state) != -1;
		},
		orderStatusText() {
			switch (this.orderInfo.state) {
				case '2':
					return '待制作'
				case '3':
					return '制作中'
				default:
					return ''
			}
		}
	},
	mounted() {

	},
	methods: {
		goShow() {
			uni.navigateTo({url:'/orderSubPackage/pages/showhow/index'})
		},
		getPx(rpx) {
			// console.log((rpx * (wx.getSystemInfoSync().windowWidth / 750)));
			// console.log(wx.getSystemInfoSync().windowWidth);
			return rpx * (wx.getSystemInfoSync().windowWidth / 750);
		},
		start(e) {
				this.clientYStart = e.changedTouches[0].clientY
			},
		move(e) {
			this.clientYEnd = e.changedTouches[0].clientY;
			const val = parseInt((this.clientYStart-this.clientYEnd))
			if(val<0){
				this.popupStyle.transform = `translateY(${-val}px)`
			}
			if(val<-20){
				this.close()
			}
		},
		end(e) {
			this.clientYEnd = e.changedTouches[0].clientY;
			const val = parseInt((this.clientYStart-this.clientYEnd))
			console.log(val)
			if(val>-20){
				this.popupStyle.transform = 'translateY(0px)'
			}
		},
		close() {
			this.show = false;
		},
		open(data, path) {
			this.popupStyle.transform = 'translateY(0px)'
			this.show = true;
			this.orderInfo = data;
			// console.log("order:"+JSON.stringify(this.orderInfo));
			
			if(this.showMask) {
				this.qrCode = '';
			} else {
				this.qrCode = path;
			}
		},
		jsonParse(json) {
			return JSON.parse(json)
		},
	}
}
</script>

<style lang="scss" scoped>
.pages {
	padding-top: 1rpx;
	padding-bottom: 30rpx;
}

.scroll-view{
    height: 94vh; 
    overflow-y: scroll;
}

.text {
	font-size: 20rpx;
	font-family: PingFangSC-Regular, PingFang SC;
	font-weight: 400;
	color: #333333;
	line-height: 30rpx;
}

.order_status {
	background: #FFFFFF;
	margin: 32rpx  32rpx;
	padding: 24rpx 0rpx 30rpx 0rpx;


	.btns {
		text-align: center;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.btn {
		width: 160rpx;
		height: 52rpx;
		background: #006ECF;
		border-radius: 6rpx;
		display: inline-block;
		margin: 20rpx;
		padding: 0;
		line-height: 52rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		font-size: 20rpx;
		text-align: center;
	}
}
.bigBox {
	background: #F7F7F7;
	border-radius: 10px 10px 0px 0px;
	overflow: auto;
	height: 90.1vh;
	z-index: 10078 !important;
}

.order_flow {
	background: #FFFFFF;
	margin: 32rpx;
	position: relative;
	padding-top: 54rpx;
	padding-bottom: 62rpx;
	.status_text {
		font-size: 28rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #666666;
		text-align: center;
	}
	.code {
		font-size: 36rpx;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 600;
		color: #000000;
		text-align: center;
	}
	.qr_code_readly{
		margin: 20rpx auto;
		margin-top: 38rpx;
		margin-bottom: 66rpx;
		width: 474.6rpx;
		height: 476rpx;
		.qr {
			width: 100%;
			height: 100%;
		}
	}
	.qr_code {
		height: 468rpx;
		width: 470rpx;
		display: block;
		margin: 42rpx auto;
		position: relative;
		padding-bottom: 70rpx;
		margin-bottom: 0rpx;
		margin-left: 107rpx;
		
		.status_text {
			font-size: 28rpx;
			margin-top: 39rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #333333;
			text-align: center;
		}
	
		.qr {
			width: 100%;
			height: 100%;
		}
	}


	.flow_describe {
		width: 100%;
		height: 300rpx;
		padding-left: 31rpx;

		.titleBox {
		display: flex;
		align-items: flex-end;

		.qrcodeTitle {
			display: flex;
			justify-content: flex-start;
			align-items: center;

			.title {
				height: 40rpx;
				line-height: 40rpx;
				font-size: 28rpx;
				font-family: PingFangSC-Semibold, PingFang SC;
				font-weight: 600;
				color: #000000;
			}

			.icon {
				margin-left: 16rpx;
			}
		}

		.title {
			font-size: 28rpx;
			font-family: PingFangSC-Semibold, PingFang SC;
			font-weight: 600;
			color: #000000;
		}




		.right {
				display: flex;
				margin-left: 8rpx;
				margin-bottom: 2rpx;

				.Text {
					font-size: 20rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #999999;
					display: flex;
					align-items: center;
				}

				.arrow {
					margin-left: 8rpx;
				}
			}
		}

		.flow_img {
			padding:18rpx 32rpx 0rpx 32.83rpx;
			width: 590rpx;
			height: 244rpx;
			display: block;
		}
	}

	.close_icon {
		width: 40rpx;
		height: 40rpx;
		top: 0rpx;
		right: 8rpx;
		position: absolute
	}


}
.flow_describe_tips{
	margin-top: 100rpx;
	background: #FFFFFF;
	margin: 32rpx;
	padding: 26rpx 32rpx 32rpx 32rpx;
	.title{
		font-size: 28rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #333333;
		padding-bottom: 24rpx;
		border-bottom: 0.1rpx solid #F4F4F4;
		letter-spacing: 1rpx;
	}
	.text {
		display: flex;
		justify-content: space-between;
		margin-top: 18rpx;
		font-size: 24rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #999999;
		line-height: 48rpx;
	}
	.tips_img {
		width: 142rpx;
		width: 138rpx;
	}
}
.customer_service {
	height: 90rpx;
	line-height: 90rpx;
	background: #FFFFFF;
	border-radius: 10rpx;
	font-size: 28rpx;
	font-family: PingFangSC-Medium, PingFang SC;
	font-weight: 500;
	color: #000000;
	padding: 0 64rpx;
	margin: 32rpx 0;

	display: flex;
	justify-content: space-between;
}
</style>