<template>
	<!-- 商家订单详情 -->
	<view class="page1">
		<view class="title">
			<view class="title-sreach">
				<view class="back-btn" @tap="back" :style="{'top': menuButtonInfo.top +'px'}">
					<uni-icons type="left" size="28"></uni-icons>
				</view>
				<view class="title-name" :style="{'padding-top': menuButtonInfo.top +'px'}">
					订单详情
				</view>
			</view>
		</view>
		<view class="content">
			<view class="box1" style="display: flex;font-size: 28rpx;font-weight: 700;">
				<text v-if="item.numberCode" style="margin-left: 20rpx;">{{'#'+data.numberCode}}</text>
				<text style="margin-right: 20rpx;">期望送达</text>
				<text>明天 06:30</text>
				<text style="flex: 1;text-align: right;color: red;">
					{{data.status == 0?'待支付':data.status == 2?'待配送员接单':(data.status == 3 && data.deliveryType == 1 && data.shopMakeTime == null) || (data.status == 3 && data.deliveryType == 2 && data.userRequireMake == 1)?'待出餐':(data.status == 3 && data.deliveryType == 1 && data.shopMakeTime != null)?'待取货':(data.status == 3 && data.deliveryType == 2)?'待消费':data.status == 4?'待送达':data.status == 5?'已完成':data.status == 7?'待同意退款':data.status == 8?'已退款':data.status == 6?'已取消':data.status == 11?'售后中':data.status == 12?'已售后':""}}
				</text>
			</view>
			<view class="box1" style="display: flex;height: 100rpx;line-height: 100rpx;padding: 0 20rpx;">
				<view style="border: 1px solid #48D1CC;height: 50rpx;line-height: 50rpx;padding: 0 20rpx;border-radius: 20rpx;margin-top: auto;margin-bottom: auto;color: #48D1CC;font-weight: 700;">
					{{data.deliveryType == 1?'配送订单':data.isPack == 1?'自取-打包':data.isPack == 0?'自取-堂食':'自取'}}
				</view>
				<view v-if="data.deliveryType == 1" style="display: flex;flex: 1;padding-left: 20rpx;">
					<text style="flex: 1;">配送员：{{(data.deliveryInfo.workerName == 'null' || !data.deliveryInfo.workerName) ?"":data.deliveryInfo.workerName}}</text>
					<view class="" v-if="data.deliveryInfo">
						<img @tap="makeCall(data.deliveryInfo.workerPhone)" src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/869a7af6a1c24bf3a0d523c4a18b55c6.png" alt="" style="width: 60rpx;height: 60rpx;margin-top: 20rpx;" />
					</view>
				</view>
			</view>
			<view class="box1" v-if="data.deliveryType == 1" style="display: flex;">
				<view style="flex: 1;">
					<view style="font-weight: 700;height: 50rpx;">
						收货人：{{data.deliveryInfo.receiverName}}
					</view>
					<view style="color: #777;height: 70rpx;">
						{{data.deliveryInfo.receiverAddress}}
					</view>
				</view>
				<view class="">
					<img @tap="makeCall(data.deliveryInfo.receiverPhone)" src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/869a7af6a1c24bf3a0d523c4a18b55c6.png" alt="" style="width: 60rpx;height: 60rpx;margin-top: 28rpx;" />
				</view>
			</view>
			<view class="box1">
				<view style="border-bottom: 1px solid #eee;padding-bottom: 20rpx;">
					<view style="font-size: 32rpx;height: 60rpx;">
						商品 <text style="font-size: 28rpx;color: #777;">共{{data.goodsNum}}件</text>
					</view>
					<view v-for="(item,index) in data.goodsList" :key="index" style="display: flex;height: 40rpx;line-height: 40rpx;">
						<view style="flex: 1;">
							{{item.productName}}
						</view>
						<view style="width: 60rpx;">
							{{'x'+ item.quantity}}
						</view>
						<view style="width: 100rpx;text-align: right;">
							{{'￥'+ item.price == undefined ? 0:item.price}}
						</view>
					</view>
				</view>
				<view class="">
					<view style="display: flex;height: 60rpx;line-height: 60rpx;">
						<view style="flex: 1;">
							商品金额
						</view>
						<view class="">
							{{'￥' + data.goodsAmount == undefined ? 0:data.goodsAmount}}
						</view>
					</view>
					<view style="display: flex;height: 60rpx;line-height: 60rpx;">
						<view style="flex: 1;">
							配送费
						</view>
						<view class="">
							{{'￥' + data.deliveryFee == undefined ? 0:data.deliveryFee}}
						</view>
					</view>
					<view style="display: flex;height: 60rpx;line-height: 60rpx;">
						<view style="flex: 1;">
							客户实际支付
						</view>
						<view class="">
							{{'￥'+ data.totalAmount == undefined ? 0:data.totalAmount}}
						</view>
					</view>
					<view style="display: flex;height: 60rpx;line-height: 60rpx;">
						<view style="flex: 1;">
							平台服务费
						</view>
						<view class="">
							￥{{data.chouyong ?data.chouyong:0}}
						</view>
					</view>
				</view>
			</view>
			<view class="box1">
				<view class="">
					<view style="display: flex;height: 60rpx;line-height: 60rpx;">
						<view style="width: 140rpx;">
							订单编号
						</view>
						<view style="flex: 1;text-align: right;">
							{{data.id}}
						</view>
					</view>
					<view style="display: flex;height: 60rpx;line-height: 60rpx;">
						<view style="width: 140rpx;">
							下单时间
						</view>
						<view style="flex: 1;text-align: right;">
							{{data.createTime | formatISOTime}}
						</view>
					</view>
					<view v-if="data.receiverPhone" style="display: flex;height: 60rpx;line-height: 60rpx;">
						<view style="width: 140rpx;">
							用户账号
						</view>
						<view style="flex: 1;text-align: right;">
							{{data.receiverPhone}}
						</view>
					</view>
					<view v-if="data.orderType != 1 && data.groupInfo != null" style="display: flex;height: 60rpx;line-height: 60rpx;">
						<view style="width: 140rpx;">
							团购信息
						</view>
						<view @tap="checkGroup" style="flex: 1;text-align: right;">
							查看 >
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="bottom">
			<view style="height: 60rpx;line-height: 60rpx;display: flex;border-bottom: 1px solid #eee;font-size: 28rpx;">
				<view style="flex: 1;">
					预计收入
				</view>
				<view style="color: red;font-weight: 700;">
					￥{{data.yujishouru?data.yujishouru:0}}
				</view>
			</view>
			<view style="margin-top: 20rpx;">
				<view @tap="mealServing(data)" v-if="(data.status == 3 && data.deliveryType == 1 && data.shopMakeTime == null) || (data.status == 3 && data.deliveryType == 2 && data.userRequireMake == 1)" class="btn" style="background: rgba(0, 35, 28, 1);color: rgba(166, 255, 234, 1);">
					已出餐
				</view>
			</view>
		</view>
		<!-- 拼团信息弹出层 -->
		<uni-popup ref="groupPopup" background-color="#fff">
			<view class="group-content">
				<view style="height: 100rpx;text-align: center;line-height: 100rpx;font-size: 36rpx;font-weight: 700;">
					<text>{{data.groupInfo.targetMembers}}人团/</text><text>已拼{{data.groupInfo.currentMembers}}人</text>
				</view>
				<view class="kaituan2">
					<view class="kaituan22" style="display: flex;" v-if="data.groupInfo">
						<view class="" @tap="goDetail(item)" v-for="(item,index) in data.groupInfo.groupIdList" :key="index" style="width: 90rpx;height: 90rpx;margin: 0 auto;position: relative;">
							<view style="z-index: 99;position: absolute;top:0;width: 90rpx;height: 90rpx;border-radius: 90rpx;border:4rpx solid #48D1CC"></view>
							<view style="">
								<img src="/static/images/img/songshu.png" alt="" style="width: 90rpx;height: 90rpx;border-radius: 90rpx;display: block;" />
							</view>
							<view style="background: #fff;position: absolute;bottom: 6rpx;width: 100%;height: 24rpx;font-size: 20rpx;line-height: 24rpx;text-align: center;">
								{{item | lastFour}}
							</view>
						</view>
						
						
					</view>
					<view v-if="(data.groupInfo.targetMembers - data.groupInfo.currentMembers) > 0" class="kaituan22">
						<view class="weipincheng">
							+
						</view>
					</view>
				</view>
				<view style="height: 100rpx;line-height: 100rpx;text-align: center;font-weight: 700;">
					点击头像可查看拼团订单详情
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				menuButtonInfo: {},
				data:{}
			}
		},
		filters:{
			formatISOTime(isoString) {
			  const date = new Date(isoString);
			  const year = date.getFullYear();
			  const month = (date.getMonth() + 1).toString().padStart(2, '0');
			  const day = date.getDate().toString().padStart(2, '0');
			  const hours = date.getHours().toString().padStart(2, '0');
			  const minutes = date.getMinutes().toString().padStart(2, '0');
			  const seconds = date.getSeconds().toString().padStart(2, '0');
			  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
			},
			lastFour(str){
				return str.slice(-4);
			}
		},
		onShow() {
			this.menuButtonInfo = uni.getMenuButtonBoundingClientRect()
		},
		onLoad(option) {
			this.shopId = option.id
			this.getDetail()
		},
		methods: {
			getDetail(){
				let that = this
				that.tui.request("/mall/order/detail/"+ this.shopId, "get", {}, false, false).then((res) => {
					if (res.code == 200) {
						that.data = res.result
						
						//商家预计收入的计算
						let price = that.data.goodsAmount+that.data.packageFee
						if(that.data.orderType == 1){
							that.data.chouyong = (price/100 * uni.getStorageSync('shopTakeaway').commissionRateOne).toFixed(2)
							that.data.yujishouru = (price - that.data.chouyong).toFixed(2)
						}else{
							that.data.chouyong = (price/100 * uni.getStorageSync('shopTakeaway').commissionRateMore).toFixed(2)
							that.data.yujishouru = (price - that.data.chouyong).toFixed(2)
						}
						if(that.data.groupInfo != null && that.data.groupInfo != undefined){
							that.data.groupInfo.groupIdList = that.data.groupInfo.groupOrderIds.split(',');
						}
						
						that.data.goodsNum = 0
						for(let m=0;m<that.data.goodsList.length;m++){
							that.data.goodsNum += that.data.goodsList[m].quantity
						}
						that.$forceUpdate()
					} else {
						that.tui.toast(res.message);
						return;
					}
					uni.hideLoading();
				}).catch((res) => {});
			},
			goDetail(id){
				this.shopId = id
				this.getDetail()
				this.$refs.groupPopup.close()
			},
			checkGroup(){
				this.$refs.groupPopup.open()
			},
			mealServing(item){
				let that = this
				uni.showModal({
					title: '提示',
					content: '确定要出餐吗？',
					success: function (res) {
						if (res.confirm) {
							let data = {}
							let url = ''
							if(item.deliveryType == 2){ //自取单
								url = '/mall/order/complete'
							}else if(item.deliveryType == 1){ //外卖单
								url = '/mall/order/shopMakeTime'
							}
							that.tui.request(url, "post", {
								orderId:item.id
							}, false, true).then((res) => {
								if (res.code == 200) {
									this.back()
								} else {
									that.tui.toast(res.message);
									return;
								}
								uni.hideLoading();
							}).catch((res) => {});
						}
					}
				});
			},
			makeCall(phone){
				uni.makePhoneCall({
					phoneNumber: phone
				});
			},
			back() {
				uni.navigateBack()
			},
		}
	}
