<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: 160rpx;">
			<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.refundReason}}
					</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: 30rpx;margin-right: 29rpx; padding-top: 37rpx;">
                    <view class="flex align-center" style="flex: 2;">
						<image mode="aspectFill" :src="contentData.merchantAvatar" style="width: 90rpx;height: 72rpx; border-radius: 10rpx;" v-if="contentData.merchantType !=1"></image>
						<text style="font-size: 30rpx;color: #666;margin-left: 20rpx;" class="break-word" v-if="contentData.merchantType !=1">{{contentData.merchantName}}</text>
						<text style="font-size: 30rpx;color: #666;margin-left: 20rpx;" class="break-word" v-if="contentData.merchantType ==1">{{$formatName(contentData.merchantName)}}</text>
						
                        <view>
                            <image src="../../static/arrows_right.png"
                                style="width: 24rpx;height: 24rpx;margin-left: 10rpx;">
                            </image>
                        </view>
                    </view>
				</view>

				<view class="flex align-start" style="padding-top: 30rpx;margin-left: 20rpx;margin-right: 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="contentData.goodsImageList[0].type=='001'"
                        :src="contentData.goodsImageList[0].url"></image>
                        <image style="width: 160rpx;height: 128rpx;border-radius: 10rpx;" mode="aspectFill" v-if="contentData.goodsImageList[0].type=='002'"
                        :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'"></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="color: #111111;margin-left: 19rpx;" class="flex-sub">
                        <view style="font-size: 28rpx;text-align: left; " class="text-bold break-word wb_hide_2"> {{contentData.goodsName}}</view>
                        <view class="flex align-center justify-between" style="margin-top: 27rpx;">
                            <view class="flex">
                                <view style="padding:2rpx 14rpx;background: #FAFAFA;border: 2rpx solid #CCCCCC;border-radius: 8rpx;font-size: 24rpx;color: #666;" class="flex-sub break-word wb_hide_2">{{contentData.specificationDesc}}</view>
                                <view style="font-size: 28rpx;font-weight: 500;color: #666;padding-left:16rpx;">{{contentData.groupTimes}}次</view>
                            </view>

                        </view>
                        <view class="flex align-center justify-between margin-top-sm">
							<view></view>
							<view class="flex align-center">
								<text style="font-size: 36rpx;font-weight: bold;color: #D90018;">￥{{contentData.currentPrice}}</text>
							</view>
						</view>
                    </view>
				</view>


			</view>
			<!-- 描述上门时间 -->
			<view style="margin: 15rpx 20rpx 0rpx 20rpx; background-color: #FFFFFF;border-radius: 20rpx;" class="padding-top" v-if="contentData.orderState =='001' || contentData.orderState =='002' ||contentData.orderState =='003' || contentData.orderState =='004'|| contentData.orderState =='005' ||contentData.orderState =='006' || contentData.orderState =='007' ">

				<view style="padding: 0 24rpx 26rpx 14rpx;margin:0 16rpx 20rpx 16rpx; border-bottom:2rpx solid #eee;" class="flex align-center text-bold" v-if="contentData.appointmentStatus=='001'">
					<text style="font-size: 28rpx;color: #111">已预约上门时间：</text>
                    <view style="color:#FCAF35;" v-if="contentData.appointmentTime&&contentData.appointmentTime!=null">{{$timefilter('YY-MM-DD HH:MM',contentData.appointmentTime).replace(/-/g, ".")}}</view>
				</view>
				<view  v-if="contentData.orderState =='001' || contentData.orderState =='002' || contentData.orderState =='003'">
					<view class="flex align-center justify-between margin-bottom" style="padding: 0 24rpx 0 30rpx;border-radius: 20rpx;" v-if="contentData.groupRemainingTimes!=0">
						<view class="flex align-center">
							<image style="width: 38rpx; height: 38rpx;" src="../../static/times.png"></image>
							<text style="font-size: 28rpx; text-align: left;  color:#F59A23;margin-left: 18rpx;">
								如需预约服务请提前联系商家
							</text>
						</view>

						<a :href="'tel:'+contentData.merchantPhone" style="text-decoration:none">
							<view style="width: 152rpx; height: 56rpx; background: #FCAF35; border: 2rpx solid #FCAF35; border-radius: 28rpx;" class="flex align-center justify-center">
								<image style="width: 36rpx; height: 36rpx;" src="../../static/call-w.png"></image>
								<span style="color:#fff;font-size:24rpx;margin-left:10rpx;">预约</span>
							</view>
						</a>
					</view>

					<view    class="code-box flex flex-direction align-center justify-center" >
						<view style="font-size: 46rpx;color:#fc6035;font-weight: bold;">
							{{replaceStr(contentData.orderVerificationCode)}}
						</view>
						<view style="font-size: 28rpx;color:#333333;  font-weight: 700;margin-top:18rpx;">
							核销码
						</view>
					</view>
				</view>
				<view class="flex align-center justify-between" style="padding: 30rpx 26rpx 24rpx 26rpx;">
                    <view class="flex align-center">
                        <view style="font-size: 28rpx;color:#111;" class="text-center text-bold padding-lr-sm">
                            共{{contentData.groupTimes}}次
                        </view>
                        <view style="width:2rpx;height:30rpx;background:#ccc;"></view>
                        <view style="font-size: 28rpx;color:#FC6036;  font-weight: 700;" class="text-center padding-left-sm">
                            已使用{{contentData.groupTimes - contentData.groupRemainingTimes}}次
                        </view>
                    </view>
                    <view class="verification-btn flex align-center justify-center" @tap="verification=true" v-if="contentData.orderVerificationRecordList&&contentData.orderVerificationRecordList.length>0">
                        <image style="width: 32rpx; height: 32rpx;margin-right:8rpx;" src="../../static/edit-list.png"></image>
                        核销记录
                    </view>
                </view>
                <view class="align-center flex justify-between" style="color:#999;font-size:26rpx;padding: 0 46rpx 38rpx 46rpx;">
                    <view>
						有效期：
						<text v-if="contentData.verificationCodeEffectiveDate&&contentData.verificationCodeEffectiveDate!=null">
							{{$timefilter('YY-MM-DD',contentData.verificationCodeEffectiveDate)}}
						</text>
						<text v-else>永久</text>
					</view>
					<view v-if="$isBefore($timefilter('YY-MM-DD',contentData.verificationCodeEffectiveDate),$timefilter('YY-MM-DD',Date.now()))">
						有{{contentData.groupRemainingTimes}}次未使用已过期
					</view>
				</view>

			</view>

            <view style="margin: 15rpx 20rpx 0rpx 20rpx; background-color: #FFFFFF;border-radius: 20rpx;">


				<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;" class="break-word">{{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 break-word">{{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 #ccc solid; font-size: 26rpx;font-weight: 500;color: #666;border-radius: 8rpx;">
							复制
						</view>
					</view>
				</view>

				<view class="align-center flex justify-between cell_content_line">
					<text class="cell_content_title">
						服务类别
					</text>
					<view class="flex align-center">
						<text class="cell_content_right_black break-word">
                            {{contentData.parentCateName}}
						</text>
                        <text class="cell_content_right_black" v-if="contentData.cateName&&contentData.cateName!=null">-</text>
                        <text class="cell_content_right_black break-word">
							{{contentData.cateName}}
						</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 class="align-center flex justify-between cell_content_line">
					<text class="cell_content_title">
						订单实付
					</text>
					<view>
						<text class="cell_content_right_red">
							¥{{contentData.totalAmount}}
						</text>

					</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">
					<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 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-center"
				style="padding: 20rpx 50rpx 20rpx 50rpx;background-color: #FFFFFF;">
				<view style="padding: 25rpx 190rpx;background-color: #F0F0F0;font-size: 30rpx;font-weight: bold;color: #333333;border-radius: 10rpx;"
					@click="jumpPlatform">申请退款</view>
			</view>

			<view v-if="contentData.orderState=='003'" class="align-center flex justify-end"
				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-end"
					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:50rpx;"
						@click="jumpPlatform">申请退款</view>
						
					<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;">
						去评价
						<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-end">
						<view v-if="contentData.controlShow"
							style="padding: 25rpx 36rpx;background-color: #F0F0F0;font-size: 30rpx;font-weight: bold;color: #333333;border-radius: 10rpx;margin-right: 36rpx;"
							@click="jumpPlatform">申请退款</view>
						<view @click="goAddAppraise"
							style="padding: 25rpx 54rpx;background-color: #FC6035;color: #FFFFFF;font-weight: bold;border-radius: 10rpx;margin-right: 36rpx;">
							去追评</view>
						<view @click="goAppraiseDetail"
							style="padding: 25rpx 36rpx;background-color: #FC6035;font-size: 30rpx;color: #FFFFFF;font-weight: bold;border-radius: 10rpx;">
							查看评价</view>
					</view>

					<view v-else class="flex justify-end 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;" class="margin-left-xl">
							查看评价</view>
					</view>
				</view>
			</view>



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

			</view>

		</view>

		<!-- 订单追踪描述 -->
		<u-popup v-model="show" mode="bottom" border-radius="20">
			<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="verification" mode="bottom" border-radius="20">
            <view class="flex align-center justify-between verification-title" style="height:92rpx;">
                <view style="margin-left:312rpx;font-size:32rpx;" class="text-bold">核销记录</view>
                <image src="../../static/close_2x.png" style="width: 30rpx;height: 30rpx;" class="margin-right-xl" mode="" @tap="verification = false"></image>
            </view>

                <scroll-view :scroll-top="scrollTop" scroll-y="true" class="padding-bottom-sm" style="max-height:800rpx;">

                    <view v-for="(item,index) in contentData.orderVerificationRecordList" :key="index" class="verification-item flex align-center justify-between margin-lr">
                        <view style="font-size:26rpx;">
                            <view class="flex align-center">
                                <view style="color:#111;">核销时间</view>
                                <view style="color:#999;" class="margin-left-lg">{{$timefilter('YY-MM-DD HH:MM',item.createTime)}}</view>
                            </view>
                            <view class="flex align-center margin-top-sm">
                                <view style="color:#111;">上门时间</view>
                                <view style="color:#999;" class="margin-left-lg">{{$timefilter('YY-MM-DD HH:MM',item.appointmentTime)}}</view>
                            </view>
                        </view>
                        <view class="verification-code flex flex-direction align-center justify-center">
                            <view class="text-bold text-df">{{replaceStr(item.orderVerificationCode)}}</view>
                            <view style="color:#758198;margin-top:8rpx;" class="text-sm">核销码</view>
                        </view>
                    </view>
                </scroll-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: {
					merchant:{
						avatar:"",
						merchantName:"",
					},
					goodsImageList: [{
						url: ''
					}]

				},
				orderStatusList: [],
				show: false,
				status: "004",
				orderId: '',
				addServerNumer: 0,
				addServerAllMoney: 0,
				showAddServer: false,
				currentAddServerIndex: 0,
				currentAddServerUnit: '小时',
				// totalCoin:0
                verification: false,
                scrollTop:0,
                isBack: false, //判断返回上一页还是直接返回订单列表
                isLoaded: false,

			}
		},
		onLoad(options) {
            this.orderId = options.orderId
            this.isBack = !this.$isNull(options.isBack)
		},
		onShow() {
			this.getOrderDetaisl(this.orderId)
			
		},
		methods: {
			
            replaceStr(str) {
                return str.replace(/(.{4})/g,'$1 ');
            },
			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.isGoodsClosed == 1) {
                    this.$api.msg('当前团购项目已下架或不存在')
                }else {
                    uni.removeStorageSync('indexDetails')
                    obj.bizType = this.$bizType
                    uni.setStorageSync('indexDetails', obj)
                    uni.navigateTo({
                        url: '../index/groupDetails'
                    })
                }

			},
			//去支付
			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' + '&isGroup=1'
				})
			},
			// 查看评价
			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.groupOrderDetail(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 == '001') {
							name = '已核销一次服务'
						} else 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() {

				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) {
				return parseInt(addCounts) + parseInt(goodsCounts)
			},


            //核销记录




		}
	}
