<template>
	<view class="order">
		<view class="order-navbar">
			<u-navbar title="订单详情" :border-bottom="false" :background="background1"></u-navbar>
		</view>
		<view class="order-hd">
			<view class="l">
				<view class="a">
					<view class="name">
						<image class="user" :src="$picUrl+'/static/news/icon-recycling-order-01.png'"></image>{{info.username}}
						<text>{{info.mobile}}</text>
					</view>
					<image class="copy" @click="openPage(1,info.mobile)" :src="$picUrl+'/static/news/icon-recycling-order-02.png'"></image>
				</view>
				<view class="b">
					<image class="pic" :src="info.server_image"></image>
					<view class="info">
						<view class="name">{{info.server_name}}</view>
						<view class="price">￥<text>{{info.pay_price?Number(info.pay_price):info.pay_price}}</text></view>
					</view>
					<view class="num">x1</view>
				</view>
			</view>
		</view>
		<view class="order-bd">
			<view class="b">
				<view class="item">
					<view class="l">订单状态：</view>
					<view class="r">{{info.order_status_text}}</view>
				</view>
				<view class="item">
					<view class="l">服务时间：</view>
					<view class="r">{{info.server_time}}</view>
				</view>
				<view class="item">
					<view class="l">服务地址：</view>
					<view class="r">{{info.server_address}}</view>
				</view>
				<view class="item" v-if="info.dealer_name">
					<view class="l">工程师姓名：</view>
					<view class="r">{{info.dealer_name}}</view>
				</view>
				<view class="item" v-if="info.dealer_remake">
					<view class="l">工程师电话：</view>
					<view class="r">{{info.dealer_remake}}</view>
				</view>
			</view>
		</view>
		
		<view class="order-bd">
			<view class="b">
				<view class="item">
					<view class="l">订单编号：</view>
					<view class="r">{{info.order_no}}</view>
					<view class="m red" @click="openPage(1,info.order_no)">复制</view>
				</view>
				<view class="item">
					<view class="l">订单价格：</view>
					<view class="r">￥{{info.pay_price?Number(info.pay_price):info.pay_price}}元</view>
				</view>
				<view class="item" v-if="info.is_pay == false">
					<view class="l">支付方式：</view>
					<view class="r">{{info.pay_method=='balance'?'余额支付':'微信支付'}}</view>
				</view>
			</view>
		</view>
		
		<view class="order-bd">
			<view class="b" style="margin-top: 0;">
				<view class="item">
					<view class="l">留言：</view>
					<view class="r">{{info.buyer_remark}}</view>
				</view>
			</view>
		</view>
		<view class="order-fd">
			<view class="a" v-if="userInfo.user_type <= 20">
				联系商家
				<button open-type="contact"></button>
			</view>
			<view class="a" v-else @click="openPage(2,info.mobile)">
				联系顾客
			</view>
			<view class="b  b-on" v-if="info.is_cancel && (info.order_status == 10 || info.order_status == 20 )" @click="openPage(3)">
				取消订单
			</view>
			<view class="b" v-if="info.is_dispatch && info.order_status == 20" @click="openPage(4)">
				去派单
			</view>
			<view class="b" v-if="info.is_pay && info.order_status == 10" @click="openPage(5)">
				去支付
			</view>
			<view class="b" v-if="info.is_success && info.order_status == 30" @click="openPage(6)">
				立即完成
			</view>
			<view class="b  b-on" v-if="info.order_status == 40">
				已完成
			</view>
			<view class="b  b-on" v-if="info.order_status == 50">
				已取消
			</view>
		</view>
		<u-mask :show="isShow" @click="show = false">
			<view class="order-dialog">
				<image class="pic" :src="$picUrl+'/static/news/icon-recycling-order-04.png'"></image>
				<view class="a">回收订单提交成功</view>
				<view class="b">感谢您对低碳环保做出的努力！</view>
				<view class="c">查看订单</view>
			</view>
		</u-mask>
	</view>
</template>

