<template>
	<view class="order-pages">
		<view class="order-info">
			<!-- 订单状态 -->
			<view class="order-status">
				<view class="status-title flex align_center justify_center">
					<view class="t-icon icon t-icon-icon_complete"></view>
				{{orderInfo.orderStateDictValue}}
				</view>
				<view class="status-care">
					预约时间：2021-05-10 15:10:05
				</view>
			</view>
			<!-- 服务信息 -->
			<view class="info-main">
				<view class="flex align_center">
					<view class="new-left">
						陕西省西安市未央区华
						帝金座602室
					</view>
				</view>
				<view class="time flex align_center justify_between">
					<text>百果园(贞观路店)</text>
					<view class="flex align_center">
						<view class="t-icon phone t-icon-icon_phone"></view>
						<text>18092252287</text>
					</view>
				</view>
			</view>
			<!-- 预约信息 -->
			<view class="item-info">
				<view class="item flex justify_between">
					<text>预约品类</text>
					<text>纸品类，金属类</text>
				</view>
				<view class="item flex justify_between">
					<text>预约重量</text>
					<text>50-100kg</text>
				</view>
			</view>
			<!-- 订单信息 -->
			<view class="item-info">
				<!-- <view class="item flex justify_between">
					<text class="item-title">订单信息</text>
				</view> -->
				<view class="item flex justify_between">
					<text>订单编号</text>
					<text>202102022225</text>
				</view>
				<view class="item flex justify_between">
					<text>下单时间</text>
					<text>2021-04-19 15:33</text>
				</view>
				<view class="item flex justify_between">
					<text>服务时间</text>
					<text>2021-04-19 15:33</text>
				</view>
			</view>
			<!-- 图片 -->
			<view class="item-info">
				<view class="item-title flex justify_between">
					<text>图片</text>
				</view>
				<view class="item flex">
					<u-image class="img-icon" :src="item.icon?item.icon:'../../static/img/mddef.jpg'" border-radius="16" width="160" height="160"></u-image>
				</view>
			</view>
			<!-- 回收品类明细 -->
			<view class="item-info">
				<view class="item-title flex justify_between">
					<text>回收品类明细</text>
				</view>
				<view class="item flex">
					<view class="item-type active">
						纸质类
					</view>
					<view class="item-type">
						纸质类
					</view>
				</view>
				<view class="item flex justify_between">
					<text>黄纸1.24元/kg</text>
					<text>5kg/6.20元</text>
				</view>
			</view>
			<!-- 金额 -->
			<view class="item-info">
				<view class="item flex justify_between">
					<text>应付金额</text>
					<text>22.20 元</text>
				</view>
				<view class="item flex justify_between">
					<text>支付方式</text>
					<text>线下</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import moment from 'moment'
	export default {
		data() {
			return {
				orderInfo: {
					id: '',
					createDate: '2021-05-10 15:22',
					orderStateDictValue: '已完成',
					storeName: '昆仑润滑·车领主 (西咸新区-...',
					location: '2.9km',
					orderState:'WAIT_PAY',
					type: [
						{
							name:'纸质类',
							id: '1'
						},
						{
							name:'衣物类',
							id: '12'
						}
					],
					orderGoodsList: [
						{
							goodsImages: '',
							goodsName: '水蜡免擦洗车(轿车）',
							payGold: 200,
							buyQty: 2,
							goodsNum: 5,
						},
						{
							goodsImages: '',
							goodsName: '水蜡免擦洗车(轿车）',
							payGold: 200,
							buyQty: 2,
							goodsNum: 5,
						},
					],
					payGold: 450
				},
				totalPrice: 0, // 支付合计
				password: '', // 支付密码
				showSetPswModal: false,  // 设置支付密码弹窗
				showInputPsw: false, // 打开输入密码弹窗
				showLeavePsw: false, // 打开确定放弃弹窗
				orderId: '', // 订单id
				leftTime: null,
				payFinish: false , // 是否支付成功
				focus: false
			}
		},
		onLoad(options) {
			// 监听设置密码是否成功
			uni.$once('setPswSuccess', this.setPsw)
			if (options.id) {
				console.log(options.id)
				this.orderId = options.id
				// this.getOrderDetail()
			}
			// 开启分享
			uni.showShareMenu({
				withShareTicket: true,
				menus: ['shareAppMessage', 'shareTimeline']
			})
		},
		computed: {
			
		},
		methods: {
			// 支付剩余时间
			leftTimeFun() {
				const date1 = moment().toArray()  //  当前时间 数组形式
				const date2 = moment(this.orderInfo.orderTime).toDate()  //  下单时间  日期格式
				const date3 = moment(date2).toArray()  //  下单时间  数组形式
				const date4 = moment(date1).diff(moment(date3), 'seconds')//计算相差的秒数
				const tt = 30 - Math.ceil(date4/60)  //向上取整
				if (tt > 0) {
					this.leftTime = tt
				} else {
					// this.getOrderDetail()
					this.leftTime = '00'
				}
			},
			// 获取订单详情
			getOrderDetail() {
				orderDetail({
					id: this.orderId
				}).then(res => {
					console.log(res,'rrrrrrrr')
					if (res.status == 200) {
						this.orderInfo = res.data
						if(this.orderInfo.orderState=='WAIT_PAY') {
							this.leftTimeFun()
						}
					} 
				})
			},
			// 跳转到设置支付密码页
			toSetPwd () {
				uni.navigateTo({
					url:"/pages/userCenter/userInfo/smsVerification"
				})
			},
			// 设置密码成功, 打开输入密码弹窗
			setPsw (e) {
				if (e.success) {
					this.showInputPsw = true
					setTimeout(()=>{
						this.focus = true
					},300)
				}
			},
			// 关闭输入密码弹窗
			closePayModal(){
				if(!this.payFinish) {
					this.showLeavePsw = true
				} 
			},
			//确认放弃
			canclePay() {
				this.password = ''
				this.showLeavePsw = false
				this.showInputPsw = false
				this.focus = false
			},
			// 继续支付
			payAgain () {
				this.focus = false
				this.showLeavePsw = false
				this.showInputPsw = true
				setTimeout(()=>{
					this.focus = true
				},300)
			},
			// 支付 判断用户是否设置过支付密码
			toPay() {
				this.totalPrice = this.orderInfo.originalGold
				this.payFinish = false
				// 判断用户是否设置过支付密码
				existPayPwd().then(res=>{
					console.log(res,'rrrrrr')
					if(res.status == 200) {
						// 设置过支付密码,输入密码
						if(res.data) {
							this.showInputPsw = true
							setTimeout(()=>{
								this.focus = true
							},300)
						} else {
							// 没设置过支付密码,提示设置密码
							 this.showSetPswModal = true
						}
					} 
				})
			},
			// 支付
			toPayOrder() {
				if (this.password === '') {
					uni.showToast({
						title: '请先输入支付密码',
						icon: 'none'
					})
					return false
				}
				let id = this.orderInfo.id
				let params = {
					payPwd: this.password,
					id: id
				}
				signPay(params).then(res=>{
					this.btnLoading = false
					if(res.status == 200) {
						// 关闭弹窗 刷新页面
						this.payFinish = true
						this.showInputPsw = false
						this.getOrderDetail()
						// 刷新订单列表
						uni.$emit('refresh')
						// 跳转到支付完成界面
						uni.navigateTo({
							url:"/pagesA/toOrder/payFinish?id=" + id
						})
					} else{
						this.password = ''
					}
				})
			},
		},
	}
