<template>
	<view class="content" v-if="isLoaded">
		<!-- <cu-custom :isBack="true" bgColor="bg-white" style="z-index: 999;">
			<block slot="content">
				订单详情
			</block>
		</cu-custom> -->
		<u-navbar title="订单详情" title-color='#111' title-size="36" back-icon-color="#111" :custom-back="pageBack">
		</u-navbar>

		<view style="padding-bottom: 275rpx;">
			<view style="padding:43rpx 42rpx;" @click="openOrderRecord">
				<text style="font-size: 28rpx;font-weight: 500;color: #666666;">订单状态</text>
				<text
					style="font-size: 38rpx;font-weight: bold;color: #111111;margin-left: 29rpx;">{{contentData.orderStateName}}</text>
				<u-count-down :timestamp="formatCountdown(contentData.createTime)" :show-hours="false" font-size="28"
					v-if="contentData.orderStateName=='待支付'" color="#FC6035"
					style="margin-left: 15rpx;margin-right: 20rpx;" bg-color="transparent"></u-count-down>
				<image src="../../static/arrows_right.png" style="width: 24rpx;height: 24rpx;margin-left: 13rpx;">
				</image>
			</view>

			<view v-if="contentData.orderState=='005'||contentData.orderState=='006'||contentData.orderState=='007'"
				style="margin-left: 20rpx;margin-right: 20rpx;margin-bottom: 15rpx;background-color: #FFFFFF;border-radius: 20rpx;padding: 37rpx 25rpx 33rpx 25rpx;">
				<view style="font-size: 30rpx;font-weight: bold;color: #111111;" v-if="contentData.orderState=='005'">
					{{contentData.refundStateName}}
				</view>
				<view style="margin-top: 22rpx;">
					<text style="font-weight: 500;color: #111;font-size: 28rpx;font-weight: bold;">申请金额</text>
					<text
						style="font-weight: 500;color: #111;font-size: 28rpx;margin-left: 35rpx;font-weight: bold;">{{contentData.payMoney}}元</text>
				</view>
				<view style="margin-top: 22rpx;" v-if="contentData.orderState=='006'">
					<text style="font-weight: 500;color: #111;font-size: 28rpx;font-weight: bold;">实际退款</text>
					<text
						style="font-weight: 500;color: #111;font-size: 28rpx;margin-left: 35rpx;font-weight: bold;">{{contentData.refundMoney}}元</text>
				</view>
				<view style="margin-top: 22rpx;" class=" flex align-center">
					<view style="font-weight: 500;color: #999;font-size: 28rpx;width: 120rpx;">
						退款原因
					</view>
					<view
						style="font-weight: 500;color: #999;font-size: 28rpx;margin-left: 35rpx;flex: 1;word-break: break-all;">
						{{contentData.refundReason}}
					</view>
				</view>
                <view style="margin-top: 22rpx;" class=" flex align-center" v-if="contentData.orderState=='007'">
					<view style="font-weight: 500;color: #999;font-size: 28rpx;width: 120rpx;">
						拒绝原因
					</view>
					<view
						style="font-weight: 500;color: #999;font-size: 28rpx;margin-left: 35rpx;flex: 1;word-break: break-all;">
						{{contentData.refundResult}}
					</view>
				</view>
			</view>

			<!-- 描述服务人员 -->
			<view @click="goPersonDetail(contentData)"
				style="margin-left: 20rpx;margin-right: 20rpx;background-color: #FFFFFF;border-radius: 20rpx;padding-bottom: 27rpx;">
				<view class="flex align-center justify-between"
					style="margin-left: 22rpx;margin-right: 30rpx;padding-top: 36rpx;">
					<view style="font-size: 28rpx;color: #333333;font-weight: bold;">
						{{contentData.goodsName}}
					</view>
					<view>
						<image src="../../static/arrows_right.png"
							style="width: 24rpx;height: 24rpx;margin-left: 13rpx;"></image>
					</view>
				</view>
				<!-- 服务人员描述 -->
				<view
					style="margin-top: 32rpx;margin-right: 15rpx;margin-left: 15rpx;border-radius: 10rpx; border-radius: 10rpx;background-color: #F6F6F6;">
					<view class="flex align-start"
						style="padding-top: 20rpx;margin-left: 20rpx;margin-right: 20rpx;padding-bottom: 20rpx;">
						<view style="position: relative;" v-if="!$isNull(contentData.goodsImageList)||!$isNull(contentData.serverImgUrl)">

                            <image style="width: 160rpx;height: 128rpx;border-radius: 10rpx;" mode="aspectFill" v-if="!$isNull(contentData.serverImgUrl)"
                            :src="contentData.serverImgUrl"></image>

                            <image style="width: 160rpx;height: 128rpx;border-radius: 10rpx;" mode="aspectFill" v-else-if="contentData.goodsImageList[0].type=='001'&&$isNull(contentData.serverImgUrl)"
                            :src="contentData.goodsImageList[0].url"></image>
                            <image style="width: 160rpx;height: 128rpx;border-radius: 10rpx;" mode="aspectFill" v-else-if="contentData.goodsImageList[0].type=='002'&&$isNull(contentData.serverImgUrl)"
                            :src="contentData.goodsImageList[0].url+'?x-oss-process=video/snapshot,t_1000,f_jpg,w_0,h_0,m_fast,ar_auto'"></image>
                            <image src='../../static/video.png' class="video-play-position" v-if="contentData.goodsImageList[0].type=='002'&&$isNull(contentData.serverImgUrl)"></image>
                                
                        </view>
                        <image v-else mode="aspectFill" src="../../static/publish/param_merchant.png" image style="width: 160rpx;height: 128rpx;border-radius: 10rpx;"></image>
						<view style="margin-left: 18rpx;flex: 1;">
							<view class="flex align-center justify-between">
								<view class="fixed align-center">
									<text
										style="font-size: 24rpx;font-weight: 500;color: #111111;">{{contentData.serverName}}</text>
									<text
										style="font-size: 24rpx;font-weight: 500;color: #D09A6C;margin-left: 21rpx;">{{contentData.serverLevelName}}</text>
								</view>
								<view
								v-if="contentData.rate>0"
									style="border: 1rpx solid #FF9999;padding: 8rpx 14rpx 8rpx 14rpx;font-size: 22rpx;font-weight: 500;color: #FF1414;border-radius: 8rpx;">
									好评率{{contentData.rate}}%</view>

							</view>
							<view class="" style="margin-top: 10rpx;">
								<text
									style=" margin-top: 18rpx;background: linear-gradient(269deg, #E7C2A1 0%, #E7C2A1 0%, #F4EBE1 100%, #F4EBE1 100%);padding: 7rpx 11rpx;font-size: 22rpx;font-weight: 500;color: #885c4b;border-radius: 8rpx;">
									{{contentData.serverAge}}年工龄
								</text>
							</view>
							<view style="margin-top: 18rpx;">
								<text v-if="contentData.merchantType===0"
									style="font-size: 22rpx;font-weight: 500;color: #999999;">{{contentData.merchantName}}</text>
							</view>
						</view>
					</view>
				</view>


			</view>
			<!-- 描述上门时间 -->
			<view style="margin: 15rpx 20rpx 0rpx 20rpx; background-color: #FFFFFF;border-radius: 20rpx;">
				<view
					style="padding: 27rpx 39rpx 27rpx 24rpx;background-color: #FDF6E3; border-radius: 20rpx 20rpx 0rpx 0rpx;"
					class="flex justify-between">
					<text style="font-size: 28rpx;font-weight: bold;color: #666666">上门时间</text>
					<view>
						<text
							style="font-size: 28rpx;font-weight: 500;color: #111">{{manageDateToday(contentData.appointmentStartTime)}}</text>
						<text
							style="font-size: 28rpx;font-weight: 500;color: #3B94E7;margin-left: 10rpx;">{{manageDateTominus(contentData.appointmentStartTime)}}</text>
					</view>
				</view>

				<view class="flex align-center"
					style="margin-left: 23rpx;margin-right: 27rpx;padding: 48rpx 0rpx 45rpx 0rpx;border-bottom: 1rpx #EEEEEE solid;">
					<view>
						<image src="../../static/order_address.png" mode="aspectFill"
							style="height: 66rpx; width: 66rpx;"></image>
					</view>
					<view style="margin-left: 24rpx;margin-right: 27rpx;">
						<view>
							<text
								style="font-size: 30rpx;font-weight: bold;color: #111;">{{$formatName(contentData.memberName)}}</text>
							<text
								style="font-size: 30rpx;font-weight: bold;color: #111;margin-left: 23rpx;">{{$formatPhone(contentData.phone)}}</text>
						</view>
						<view style="margin-top: 19rpx;">
							<text
								style="font-size: 28rpx;color: #666;">{{contentData.address}}{{contentData.detailed}}</text>
						</view>
					</view>

				</view>

				<view class="flex align-center" v-if="contentData.memo!=null && contentData.memo.length>0"
					style="margin-left: 23rpx;margin-right: 27rpx; padding: 30rpx 0rpx 41rpx 0rpx;">
					<view style="flex: 1;">
						<text style="font-size: 28rpx;font-weight: bold;color: #111111;">备注</text>
					</view>

					<view style="flex: 6;">
						<text class="cell_content_title">{{contentData.memo}}</text>

					</view>

				</view>
			</view>

			<!-- 订单编号描述 -->
			<view style="margin: 15rpx 20rpx 0rpx 20rpx; border-radius: 20rpx;background-color: #FFFFFF;">

				<view class="align-center flex justify-between cell_content_line">
					<text class="cell_content_title">
						订单
					</text>
					<view class="align-center flex">
						<text style="margin-right: 22rpx;" class="cell_content_right_black">
							{{contentData.orderIndex}}
						</text>
						<view @click="copyOrderId(contentData.orderIndex)"
							style="padding: 5rpx 19rpx 5rpx 22rpx;border: 1rpx #fc6035 solid; font-size: 26rpx;font-weight: 500;color: #fc6035;border-radius: 8rpx;">
							复制
						</view>
					</view>
				</view>

				<view class="align-center flex justify-between cell_content_line">
					<text class="cell_content_title">
						服务类别
					</text>
					<view>
						<text class="cell_content_right_black" v-if="contentData.parentCateName&&contentData.parentCateName!=null">
							{{contentData.parentCateName}}-
						</text>
                        <text class="cell_content_right_black">
							{{contentData.cateName}}
						</text>

					</view>
				</view>

				<view class="align-center flex justify-between cell_content_line">
					<text class="cell_content_title">
						数量
					</text>
					<view v-if="$isNull(contentData.goodsCounts+contentData.goodsUnitName)">
						<text class="cell_content_right_black">
							{{contentData.goodsCounts+contentData.goodsUnitName}}
						</text>

					</view>
				</view>

				<view class="align-center flex justify-between cell_content_line">
					<text class="cell_content_title">
						服务单价
					</text>
					<view>
						<text class="cell_content_right_black">
							{{contentData.goodsServerPrice}}元/{{contentData.goodsUnitName}}
						</text>

					</view>
				</view>

				<view class="align-center flex justify-between cell_content_no_line">
					<text class="cell_content_title">
						订单金额
					</text>
					<view>
						<text class="cell_content_right_red">
							¥ {{contentData.orderAmount}}
						</text>

					</view>
				</view>

			</view>

			<!-- 优惠券描述 -->
			<view style="margin: 15rpx 20rpx 0rpx 20rpx; border-radius: 20rpx;background-color: #FFFFFF;">
				<view class="align-center flex justify-between cell_content_no_line" v-show="contentData.beanAmount">
					<text class="cell_content_title">
						优金豆
					</text>
					<view>
						<text class="cell_content_right_red">
							- ¥{{contentData.beanAmount/100}}
						</text>
				
					</view>
				</view>
				<view class="align-center flex justify-between cell_content_no_line" v-show="contentData.couponAmount">
					<text class="cell_content_title">
						优惠券
					</text>
					<view>
						<text class="cell_content_right_red">
							- ¥{{contentData.couponAmount}}
						</text>

					</view>
				</view>
				

			</view>
			<!-- 追加服务描述 -->
			<view v-if="contentData.addCounts>0 && contentData.orderType =='001'">
				<view style=" margin: 10rpx 0rpx 10rpx 43rpx;font-size: 500;color: #999">
					追加服务
				</view>
				<view style="margin: 0rpx 20rpx 0rpx 20rpx; border-radius: 20rpx;background-color: #FFFFFF;">
					<view class="align-center flex justify-between cell_content_line">
						<text class="cell_content_title">
							追加数量
						</text>
						<view>
							<text class="cell_content_right_black">
								{{contentData.addCounts}}{{contentData.goodsUnitName}}
							</text>

						</view>
					</view>
					<view class="align-center flex justify-between cell_content_no_line">
						<text class="cell_content_title">
							金额
						</text>
						<view>
							<text class="cell_content_right_red">
								¥ {{contentData.addAmount}}
							</text>
						</view>
					</view>

				</view>
			</view>
			<!-- 追加服务描述 -->
			<view v-if="contentData.maintenanceAmount>0 && contentData.orderType =='002'">
				<view style=" margin: 10rpx 0rpx 10rpx 43rpx;font-size: 500;color: #999">
					收取维修配件费
				</view>
				<view style="margin: 0rpx 20rpx 0rpx 20rpx; border-radius: 20rpx;background-color: #FFFFFF;">
					<view class="align-center flex justify-between cell_content_line">
						<text class="cell_content_title">
							收取金额
						</text>
						<view>
							<text class="cell_content_right_red">
								¥ {{contentData.maintenanceAmount}}
							</text>

						</view>
					</view>
					<view class="align-start flex justify-between cell_content_no_line">
						<view class="cell_content_title" style="width: 200rpx;">
							费用说明
						</view>
						<view style="max-width: 530rpx;word-break:break-all ">
							<text class="cell_content_right_black">
								{{contentData.maintenanceRemark}}
							</text>
						</view>
					</view>

				</view>
			</view>

			<view
				style="margin: 15rpx 20rpx 0rpx 20rpx; border-radius: 20rpx;background-color: #FFFFFF;padding-bottom: 20rpx;"
				class="bar-margin-bottom ">
				<view style="font-size: 32rpx;font-weight: bold;color: #111111;padding: 43rpx 0rpx 0rpx 23rpx;">遇到问题?
				</view>
				<view style="margin: 43rpx 34rpx 43rpx 34rpx;" class="align-center flex justify-between">
					<!-- <view @click="callPhoneClick" class="align-center flex"
						style="background-color: #FAFAFA;padding: 25rpx 65rpx 25rpx 56rpx;border: #EEEEEE 1rpx solid;border-radius: 10rpx;">
						<image src="../../static/order_phone.png" style="width: 40rpx;height: 40rpx;margin-top: 5rpx;">
						</image>
						<text
							style="font-size: 28rpx; font-weight: bold;color: #333333; margin-left: 18rpx;">联系商家</text>
					</view> -->
					<a :href="'tel:'+contentData.merchantPhone" class="align-center flex"
						style="background-color: #FAFAFA;padding: 25rpx 65rpx 25rpx 56rpx;border: #EEEEEE 1rpx solid;border-radius: 10rpx;text-decoration: none;">
						<image src="../../static/order_phone.png" style="width: 40rpx;height: 40rpx;margin-top: 5rpx;">
						</image>
						<text style="font-size: 28rpx; font-weight: bold;color: #333333; margin-left: 18rpx;">联系商家</text>
					</a>
					<view @click="complainClick" class="align-center flex"
						style="background-color:#FAFAFA ;padding: 25rpx 65rpx 25rpx 56rpx;border:#EEEEEE 1rpx solid;border-radius: 10rpx;">
						<image src="../../static/order_alert.png" style="width: 40rpx;height: 40rpx;margin-top: 5rpx;">
						</image>
						<text
							style="font-size: 24rpx; font-weight: bold;color: #333333; margin-left: 18rpx;">向平台投诉商家</text>
					</view>

				</view>
			</view>

		</view>

		<view style="position: fixed;bottom: 0;width: 100vw;" class="bar-bottom bg-ff">
			<view class="align-center flex justify-between "
				style="text-align: center; background-color: #FAFAFA;padding: 29rpx 0rpx 27rpx 0rpx;border-bottom: #E3E3E3 1rpx solid;border-top: #E3E3E3 1rpx solid;">
				<view style="flex: 1;">
					<text style="font-size: 26rpx;color: #666666;">订单实付</text>
					<text style="font-size: 24rpx;font-weight: bold;color: #FF1414;margin-left: 24rpx;">¥</text>
					<text
						style="font-size: 28rpx;font-weight: 500;color: #FF1414;margin-left: 2rpx;">{{contentData.totalAmount}}</text>
				</view>
				<view style="width: 2rpx;height: 30rpx; background-color: #CCCCCC;"></view>
				<view style="flex: 1;">
					<text style="font-size: 26rpx;color: #666666;">服务数量</text>
					<text
						style="font-size: 28rpx;font-weight: 500;color: #333;margin-left: 24rpx;">{{serverAllCount(contentData.addCounts,contentData.goodsCounts)}}</text>
					<text
						style="font-size: 26rpx;font-weight: 500;color: #333;margin-left: 2rpx;">{{contentData.goodsUnitName}}</text>
				</view>
			</view>
			<view v-if="contentData.orderState=='000'" class="align-center flex justify-between"
				style="padding: 20rpx 50rpx 20rpx 50rpx;background-color: #FFFFFF;">
				<view
					style="padding: 25rpx 90rpx;background-color: #F0F0F0;font-size: 30rpx;font-weight: bold;color: #333333;border-radius: 10rpx;"
					@click="cancelOrderClick">取消订单</view>
				<view @click="gotoPaymentClcik()"
					style="padding: 25rpx 108rpx;background-color: #FC6035;color: #FFFFFF;font-weight: bold;border-radius: 10rpx;">
					去支付</view>
			</view>
			<view v-if="contentData.orderState=='001'" class="align-center flex justify-between"
				style="padding: 20rpx 50rpx 20rpx 50rpx;background-color: #FFFFFF;margin: 0 auto;">
				<view style="margin: 0 auto;padding: 25rpx 90rpx;background-color: #F0F0F0;font-size: 30rpx;font-weight: bold;color: #333333;border-radius: 10rpx;"
					@click="jumpPlatform">申请退款</view>
				<!-- <view @click="sureFinish"
					style="padding: 25rpx 90rpx;background-color: #FC6035;color: #FFFFFF;font-weight: bold;border-radius: 10rpx;">
					确认完成</view> -->
			</view>

			<view v-if="contentData.orderState=='002'&&contentData.addCounts<=0 && contentData.orderType =='001' " class="align-center justify-between"
				style="padding: 20rpx 50rpx 20rpx 50rpx;background-color: #FFFFFF;">
				<view @click="addOtherServerClick"
					style="margin: 0rpx 95rpx; padding: 25rpx 0rpx;background-color: #FC6035;font-size: 30rpx;font-weight: bold;color: #FFFFFF;border-radius: 10rpx;text-align: center;">
					追加服务
				</view>
			</view>

			<!-- 去支付 -->
			<view v-if="contentData.addPayStatus==0 &&contentData.maintenanceAmount > 0 && contentData.orderType =='002'" class="align-center justify-between"
				style="padding: 20rpx 50rpx 20rpx 50rpx;background-color: #FFFFFF;">
				<view  @click="gotoPaymentMountings()"
					style="margin: 0rpx 95rpx; padding: 25rpx 0rpx;background-color: #FC6035;font-size: 30rpx;font-weight: bold;color: #FFFFFF;border-radius: 10rpx;text-align: center;">
					去支付维修/配件费
				</view>
			</view>
			<view v-if="contentData.orderState=='003'" class="align-center flex justify-between"
				style="padding: 20rpx 50rpx 20rpx 50rpx;background-color: #FFFFFF;">
				<view v-if="contentData.controlShow"
					style="padding: 25rpx 90rpx;background-color: #F0F0F0;font-size: 30rpx;font-weight: bold;color: #333333;border-radius: 10rpx;margin-right:58rpx;"
					@click="jumpPlatform">申请退款</view>
				<view @click="sureFinish" v-if="contentData.commentState == '001' "
					style="padding: 25rpx 90rpx;background-color: #FC6035;color: #FFFFFF;font-weight: bold;border-radius: 10rpx;">
					确认完成</view>
			</view>

			<view v-if="contentData.commentState=='001'">
				<view v-if="contentData.orderState=='004'" class="align-center flex justify-between"
					style="padding: 20rpx 50rpx 20rpx 50rpx;background-color: #FFFFFF;">
					<view v-if="contentData.controlShow"
						style="padding: 25rpx 90rpx;background-color: #F0F0F0;font-size: 30rpx;font-weight: bold;color: #333333;border-radius: 10rpx;margin-right:58rpx;"
						@click="jumpPlatform">申请退款</view>
						<view v-if="!contentData.controlShow"
							style="padding: 25rpx 75rpx;font-size: 30rpx;font-weight: bold;color: #333333;border-radius: 10rpx;"
							/>
					<view v-if="contentData.commentState == '001'" @click="goAppraise"
						style="padding: 25rpx 108rpx;background-color: #FC6035;color: #FFFFFF;font-weight: bold;border-radius: 10rpx;position: relative;">
						去评价
						<!-- 	<u-tag :text="tagText" :show="tagShow" closeable
							style="position: absolute; top: -30rpx;left: 20%;" bg-color="#FDF6E3" color="#DF9327"
							border-color='#FDF6E3' @close="tagShow=false" /> -->
						<view class="commentBox" v-if="tagCoin>0"
							style="position: absolute; top: -50rpx;left: 20%;padding: 12rpx 17rpx;background-color: #FDF6E3;color:#DF9327 ;font-size: 24rpx;font-weight: 400;border-radius: 10rpx;box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.22);"
							border-color='#FDF6E3'>
							<text>{{tagText}}</text>
						</view>
					</view>
				</view>
			</view>

			<view v-else class="">
				<view v-if="contentData.orderState=='004'"
					style="padding: 20rpx 50rpx 20rpx 50rpx;background-color: #FFFFFF;">

					<view v-if="contentData.isAddComment == 0 " class="flex align-center justify-between">
						<view v-if="contentData.controlShow"
							style="padding: 25rpx 30rpx;background-color: #F0F0F0;font-size: 30rpx;font-weight: bold;color: #333333;border-radius: 10rpx;"
							@click="jumpPlatform">申请退款</view>
						<view @click="goAddAppraise"
							style="padding: 25rpx 40rpx;background-color: #FC6035;color: #FFFFFF;font-weight: bold;border-radius: 10rpx;margin-right: 20rpx;">
							去追评</view>
						<view @click="goAppraiseDetail"
							style="padding: 25rpx 40rpx;background-color: #FC6035;color: #FFFFFF;font-weight: bold;border-radius: 10rpx;">
							查看评价</view>
					</view>

					<view v-else class="flex justify-between align-center ">
						<view v-if="contentData.controlShow"
							style="padding: 25rpx 90rpx;background-color: #F0F0F0;font-size: 30rpx;font-weight: bold;color: #333333;border-radius: 10rpx;"
							@click="jumpPlatform">申请退款</view>
						<view @click="goAppraiseDetail"
							style="padding: 25rpx 90rpx;background-color: #FC6035;color: #FFFFFF;font-weight: bold;border-radius: 10rpx;">
							查看评价</view>
					</view>
				</view>
			</view>



			<view v-if="contentData.orderState=='005'" class="align-center justify-between"
				style="padding: 20rpx 50rpx 20rpx 50rpx;background-color: #FFFFFF;">
				<view @click="cancelRefundClick"
					style="margin: 0rpx 90rpx; padding: 25rpx 0rpx;background-color: #F0F0F0;font-size: 30rpx;font-weight: bold;color: #333333;border-radius: 10rpx;text-align: center;">
					取消退款
				</view>

			</view>

		</view>

		<!-- 订单追踪描述 -->
		<u-popup v-model="show" mode="bottom">
			<view class="padding" style="border-top-left-radius: 20rpx;border-top-right-radius: 20rpx;">

				<view class=" flex align-center justify-between"
					style="border-bottom: 1rpx #EEEEEE solid;padding-bottom: 10rpx;">
					<view class="">
						订单跟踪
					</view>
					<view class="">
						<image src="../../static/close_x.png" style="width: 30rpx;height: 30rpx;" mode=""
							@click="close"></image>
					</view>
				</view>

				<view class="flex align-center justify-between" v-for="(item,index) in orderStatusList" :key="index"
					style="margin-top: 30rpx;">
					<view class="" style="color: #666666;font-size: 30rpx;">
						{{orderRecordFormat(item)}}
					</view>
					<view class="" style="color: #111;font-size: 28rpx;">
						{{item.createTime.substring(0,item.createTime.length-3)}}
					</view>
				</view>

			</view>



		</u-popup>

		<!-- 追加服务 -->
		<u-popup v-model="showAddServer" mode="bottom" border-radius="20">
			<view style="margin-top: 57rpx;" class="flex align-center justify-between">
				<view style="font-size: 34rpx;color: #111111;font-weight: bold;margin-left: 50rpx;">服务数量</view>
				<view class="flex align-center" style="margin-right: 39rpx;">
					<view @click="minusServer">
						<image src="../../static/minus_icon.png" style="width: 50rpx;height: 50rpx;" mode="">
						</image>
					</view>
					<view
						style="font-size: 28rpx;font-weight: bold;color: #111111;margin-left: 30rpx;margin-right: 30rpx;">
						{{addServerNumer}}
					</view>
					<view @click="addServer">
						<image src="../../static/add_icon.png" style="width: 50rpx;height: 50rpx;" mode=""></image>
					</view>
					<view style="font-size: 26rpx;font-weight: 500;color: #999999;margin-left: 20rpx;">
						{{currentAddServerUnit}}
					</view>
				</view>

			</view>
			<view class="flex align-center justify-between" style="margin-top: 68rpx;">
				<view></view>
				<view style="margin-right: 39rpx;">
					<text style="font-weight: bold;font-size: 28rpx;color: #111111;">合计：</text>

					<text style="font-size: 28rpx;font-weight: 500;color: #FC6035;">¥</text>
					<text
						style="font-size: 30rpx;font-weight: bold;color: #FC6035;margin-left:8rpx;">{{addServerAllMoney}}</text>

				</view>
			</view>

			<view class="flex align-center justify-between" style="margin-top: 160rpx;padding-bottom: 60rpx;">
				<view @click="cancelAddServerClick"
					style="margin-left: 50rpx; font-weight: bold;color: #333333;padding: 25rpx 121rpx;background-color: #EEEEEE;border-radius: 10rpx;">
					取消</view>
				<view @click="gotoAddServerPayment"
					style="margin-right: 50rpx; font-weight: bold;color: #FFFFFF;padding: 25rpx 121rpx;background-color: #FC6035;border-radius: 10rpx;">
					去支付</view>
			</view>
		</u-popup>

		<!-- 取消订单的模态框 -->
		<u-modal v-model="showModel" :content="modelContent" confirm-color="#FC6035" :showCancelButton="true"
			@confirm="sureCancelOrderClick"></u-modal>
		<u-modal v-model="showModel1" :content="modelContent" confirm-color="#FC6035" :showCancelButton="true"
			@confirm="sureCancelRefundClick"></u-modal>
	</view>
    <view class="align-center" v-else>
        <u-navbar title="订单详情" title-color='#111' title-size="36" back-icon-color="#111" :custom-back="pageBack">
		</u-navbar>
        <view class="flex flex-direction align-center justify-center" style="width:100%;margin-top:calc(50% - 185rpx);">
            <image src="../../static/empty-loading.png" mode="" style="width: 256rpx;height: 158rpx;"></image>
            <view style="color:#3A3A3A;font-size;34rpx;margin-top:46rpx;">加载中...</view>
        </view>
    </view>