</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: 600;
	}

	.cell_content_right_red {
		font-size: 28rpx;
		color: #FF1414;
		font-weight: 500;
	}
    .code-box {
        width: 660rpx;
        height: 200rpx;
        background: #FFF7F5;
        border: 2rpx solid #FFCCCC;
        border-radius: 20rpx;
        overflow: hidden;
        margin: 0 26rpx;
        text-align: center;
    }
    .verification-btn {
        width: 198rpx;
        height: 56rpx;
        background: #FFFFFF;
        border: 2rpx solid #CCCCCC;
        border-radius: 28rpx;
        font-size: 26rpx;
        color: #333;
    }
    .verification-title {
        border-bottom: 2rpx solid #eee;
        background: #fff;
    }
    .verification-item {
        height: 166rpx;
        border-bottom: 2rpx solid #eee;
    }
    .verification-item:last-of-type{
        border: none;
    }
    .verification-code {
        width: 270rpx;
        height: 106rpx;
        background: #F8F9FA;
        border: 2rpx solid #EEEEEE;
        border-radius: 18rpx;
        overflow: hidden;
        color: #111;
        overflow: hidden;
        padding: 2rpx;
    }
    .verification-popup {
         max-height: 80%;
        // /deep/ .u-drawer-content {
        //     max-height: 80%;
        //     overflow-y: scroll;
        // }
    }
</style>
