<template>
	<view class="orderDetails">
		<!-- 团购订单-订单详情 -->
		<u-navbar title="订单详情" leftIconColor="#000" rightIcon='../../static/common/white_left_arrrow.png' placeholder
			leftIconSize='38rpx' autoBack="true">
		</u-navbar>
		<view class="cardItem">
			<image :src="orderData.goodsImage" class="itemImg" :mode="'scaleToFill'"></image>
			<view class="itemText">
				<view class="textT">
					<view class="labelName ellipsis">
						{{orderData.goodsName}}
					</view>
					<view class="labelIcon" v-if="orderData.status==7">
						未成团
					</view>
					<view class="labelIcon" v-if="orderData.status==8">
						已成团
					</view>
					<view class="labelIcon" v-if="orderData.status==9">
						已取消
					</view>
				</view>
				<view class="textC">
					<view class="Clabel">
						团购人数：
					</view>
					<view class="Cnum">
						{{orderData.clusteringNum}}人
					</view>
					<view class="knockdownNum">
						已成团：{{orderData.groupNumbered}}人
					</view>
				</view>
				<view class="textB">
					<view class="currentPrice">
						￥{{orderData.groupBuyingPrice}}
					</view>
					<view class="originalPrice">
						￥{{orderData.originalPrice}}
					</view>
					<view class="timeRemaining">
						{{orderData.time}}
					</view>
				</view>
			</view>
		</view>

		<view class="mg-bot-20">
			<common-title :msg="'订单详情'"></common-title>
		</view>

		<view class="white-bg-wrap fs28">
			<view class="u-f u-f-jcsb u-f-aic mg-bot-30">
				<text class="light-gray">留言</text>
				<text class="light-black">{{orderInfo.remark==null?"无":orderInfo.remark}}</text>
			</view>
			<view class="u-f u-f-jcsb u-f-aic mg-bot-30">
				<text class="light-gray">订单号</text>
				<text class="light-black">{{orderData.orderNo}}</text>
			</view>

			<view class="u-f u-f-jcsb u-f-aic mg-bot-30">
				<text class="light-gray">手机号</text>
				<text class="light-black">{{orderData.phone}}</text>
			</view>

			<view class="u-f u-f-jcsb u-f-aic mg-bot-30">
				<text class="light-gray">交易方式</text>
				<text class="light-black">微信支付</text>
			</view>

			<view class="u-f u-f-jcsb u-f-aic mg-bot-30">
				<text class="light-gray">下单时间</text>
				<text class="light-black">{{orderData.createTime}}</text>
			</view>

			<view class="u-f u-f-jcsb u-f-aic mg-bot-30">
				<text class="light-gray">付款时间</text>
				<text class="light-black">{{orderData.payTime}}</text>
			</view>

		</view>

		<view class="cancelBtn">
			<view class="Imgtext" @click="showBotPopup=true">
				<image src="../../static/mode/mode5.png" mode=""></image>
				<view class="text">
					客服
				</view>
			</view>
			<view class="btn" @click="cancelOrder()">
				取消订单
			</view>
		</view>

		<view class="modelContent">
			<uni-popup :position="'middle'" class="middle-wrap" :show="showBotPopup" @hidePopup="handleHidePopup">
				<view class="common-mes-nofity">
					<view class="top u-f u-f-aic u-f-jcc">联系客服</view>
					<view class="mg-top-38 deep-gray u-f u-f-jcc u-f-aic">
						<text>客服电话：{{orderData.storeCustomerService}}</text>
					</view>
					<view class="mg-top-28"></view>
					<view class="bot u-f u-f-jcc u-f-aic" @click="callOut(orderData.storeCustomerService)"><text
							class="confirm">拨打电话</text></view>
				</view>
			</uni-popup>
		</view>
	</view>
</template>