</template>

<script>
	export default {
		data() {
			return {
				tagCoin: '',
				tagShow: true,
				tagText: "",
				showModel1: false,
				tempData: '',
				modelContent: '',
				showModel: false,
				contentData: {
					goodsImageList: [{
						url: ''
					}]
				},
				orderStatusList: [],
				show: false,
				status: "004",
				orderId: '',
				addServerNumer: 0,
				addServerAllMoney: 0,
				showAddServer: false,
				currentAddServerIndex: 0,
				currentAddServerUnit: '小时',
                isBack: false, //判断返回上一页还是直接返回订单列表
				// totalCoin:0,
                isLoaded: false,

			}
		},
		onLoad(options) {
            this.orderId = options.orderId
            this.isBack = !this.$isNull(options.isBack)
		},
		onShow() {
            this.isLoaded= false;
			this.getOrderDetaisl(this.orderId)
		},
		methods: {
			formatCountdown(orderDate) {
				if (orderDate == undefined || orderDate == null) {
					return ''
				}
				var date = orderDate.substring(0, orderDate.length);
				date = date.replace(/-/g, '/');
				var timestamp = new Date(date).getTime();
				return (timestamp + 15 * 60 * 1000 - new Date().getTime()) / 1000
			},
			// 获取评价纬度
			getCommentDimension() {
				// console.log(this.contentData, '评价纬度')
				const param = {
					categoryId: this.contentData.cateId,
					goodsId: this.contentData.goodsId
				}
				this.$u.api.getCommentDimensionInfo(param).then(res => {
					// console.log(res)
					if (res.code === 200) {
						this.tagCoin = res.data.commentCoin + res.data.videoImageCoin
						this.tagText = '赚' + (res.data.commentCoin + res.data.videoImageCoin) + '优金豆'
					}
				})
			},
			pageBack() {
                if(this.isBack) {
                    uni.navigateBack({
                        delta: 1
                    });
                } else {
                    uni.switchTab({
                        url: './order'
                    })
                }
				
			},
			goPersonDetail(obj) {
				if(obj.publishId != null){
				//判断是否是用户自主发布的
					if(obj.publishState !=null){
						uni.navigateTo({
							url:'../publish/publishInfo?publishId='+obj.publishId
						})
					}else{
						this.$api.msg('当前服务项目已下架或不存在')
					}
				}else {
					if (obj.isGoodsClosed == 1) {
						this.$api.msg('当前服务项目已下架或不存在')
					}else {
					    obj.bizType = this.$bizType
						uni.setStorageSync('indexDetails', obj)
						// console.log(obj)
						uni.navigateTo({
							url: '../index/personDetails'
						})
					}

				}

			},
			//去支付
			gotoPaymentClcik() {
				const data = this.contentData
				// console.log(data)
				// url:'./webView?tittle='+'客服服务'+'&url=http://jzkf.uxianxin.com/s/66424vv38'
				uni.navigateTo({
					url: '../index/payment?orderId=' + data.orderId + '&totalAmount=' + data.totalAmount +
						'&timestamp=' + data.createTime + '&type=001'
				})
			},
			// 查看评价
			goAppraiseDetail() {

				if (this.contentData.commentId == null) {
					this.$api.msg('评论已被删除')
					return
				}
				uni.navigateTo({
					url: 'appraiseDetail?commontId=' + this.contentData.commentId
				})
			},
			// 去评价
			goAppraise() {
				uni.setStorageSync('tempAppraise', this.contentData)
				uni.navigateTo({
					url: 'appraise'
				})
			},
			// 去追评
			goAddAppraise() {
				if (this.contentData.commentId == null) {
					this.$api.msg('评论已被删除')
					return
				}
				uni.navigateTo({
					url: '../mine/minePage/addRemark?commontId=' + this.contentData.commentId
				})
			},
			// 复制订单号
			copyOrderId(info) {
				const that = this
				// uni.setClipboardData({
				// 	data: id, //要被复制的内容
				// 	success: () => { //复制成功的回调函数
				// 		that.$api.msg('复制成功')
				// 	},
				// })

				let result
				let textarea = document.createElement("textarea")
				textarea.value = info
				textarea.readOnly = "readOnly"
				document.body.appendChild(textarea)
				textarea.select() // 选中文本内容
				textarea.setSelectionRange(0, info.length) // 设置选定区的开始和结束点
				that.$api.msg('复制成功')
				result = document.execCommand("copy") //将当前选中区复制到剪贴板
				textarea.remove()

			},
			// 平台申请退款
			jumpPlatform() {
				// var data = contentObj.childList[index].orderId
				var orderId = this.contentData.orderId
				uni.navigateTo({
					url: './platformPage?orderId=' + orderId,
				});
			},
			getOrderDetaisl(orderId) {
				var param = orderId
				var that = this
				this.$u.api.orderDetails(param).then(res => {
					// console.log(res)
					if (res.code == 200) {
						that.contentData = {}
						console.log(res.data, '12312312')
						that.contentData = res.data
						this.getCommentDimension()
						// console.log(that.contentData.addCounts)
						// that.contentData.addCounts=2
					}
				}).catch(error => {

				}).finally(()=>{
                    this.isLoaded = true
                });
			},

			openOrderRecord() {
				this.show = true;
				var param = {
					"orderId": this.orderId
				}
				var that = this
				this.$u.api.getMemberOrderRecord(param).then(res => {
					// console.log(JSON.stringify(res.data))
					if (res.code == 200) {
						that.orderStatusList = res.data
					}
				}).catch(error => {

				})
			},

			orderRecordFormat(data) {
				var name = ''

				switch (data.nowState) {
					case '000':
						name = '提交订单';
						break;
					case '001':
						if (data.preState == '005') {
							name = '顾客取消申请退款'
						} else{
							name = '支付成功'
						}
						break
					case '002':
						if (data.preState == '002'&&this.contentData.orderType==='001') {
							name = '追加时长'
						} else if(this.contentData.orderType==='002'&&data.preState == '002'){
								name = data.operateInfo
						} else {
							name = '开始服务'
						}
						break
					case '003':
						if (data.preState == '005') {
							name = '顾客取消退款'
						} else {
							name = '完成服务'
						}
						break
					case '004':
						if (data.preState == '005') {
							name = '顾客取消退款'
						} else {
							name = '确认完成'
						}
						break
					case '005':
						name = '顾客申请退款'
						break
					case '006':
						// var aName = '商家退款'
						// if (data.preState != '005') {
						// 	aName = '商家已退款'
						// } else {
						// 	aName = '平台已退款'
						// }
						var aName = data.operateInfo
						name = aName
						break
					case '007':
						name = '平台拒绝退款'
						break
					case '099':
						name = '未支付取消订单'
						break
				}

				return name
			},
			close() {
				this.show = false
				// console.log('close');
			},
			sureCancelRefundClick() {
				var param = {
					'orderId': this.contentData.orderId
				}
				var that = this
				this.$u.api.cancelRefund(param).then(res => {
					// console.log(res)
					this.$api.msg(res.msg)
					if (res.code == 200) {
						that.getOrderDetaisl(this.contentData.orderId)
					}
				}).catch(error => {
					this.$api.msg("请求错误")
				})
			},

			// 取消申请平台介入
			cancelRefundClick() {
				this.showModel1 = true
				this.modelContent = '您确认要撤销申请吗？'
			},
			// 确认完成服务
			sureFinish() {
				var param = {
					'orderId': this.contentData.orderId
				}
				var that = this
				this.$u.api.orderAffirm(param).then(res => {
					this.$api.msg(res.msg)
					if (res.code == 200) {
						that.getOrderDetaisl(this.contentData.orderId)
					}
				}).catch(error => {
					this.$api.msg("请求错误")
				})
			},
			cancelOrderClick(data) {
				this.showModel = true
				this.modelContent = '您确认要取消这笔订单吗？'
				this.tempData = data
				// console.log(data)
			},
			// 取消订单
			sureCancelOrderClick() {
				var param = {
					'orderId': this.orderId
				}
				// console.log(param)
				var that = this
				this.$u.api.orderCancel(param).then(res => {
					// console.log(res)
					this.$api.msg(res.msg)
					if (res.code == 200) {
						that.getOrderDetaisl(this.orderId)
					}
				}).catch(error => {
					this.$api.msg("请求错误")
				})
			},

			// 投诉商家
			complainClick() {
				// console.log('投诉商家')

				// var data = JSON.stringify({
				// 	tittle:'客服服务',
				// 	url:'http://jzkf.uxianxin.com/s/66424vv38'
				// })
				// console.log(data)


				// uni.navigateTo({
				// 	url: './webView?tittle=' + '客服服务' + '&url=http://jzkf.uxianxin.com/s/66424vv38'
				// })
				uni.navigateTo({

					url:"../webviewPage/index?tittle=客服服务&url=https://kf.uxianxin.com/s/64009h1kl&phoneFlag=true"
				})
			},

			// 联系商家
			callPhoneClick() {
				// console.log('联系商家')
				// console.log(this.contentData)
				// console.log(this.contentData.merchantPhone)
				uni.makePhoneCall({
					phoneNumber: this.contentData.merchantPhone == null ? "" : this.contentData.merchantPhone,
					fail: function(error) {
						console.log(error)

					}
				})
			},
			// 复制订单编号
			copyOrderIndexClick() {

				uni.setClipboardData({
					data: this.contentData.orderIndex,

				})
			},
			manageDateToday(dateStr) {
				if (dateStr == undefined || dateStr == null) {
					return ''
				}
				var date = dateStr.substring(0, dateStr.length);
				date = date.replace(/-/g, '/');
				// console.log(date)
				var timestamp = new Date(date).getTime();
				return this.$u.timeFormat(timestamp, 'yyyy年mm月dd日')

			},

			manageDateTominus(dateStr) {
				if (dateStr == undefined || dateStr == null) {
					return ''
				}
				var date = dateStr.substring(0, dateStr.length);
				date = date.replace(/-/g, '/');
				// console.log(date)
				var timestamp = new Date(date).getTime();
				return this.$u.timeFormat(timestamp, 'hh:MM')
			},
			serverAllCount(addCounts, goodsCounts) {
                if (this.$isNull(addCounts)||this.$isNull(goodsCounts)) return
				return parseInt(addCounts) + parseInt(goodsCounts)
			},

			// 追加服务去支付
			gotoAddServerPayment() {

				if (this.addServerNumer == 0) {
					this.$api.msg('请添加追加服务数量')
					return
				}
				var data = this.contentData
				var addServerPayInfo = {};
				addServerPayInfo.addAmount = this.addServerAllMoney
				addServerPayInfo.orderId = data.orderId
				addServerPayInfo.addCounts = this.addServerNumer
				addServerPayInfo.orderIndex = data.orderIndex

				var payInfo = JSON.stringify(addServerPayInfo)

				uni.navigateTo({
					url: '../index/payment?payInfo=' + payInfo + '&type=002'
				})
				// uni.navigateTo({
				// 	url: '../index/payment?orderId=' + data.orderId + '&totalAmount=' + data.totalAmount+'&timestamp='+data.createTime
				// })
			},
			// 取消追加服务
			cancelAddServerClick() {
				this.addServerAllMoney = 0;
				this.addServerNumer = 0;
				this.showAddServer = false;
			},
			// 追加服务按钮事件
			addOtherServerClick() {
				// console.log('追加服务')
				var data = this.contentData
				// console.log(data)
				this.currentAddServerUnit = data.goodsUnitName
				this.showAddServer = true

			},

			// 减少追加服务数量
			minusServer() {
				if (this.addServerNumer <= 0) {
					return;
				}
				var data = this.contentData;
				var isTime = true;
				data.goodsUnit == "001" ? isTime = true : isTime = false

				if (isTime) {
					this.addServerNumer = this.addServerNumer - 0.5
				} else {
					this.addServerNumer = this.addServerNumer - 1
				}
				this.addServerAllMoney = this.addServerNumer * data.goodsServerPrice
			},
			// 增加服务数量
			addServer() {
				var isTime = true;
				var data = this.contentData;
				data.goodsUnit == "001" ? isTime = true : isTime = false
				if (isTime) {
					this.addServerNumer = this.addServerNumer + 0.5
				} else {
					this.addServerNumer = this.addServerNumer + 1
				}
				this.addServerAllMoney = this.addServerNumer * data.goodsServerPrice
			},
			//去支付维修配件费
			gotoPaymentMountings(){
				console.log(data)
				var data = this.contentData;
				var addServerPayInfo = {};
				addServerPayInfo.addAmount = data.maintenanceAmount
				addServerPayInfo.orderId = data.orderId
				addServerPayInfo.orderIndex = data.orderIndex

				var payInfo = JSON.stringify(addServerPayInfo)
				uni.navigateTo({
					url: '../index/payment?payInfo=' + payInfo + '&type=002'
				})
			}


		}
	}
</script>

<style scoped lang="scss">
	.commentBox::after {
		content: '';
		width: 14rpx;
		height: 14rpx;
		position: absolute;
		// top: 10rpx;
		bottom: -7rpx;
		right: 20rpx;
		transform: rotate(135deg);
		background-color: #faf8f3;
		border: 1rpx #fbe2a0;
		border-style: solid solid none none;

	}

	.bar-bottom {
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
	}

	.bar-margin-bottom {
		margin-bottom: calc(20rpx + constant(safe-area-inset-bottom));
		margin-bottom: calc(20rpx + env(safe-area-inset-bottom));
	}

	.cell_content_line {
		margin-left: 23rpx;
		margin-right: 29rpx;
		padding-top: 29rpx;
		padding-bottom: 29rpx;
		border-bottom: #EEEEEE 1rpx solid;
	}

	.cell_content_no_line {
		margin-left: 23rpx;
		margin-right: 29rpx;
		padding-top: 29rpx;
		padding-bottom: 29rpx;
	}

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

	.cell_content_right_black {
		font-size: 28rpx;
		color: #111111;
		font-weight: 500;
	}

	.cell_content_right_red {
		font-size: 28rpx;
		color: #FF1414;
		font-weight: 500;
	}
</style>
