<template>
	<view v-if="isLogin" class="content">
		<view>
			<u-tabs-swiper ref="uTabs" :list="tabsList" :current="tabsCurrent" @change="tabsChange" :is-scroll="false"
				active-color="#FC6035" inactive-color="#111111" fontSize="28" :active-item-style="active"
				:bar-style="barStyle" swiperWidth="750" height="100"></u-tabs-swiper>
		</view>
		<swiper :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish"
			style="height: calc(100vh - 100rpx);padding:0rpx 20rpx;">
			<swiper-item class="swiper-item" v-for="(item, index) in tabsList" :key="index">
				<scroll-view scroll-y style="height: calc(100vh - 180rpx);width: 100%;" @scrolltolower="onreachBottom"
					v-if="item.childList.length>0" :refresher-enabled="true" @refresherrefresh="onRefresh"
					refresher-background="#f3f3f3" :refresher-triggered="triggered">
					<view v-for="(data,index1) in item.childList" :key='index1'
						style="margin-top: 15rpx; background-color: #FFFFFF;border-radius: 20rpx;padding-bottom: 28rpx;">
						<!-- 主题订单 -->
						<view @click="gotoDetails(index1)" v-if="data.orderType !='003'">
							<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;">
									<view>
										<text
											style="font-size: 30rpx;font-weight: bold;color: #333333;">{{data.goodsName}}</text>
									</view>
									<view>
										<image src="../../static/arrows_right.png"
											style="width: 24rpx;height: 24rpx;margin-left: 10rpx;">
										</image>
									</view>

								</view>
								<view style="flex: 1;" class="flex justify-between">
									<view></view>

									<text v-if="data.orderState=='006'"
										style="font-size: 30rpx;color: #C0C0C0;font-weight: 500;">{{data.orderStateName}}</text>
									<text v-else-if="data.orderState== '004'"
										style="font-size: 30rpx;color: #C0C0C0;font-weight: 500;">{{data.orderStateName}}</text>
									<text v-else-if="data.orderState== '005'"
										style="font-size: 30rpx;color: #FC6035;font-weight: 500;">{{data.orderStateName}}</text>
									<text v-else-if="data.orderState=='002'"
										style="font-size: 30rpx;color: #3B94E7;font-weight: 500;">{{data.orderStateName}}</text>
									<text v-else-if="data.orderState==='003'"
										style="font-size: 30rpx;color: #FCAF35;font-weight: 500;">{{data.orderStateName}}</text>
									<text v-else-if="data.orderState==='001'"
										style="font-size: 30rpx;color: #FCAF35;font-weight: 500;">{{data.orderStateName}}</text>
									<view v-else-if="data.orderState=='000'">
										<view style="font-size: 30rpx;color: #FC6035;font-weight: 500;">
											{{data.orderStateName}}
										</view>
										<view style="float: right;">
											<u-count-down :timestamp="formatCountdown(data.createTime)"
												:show-hours="false" font-size="24" color="#111"></u-count-down>
										</view>
									</view>

									<view v-else-if="data.orderState=='099'">
										<view style="font-size: 30rpx;color: #FC6035;font-weight: 500;">
											{{data.orderStateName}}
										</view>
										<!-- <view style="float: right;">
											<u-count-down :timestamp="formatCountdown(data.createTime)"
												:show-hours="false" font-size="24" color="#111"></u-count-down>
										</view> -->
									</view>
								</view>
							</view>
							<!-- 服务人员描述 -->
							<view
								style="margin-top: 31rpx;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>
										<image  mode="aspectFill" :src="data.goodsImageList[0].url"
											v-if="data.goodsImageList.length > 0"
											style="width: 160rpx;height: 128rpx;border-radius: 10rpx;"></image>
										<image mode="aspectFill" src="../../static/publish/param_merchant.png" v-else
											style="width: 160rpx;height: 128rpx;border-radius: 10rpx;"></image>
									</view>
									<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;">{{data.serverName}}</text>
												<text
													style="font-size: 24rpx;font-weight: 500;color: #D09A6C;margin-left: 21rpx;">{{data.serverLevelName}}</text>
											</view>
											<view
											v-if="data.rate>0"
												style="border: 1rpx solid #FF9999;padding: 5rpx 10rpx;font-size: 22rpx;font-weight: 500;color: #FF1414;border-radius: 8rpx;">
												好评率{{data.rate}}%</view>
										</view>

										<view class="" style="margin-top: 18rpx;">
											<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;">
												{{data.serverAge}}年工龄
											</text>
										</view>
										<view style="margin-top: 18rpx;" v-if="data.merchantType===0">
											<text style="font-size: 22rpx;font-weight: 500;color: #999999;">{{data.merchantName}}</text>
										</view>
									</view>
								</view>
							</view>
							<!-- 订单内容描述 -->
							<view class="flex align-center justify-between" style="margin: 17rpx 30rpx 0rpx 10rpx;">
								<text style="padding:  20rpx;color: #999999;font-size: 28rpx;">上门时间</text>
								<text style="font-size: 28rpx;color: #111;">{{
									manageDateToday(data.appointmentStartTime)+" "+manageDateTominus(data.appointmentStartTime)

							}}</text>
							</view>
							<view class="flex align-center justify-between" style="margin: 0rpx 30rpx 0rpx 10rpx;">
								<view style="padding:10rpx  20rpx;color: #999999;font-size: 28rpx">
									服务地址
								</view>
								<view
									style="font-size: 28rpx;color: #111; margin-left: 20rpx;flex: 1;text-align: right;">
									{{data.address + data.detailed}}
								</view>
							</view>
							<view class="flex align-center justify-between" style="margin: 17rpx 30rpx 0rpx 10rpx;">
								<text style="padding: 10rpx 20rpx;color: #999999;font-size: 28rpx;">服务单价</text>
								<view>
									<text
										style="font-size: 28rpx;color: #111;">{{data.goodsServerPrice}}元/{{data.goodsUnit == '999'?data.otherUnit :data.goodsUnitName}}</text>
									<text
										style="font-size: 28rpx;color: #999;margin-left: 10rpx;">x{{data.goodsCounts}}</text>
								</view>
							</view>
							<view class="flex align-center justify-between" style="margin: 17rpx 30rpx 0rpx 30rpx;">
								<view></view>
								<view>
									<text style="font-size: 28rpx;font-weight: bold;color: #111;">合计：</text>
									<text style="color: #FC6035;font-size: 29rpx;font-weight: 500;">¥</text>
									<text
										style="font-size: 30rpx;font-weight: bold;color: #FC6035;margin-left: 10rpx;">{{data.totalAmount}}</text>
									<text v-if="data.totalAmount!=data.orderAmount &&data.beanAmount>0"
										style="font-size: 28rpx;color: #CCCCCC;margin-left: 10rpx;text-decoration: line-through;">¥{{data.orderAmount}}</text>
								</view>
							</view>
							<view v-if="data.orderState === '002' && data.orderType === '002' && data.maintenanceAmount > 0">
								<view style="height: 2rpx; background-color: #EEEEEE; margin: 16rpx 30rpx 0 30rpx;"></view>
								<view class="flex align-center justify-between" style="margin: 17rpx 30rpx 0rpx 10rpx;">
									<text style="padding: 10rpx 20rpx;color: #999999;font-size: 28rpx;">配件费用</text>
									<view>
										<text style="color: #FC6035;font-size: 28rpx;font-weight: 500;">¥</text>
										<text style="font-size: 28rpx;font-weight: bold;color: #FC6035;margin-left: 10rpx;">{{data.maintenanceAmount}}</text>
										<text style="color: #111111;font-size: 28rpx;font-weight: 500; margin-left: 10rpx;">元</text>

									</view>
								</view>
								<view class="flex align-start justify-between" style="margin: 17rpx 30rpx 0rpx 10rpx;">
									<text style="padding: 10rpx 20rpx;color: #999999;font-size: 28rpx; width: 220rpx;">费用说明</text>
									<view style="padding: 10rpx 0;max-width: 600rpx;word-break:break-all">
										<text style="color: #111111; font-size: 28rpx; ">{{data.maintenanceRemark}}</text>
									</view>
								</view>
							</view>

						</view>
						
						<!-- 团购订单 -->
						<view @click="gotoDetails(index1)" v-if="data.orderType == '003'">
							<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="data.merchantAvatar"
										style="width: 90rpx;height: 72rpx; border-radius: 10rpx;"></image>
									<text
										style="font-size: 30rpx;font-weight: bold;color: #333333;margin-left: 20rpx;">{{data.merchantName}}</text>
									<view>
										<image src="../../static/arrows_right.png"
											style="width: 24rpx;height: 24rpx;margin-left: 10rpx;">
										</image>
									</view>
								</view>
								
								<view style="flex: 1;" class="flex justify-between">
									<view></view>
									<text v-if="data.orderState=='006'" style="font-size: 30rpx;color: #C0C0C0;font-weight: 500;">{{data.orderStateName}}</text>
									<text v-else-if="data.orderState== '004'" style="font-size: 30rpx;color: #C0C0C0;font-weight: 500;">{{data.orderStateName}}</text>
									<text v-else-if="data.orderState== '005'" style="font-size: 30rpx;color: #FC6035;font-weight: 500;">{{data.orderStateName}}</text>
									<text v-else-if="data.orderState=='002'" style="font-size: 30rpx;color: #3B94E7;font-weight: 500;">{{data.orderStateName}}</text>
									<text v-else-if="data.orderState==='003'" style="font-size: 30rpx;color: #FCAF35;font-weight: 500;">{{data.orderStateName}}</text>
									<text v-else-if="data.orderState==='001'" style="font-size: 30rpx;color: #FCAF35;font-weight: 500;">{{data.orderStateName}}</text>
									<text v-else-if="data.orderState==='007'" style="font-size: 30rpx;color: #C0C0C0;font-weight: 500;">{{data.orderStateName}}</text>
									
									<view v-if="data.orderState=='000'">
										<view style="font-size: 30rpx;color: #FC6035;font-weight: 500;">
											{{data.orderStateName}}
										</view>
										<view style="float: right;">
											<u-count-down :timestamp="formatCountdown(data.createTime)"
												:show-hours="false" font-size="24" color="#111"></u-count-down>
										</view>
									</view>
															
									<view v-else-if="data.orderState=='099'">
										<view style="font-size: 30rpx;color: #FC6035;font-weight: 500;">
											{{data.orderStateName}}
										</view>
									</view>
								</view>
							</view>
							<!-- 服务人员描述 -->
							<view
								style="margin-top: 31rpx;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>
										<image  mode="aspectFill" :src="data.goodsImageList[0].url"
											v-if="data.goodsImageList.length > 0"
											style="width: 160rpx;height: 128rpx;border-radius: 10rpx;"></image>
										<image mode="aspectFill" src="../../static/publish/param_merchant.png" v-else
											style="width: 160rpx;height: 128rpx;border-radius: 10rpx;"></image>
									</view>
									
								<view style="color: #111111;margin-left: 19rpx;flex:1">
									<text style="   font-size: 28rpx;text-align: left; " class="text-bold"> {{data.goodsName}}</text>
									<view class="flex align-center justify-between" style="margin-top: 27rpx;">
										<view>
                                            <text style="font-size: 24rpx;;color: #666;">{{data.specificationDesc}}</text>
										    <text style="margin-left: 24rpx;font-size: 28rpx;font-weight: 500;color: #666;">{{data.groupTimes}}次</text>
                                        </view>
                                        <text style="font-size: 30rpx;font-weight: bold;color: #111;">￥{{data.goodsServerPrice}}</text>
									</view>
								</view>
						
							</view>
						</view>
					 
							 <view class="flex align-center" style="margin: 17rpx 30rpx 0rpx 30rpx;" v-if="data.couponAmount!=null&&data.couponAmount!=0">
								<view style="width: 180rpx;"></view>
							 	<view class="flex align-center justify-between flex-sub">
							 		<text style="font-size: 28rpx;text-align: left;color: #999;">优金豆抵扣：</text>
							 		<text style="color: #111;font-size: 28rpx;font-weight: 500;margin-left: 20rpx;">-¥{{data.couponAmount}}</text>
							 	</view>
							</view>
							<view class="flex align-center justify-between" style="margin: 17rpx 30rpx 0rpx 30rpx;">
								 <view></view>
								<view>
									<text style="font-size: 28rpx;font-weight: bold;color: #111;">合计：</text>
									<text style="color: #FC6035;font-size: 28rpx;font-weight: 500;">¥</text>
									<text style="font-size: 30rpx;font-weight: bold;color: #FC6035;margin-left: 8rpx;margin-right:20rpx;">{{data.totalAmount}}</text>
									<text v-if="data.totalAmount!=data.orderAmount &&data.beanAmount>0"
                                        tyle="font-size: 28rpx;color: #CCCCCC;text-decoration: line-through;">¥{{data.orderAmount}}</text>
								</view>
							</view>
						 
						</view>
						
						<!-- 状态判断描述 -->


						<view v-if="data.orderState === '004'">
							<view class="flex align-center justify-between" v-if="data.addCounts>0"
								style="background: linear-gradient(270deg, #F9FAFB 0%, #F9FAFB 0%, #FDFEFF 100%, #FDFEFF 100%);margin-top: 20rpx;padding: 29rpx 27rpx 10rpx;">
								<view>
									<text style="font-size: 28rpx;color: #999;">追加数量</text>
									<text
										style="font-size: 26rpx;color: #111;margin-left: 30rpx;">{{data.addCounts}}{{data.goodsUnitName}}</text>
								</view>
								<view>
									<text style="font-size: 28rpx;color: #333333;">¥</text>
									<text
										style="font-size: 30rpx;color: #333333; margin-right: 10rpx;margin-left: 10rpx;">{{data.addAmount}}</text>
								</view>
							</view>

							<view class="flex align-center justify-between"
								style="margin-top: 20rpx;padding-left: 29rpx;padding-right: 29rpx;padding-top: 27rpx;padding-bottom: 0rpx;">
								<view v-if="data.orderType != '003'">
									<text style="font-size: 28rpx;color: #999;margin-right: 20rpx;">开始服务</text>
									<text
										style="font-size: 26rpx;color: #111;margin-left: 10rpx;">{{manageDateToday(data.serviceStartTime)}}</text>
									<text
										style="font-size: 26rpx;color: #3b94e7;margin-left: 10rpx;">{{manageDateTominus(data.serviceStartTime)}}</text>
								</view>
								<view v-else-if="data.orderType == '003'"></view>

								<view>
									<view @click="goAppraise(data)"
										v-if="data.commentState=='001'&&data.orderState=='004'"
										style="margin-top: 20rpx; padding: 10rpx 20rpx; border: 1rpx solid #CCCCCC;font-weight: bold;color: #333333;border-radius: 10rpx;position: relative;">
										<text>去评价</text>
										<view class="commentBox" v-if="data.coin>0"
											style="position: absolute; top: -50rpx;left: -70%;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' @close="tagShow=false">
											<text>赚{{data.coin}}优金豆</text>
										</view>
									</view>

									<view v-else-if="data.isAddComment==1">
										<view @click="goLookAppraise(data)"
											v-if="data.commentState=='002'&&data.orderState=='004'"
											style="padding: 10rpx 20rpx; border: 1rpx solid #CCCCCC;font-weight: bold;color: #333333;border-radius: 10rpx;">
											查看评价
										</view>

									</view>

								</view>

							</view>

						</view>
						<view v-else-if="data.orderState === '002' && data.orderType == '003' ">
							<view class="flex align-center justify-between"
								style="margin: 20rpx 30rpx 0 30rpx;padding-top: 27rpx;padding-bottom: 0rpx;border-top: 1rpx #EEEEEE solid;">
								<view >
									<text style="font-size: 26rpx;font-weight: 500;color: #999;">开始服务</text>
									<text
										style="font-size: 26rpx;font-weight: 500;color: #111;margin-left: 10rpx;">{{manageDateToday(data.serviceStartTime)}}</text>
									<text
										style="font-size: 26rpx;font-weight: 500;color: #3b94e7;margin-left: 10rpx;">{{manageDateTominus(data.serviceStartTime)}}</text>
								</view>
								 
								<view v-if="data.addCounts<=0 && data.orderType == '001'"
									style="padding: 16rpx 39rpx;background-color: #FC6035;font-weight: bold;color: #FFFFFF ;border-radius: 10rpx;"
									@click="addOtherServerClick(index1)">
									追加服务
								</view>
								<view v-if="data.addPayStatus == 0 && data.orderType == '002'"
									style="padding: 16rpx 39rpx;background-color: #FC6035;font-weight: bold;color: #FFFFFF ;border-radius: 10rpx;"
									@click="gotoPaymentMountings(data)">
									去支付配件费
								</view>
							</view>
						</view>
						<view v-else-if="data.orderState === '003' ">
							<view class="flex align-center justify-between"
								style="margin: 20rpx 30rpx 0 30rpx;padding-top: 27rpx;padding-bottom: 0rpx;border-top: 1rpx #EEEEEE solid;">
								<view v-if="data.orderType != '003' ">
									<text style="font-size: 26rpx;font-weight: 500;color: #999;">服务时间</text>
									<text
										style="font-size: 26rpx;font-weight: 500;color: #111;margin-left: 10rpx;">{{manageDateToday(data.serviceStartTime)}}</text>
									<text
										style="font-size: 26rpx;font-weight: 500;color: #3b94e7;margin-left: 10rpx;">{{manageDateTominus(data.serviceStartTime)}}-{{manageDateTominus(data.serviceEndTime)}}</text>
								</view>
								<view v-else-if="data.orderType == '003'"></view>

								<view @click="sureFinish(index1)"
									style="padding: 16rpx 39rpx;background-color: #FC6035;font-weight: bold;color: #FFFFFF ;border-radius: 10rpx;">
									确认完成
								</view>
							</view>
						</view>
						<view v-else-if="data.orderState === '001'"></view>
						<view v-else-if="data.orderState === '000'">
							<view class="flex align-center justify-between"
								style="margin: 20rpx 30rpx 0 30rpx;padding-top: 27rpx;padding-bottom: 0rpx;border-top: 1rpx #EEEEEE solid;">
								<view></view>
								<view class="flex align-center">
									<view @click="cancelOrderClick(data)"
										style="padding: 16rpx 39rpx; border: 1rpx solid #CCCCCC;font-weight: bold;color: #333333;border-radius: 10rpx;">
										取消订单
									</view>

									<view @click="gotoPaymentClcik(data)"
										style="padding: 16rpx 39rpx;background-color: #FC6035;font-weight: bold;color: #FFFFFF ;border-radius: 10rpx;margin-left: 20rpx;">
										立即支付
									</view>
								</view>


							</view>
						</view>
						<view class="flex  justify-end" style="margin-right: 30rpx;" v-if="data.isAddComment==0">
							<view class="flex align-center">
								<view @click="goAddAppraise(data)" v-if="data.commentState=='002'&&data.orderState=='004'" class="margin-top"
									style="padding: 10rpx 20rpx; border: 1rpx solid #CCCCCC;font-weight: bold;color: #333333;border-radius: 10rpx;margin-right: 20rpx;">
									去追评
								</view>
								<view @click="goLookAppraise(data)" class="margin-top" v-if="data.commentState=='002'&&data.orderState=='004'"
									style="padding: 10rpx 20rpx; border: 1rpx solid #CCCCCC;font-weight: bold;color: #333333;border-radius: 10rpx;">
									查看评价
								</view>
							</view>
						</view>
					</view>

					<u-loadmore :status="item.status" v-if="item.showLoadMore" style="padding-bottom: 20rpx;">
					</u-loadmore>
				</scroll-view>
				<view class="align-center" v-else>
					<image src="../../static/nomore_icon.png" mode=""
						style="width: 370rpx;height: 370rpx;position: absolute;top:calc(50% - 185rpx) ;left:calc(50% - 185rpx);">
					</image>
				</view>
			</swiper-item>
		</swiper>

		<!-- 追加服务 -->
		<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>
	</view>

	<view v-else class="content">
		<cu-custom :isBack="false" style="border-bottom: 1rpx #EEEEEE solid;">
			<block slot="content">
				订单
			</block>
		</cu-custom>
		<view class="">
			<image src="../../static/nomore_icon.png" mode="" style="width: 370rpx;height: 370rpx;margin-left: 190rpx;">
			</image>

			<view class="login_button" @click="gotoLogin">登录</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				tagText: '赚200优金豆',
				tagShow: true,
				triggered: false,
				barStyle: {
					'height': '14rpx',
					'background-color': 'transparent',
					'background-image': "url('../../static/tabbar_icon.png')",
					'background-size': '100% 100%'
				},
				tempData: '',
				showModel: false,
				modelContent: '',
				isLogin: false,
				addServerNumer: 0,
				addServerAllMoney: 0,
				showAddServer: false,
				currentAddServerIndex: 0,
				currentAddServerUnit: '小时',
				tabsList: [{
					name: "全部",
					state: '',
					childList: [{
						goodsImageList: {
							url: ''
						}
					}],
					pageNum: 1,
					pageSize: 10,
					showLoadMore: false,
					status: 'loading'

				}, {
					name: "待确认",
					state: '003,002',
					childList: [],
					pageNum: 1,
					pageSize: 10,
					showLoadMore: false,
					status: 'loading'
				}, {
					name: "待付款",
					state: '000',
					childList: [],
					pageNum: 1,
					pageSize: 10,
					showLoadMore: false,
					status: 'loading'
				}, {
					name: "待服务",
					state: '001',
					childList: [],
					pageNum: 1,
					pageSize: 10,
					showLoadMore: false,
					status: 'loading'
				}, {
					name: "待评价",
					state: '004',
					childList: [],
					pageNum: 1,
					pageSize: 10,
					showLoadMore: false,
					status: 'loading'
				}, {
					name: "退款",
					state: '005,006,007',
					childList: [],
					pageNum: 1,
					pageSize: 10,
					showLoadMore: false,
					status: 'loading'
				}],
				dataSourceList: [{
					status: 0,
				}, {
					status: 1,
				}, {
					status: 2,
				}, {
					status: 3,
				}, {
					status: 4,
				}, {
					status: 5
				}],

				tabsCurrent: 0,
				swiperCurrent: 0, // swiper组件的current值，表示当前那个swiper-item是活动的
				active: {
					fontSize: "34rpx",
					color: "#111111"
				},
				tempDate: '',
				showMaintenanceServer: false,
				maintenanceAmount:0,//收取维修配件费用
				maintenanceRemark:'',//维修配件费用说明

			}
		},
		onLoad() {

		},
		onShow() {

			this.tempDate = new Date().getTime()
			// console.log(tempDate)
			if (uni.getStorageSync('userInfo')) {
				this.isLogin = true
				this.tabsList[this.swiperCurrent].childList = []
				this.tabsList[this.swiperCurrent].pageNum = 1
				this.getOrderList(this.swiperCurrent);
			} else {
				this.isLogin = false
			}
		},
		onHide() {
			this.showAddServer = false
		},

		onPullDownRefresh() {

		},
		methods: {
			onRefresh() {
				if (this._freshing) return;
				this.tabsList[this.swiperCurrent].childList = []
				this.tabsList[this.swiperCurrent].pageNum = 1
				this.getOrderList(this.swiperCurrent)

			},
			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
			},
			// 跳转评价
			goAppraise(item) {
				// console.log(item)
				uni.setStorageSync('tempAppraise', item)
				uni.navigateTo({
					url: 'appraise'
				})
			},
			// 去追评
			goAddAppraise(data) {
				if (data.commentId == null) {
					this.$api.msg('追评已被删除')
					return
				}
				uni.navigateTo({
					url: '../mine/minePage/addRemark?commontId=' + data.commentId
				})
			},
			// 查看评论
			goLookAppraise(data) {
				if (data.commentId == null) {
					this.$api.msg('评论已被删除')
					return
				}
				uni.navigateTo({
					url: 'appraiseDetail?commontId=' + data.commentId
				})
			},
			gotoLogin() {
				uni.navigateTo({
					url: '../codelogin/codelogin'
				})
			},
			tabsChange(index) {
				this.swiperCurrent = index
				// this.getOrderList(index)
				// console.log(index)
			},
			getOrderList(index) {
				var item = this.tabsList[index];
				var param = {
					memberId: uni.getStorageSync('userInfo').memberId,
					// memberId: '10001',
					orderState: item.state,
					pageNum: item.pageNum,
					pageSize: item.pageSize
				}
				var that = this
				item.showLoadMore = true
				item.status = 'loading'
				this.$u.api.orderList(param).then(res => {
					// console.log(res, '获取列表')
					if (res.code == 200) {
						that.tabsList[index].childList = that.tabsList[index].childList.concat(res.rows)
						
						
						
						if (res.rows.length == 0) {
							item.status = 'nomore'
						} else {
							item.showLoadMore = false
							item.pageNum++
						}
						this.triggered = false;
						that.$forceUpdate()
					}
				})
			},

			// swiper-item左右移动，通知tabs的滑块跟随移动
			transition(e) {
				let dx = e.detail.dx;
				this.$refs.uTabs.setDx(dx);
			},
			// 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
			// swiper滑动结束，分别设置tabs和swiper的状态
			animationfinish(e) {
				let current = e.detail.current;
				this.$refs.uTabs.setFinishCurrent(current);
				this.swiperCurrent = current;
				this.tabsCurrent = current;
				if (this.tabsList[this.swiperCurrent].childList.length > 0) {
					return
				} else {
					this.getOrderList(current)
				}


			},
			// 触底加载
			onreachBottom() {
				// console.log('触底加载')
				this.getOrderList(this.swiperCurrent)
			},
			//进入详情页面
			gotoDetails(index) {
				
			
				
				var contentObj = this.tabsList[this.tabsCurrent];
				var data = contentObj.childList[index].orderId
				var orderType = contentObj.childList[index].orderType
			 
				var item = JSON.stringify(data)
				if(orderType=='003'){
					uni.navigateTo({
						url: './groupOrderDetails?orderId=' + item,
					});
				}else{
					uni.navigateTo({
						url: './orderDetails?orderId=' + item,
					});
				}
			},
			// 追加服务按钮事件
			addOtherServerClick(index) {
				this.currentAddServerIndex = index
				var data = this.tabsList[this.swiperCurrent].childList[this.currentAddServerIndex]
				this.currentAddServerUnit = data.goodsUnitName
				this.addServerNumer = 0
				this.showAddServer = true
			},
			//收取维修配件费
			addMaintenanceServerClick(index){
				this.currentAddServerIndex = index
				this.showMaintenanceServer = true;
			},
			// 确认完成服务
			sureFinish(index) {
				var data = this.tabsList[this.swiperCurrent].childList[index];
				var param = {
					'orderId': data.orderId
				}
				var that = this
				this.$u.api.orderAffirm(param).then(res => {
					// console.log(res)
					this.$api.msg(res.msg)
					if (res.code == 200) {

						this.tabsList[this.swiperCurrent].pageNum = 1
						this.tabsList[this.swiperCurrent].childList = []
						this.getOrderList(that.swiperCurrent)


					}
				}).catch(error => {
					this.$api.msg("请求错误")
				})
			},
			cancelOrderClick(data) {
				this.showModel = true
				this.modelContent = '您确认要取消这笔订单吗？'
				this.tempData = data
			},
			// 取消订单
			sureCancelOrderClick(data) {
				var param = {
					'orderId': this.tempData.orderId
				}
				var that = this
				this.$u.api.orderCancel(param).then(res => {

					this.$api.msg(res.msg)
					if (res.code == 200) {
						this.tabsList[this.swiperCurrent].pageNum = 1
						this.tabsList[this.swiperCurrent].childList = []
						this.getOrderList(that.swiperCurrent)

					}
				}).catch(error => {
					this.$api.msg("请求错误")
				})
			},
			// 追加服务去支付
			gotoAddServerPayment() {

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

				var payInfo = JSON.stringify(addServerPayInfo)
				// console.log(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;
			},

			gotoPaymentClcik(data) {
				// 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'
				})
			},
			//去支付配件费
			gotoPaymentMountings(data){
				console.log(data)

				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'
				})

			},
			// 减少追加服务数量
			minusServer() {
				if (this.addServerNumer <= 0) {
					return;
				}
				var data = this.tabsList[this.swiperCurrent].childList[this.currentAddServerIndex];
				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;
				// console.log(this.tabsList[this.swiperCurrent].childList)
				// console.log(this.currentAddServerIndex)
				var data = this.tabsList[this.swiperCurrent].childList[this.currentAddServerIndex];
				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
			},


			manageDateToday(dateStr) {
				if (dateStr == undefined || dateStr == null) {
					return ''
				}
				var date = dateStr.substring(0, dateStr.length);
				date = date.replace(/-/g, '/');

				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, '/');

				var timestamp = new Date(date).getTime();
				return this.$u.timeFormat(timestamp, 'hh:MM')
			}

		}

	}
</script>
<style>

</style>

<style lang="less" scoped>
	.content {
		height: calc(100vh);
		/* #ifdef H5 */
		// height: calc(100vh - var(--window-top) - 50px);
		height: calc(100vh - var(--window-top) - 50px - 50rpx);
		/* #endif */
		display: flex;
		flex-direction: column;
		background-color: #F4F4F4;
	}

	.backgound {
		font-size: 30rpx;
		color: #FF9700;
	}

	.login_button {
		margin: 50rpx 300rpx 300rpx;
		text-align: center;
		background-color: #FC6035;
		padding-top: 10rpx;
		padding-bottom: 8rpx;
		border-radius: 10rpx;
		color: #FFFFFF;
		font-weight: 500;
	}

	.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;

	}
</style>