</script>

<style>
	page {
		width: 100%;
		height: 100%;
		font-size: 24rpx;
		background: #F5F8F5;
		color: #00231C;
	}

	.page1 {
		width: 100%;
		height: 100%;
		font-size: 24rpx;
		position: relative;
	}

	.title {
		background: url('https://jewel-shop.oss-cn-beijing.aliyuncs.com/8bc15960c2dc40268e295d6dd23aecce.png') no-repeat;
		width: 100%;
		height: 20%;
	}

	.title-sreach {
		width: 100%;
		display: flex;
		height: 200rpx;
		position: relative;
	}

	.back-btn {
		position: absolute;
		bottom: 0;
		left: 0;
	}

	.title-name {
		padding-top: 110rpx;
		font-size: 36rpx;
		font-weight: 700;
		flex: 1;
		text-align: center;
	}
	.content{
		margin: -140rpx auto;
	}
	.box1 {
		width: 95%;
		margin: 20rpx auto;
		background: #fff;
		border-radius: 20rpx;
		padding: 20rpx;
	}
	.bottom{
		position: fixed;
		bottom: 0;
		height: 180rpx;
		width: 100%;
		background: #fff;
		padding: 0 20rpx;
	}
	.btn{
		height: 50rpx;
		width: 130rpx;
		line-height: 50rpx;
		background: linear-gradient(90deg, #e3ff96, #a6ffea);
		text-align: center;
		border-radius: 14rpx;
		font-weight: 700;
		float: right;
		margin-left: 20rpx;
	}
	.group-content{
		background: #fff;
		width: 300px;
		height: auto;
		border-radius: 20rpx;
	}
	.weipincheng {
		width: 90rpx;
		height: 90rpx;
		background: #a6ffea;
		border-radius: 90rpx;
		text-align: center;
		font-size: 60rpx;
		font-weight: 700;
		margin-left: -6rpx;
		z-index: 97;
		color: #02fbdd;
		border: 1px solid #a6ffea;
		line-height: 80rpx;
		    margin: 0 auto;
	}
	.kaituan2{
		display: flex;
		    width: 90%;
		    margin: 40rpx auto;
	}
	.kaituan22{
		    flex: 1;
	}
</style>