</script>

<style lang="scss">

	.order-pages {
		width: 100%;
		height: 100vh;
		display: flex;
		flex-direction: column;
		background-color: #F5F5F5;
		.order-info {
			width: 100%;
			flex: 1;
			overflow-y: scroll;
			// 订单内容
			.info-main{
				background: #ffffff;
				padding: 10upx 32upx;
				margin: 20upx 32upx;
				border-radius: 24upx;
				box-shadow: 1px 1px 3px #EEEEEE;
				font-size: 28upx;
				background-image: url(../../static/order_bg_stor.png);
				background-repeat: no-repeat;
				.new-left{
					width: 360rpx;
					font-size: 36rpx;
					color: #191919;
					font-weight: 600;
					line-height: 44rpx;
					margin-top: 30rpx;
				}
				.time{
					padding: 20rpx 0;
					font-size: 32rpx;
					color: #7C7D7E;
					margin-top: 20rpx;
					view:last-child{
						font-size: 28rpx;
						color: #4C4C4C;
						margin-left: 6rpx;
					}
				}
			}
			// 状态
			.order-status {
				padding: 30upx 0;
				text-align: center;
				.status-title {
					font-size: 42upx;
					color: #191919;
					.icon{
						width: 48rpx;
						height: 48rpx;
						margin-right: 10rpx;
					}
				}

				.status-care {
					font-size: 28upx;
					margin-top: 10upx;
					color: #191919;

					>text {
						color: red;
					}
				}
			}

			// 订单信息列
			.item-info{
				border-radius: 24rpx;
				margin: 0rpx 32rpx 20rpx;
				padding: 0rpx 32rpx;
				background-color: #fff;
				.item-title{
					font-size: 32rpx;
					color: #181818;
					padding-top: 28rpx;
				}
				.item{
					padding: 28rpx 0;
					font-size: 32rpx;
					border-bottom: 1px solid #EBEBEB;
					:first-child{
						color: #7C7D7E;
					}
					:last-child-child{
						color: #222222;
					}
					&:last-child{
						border-bottom: none;
					}
					
					.item-type{
						width: 128rpx;
						height: 56rpx;
						border: 1px solid #979797;
						opacity: 1;
						border-radius: 28rpx;
						font-size: 24rpx;
						color: #999999;
						text-align: center;
						line-height: 56rpx;
						margin-right: 20rpx;
					}
					.item-type.active{
						background-color: #4F88F7;
						border: none;
						color: #fff;
					}
				}
			}
			.price-text {
				font-size: 20upx;
				margin-left: 10upx;
			}
			.price-num {
				font-size: 32upx;
				color: red;
				font-weight: 600;
				margin-right: 6rpx;
			}
			.u-cell {
				padding: 10rpx 32rpx;
			}
		}
		.footer {
			padding: 20rpx 32rpx;
			display: flex;
			background-color: #fff;
			.btn{
				flex: 1;
				height: 84rpx;
				font-size: 32rpx;
				text-align: center;
				line-height: 84rpx;
			}
			.btnCancleStyle{
				color: #666666;
				background: #E5E5E5;
				border-radius: 60rpx 0px 0px 60rpx;
			}
			.btnPayStyle{
				color: #191919;
				background: #FFD100;
				border-radius: 0rpx 60px 60px 0rpx;
			}
			.useBtn{
				width: 100%;
				height: 84rpx;
				font-size: 32rpx;
				text-align: center;
				line-height: 84rpx;
				color: #191919;
				background: #FFD100;
				border-radius: 60rpx
			}
		}
	}
</style>