<script>
	let app = getApp()
	export default {
		data() {
			return {
				showBotPopup: false,
				orderData: "",
				groupId: "",
				ServiceInfo: "",
			}
		},
		onLoad(opt) {
			this.groupId = opt.id
		},
		onShow() {
			this.getgoodsDetailsData()
		},
		methods: {
			getgoodsDetailsData() {
				this.$http.get("/api/client/userInfo/groupOrderDetails", {
					orderId: this.groupId,
					// lon: app.globalData.lon,
					// lat: app.globalData.lat,
				}).then((res) => {
					this.orderData = res.data.data
				})
			},

			getCustomerServiceData() {
				this.$http.get('/api/client/userInfo/customerService').then((res) => {
					this.ServiceInfo = res.data.data
				})
			},
			callOut(data) {
				console.log("呼叫");
				uni.makePhoneCall({
					phoneNumber: data, //要拨打的手机号
					success: (res) => {
						// console.log("调用成功")
					},
					fail: (res) => {
						// console.log('调用失败!')
					}
				})
			},
			handleHidePopup() {
				this.showBotPopup = false
			},
			//取消订单
			cancelOrder(item) {
				console.log(item);
				uni.showModal({
					content: '确定取消该订单吗？',
					success: (res) => {
						console.log(res);
						if (res.confirm) {
							this.$http.get('/api/client/order/cancelOrder', {
								orderId: item.orderId
							}).then(res => {
								if (res.data.code == 200) {
									this.pageNum = 1
									this.getOrderList()
								}
								uni.showToast({
									icon: 'none',
									title: res.data.msg
								})
							})
						}
					},
					fail: (res) => {
						console.log(res);
					}
				})
			},
		}
	}
</script>

<style lang="less">
	.orderDetails {
		padding: 20rpx;
		box-sizing: border-box;

		.cardItem {
			display: flex;
			// align-items: center;
			margin: 20rpx auto;
			padding: 20rpx;
			box-sizing: border-box;
			width: 702rpx;
			height: 199rpx;
			background: #FFFFFF;
			border-radius: 14rpx 14rpx 14rpx 14rpx;

			.itemImg {
				width: 156rpx;
				height: 156rpx;
				background: #FFECEC;
				border-radius: 8rpx 8rpx 8rpx 8rpx;
			}

			.itemText {
				position: relative;
				margin-left: 15rpx;
				width: 100%;

				.textT {
					display: flex;

					.labelName {
						width: 412rpx;
						font-weight: 400;
						font-size: 28rpx;
						color: #333333;
					}

					.labelIcon {
						position: absolute;
						top: -10rpx;
						right: 0;
						margin-left: auto;
						font-weight: 400;
						font-size: 24rpx;
						color: #FF4502;
					}
				}

				.textC {
					display: flex;
					margin: 18rpx 0;
					align-items: center;

					.Clabel {
						font-weight: 400;
						font-size: 28rpx;
						color: #333;
					}

					.Cnum {
						margin-left: 10rpx;
						font-weight: 400;
						font-size: 24rpx;
						color: #999999;
					}

					.knockdownNum {
						margin-left: auto;
						font-weight: 400;
						font-size: 24rpx;
						color: #999999;
					}
				}

				.textB {
					display: flex;
					align-items: center;

					.currentPrice {
						font-weight: bold;
						font-size: 28rpx;
						color: #FF4502;
					}

					.originalPrice {
						margin-left: 15rpx;
						font-weight: 400;
						font-size: 24rpx;
						color: #999999;
						// 删除线
						text-decoration: line-through;
					}

					.timeRemaining {
						position: absolute;
						right: 0;
						bottom: -10rpx;
						margin-left: auto;
						font-weight: 400;
						font-size: 24rpx;
						color: #999999;
					}
				}
			}
		}

		.cancelBtn {
			position: fixed;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 24rpx;
			box-sizing: border-box;
			bottom: 10rpx;
			left: 0;
			width: 750rpx;
			height: 100rpx;
			background: #FFFFFF;
			border-radius: 0rpx 0rpx 0rpx 0rpx;

			.Imgtext {
				text-align: center;

				image {
					width: 40rpx;
					height: 40rpx;
				}

				.text {
					font-weight: 400;
					font-size: 24rpx;
					color: #333333;
				}
			}

			.btn {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 195rpx;
				height: 72rpx;
				background: #FFFFFF;
				border-radius: 41rpx 41rpx 41rpx 41rpx;
				border: 1rpx solid #707070;
				font-weight: 400;
				font-size: 28rpx;
				color: #333333;
			}
		}

		.modelContent {
			.uni-popup {
				width: 624rpx !important;
				height: 401rpx !important;
				background: #FFFFFF !important;
				border-radius: 14rpx 14rpx 14rpx 14rpx;
			}

			.subhint {
				background: #fff;
				overflow: hidden;

				.subSucc {
					display: flex;
					margin: auto;
					margin-top: 60rpx;
					width: 68rpx;
					height: 68rpx;
				}

				.hintTitle {
					margin-top: 32rpx;
					text-align: center;
					font-weight: 600;
					color: #000;
					font-size: 38rpx;
				}

				.hintDesc {
					margin-top: 32rpx;
					text-align: center;
					font-weight: 400;
					font-size: 24rpx;
					color: #000;
				}
			}
		}

		.middle-wrap :deep(.uni-popup-insert) {
			width: 624rpx !important;
		}
	}
</style>