<template>
	<view class="detail-page">
		<!-- 顶部导航栏 -->
		<custom-navbar title="订单详情" :show-back="true" title-color="#333333"
			:backgroundColor="backgroundColor"></custom-navbar>
		<view class="content-part">
			<!-- 订单状态 -->
			<view class="status-section">
				<image class="status-section-image" mode="widthFix" :src="stateItem.icon" />
				<text class="status-text">{{ stateItem.text }}
					<text v-if="orderInfo.team_buy_order_state">{{
            ` (${getGroupType})`
          }}</text></text>
			</view>


			<!-- 拼团邀请 -->
			<view class="group-invite"
				v-if="orderInfo.state !=1 && orderInfo.team_buy_id &&  (orderInfo.team_buy_order_state==1||orderInfo.team_buy_order_state==2)">
				<view class="invite-text" v-if="orderInfo.team_buy_order_state == 1">参团成功，需邀请<text
						style="color: #E8101E">{{orderInfo.team_buy.person_num - orderInfo.team_buy.pay_person_num}}</text>人才可完成拼团
				</view>
				<view class="invite-text" v-if="orderInfo.team_buy_order_state == 2">参团成功，已拼团成功！</view>

				<view class="invite-time"  v-if="orderInfo.team_buy_order_state == 1">
					<span class="invite-time-line1"></span>剩余
					<uv-count-down :time="orderInfo.team_buy.remain_time*1000" format="HH:mm:ss" autoStart millisecond
						@change="onChange" @finish="onFinish">
						<view class="time">
							<text class="time__item">{{ timeData.hours>=10?timeData.hours:'0'+timeData.hours }}</text>:
							<text
								class="time__item">{{ timeData.minutes>=10?timeData.minutes:'0'+timeData.minutes }}</text>:
							<text
								class="time__item">{{ timeData.seconds>=10?timeData.seconds:'0'+timeData.seconds }}</text>
						</view>
					</uv-count-down>
					时间<span class="invite-time-line2"></span>
				</view>
				<view class="invite-time-items">
					<view class="invite-time-item" v-for="item in orderInfo.team_buy.person_num">
						<image :src="orderInfo.team_buy.head_photos[item-1]" mode="aspectFill"
							class="invite-time-item-img" v-if="orderInfo.team_buy.head_photos[item-1]"></image>
						<image src="/static/images/shop/pintuan/add.png" class="invite-time-item-img" v-else></image>
					</view>
				</view>
				<view class="invite-btn" @click="goInvite">
					<view class="invite-btn-wx" v-if="orderInfo.team_buy_order_state==1">
						<image src="/static/images/shop/pintuan/wx.png" class="invite-btn-wx-img"></image>
						再邀请{{orderInfo.team_buy.person_num - orderInfo.team_buy.pay_person_num}}位好友拼单
					</view>
					<view class="invite-btn-wx" v-else>
						快邀您的好友，来享优惠
					</view>

				</view>

			</view>

			<!-- 到家订单 客户以及手艺人信息 -->
			<view class="service-card" v-if="orderInfo.order_kind == 1 || orderInfo.order_kind == 3">
				<view class="location-info">
					<image src="/static/images/gohome_location.png" class="location-icon"></image>
					<view class="address-info">
						<view class="name-phone">
							<text class="name">{{ reservation_address_arr.name }}</text>
							<text class="phone">{{
                reservation_address_arr.call_phone
              }}</text>
						</view>
						<text class="address">{{
              reservation_address_arr.server_address
            }}</text>
					</view>
				</view>
				<image src="/static/images/boder_icon.png" mode="aspectFill" class="divider"></image>
				<view class="staff-info">
					<image :src="user_syr.head_photo" mode="aspectFill" class="staff-avatar"></image>
					<view class="staff-detail">
						<text class="staff-name">{{ user_syr.name }}</text>
						<view class="rating">
							<!-- <image 
              v-for="(star, index) in 5" 
              :key="index"
              src="/static/images/star.png" 
              class="star-icon"
            ></image> -->
						</view>
					</view>
					<!-- <image src="/static/images/order_phone.png" class="phone-btn" @click="contactService(user_syr.account)"></image> -->
				</view>
			</view>

			<!-- 门店订单 店铺信息 -->
			<view class="service-shop" v-if="orderInfo.order_kind == 2">
				<view class="shop-info">
					<view class="shop-info1">
						<view class="shop-info1-left">
							<image class="shop-logo" :src="user_sj.head_photo" mode="aspectFill"></image>
							<view class="shop-info-right">
								<text class="shop-name">{{ user_sj.name }}</text>
								<view class="shop-distance">
									<image src="/static/images/position_hui.png" mode="aspectFit" class="distance-icon">
									</image>
									<text class="distance-text">{{ distance }}km</text>
								</view>
							</view>
						</view>
						<view class="shop-info1-right">
							<view class="shop-info1-right-item">
								<image class="btn-map" src="/static/images/evaluate/map.png" mode="aspectFit"
									@click="openMap"></image>
								<view class="shop-info1-right-item-text">地址</view>
							</view>
							<view class="shop-info1-right-item">
								<image class="btn-phone" src="/static/images/evaluate/phone.png" mode="aspectFit"
									@click="contactService(user_sj.account)"></image>
								<view class="shop-info1-right-item-text">电话</view>
							</view>
						</view>
					</view>
					<view class="shop-info2">
						<text class="shop-time">营业时间：{{ user_sj.business_time }}</text>
						<text class="shop-address">商家电话：{{ user_sj.account }}</text>
						<text class="shop-address mt-10">地址：{{ user_sj.address }}</text>
					</view>
				</view>
				<!-- <view class="shop-btns">
					<image class="btn-map" src="/static/images/map_icon.png" mode="aspectFit" @click="openMap"></image>
					<image class="btn-phone" src="/static/images/order_phone.png" mode="aspectFit"
						@click="contactService(user_sj.account)"></image>
				</view> -->
			</view>

			<!-- 预约信息 -->
			<view class="booking-card">
				<view class="card-header">
					<text class="card-title">预约信息</text>
					<view>
						<text class="update-time" v-if="orderInfo.order_kind == 1 || orderInfo.order_kind == 3">{{
              orderInfo.reservation_time
            }}</text>
						<!-- <text class="update-change">更改时间</text> -->
					</view>
				</view>
				<view class="service-item">
					<image :src="orderInfo.server_photo[0]"
						v-if="orderInfo.server_photo && orderInfo.server_photo.length != 0" mode="aspectFill"
						class="service-image"></image>
					<view class="service-info">
						<view class="service-name">{{ orderInfo.server_title }}
							<view class="service-name-num">×1</view>
						</view>
						<view v-if="orderInfo.team_buy_id" class="group-price">
							<view class="service-price">原价¥{{ orderInfo.cost_money }}</view>
							<view class="service-price2">团购价:¥<text style="font-size: 36rpx">{{
                  orderInfo.order_money
                }}</text></view>
						</view>
						<text class="service-price2" style="color: #333" v-else>¥
							<text style="font-size: 36rpx">{{ orderInfo.order_money }}</text>
						</text>
					</view>
				</view>
				<view class="service-real">
					<text class="real-lable">实付金额：</text>
					<text class="real-price">￥{{ orderInfo.pay_money || 0 }}</text>
				</view>
			</view>

			<!-- 订单信息 -->
			<view class="order-card">
				<text class="card-title">订单信息</text>
				<view class="info-item">
					<text class="label">订单类型</text>
					<text class="value">{{ orderInfo.team_buy_id?'拼团订单':'普通订单' }}</text>
				</view>
				<view class="info-item">
					<text class="label">服务码</text>
					<text class="value">{{ orderInfo.server_code }}</text>
				</view>
				<view class="info-item">
					<text class="label">订单编号</text>
					<text class="value">{{ orderInfo.number }}</text>
				</view>
				<view class="info-item" v-if="orderInfo.add_time">
					<text class="label">下单时间</text>
					<text class="value">{{ orderInfo.add_time }}</text>
				</view>
				<view class="info-item" v-if="orderInfo.pay_kind">
					<text class="label">支付方式</text>
					<text
						class="value">{{orderInfo.pay_kind == 1 ? '账户余额' : orderInfo.pay_kind == 2 ? '微信支付' : orderInfo.pay_kind == 3 ? '支付宝支付' : ''}}</text>
				</view>
				<view class="info-item" v-if="orderInfo.pay_time">
					<text class="label">支付时间</text>
					<text class="value">{{ orderInfo.pay_time }}</text>
				</view>
				<view class="info-item" v-if="
            orderInfo.state != 1 &&
            orderInfo.state != 2 &&
            orderInfo.state != 3 &&
            orderInfo.server_start_time
          ">
					<text class="label">开始服务时间</text>
					<text class="value">{{ orderInfo.server_start_time }}</text>
				</view>
				<view class="info-item" v-if="
            orderInfo.state != 1 &&
            orderInfo.state != 2 &&
            orderInfo.state != 3 &&
            orderInfo.state != 4 &&
            orderInfo.server_end_time
          ">
					<text class="label">服务完成时间</text>
					<text class="value">{{ orderInfo.server_end_time }}</text>
				</view>
			</view>
		</view>
		<!-- 底部按钮 -->
		<view class="bottom-buttons">
			<view class="contact-button">
				<!-- <image src="/static/images/tell_icon.png" class="tell-icon"></image>
		  <text class="contact-text">联系TA</text> -->
			</view>
			<view class="handel-button btn-border" @click="cancelService" v-if="orderInfo.state == 1">
				<text class="button-text">取消订单</text>
			</view>
			<view class="handel-button btn-border" @click="refoundService"
				v-if="orderInfo.state == 2 || orderInfo.state == 3">
				<text class="button-text">申请退款</text>
			</view>
			<view class="handel-button btn-bg" @click="payOrder" v-if="orderInfo.state == 1">
				<text class="button-text">立即支付</text>
			</view>
			<view class="handel-button btn-border" @click="reviewOrder"
				v-if="orderInfo.state == 5 && orderInfo.evaluate==2">
				<text class="button-text">立即评价</text>
			</view>
			<view class="handel-button btn-border" @click="goEvaluateDetail"
				v-if="orderInfo.state == 5 && orderInfo.evaluate==1">
				<text class="button-text">已评论</text>
			</view>
			<view class="handel-button btn-bg" @click="orderAgain" v-if="orderInfo.state == 5 || orderInfo.state == 6">
				<text class="button-text">再来一单</text>
			</view>
		</view>

		<!-- 获取权限提示匡内容 -->
		<view class="permission" :class="{ transform: isShowPer }">
			<view class="per-tit">美融融plus 对拨打电话权限申请说明</view>
			<view class="per-cont">当您需要联系商家或平台客服的时候，需要获取拨打电话权限。</view>
		</view>
		<l-painter ref="painter" hidden
			css=" width: 420rpx;  height: 336rpx;position: relative;background-image:url(https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/8b8dd83f-ccde-406a-b236-2cf27db682e0)"
			v-if="orderInfo.team_buy_id">
			<l-painter-image :src="orderInfo.server_photo[0]"
				css=" width: 205rpx;  height: 205rpx; position: absolute;left:34rpx;top:108rpx;z-index:2;border-radius:20rpx;object-fit:cover" />
			<l-painter-view css="display: inline-block;z-index:2;position: absolute;left:255rpx;top:108rpx;">
				<l-painter-view
					css="display: inline-block;background:rgba(253, 218, 226, 1);border-radius: 17rpx 17rpx 17rpx 0rpx;padding: 6rpx 10rpx;">
					<l-painter-image
						src="https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/8406740b-0448-447e-8d61-df91f1339bd4"
						css=" width: 14rpx;height: 19rpx;" />
					<l-painter-text
						:text="`立省${formatPriceNumber(this.orderInfo.cost_money-this.orderInfo.order_money)}元`" :css="`font-weight: 500;font-size: ${formatPriceSize(
						              formatPriceNumber(this.orderInfo.cost_money-this.orderInfo.order_money),
						              18,
						              2
						            )}rpx;color: #E8101E;line-height: 25rpx;text-align: left;font-style: normal;`" />
				</l-painter-view>
				<l-painter-view css="margin-top:44rpx;">
					<l-painter-text text="¥"
						css="font-weight: 500;font-size: 26rpx;color: #E8101E;line-height: 48rpx;text-align: left;font-style: normal;" />
					<l-painter-text :text=" formatPriceNumber(this.orderInfo.order_money)" :css="`font-weight: 500;font-size:${formatPriceSize(
						              formatPriceNumber(this.orderInfo.order_money),
						              56,
						              3
						            )}rpx;color: #E8101E;line-height: 34rpx;text-align: left;font-style: normal;`" />
				</l-painter-view>
				<l-painter-view css="margin-top:0rpx;">
					<l-painter-text :text="`原价¥${formatPriceNumber(this.orderInfo.cost_money)}`" :css="`text-decoration: line-through;font-weight: 400;font-size:${formatPriceSize(
						              formatPriceNumber(this.orderInfo.cost_money),
						              24,
						              4
						            )}rpx;color: #CACCCC;line-height: 33rpx;text-align: left;font-style: normal;`" />
				</l-painter-view>
				<l-painter-view
					css="width: 143rpx;  height: 50rpx;background-image:url(https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/c4f3c552-67f2-4b1e-9aeb-ab8c4cf1c97e);display: inline-block;border-radius: 25rpx;">
				</l-painter-view>
			</l-painter-view>
		</l-painter>

	</view>