<script>
	// import img from "@/static/news/refund-bg.png"
	// import img1 from "@/static/news/login-bg.png"
	import * as newFunApi from '@/api/newFun'
	export default {
		data() {
			return {
				userInfo: {},
				isScroll: true,
				isShow: false,
				currentIndex: 0,
				background1: {
					background: `url(${this.$picUrl}/static/news/login-bg.png) center top no-repeat`,
					backgroundSize: '100%',
				},
				info: {},
				order_id: "",
				type: ""
			}
		},
		onLoad(o) {
			if(o.order_id && o.type == 'fuwuorder'){
				this.type = o.type
				this.order_id = o.order_id;
				
			}
		},
		onShow() {
			this.getInfo()
			this.userInfo = uni.getStorageSync("userInfo")
		},
		onPageScroll(e){
			if(e.scrollTop <= 44){
				this.isScroll = true;
			}else{
				this.isScroll = false;
			}
		},
		methods: {
			openPage(index,msg){
				const that = this;
				if(index == 1){
					uni.setClipboardData({
						data: msg,
						success: function () {
							uni.getClipboardData({
								success: function (res) {
									uni.showToast({
										icon: "none",
										title: "复制成功"
									})
								}
							});
						}
					});
				}else if(index == 2){
					uni.makePhoneCall({
						phoneNumber: msg
					});
				}else if(index == 3){
					uni.showModal({
						title: "温馨提示",
						content: "是否取消该订单？",
						confirmColor: "#F21A1C" ,
						complete(res) {
							if(res.confirm){
								that.toDel();
							}
						}
					})
				}else if(index == 4){
					uni.navigateTo({
						url: "/pages/news3/dispatch?type=fuwuorder&order_id="+this.order_id
					})
				}else if(index == 5){
					uni.navigateTo({
						url: "/pages/news/recycling/pay?type=fuwuorder&order_id="+this.order_id
					})
				}else if(index == 6){
					uni.showModal({
						title: "温馨提示",
						content: "是否完成该订单？",
						confirmColor: "#F21A1C" ,
						complete(res) {
							if(res.confirm){
								that.toConfirmSuccess();
							}
						}
					})
				}
			},
			//完成订单
			async toConfirmSuccess() {
				const {status, message, data} = await serverConfirmSuccess({
					order_id: this.order_id
				})
				if(status == 200){
					uni.showToast({
						title: "提交成功"
					})
					this.getInfo();
				}
			},
			//删除订单
			async toDel() {
				const {status, message, data} = await newFunApi.serverCancelOrder({
					order_id: this.order_id
				});
				if(status == 200){
					uni.showToast({
						title: "取消成功"
					})
					this.getInfo();
				}
			},
			/**
			 * 获取详情
			 */
			async getInfo() {
				const {status, message, data} = await newFunApi.serverOrderDetails({
					order_id: this.order_id
				});
				if(status == 200){
					this.info = data.info
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
.order{
	width: 100%;
	padding: 0 0 150rpx;
	box-sizing: border-box;
	overflow: hidden;
	background: url(https://www.royaum.com.cn/static/news/login-bg.png?t=2) center top no-repeat;
	background-size: 100% auto;
	
	&-hd{
		.l{
			width: 694rpx;
			height: 276rpx;
			background: #FFFFFF;
			border-radius: 10rpx;
			padding: 30rpx;
			box-sizing: border-box;
			margin: 0 auto;
			margin-top: 30rpx;
			.a{
				display: flex;
				align-items: center;
				justify-content: space-between;
				.name{
					display: flex;
					align-items: center;
					image{
						width: 40rpx;
						height: 40rpx;
						margin-right: 10rpx;
					}
					text{
						margin-left: 10rpx;
						font-size: 28rpx;
						font-weight: 400;
						color: #838383;
					}
					font-size: 32rpx;
					font-weight: 500;
					color: #333333;
				}
				.copy{
					width: 40rpx;
					height: 40rpx;
				}
			}
			.b{
				display: flex;
				align-items: center;
				margin-top: 20rpx;
				.pic{
					width: 182rpx;
					height: 146rpx;
					border-radius: 10rpx;
					margin-right: 10rpx;
				}
				.info{
					overflow: hidden;
					.name{
						width: 360rpx;
						font-size: 28rpx;
						font-weight: 400;
						white-space: nowrap;
					}
					.price{
						font-size: 24rpx;
						font-weight: 600;
						color: #F21A1C;
						text{
							font-size: 36rpx;
						}
						margin-top: 20rpx;
					}
				}
				.num{
					flex: 1;
					font-size: 28rpx;
					font-weight: 500;
					color: #1E1E1E;
					text-align: right;
				}
			}
		}
	}
	&-bd{
		width: 694rpx;
		background: #FFFFFF;
		border-radius: 10rpx;
		margin: 0 auto;
		margin-top: 20rpx;
		padding: 20rpx 30rpx;
		box-sizing: border-box;
		.a{ 
			display: flex;
			align-items: center;
			font-size: 28rpx;
			font-weight: 400;
			color: #7E7E7E;
			text{
				color: #1E1E1E;
				margin-left: 10rpx;
			}
			image{
				width: 40rpx;
				height: 40rpx;
				margin-right: 10rpx;
			}
		}
		.b{
			margin-top: 20rpx;
			.item{
				display: flex;
				align-items: flex-start;
				padding: 10rpx 0;
				.l{
					width: 140rpx;
					font-size: 24rpx;
					font-weight: 400;
					color: #7E7E7E;
				}
				.r{
					flex: 1;
					font-size: 24rpx;
					font-weight: 400;
					color: #1E1E1E;
					max-width: 380rpx;
					input{
						font-size: 24rpx;
						color: #1E1E1E;
					}
				}
				.m{
					width: 120rpx;
					display: flex;
					align-items: center;
					justify-content: flex-end;
					color: #F63016;
					font-size: 24rpx;
					.btn{
						width: 118rpx;
						height: 48rpx;
						border-radius: 8rpx;
						border: 1px solid #F83A13;
						text-align: center;
						line-height: 48rpx;
					}
					.li{
						flex: 1;
						font-size: 20rpx;
						font-weight: 400;
						color: #989898;
						text-align: center;
						image{
							width: 30rpx;
							height: 30rpx;
							display: block;
							margin: 0 auto;
							margin-bottom: 20rpx;
						}
					}
				}
			}
			.items{
				padding: 10rpx 0;
				.l{
					width: 140rpx;
					font-size: 24rpx;
					font-weight: 400;
					color: #7E7E7E;
				}
				.r{
					width: 100%;
					overflow: hidden;
					margin-top: 20rpx;
					.pic{
						width: 110%;
						image{
							width: 150rpx;
							height: 150rpx;
							border-radius: 10rpx;
							margin-right: 10rpx;
							margin-top: 20rpx;
							float: left;
						}
					}
				}
			}
		}
	}
	&-fd{
		width: 100%;
		background: #FFFFFF;
		box-shadow: 18rpx -4rpx 23rpx 0px rgba(0,0,0,0.03);
		box-sizing: border-box;
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 200;
		padding: 20rpx 40rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		.a{
			text-align: center;
			width: 146rpx;
			line-height: 68rpx;
			background: #FFFFFF;
			border-radius: 76rpx;
			opacity: 1;
			border: 1px solid #D9D9D9;
			font-size: 24rpx;
			font-weight: 500;
			color: #828282;
			margin-right: 24rpx;
			position: relative;
			button{
				width: 100%;
				height: 100%;
				position: absolute;
				left: 0;
				top: 0;
				z-index: 2;
				opacity: 0;
			}
		}
		.b{
			width: 228rpx;
			line-height: 78rpx;
			background: linear-gradient(180deg, #FD5D06 0%, #F3211A 100%);
			border-radius: 78px;
			text-align: center;
			font-size: 24rpx;
			font-weight: 500;
			color: #FFFFFF;
			&-on{
				background: #ccc;
			}
		}
	}
	&-dialog{
		width: 537rpx;
		height: 414rpx;
		background: linear-gradient(180deg, #FFE4E4 0%, #FFFFFF 100%);
		border-radius: 12rpx;
		position: absolute;
		left: 50%;
		top: 50%;
		margin-left: -268rpx;
		margin-top: -207rpx;
		z-index: 2;
		text-align: center;
		padding-top: 100rpx;
		box-sizing: border-box;
		.pic{
			width: 112rpx;
			height: 128rpx;
			position: absolute;
			left: 50%;
			margin-left: -56rpx;
			top: -60rpx;
			z-index: 2;
		}
		.a{
			font-size: 32rpx;
			font-weight: 500;
			color: #000000;
		}
		.b{
			font-size: 28rpx;
			font-weight: 400;
			color: #727272;
			margin-top: 30rpx;
		}
		.c{
			width: 412rpx;
			line-height: 72rpx;
			background: #F55349;
			border-radius: 8rpx;
			font-size: 28rpx;
			color: #FFFFFF;
			margin: 0 auto;
			margin-top: 60rpx;
		}
	}
}
</style>
