<template>
	<view class="content">
		<view class="topBox">
			<view class="statusText">{{orderInfo.status_name}}</view>
			<view class="statusTip">{{orderInfo.order_status_content}}</view>
		</view>
		<view class="orderInfoBox" style="overflow: hidden;">
			<view class="viewBox">
				<view>货物信息</view>
				<view class="goodsInfo flex-between">
					<view class="infoLeft flex-center">
						<image src="/static/img/40.png" class="goodsImg"></image>
						<view style="margin-left: 22rpx;">
							<view class="text1">回收品类</view>
							<view class="text2">{{orderInfo.type_name}}</view>
						</view>
					</view>
					<view class="infoCenter">
						<view class="text1">数量</view>
						<view style="margin-top: 15rpx;">
							<text class="textIcon">x</text>
							<text class="textNum">{{orderInfo.quantity}}</text>
						</view>
					</view>
					<view class="infoRight">
						<view class="text1">单价</view>
						<view style="margin-top: 15rpx;">
							<text class="textIcon">￥</text>
							<text class="textNum">{{orderInfo.single_price}}</text>
						</view>
					</view>
				</view>
				
				<view class="specsBox">
					<text class="specsText">规格：</text>
					<text>{{deelData(orderInfo.spec_value)}}</text>
					<!-- <text v-for="item in orderInfo.spec_value">{{item}}</text> -->
					<!-- <u-icon name="arrow-right" color="#282F38" size="10"></u-icon> -->
				</view>
				
				<view class="countBox">
					<view class="text1">合计</view>
					<view style="margin-top: 0rpx;">
						<text class="textIcon">￥</text>
						<text class="textNum">{{orderInfo.price}}</text>
					</view>
				</view>
			</view>
			
			<view v-show="orderInfo.person_name" class="infoWrap" style="border-radius: 30rpx;background: #fff;margin-top: 20rpx;">
				<view class="bgHead">
					回收员信息
				</view>
				<view class="infoBox">
					<text class="infoText1">{{orderInfo.person_name}}</text>
					<text class="infoText2">{{orderInfo.person_mobile}}</text>
					<view class="infoTip">平台已认证师傅资质，上门请校核是否本人上门</view>
					<view class="flex-center infoBtnBox" @click="callPhone(orderInfo.person_mobile)">
						<u-icon name="phone" color="#282F38" size="22" style="margin-right: 12rpx;margin-top: 5rpx;"></u-icon>
						联系师傅
					</view>
				</view>
			</view>
			<view class="infoWrap" style="border-radius: 30rpx;background: #fff;margin-top: 20rpx;">
				<view class="bgHead">
					用户信息
				</view>
				<view class="infoBox">
					<view style="border-bottom: 1px solid #DEDEDE;">
						<text class="infoText1">{{orderInfo.accept_name}}</text>
						<text class="infoText2">{{orderInfo.accept_mobile}}</text>
						<view class="infoAddress" style="margin-top: 10rpx;">‌{{orderInfo.area_name}}{{orderInfo.accept_address}}</view>
					</view>
				</view>
			</view>
			<view class="infoWrap" style="border-radius: 30rpx;background: #fff;margin-top: 20rpx;">
				<view class="bgHead">
					预约上门时间
					<text class="infoTip2">待师傅与您确认哦~</text>
				</view>
				<view class="infoBox">
					<view class="flex-between">
						<text class="infoDate">请选择上门服务时间</text>
						<view class="infoTip3">此项由师傅填写</view>
					</view>
					<view class="infoAddress">‌期望上门时间：{{orderInfo.order_time}}</view>
				</view>
			</view>
			<view class="detailBox">
				<view>订单备注</view>
				<view class="detailText">{{orderInfo.remark}}</view>
			</view>
			<view class="detailBox">
				<view>订单信息</view>
				<view class="detailText">下单时间：{{orderInfo.order_time}}</view>
				<view class="detailText">订单编号：{{orderInfo.order_no}}</view>
			</view>
			
				<!-- <view class="news_title"> 
					<view class="fsz30 overflow2 title tag">
						{{orderInfo.status_name||''}}
					</view>
					<view class="time fsz26">
						订单号：{{orderInfo.order_no||''}}
					</view>
					<view class="time fsz26">
						下单时间：{{orderInfo.createtime||''}}
					</view>
					<view class="time fsz26" v-if="orderInfo.status ==3">
						完成时间：{{orderInfo.finish_time||''}}
					</view>
				</view>
				<view class="line"></view>
				<view class=" w">
					<view class="biaoti fsz30">
						 预约信息
					</view>
					<view class="main">
						<view class="li fsz30">
							<view class="ti">联系人 : </view>
							<view>{{orderInfo.accept_name||''}}</view>
						</view>
						<view class="li fsz30">
							<view class="ti">电话 : </view>
							<view>{{orderInfo.accept_mobile||''}}</view>
						</view>
						<view class="li fsz30">
							<view class="ti">地址 : </view>
							<view>{{orderInfo.area_name||''}} </view>
						</view>
						<view class="li fsz30">
							<view class="ti"></view>
							<view style="    text-align: right;">{{orderInfo.accept_address||''}}</view>
						</view>
						<view class="li fsz30" v-if="orderInfo.status ==3">
							<view class="ti">订单金额 : </view>
							<view style="text-align: right;" class="red-price">{{orderInfo.price||''}}</view>
						</view>
						<view class="li fsz30" v-if="orderInfo.status ==3">
							<view class="ti">订单赠送积分 : </view>
							<view style="text-align: right;" class="red-price">{{orderInfo.send_point||''}}</view>
						</view>
					</view>
				</view> 
				<view class="line"></view>  
				<view class=" w">
					<view class="biaoti fsz30">
						 回收信息
					</view>
					<view class="main">
						<view class="li fsz30">
							<view class="ti">预约回收品类 : </view>
							<view>{{orderInfo.type_name||''}}</view>
						</view>
						<view class="li fsz30">
							<view class="ti">预约时间 : </view>
							<view>{{orderInfo.order_time||''}}</view>
						</view>
						<view class="li fsz30">
							<view class="ti">预约重量 : </view>
							<view>{{orderInfo.weight||''}}</view>
						</view>
						<view class="li fsz30">
							<view class="ti">备注 : </view>
							<view>{{orderInfo.remark||'无'}}</view>
						</view>
					</view>
				</view> 
				<view class="line"></view>  
				<view class=" w" v-if="orderInfo.status==2">
					<view class="biaoti fsz30">
						 回收员
					</view>
					<view class="main">
						<view class="li fsz30">
							<view>姓名 : </view>
							<view>{{orderInfo.person_name||''}}</view>
						</view>
						<view class="li fsz30">
							<view >电话 : </view>
							<view @tap="call(orderInfo.person_mobile)" >{{orderInfo.person_mobile||''}}</view>
						</view> 
						<view class="li fsz30">
							<view >接单时间 : </view>
							<view  >{{orderInfo.jiedan_time||''}}</view>
						</view> 
					</view>
				</view>  -->
				<view style="height:100px"></view>
			</view> 
			<view class="button-bottom" v-if="orderInfo.status==1 || orderInfo.status==2">
				<button class='btn btn-default flex-center'   v-if="orderInfo.status == 1 || orderInfo.status == 2" @click="cancelOrder()">取消订单</button>
				<view class="buttonEdit flex-center">修改订单</view>
			</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			order_id: '',
			orderInfo: {}, 
		};
	},
	onLoad(e) {
		this.order_id = e.id;
		this.getOrderDetail();
	},
	methods: {
		callPhone(phoneNumber) {
		    uni.makePhoneCall({
		        phoneNumber: phoneNumber, // 必需，电话号码字符串
		        success: (res) => {
		            console.log("拨号成功", res);
		        },
		        fail: (err) => {
		            console.error("拨号失败", err);
		        }
		    });
		},
		deelData(val){
			console.log(val)
			let str = ''
			let index = 1
			for(let key in val){
				console.log(key)
				if(index>1){
					str += ' | ' + key+':'+val[key]
				}else{
					str += key+':'+val[key]
				}
				index++
			}
			console.log(str)
			return str
		},
		cancelOrder() { 
			uni.showModal({
				title:'提示',
				content: '确认要取消订单吗?',
				success:(ret)=>{ 
					if(ret.confirm){  
						let data = {
							id: this.order_id
						}
				
						this.$api.cancelorder(data, res => {
							if (res.code ==1) {
								uni.showToast({ title: res.msg , icon: 'success' })
								setTimeout(function() {
									this.getOrderDetail()
								},2000);  
							} else {
								uni.showToast({ title: res.msg , icon: 'none' }) 
							}
						})
					}
				}
			})
		}, 
		getOrderDetail() {
			let _this = this
			let data = {
				id: _this.order_id
			}
			_this.$api.orderdetail(data, function(res) {
				if (res.code ==1 ) {
					let data = res.data.info  
					_this.orderInfo = data;  
				} else {
					uni.showToast({ title: res.msg , icon: 'none' }) 
				}
			})  
		}, 
		call(phone){
				  uni.makePhoneCall({
					phoneNumber:phone,
					success:function(){
						console.log('拨打电话成功');
					},
					fail() {
						console.log('打电话失败了');
					}
				})
		},
	}
};
</script>