</template>

<script>
	import {
		handleImgSize,
		handleImgSizeUni
	} from '@/utils/service.js'
	import request from "../../utils/request";
	import _public from "../../utils/public";
	import locationService from "../../utils/locationService";
	import permissionUtils from "../../utils/per";
	export default {
		components: {

		},
		data() {
			return {
				serviceType:1,//订单类型，1普通，2自营
				urls:{
					1:{
						cancelorder:"/user/cancelorder",
						deleteorder:"/user/deleteorder"
					},
					2:{
						cancelorder:"/user/orderSelf/cancel",
						deleteorder:"/user/orderSelf/del"
					}
				},
				path: '',
				shareImg: '',
				scrollTop: 0,
				timeData: {},
				isShowPer: false,
				id: "",
				staffInfo: {
					avatar: "/static/images/staff.jpg",
					name: "中医理疗谢飞",
					rating: 5,
				},
				orderInfo: {},
				distance: "",
				user_syr: {},
				reservation_address_arr: {},
			};
		},
		onLoad(options) {
			this.id = options.id;
			if(options.serviceType){
					this.serviceType = options.serviceType
				}
			// 请求订单详情
			this.getOrderDetail();
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		computed: {
			backgroundColor() {
				if (this.scrollTop > 10) {
					return `rgba(255, 255, 255, ${0.02 * this.scrollTop});`;
				}
				return "transparent";
			},
			//获取拼团状态文字
			getGroupType() {
				let list = [{
						id: 1,
						text: "拼团中",
					},
					{
						id: 2,
						text: "已成团",
					},
					{
						id: 3,
						text: "拼团失败",
					},
				];
				let name = list.find((it) => it.id == this.orderInfo?.team_buy_order_state)?.text;
				return name;
			},
			stateItem() {
				const list = [{
						text: "待支付",
						icon: "/static/images/evaluate/pay.png",
						state: "1",
					},
					{
						text: "待接单",
						icon: "/static/images/evaluate/pending.png",
						state: "2",
					},
					{
						text: this.identity == 0 ? "待开始" : "待服务",
						icon: "/static/images/evaluate/pendingService.png",
						state: "3",
					},
					{
						text: this.identity == 0 ? "进行中" : "服务中",
						icon: "/static/images/evaluate/pendingService.png",
						state: "4",
					},
					{
						text: "已完成",
						icon: "/static/images/evaluate/payOk.png",
						state: "5",
					},
					{
						text: "待评价",
						icon: "/static/images/icons/pending.png",
						state: "6",
					},
					{
						text: "已取消",
						icon: "/static/images/evaluate/cancel.png",
						state: "7",
					},
				];
				const item = list.find((it) => it.state == this.orderInfo.state) || {};
				return item;
			},
		},
		methods: {
			async goInvite() {
				let groupText = ""
				if (this.orderInfo?.team_buy_order_state == 1) {
					groupText =
						`我发起了${this.orderInfo.team_buy.person_num}人团，拼单立省${this.formatPriceNumber(this.orderInfo.cost_money - this.orderInfo.order_money)}元，一起拼更便宜`
				} else if (this.orderInfo?.team_buy_order_state == 2) {
					groupText =
						` 我参加了${this.orderInfo.team_buy.person_num}人团，省了${this.formatPriceNumber(this.orderInfo.cost_money - this.orderInfo.order_money)}元，你也来看看吧`
				}
				this.$refs.painter.canvasToTempFilePathSync({
					fileType: "jpg",
					// 如果返回的是base64是无法使用 saveImageToPhotosAlbum，需要设置 pathType为url
					pathType: 'url',
					quality: 1,
					success: async (res) => {
						let imageUrl =
							'https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/yh/1756713709528-717.png?x-oss-process=image/resize,p_40'
						try {
							// 直接调用导入的函数，不要加 this
							const processedUrl = await handleImgSizeUni(res.tempFilePath);
							console.log("处理后的图片地址：", processedUrl);
							// 赋值给组件数据
							imageUrl = processedUrl;
						} catch (err) {
							console.error("处理失败：", err);
						}
						uni.share({
							provider: "weixin",
							scene: "WXSceneSession",
							type: 5,
							title: groupText,
							miniProgram: {
								id: 'gh_89c92e18b70b', // 小程序原始ID
								path: `/subPackages/groupBuy/detail?id=${this.orderInfo.server_id}`, //小程序路径
								type: this.$store.state.wxShareType, // 正式版:0，测试版:1，体验版:2
								webUrl: "https://www.baidu.com/",
							},
							// href:"https://www.baidu.com/",
							imageUrl: imageUrl, // 分享主图（建议300*300以上）
							success: function(res) {
								console.log("success:" + JSON.stringify(res));
							},
							fail: function(err) {
								uni.share({
									provider: "weixin",
									scene: "WXSceneSession",
									type: 5,
									title: groupText,
									miniProgram: {
										id: 'gh_89c92e18b70b', // 小程序原始ID
										path: `/subPackages/groupBuy/detail?id=${this.orderInfo.server_id}`, //小程序路径
										type: this.$store.state
											.wxShareType, // 正式版:0，测试版:1，体验版:2
										webUrl: "https://www.baidu.com/",
									},
									imageUrl: 'https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/yh/1756713709528-717.png?x-oss-process=image/resize,p_40', // 分享主图（建议300*300以上）
									success: function(res) {
										console.log("success:" + JSON.stringify(
											res));
									},
								});
							}
						});

					},
				});
			},
			onChange(e) {
				this.timeData = e;
			},
			onFinish(e) {
				console.log('结束')
				if (this.orderInfo.team_buy_order_state == 1) {
					this.orderInfo.state = 7
					this.orderInfo.team_buy_order_state = 3
				}

			},

			goEvaluateDetail() {
				uni.navigateTo({
					url: `/pages/evaluate/evaluationDetails?order_id=${this.id}&order_type=1`
				});
			},

			getOrderDetail() {
				let url = "/user/orderdetail"
				if(this.serviceType==2){
					url = "/user/orderSelf/details"
				}
				request
					.post(url, {
						id: this.id,
					})
					.then((res) => {
						this.orderInfo = res.data;
						this.user_syr = res.data.user_syr;
						this.user_sj = res.data.user_sj;
						this.reservation_address_arr = res.data.reservation_address_arr;
						console.log(this.orderInfo);
						if (this.orderInfo?.team_buy?.remain_time == 0 && this.orderInfo?.team_buy_order_state == 1) {
							this.orderInfo.state = 7
							this.orderInfo.team_buy_order_state == 3
						}
						if (this.orderInfo.order_kind == 2) {
							this.distance = _public.calcDistance(
								this.user_sj.latitude,
								this.user_sj.longitude,
								getApp().globalData.latitude,
								getApp().globalData.longitude
							);
						}
					});
			},
			// 显示权限说明弹窗
			showPermissionDialog(title, content) {
				return new Promise((resolve) => {
					uni.showModal({
						title,
						content,
						confirmText: "去开启",
						success(res) {
							resolve(res.confirm);
						},
					});
				});
			},
			// 拨打电话
			async makeCall() {
				const systemInfo = uni.getSystemInfoSync();
				if (systemInfo.platform === "ios") {
					uni.makePhoneCall({
						phoneNumber: this.orderInfo.customer.phone, //仅为示例
					});
				} else {
					let permission = "";
					if (systemInfo.platform === "ios") {
						permission = "phone";
					} else {
						permission = "android.permission.CALL_PHONE";
					}
					// const firstRequest = !plus.storage.getItem(`perm_${permission}`)
					// if(firstRequest) {
					// 	this.isShowPer = true;
					// }
					this.isShowPer = true;
					// 1. 检查权限
					const {
						granted
					} = await permissionUtils.checkPermission(
						"phone",
						"需要拨打电话权限，方便您联系商家或平台"
					);
					if (granted) {
						uni.makePhoneCall({
							phoneNumber: this.orderInfo.customer.phone, //仅为示例
						});
						return;
					}
					this.isShowPer = false;
					// 2. 显示权限说明弹窗
					const confirm = await this.showPermissionDialog(
						"拨打电话权限申请",
						"我们需要拨打电话权限，方便您联系商家或平台"
					);

					if (!confirm) return;

					// 3. 请求权限
					const result = await permissionUtils.requestPermission(
						"phone",
						"需要拨打电话权限，方便您联系商家或平台"
					);
					console.log("result", result);
					if (result) {
						uni.makePhoneCall({
							phoneNumber: this.orderInfo.customer.phone, //仅为示例
						});
						return;
					} else {
						locationService.openAppSettings();
						return;
						// uni.showToast({ title: '相机权限被拒绝', icon: 'none' });
					}
				}

				// uni.makePhoneCall({
				//   phoneNumber: this.orderInfo.customer.phone
				// })
			},
			// 联系客服
			async contactService(phone) {
				// TODO: 实现联系客服功能
				// uni.navigateTo({
				// 	url: '/pages/contact/contact?phone='+phone
				// })
				const systemInfo = uni.getSystemInfoSync();
				if (systemInfo.platform === "ios") {
					uni.makePhoneCall({
						phoneNumber: phone, //仅为示例
					});
				} else {
					let permission = "";
					if (systemInfo.platform === "ios") {
						permission = "phone";
					} else {
						permission = "android.permission.CALL_PHONE";
					}

					this.isShowPer = true;
					// const firstRequest = !plus.storage.getItem(`perm_${permission}`)
					// if(firstRequest) {
					// 	this.isShowPer = true;
					// }
					// 1. 检查权限
					const {
						granted
					} = await permissionUtils.checkPermission(
						"phone",
						"需要拨打电话权限，方便您联系商家或平台"
					);
					if (granted) {
						uni.makePhoneCall({
							phoneNumber: phone, //仅为示例
						});
						this.isShowPer = false;
						return;
					}
					this.isShowPer = false;
					// 2. 显示权限说明弹窗
					const confirm = await this.showPermissionDialog(
						"拨打电话权限申请",
						"我们需要拨打电话权限，方便您联系商家或平台"
					);

					if (!confirm) return;

					// 3. 请求权限
					const result = await permissionUtils.requestPermission(
						"phone",
						"需要拨打电话权限，方便您联系商家或平台"
					);
					console.log("result", result);
					if (result) {
						uni.makePhoneCall({
							phoneNumber: phone, //仅为示例
						});
						return;
					} else {
						locationService.openAppSettings();
						return;
						// uni.showToast({ title: '相机权限被拒绝', icon: 'none' });
					}
				}
			},
			// 取消订单
			async cancelService() {
				let id = "";
				await request
					.post("/user/getuser", {
						type: 1,
					})
					.then((res) => {
						console.log(res);
						id = res.data.id;
					});
				uni.showModal({
					title: "取消订单",
					content: "确定要取消该订单吗？",
					success: (res) => {
						if (res.confirm) {
							// TODO: 取消订单
							let data = {
								orderNo: this.orderInfo.number,
								amount: this.orderInfo.pay_money,
								cancel_state: 1,
								cancel_id: id,
							};
							request
								.post(this.urls[this.serviceType].cancelorder, data)
								.then((res) => {
									if (res.state == 1 || res.code == 200) {
										uni.showToast({
											title: "取消成功！",
											icon: "none",
										});
										this.getOrderDetail();
									} else {
										uni.showToast({
											title: res.msg,
											icon: "none",
										});
									}
								})
								.catch((err) => {
									console.log(err);
								});
						}
					},
				});
			},

			// 申请退款
			async refoundService() {
				let id = "";
				await request
					.post("/user/getuser", {
						type: 1,
					})
					.then((res) => {
						id = res.data.id;
					});
				uni.showModal({
					title: "申请退款",
					content: "确定申请退款？退款后则订单取消！",
					success: (res) => {
						if (res.confirm) {
							// TODO: 申请退款
							let data = {
								orderNo: this.orderInfo.number,
								amount: this.orderInfo.pay_money,
								cancel_id: id,
							};
							let url = "";
							if (this.orderInfo.pay_kind == 1) {
								url = "/user/cancelbalance";
							} else if (this.orderInfo.pay_kind == 2) {
								url = "/user/wechatrefund";
							} else if (this.orderInfo.pay_kind == 3) {
								url = "/user/alirefund";
							}
							request
								.post(url, data)
								.then((res) => {
									console.log("申请退款接口", res);
									uni.showToast({
										title: "申请退款成功！",
										icon: "none",
									});
									this.orderInfo = {};
									this.getOrderDetail();
								})
								.catch((err) => {
									console.log(err);
								});
						}
					},
				});
			},

			// 支付订单
			payOrder() {
				if(this.orderInfo.table_source == "order_self"){
					// TODO: 实现支付功能
					uni.navigateTo({
						url: `/pages/order/pay?id=${this.orderInfo.id}&money=${this.orderInfo.order_money}&title=${this.orderInfo.server_title}&number=${this.orderInfo.number}&table_source=order_self`,
					});
				}else{
					// TODO: 实现支付功能
					uni.navigateTo({
						url: `/pages/order/pay?id=${this.orderInfo.id}&money=${this.orderInfo.order_money}&title=${this.orderInfo.server_title}&number=${this.orderInfo.number}`,
					});
				}
				
			},

			// 评价订单
			reviewOrder() {
				uni.navigateTo({
					url: `/pages/evaluate/comment?id=${this.orderInfo.id}&evaluator_type=3&order_type=1&order_kind=${this.orderInfo.order_kind}`
				})
			},

			// 再次下单
			orderAgain() {
				// TODO: 实现再次下单功能
				uni.navigateTo({
					url: "/pages/service/detail?id=" + this.orderInfo.server_id,
				});
			},
			// 打开手机已有地图
			openMap() {
				let that = this;

				// #ifdef MP-WEIXIN
				uni.openLocation({
					success: function(res) {
						console.log("打开系统位置地图成功");
					},
					fail: function(error) {
						console.log(error);
					},
				});
				// #endif
				// #ifdef APP-PLUS
				_public.goMap({
					latitude: parseFloat(that.user_sj.latitude),
					longitude: parseFloat(that.user_sj.longitude),
					name: that.user_sj.name,
					address: that.user_sj.address,
				});
				// #endif
			},
		},
	};
</script>

<style lang="scss" scoped>
	page {
		position: relative;
		background-color: #fff;
	}

	.detail-page::before {
		content: "";
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		height: 1200rpx !important;
		background-image: url("/static/images/bg.png");
		background-size: cover;
		background-position: center top;
		background-repeat: no-repeat;
		z-index: 1;
	}

	.content-part {
		position: relative;
		left: 0;
		right: 0;
		z-index: 9;
	}

	/* 导航栏样式 */
	.custom-nav {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		height: 88rpx;
		background-color: transparent;
		display: flex;
		align-items: center;
		padding: 0 32rpx;
		z-index: 100;
		/* #ifdef H5 */
		padding-top: 0;
		/* #endif */
		/* #ifdef APP-PLUS || MP-WEIXIN */
		padding-top: var(--status-bar-height);
		/* #endif */
	}

	.nav-back {
		width: 48rpx;
		height: 48rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.back-icon {
		width: 32rpx;
		height: 32rpx;
	}

	.nav-title {
		flex: 1;
		text-align: center;
		font-size: 36rpx;
		font-weight: 500;
		color: #ffffff;
	}

	/* 状态区域 */
	.status-section {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 20rpx;
		padding-top: 55rpx;
		padding-bottom: 50rpx;

		.status-section-image {
			width: 52rpx;
		}
	}

	.status-text {
		font-weight: 600;
		font-size: 44rpx;
		color: #333333;
		line-height: 78rpx;
		text-align: left;
		font-style: normal;
	}

	/* 服务人员卡片 */
	.service-card {
		margin: 24rpx;
		background-color: #ffffff;
		border-radius: 16rpx;
		padding: 24rpx 0;
		box-shadow: 0 4rpx 16rpx 0 rgba(210, 213, 224, 0.5);
	}

	.location-info {
		display: flex;
		flex-flow: row nowrap;
		justify-content: flex-start;
		align-items: center;
		padding: 0 24rpx;
	}

	.location-icon {
		width: 60rpx;
		height: 60rpx;
		margin-right: 32rpx;
	}

	.address-info {
		flex: 1;
	}

	.name-phone {
		display: flex;
		align-items: center;
		margin-bottom: 8rpx;
	}

	.name {
		font-size: 32rpx;
		color: #333333;
		font-weight: 500;
		margin-right: 16rpx;
	}

	.phone {
		font-size: 28rpx;
		color: #666666;
	}

	.address {
		font-size: 28rpx;
		color: #666666;
	}

	.divider {
		width: 702rpx;
		height: 4rpx;
	}

	.staff-info {
		display: flex;
		align-items: center;
		padding: 32rpx 24rpx 0;
	}

	.staff-avatar {
		width: 80rpx;
		height: 80rpx;
		border-radius: 44rpx;
		margin-right: 16rpx;
		background-color: #333333;
	}

	.staff-detail {
		flex: 1;
	}

	.staff-name {
		font-size: 32rpx;
		color: #3d3d3d;
		font-weight: 500;
	}

	.rating {
		display: flex;
		align-items: center;
	}

	.star-icon {
		width: 24rpx;
		height: 24rpx;
		margin-right: 4rpx;
	}

	.phone-btn {
		width: 64rpx;
		height: 64rpx;
		background-color: #E8101E;
		border-radius: 32rpx;
	}

	/* 门店信息 */
	.service-shop {
		margin: 24rpx;
		background-color: #ffffff;
		border-radius: 16rpx;
		padding: 24rpx;
		box-shadow: 0 4rpx 16rpx 0 rgba(210, 213, 224, 0.5);
		display: flex;
		flex-flow: row nowrap;
		justify-content: flex-start;
		align-items: center;
	}

	.shop-info {
		flex: 1;
	}

	.shop-info1 {
		display: flex;
		flex-flow: row nowrap;
		justify-content: flex-start;
		align-items: center;
		padding-bottom: 14rpx;
		border-bottom: 2rpx solid #f6f5f5;

		.shop-info1-left {
			display: flex;
			flex-flow: row nowrap;
			justify-content: flex-start;
			align-items: center;
		}

		.shop-info1-right {
			flex: 1;
			display: flex;
			flex-flow: row nowrap;
			justify-content: flex-end;
			align-items: center;
			gap: 30rpx;

			.shop-info1-right-item {
				display: flex;
				flex-flow: column nowrap;
				justify-content: center;
				align-items: center;

				.shop-info1-right-item-text {
					margin-top: 2rpx;
					font-weight: 400;
					font-size: 20rpx;
					color: #8b8b8b;
					line-height: 28rpx;
					text-align: left;
					font-style: normal;
				}
			}
		}
	}

	.shop-logo {
		width: 96rpx;
		height: 96rpx;
		margin-right: 18rpx;
	}

	.shop-name {
		font-weight: 600;
		font-size: 30rpx;
		color: #333333;
		line-height: 34rpx;
		text-align: left;
		font-style: normal;
	}

	.shop-distance {
		display: flex;
		flex-flow: row nowrap;
		justify-content: flex-start;
		align-items: center;
	}

	.distance-icon {
		width: 24rpx;
		height: 24rpx;
		margin-right: 4rpx;
	}

	.distance-text {
		font-weight: 400;
		font-size: 26rpx;
		color: #666666;
		line-height: 37rpx;
		text-align: left;
		font-style: normal;
	}

	.shop-info2 {
		display: flex;
		flex-flow: column wrap;
		justify-content: flex-start;
		align-items: flex-start;
		margin-top: 14rpx;
	}

	.shop-time {
		width: 100%;
		padding-bottom: 10rpx;
		font-weight: 500;
		font-size: 26rpx;
		color: #333333;
		line-height: 37rpx;
		text-align: left;
		font-style: normal;
		border-bottom: 2rpx solid #f6f5f5;
		margin-bottom: 20rpx;
	}

	.shop-address {
		font-weight: 400;
		font-size: 26rpx;
		color: #666666;
		line-height: 37rpx;
		text-align: left;
		font-style: normal;
	}

	// .shop-time,
	// .shop-address {
	//   font-size: 24rpx;
	//   color: #999999;
	// }

	.shop-btns {
		display: flex;
		flex-flow: row nowrap;
		justify-content: flex-end;
		align-items: center;
	}

	.btn-map,
	.btn-phone {
		width: 40rpx;
		height: 40rpx;
	}

	/* 预约信息卡片 */
	.booking-card {
		margin: 24rpx;
		background-color: #ffffff;
		border-radius: 16rpx;
		padding: 24rpx;
		box-shadow: 0 4rpx 16rpx 0 rgba(210, 213, 224, 0.5);
	}

	.card-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 24rpx;
	}

	.card-title {
		font-weight: 500;
		font-size: 32rpx;
		color: #333333;
		line-height: 34rpx;
		text-align: left;
		font-style: normal;
	}

	.update-time {
		font-size: 28rpx;
		color: #333333;
		padding-right: 4rpx;
	}

	.update-change {
		font-size: 28rpx;
		color: #666666;
	}

	.service-item {
		display: flex;
		flex-flow: row nowrap;
		justify-content: flex-start;
		align-items: center;
		margin-bottom: 24rpx;
	}

	.service-image {
		width: 160rpx;
		height: 160rpx;
		border-radius: 16rpx;
		margin-right: 24rpx;
		background-color: #e2e2e2;
	}

	.service-info {
		flex: 1;
		height: 160rpx;
		display: flex;
		flex-flow: column nowrap;
		justify-content: space-between;
		align-items: flex-start;
		margin-right: 24rpx;
	}

	.service-name {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-weight: 500;
		font-size: 30rpx;
		color: #333333;
		line-height: 34rpx;
		text-align: left;
		font-style: normal;

		.service-name-num {
			font-weight: 500;
			font-size: 26rpx;
			color: #999999;
			line-height: 34rpx;
		}
	}

	.service-price {
		font-weight: 400;
		font-size: 24rpx;
		color: #bbbbbb;
		line-height: 34rpx;
		text-align: left;
		font-style: normal;
		margin-bottom: 7rpx;
	}

	.service-price2 {
		font-weight: 500;
		font-size: 24rpx;
		color: #E8101E;
		line-height: 34rpx;
		text-align: left;
		font-style: normal;
	}

	.service-count {
		font-size: 28rpx;
		color: #666666;
	}

	.service-real {
		display: flex;
		flex-flow: row nowrap;
		justify-content: flex-end;
		align-items: baseline;
		padding-top: 24rpx;
		border-top: 1rpx solid rgba(0, 0, 0, 0.05);
	}

	.real-lable {
		font-weight: 400;
		font-size: 30rpx;
		color: #333333;
		line-height: 34rpx;
		text-align: left;
		font-style: normal;
	}

	.real-price {
		font-family: DINPro, DINPro;
		font-weight: 500;
		font-size: 36rpx;
		color: #E8101E;
		line-height: 34rpx;
		text-align: left;
		font-style: normal;
	}

	/* 订单信息卡片 */
	.order-card {
		margin: 24rpx;
		background-color: #ffffff;
		border-radius: 16rpx;
		padding: 24rpx;
		box-shadow: 0 4rpx 16rpx 0 rgba(210, 213, 224, 0.5);
	}

	.info-item {
		display: flex;
		justify-content: space-between;
		margin-top: 16rpx;
	}

	.label {
		font-size: 28rpx;
		color: #999999;
	}

	.value {
		font-size: 28rpx;
		color: #333333;
	}

	/* 底部按钮 */
	.bottom-buttons {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		height: 128rpx;
		background-color: #ffffff;
		display: flex;
		flex-flow: row nowrap;
		align-items: center;
		justify-content: flex-end;
		box-shadow: 0 -2rpx 8rpx rgba(0, 0, 0, 0.05);
		padding: 0 24rpx 0 78rpx;
		/* #ifdef H5 */
		padding-bottom: env(safe-area-inset-bottom);
		/* #endif */
		z-index: 999;
	}

	.handel-button {
		width: 186rpx;
		height: 72rpx;
		display: flex;
		flex-flow: row nowrap;
		justify-content: center;
		align-items: center;
		border-radius: 36rpx;
		margin-left: 60rpx;
	}

	.btn-border {
		border: 2rpx solid #979797;
		background-color: #fff;
		box-sizing: border-box;
		margin-left: 60rpx;
	}

	.btn-bg {
		background-color: #E8101E;
	}

	.button-text {
		font-size: 28rpx;
		font-weight: 400;
		color: #ffffff;
	}

	.btn-border .button-text {
		font-weight: 400;
		font-size: 28rpx;
		color: #333333;
		line-height: 39rpx;
	}

	.contact-button {
		display: flex;
		flex-flow: column nowrap;
		justify-content: center;
		align-items: center;
	}

	.contact-text {
		font-size: 24rpx;
		color: #666666;
	}

	.tell-icon {
		width: 36rpx;
		height: 36rpx;
		margin-right: 8rpx;
	}

	/* APP适配 */
	/* #ifdef APP-PLUS */
	.permission.transform {
		top: calc(var(--status-bar-height) + 88rpx + 20rpx);
		opacity: 1;
		visibility: visible;
	}

	.detail-page {
		padding-bottom: calc(130rpx);
	}

	/* #endif */
	/* 平台适配 */
	/* #ifdef H5 */
	.detail-page {
		padding-bottom: calc(120rpx + env(safe-area-inset-bottom));
	}

	/* #endif */

	/* #ifdef MP-WEIXIN */
	.custom-nav {
		padding-top: calc(var(--status-bar-height) + constant(safe-area-inset-top));
		padding-top: calc(var(--status-bar-height) + env(safe-area-inset-top));
	}

	/* #endif */
	.group-invite {
		background: linear-gradient(180deg, #fff4f3 0%, #ffffff 100%);
		box-shadow: 0rpx 4rpx 16rpx 0rpx rgba(210, 213, 224, 0.5);
		border-radius: 20rpx;
		padding: 40rpx 25rpx 50rpx 25rpx;
		margin: 0 30rpx;

		.invite-text {
			font-weight: 500;
			font-size: 35rpx;
			color: #333333;
			line-height: 49rpx;
			text-align: center;
			font-style: normal;
		}

		.invite-time {
			display: flex;
			justify-content: center;
			align-items: center;
			margin-top: 44rpx;

			.time {
				// #ifndef APP-NVUE
				display: flex;
				// #endif
				flex-direction: row;
				align-items: center;
				font-weight: 500;
				font-size: 24rpx;
				color: #E8101E;
				line-height: 33rpx;
				text-align: left;
				font-style: normal;
				gap: 6rpx;
				margin: 0 20rpx;

				&__item {
					width: 42rpx;
					height: 42rpx;
					background: #fdeded;
					border-radius: 6rpx;
					border: 1rpx solid #f4c1c8;
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}

			.invite-time-line1 {
				width: 84rpx;
				height: 2rpx;
				background: linear-gradient(90deg, #FFFFFF 0%, #E2E7E7 100%);
				margin-right: 20rpx;
			}

			.invite-time-line2 {
				width: 84rpx;
				height: 2rpx;
				background: linear-gradient(337deg, #FFFFFF 0%, #E2E7E7 100%);
				margin-left: 20rpx;
			}
		}

		.invite-time-items {
			margin-top: 61rpx;
			display: flex;
			justify-content: center;
			gap: 28rpx;
			flex-wrap: wrap;

			.invite-time-item {
				.invite-time-item-img {
					width: 100rpx;
					height: 100rpx;
					border-radius: 100rpx;
				}
			}
		}

		.invite-btn {
			margin-top: 60rpx;
			background-image: url('/static/images/shop/pintuan/button.png');
			background-size: cover;
			background-position: center top;
			background-repeat: no-repeat;
			width: 640rpx;
			height: 90rpx;
			position: relative;
			display: flex;
			align-items: center;
			justify-content: center;

			.invite-btn-wx {
				font-weight: 500;
				font-size: 34rpx;
				color: #FFFFFF;
				line-height: 48rpx;
				text-align: left;
				font-style: normal;
				display: flex;
				align-items: center;
				justify-content: center;

				.invite-btn-wx-img {
					width: 43rpx;
					height: 39rpx;
					margin-right: 20rpx;
				}
			}
		}
	}
</style>