<template>
	<view class="content">
		<cu-custom :isBack="true" bgColor="bg-white" style="z-index: 999;">
			<block slot="content">
				订单详情
			</block>
		</cu-custom>

		<view style="padding-bottom: 275rpx;">
			<view style="padding:43rpx 44rpx;" @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>
			<!-- 	<text v-if="contentData.orderState=='001'"
					style="font-size: 38rpx;font-weight: bold;color: #111111;margin-left: 29rpx;">待服务</text>
				<text v-if="status=='002'"
					style="font-size: 38rpx;font-weight: bold;color: #111111;margin-left: 29rpx;">服务中</text>
				<text v-if="status=='003'"
					style="font-size: 38rpx;font-weight: bold;color: #111111;margin-left: 29rpx;">待确认</text>
				<text v-if="status=='004'"
					style="font-size: 38rpx;font-weight: bold;color: #111111;margin-left: 29rpx;">已完成</text>
				<text v-if="status=='005'"
					style="font-size: 38rpx;font-weight: bold;color: #111111;margin-left: 29rpx;">已申请退款</text>
				<text v-if="status=='006'"
					style="font-size: 38rpx;font-weight: bold;color: #111111;margin-left: 29rpx;">已退款</text>
				<text v-if="status=='007'"
					style="font-size: 38rpx;font-weight: bold;color: #111111;margin-left: 29rpx;">被拒绝</text>
 -->
				<image src="../../static/arrows_right.png" style="width: 24rpx;height: 24rpx;margin-left: 13rpx;">
				</image>
			</view>

			<view v-if="contentData.orderState=='005'"
				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;">
					{{contentData.refundStateName}}
				</view>
				<view style="margin-top: 22rpx;">
					<text style="font-weight: 500;color: #999;font-size: 28rpx;">退款金额</text>
					<text style="font-weight: 500;color: #999;font-size: 28rpx;margin-left: 35rpx;">{{contentData.refundMoney}} 元</text>
				</view>

				<view style="margin-top: 22rpx;" class="align-center flex">
					<view style="font-weight: 500;color: #999;font-size: 28rpx;">
						退款原因
					</view>
					<view style="font-weight: 500;color: #999;font-size: 28rpx;margin-left: 35rpx;flex: 1;">
						{{contentData.refundReason}}
					</view>

				</view>
			</view>

			<!-- 描述服务人员 -->
			<view
				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: 23rpx;margin-right: 30rpx;padding-top: 36rpx;">
					<view style="font-size: 28rpx;color: #333333;font-weight: bold;">
						{{contentData.cateName}}-{{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>
							<image mode="aspectFill" :src="contentData.serverAvatar"
								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: bold;color: #111111;">{{contentData.serverName}}</text>
									<text
										style="font-size: 24rpx;font-weight: 500;color: #D09A6C;margin-left: 21rpx;">{{contentData.serverLevelName}}</text>
								</view>
								<view
									style="border: 1rpx solid #FF9999;padding: 8rpx 14rpx 8rpx 14rpx;font-size: 22rpx;font-weight: 500;color: #FF1414;border-radius: 8rpx;">
									好评率{{contentData.rate *100}}%</view>

							</view>
							<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: #78341C;border-radius: 8rpx;">
								{{contentData.serverAge}}年工龄
							</text>
							<view style="margin-top: 18rpx;">
								<text 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;font-weight: 500;color: #666;">{{contentData.address}}+{{contentData.detailed}}</text>
						</view>
					</view>

				</view>

				<view class="flex align-center"
					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: 21rpx;" class="cell_content_right_black">
							{{contentData.orderIndex}}
						</text>
						<view
							style="padding: 12rpx 19rpx 12rpx 22rpx;border: 1rpx #EEEEEE solid; font-size: 26rpx;font-weight: 500;color: #666666;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">
							{{contentData.cateName}}
						</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.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_line">
					<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_no_line">
					<text class="cell_content_title">
						优金豆
					</text>
					<view>
						<text class="cell_content_right_red">
							- ¥{{contentData.beanAmount}}
						</text>

					</view>
				</view>

			</view>

			<!-- 追加服务描述 -->
			<view v-if="contentData.addCounts >0">
			<view  style="margin-left: 43rpx;padding-top: 28rpx;padding-bottom: 26rpx;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
				style="margin: 15rpx 20rpx 0rpx 20rpx; border-radius: 20rpx;background-color: #FFFFFF;padding-bottom: 64rpx;">
				<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 class="align-center flex"
						style="background-color: #EEEEEE;padding: 25rpx 65rpx 25rpx 56rpx;border: #FAFAFA 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>
					<view @click="complainClick" class="align-center flex"
						style="background-color: #EEEEEE;padding: 25rpx 65rpx 25rpx 56rpx;border: #FAFAFA 1rpx solid;border-radius: 10rpx;">
						<image src="../../static/order_alert.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>

				</view>
			</view>

		</view>

		<view style="position: fixed;bottom: 0;width: 100vw;">
			<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;font-weight: 500;color: #666666;">订单实付</text>
					<text style="font-size: 24rpx;font-weight: bold;color: #FF1414;margin-left: 24rpx;">¥</text>
					<text style="font-size: 28rpx;font-weight: bold;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;font-weight: 500;color: #666666;">服务数量</text>
					<text style="font-size: 28rpx;font-weight: bold;color: #333;margin-left: 24rpx;">{{serverAllCount(contentData.addCounts,contentData.goodsCounts)}}</text>
					<text style="font-size: 26rpx;font-weight: bold;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 62rpx;background-color: #F0F0F0;font-size: 30rpx;font-weight: bold;color: #333333;border-radius: 10rpx;"
					@click="cancelOrderClick">取消订单</view>
				<view
					style="padding: 25rpx 90rpx;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;">
				<view
					style="padding: 25rpx 62rpx;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'" class="align-center justify-between"
				style="padding: 20rpx 50rpx 20rpx 50rpx;background-color: #FFFFFF;">
				<view
					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
					style="padding: 25rpx 62rpx;background-color: #F0F0F0;font-size: 30rpx;font-weight: bold;color: #333333;border-radius: 10rpx;"
					@click="jumpPlatform">申请平台介入</view>
				<view @click="sureFinish" v-if="contentData.commentState == '001'" style="padding: 25rpx 106rpx;background-color: #FC6035;color: #FFFFFF;font-weight: bold;border-radius: 10rpx;">
					确认完成</view>
			</view>
			
			<view v-if="contentData.orderState=='004'" class="align-center flex justify-between"
				style="padding: 20rpx 50rpx 20rpx 50rpx;background-color: #FFFFFF;">
				<view
					style="padding: 25rpx 62rpx;background-color: #F0F0F0;font-size: 30rpx;font-weight: bold;color: #333333;border-radius: 10rpx;"
					@click="jumpPlatform">申请平台介入</view>
				<view v-if="contentData.commentState == '001'" style="padding: 25rpx 106rpx;background-color: #FC6035;color: #FFFFFF;font-weight: bold;border-radius: 10rpx;">
					去评价</view>
			   <view v-if="contentData.commentState == '002'" style="padding: 25rpx 106rpx;background-color: #FC6035;color: #FFFFFF;font-weight: bold;border-radius: 10rpx;">
					查看评价</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 95rpx; 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;">
						{{item.nowStateName}}
					</view>
					<view class="" style="color: #111;font-size: 28rpx;">
						{{item.createTime}}
					</view>
				</view>

			</view>
		</u-popup>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				contentData:{},
				orderStatusList: [
				],
				show: false,
				status: "004",
				orderId:''
				
			}
		},
		onLoad(options) {
			var orderId = JSON.parse(options.orderId)
			this.orderId = orderId
			this.getOrderDetaisl(orderId)
		},
		methods: {
			// 平台申请退款
			jumpPlatform() {
				// var data = contentObj.childList[index].orderId
				var orderId = JSON.stringify(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 = res.data		
						}
					}).catch(error => {

					})
			},

			openOrderRecord() {
				this.show = true;
				var param = {
					"orderId":this.orderId
				}
				var that = this
				this.$u.api.getMemberOrderRecord(param).then(res => {
						console.log(res)
						if (res.code == 200) {
						  	// that.contentData = res.data	
							that.orderStatusList = res.data	
						}
					}).catch(error => {
				
					})
			},
			close() {
				this.show = false
				console.log('close');
			},
			// 取消申请平台介入
			cancelRefundClick(){
				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("请求错误")
				})
			},
			// 确认完成服务
			sureFinish(){
				var param = {
					'orderId':this.contentData.orderId
				}
				var that = this
				this.$u.api.orderConfirm(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("请求错误")
				})
			},
			// 取消订单
			cancelOrderClick(){
				var param = {
					'orderId':this.contentData.orderId
				}
				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.contentData.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'
				})
			},
			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">
	.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;
		font-weight: 500;
		color: #666666;
	}

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

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