<style lang="scss">
 page{
	 background: #F5F5FA;
 }
 
.news_title{
	border-bottom: 1px solid #eee;
    padding: 20rpx 5%;
    box-sizing: border-box;
    overflow: hidden;
    position: relative;
    width: 100%; }
.news_title	.title{
		color: #333;
		line-height: 50rpx;
	}
.news_title	.time{
		color: #777;
		margin-top: 20rpx;
	}
.news_title	.tag{ 
			color: #e01f20;
	}
 
 
 	.biaoti{
		color: #777777;
		height: 90rpx;
		line-height: 90rpx;
		margin-top: 20rpx; }
	.biaoti	image{width: 35rpx;margin-right: 10rpx; margin-bottom: -6rpx;}
 .main{
 	line-height: 60rpx;}
  .main	.li{
 		display: flex;
 		justify-content: space-between;
 	}
 
  
 .line{border:solid 3px #eee}.button-bottom {
		padding: 15upx 26upx;
		text-align: right;
		display: block;
		display: flex;
		justify-content: flex-end;
		height: unset;
	}
	.buttonEdit{
		width: 224rpx;
		height: 90rpx;
		background: #FFFFFF;
		border-radius: 45rpx;
		border: 1px solid #FB8F0C;
		font-weight: 500;
		font-size: 30rpx;
		color: #FB8F0C;
	}
	.button-bottom .btn {
		margin-left: 20upx;
		width: 224rpx!important;
		height: 90rpx;
		background: #FFFFFF;
		border-radius: 45rpx;
		border: 1px solid #FB8F0C;
		font-weight: 500;
		font-size: 30rpx;
		color: #FB8F0C;
		flex: unset;
	}
	.ti{width:115px}
	
	.topBox{
		width: 100%;
		height: 280rpx;
		background: linear-gradient(0deg, #F5F5FA 0%, #FFF3D5 100%);
		padding: 0 72rpx;
		overflow: hidden;
	}
	.statusText{
		font-weight: bold;
		font-size: 36rpx;
		color: #413A2A;
		margin-top: 52rpx;
	}
	.statusTip{
		font-weight: 400;
		font-size: 24rpx;
		color: #A69879;
		margin-top: 20rpx;
	}
	
	
	.orderInfoBox{
		padding: 0 35rpx;
		margin-top: -80rpx;
	}
	
	.viewBox{
		background: #fff;
		border-radius: 30rpx;
		padding: 35rpx;
		.goodsInfo{
			margin-top: 32rpx;
			background: #FFF9F5;
			border-radius: 20rpx;
			padding: 14rpx 16rpx;
			padding-right: 35rpx;
			.infoLeft{
				.goodsImg{
					width: 80rpx;
					height: 80rpx;
				}
				.text1{
					font-weight: 500;
					font-size: 22rpx;
					color: #333333;
				}
				.text2{
					font-weight: 500;
					font-size: 30rpx;
					color: #333333;
					margin-top: 15rpx;
				}
			}
			.infoCenter{
				.text1{
					font-weight: 500;
					font-size: 22rpx;
					color: #333333;
				}
				.textIcon{
					font-weight: 500;
					font-size: 30rpx;
					color: #333333;
				}
				.textNum{
					font-weight: 500;
					font-size: 30rpx;
					color: #333333;
					margin-left: 7rpx;
				}
			}
			.infoRight{
				.text1{
					font-weight: 500;
					font-size: 22rpx;
					color: #333333;
					text-align: center;
				}
				.textIcon{
					font-weight: 500;
					font-size: 24rpx;
					color: #ED6343;
				}
				.textNum{
					font-weight: 500;
					font-size: 36rpx;
					color: #ED6343;
					margin-left: 7rpx;
				}
			}
		}
	}
	.specsBox{
		height: 70rpx;
		background: #FFF7F7;
		border-radius: 20rpx;
		margin-top: 10rpx;
		font-weight: 500;
		font-size: 22rpx;
		color: #333333;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		padding-left: 33rpx;
		.specsText{
			font-weight: 500;
			font-size: 22rpx;
			color: #333333;
			margin-right: 18rpx;
			margin-top: -5rpx;
		}
	}
	.countBox{
		display: flex;
		justify-content: flex-start;
		// align-items: flex-end;
		align-items: center;
		margin-top: 15rpx;
		padding-left: 10rpx;
		.text1{
			font-weight: 500;
			font-size: 22rpx;
			color: #333333;
			text-align: center;
			margin-right: 14rpx;
			margin-top: 7rpx;
		}
		.textIcon{
			font-weight: 500;
			font-size: 24rpx;
			color: #ED6343;
		}
		.textNum{
			font-weight: 500;
			font-size: 36rpx;
			color: #ED6343;
			margin-left: 7rpx;
		}
	}
	.infoWrap{
		.bgHead{
			height: 108rpx;
			line-height: 108rpx;
			background: linear-gradient(180deg, #FFFAF5 0%, #FFFFFF 100%);
			border-radius: 30rpx 30rpx 0rpx 0rpx;
			padding-left: 41rpx;
			font-weight: bold;
			font-size: 30rpx;
			color: #333333;
			.infoTip2{
				font-weight: 400;
				font-size: 22rpx;
				color: #FF7F18;
				margin-left: 38rpx;
			}
		}
		.infoBox{
			padding: 0 39rpx 45rpx;
			margin-top: -5rpx;
			.infoText1{
				font-weight: bold;
				font-size: 32rpx;
				color: #333333;
			}
			.infoText2{
				font-weight: bold;
				font-size: 32rpx;
				color: #333333;
				margin-left: 28rpx;
			}
			.infoAddress{
				font-weight: 300;
				font-size: 22rpx;
				color: #95979B;
				// font-weight: 300;
				// font-size: 28rpx;
				// color: #95979B;
				// margin-top: 30rpx;
			}
			.infoTip{
				font-weight: 400;
				font-size: 22rpx;
				color: #E4AA45;
				margin-top: 12rpx;
				border-bottom: 1px solid #DEDEDE;
				padding-bottom: 29rpx;
			}
			.infoDate{
				font-weight: 400;
				font-size: 32rpx;
				color: #999999;
			}
			.infoTip3{
				background: #FFF4ED;
				border-radius: 10rpx;
				font-weight: 400;
				font-size: 22rpx;
				color: #FF7F18;
				padding: 16rpx 11rpx;
			}
			.infoBtnBox{
				font-weight: 400;
				font-size: 32rpx;
				color: #333333;
				margin-top: 41rpx;
			}
		}
	}	
	.detailBox{
		padding: 45rpx 37rpx 60rpx;
		border-radius: 30rpx;
		background: #fff;
		margin-top: 20rpx;
		font-weight: bold;
		font-size: 30rpx;
		color: #333333;
		.detailText{
			font-weight: 400;
			font-size: 28rpx;
			color: #333333;
			margin-top: 41rpx;
		}
	}
</style>
