<template>
	<view class="maintenance">
		<!-- 自定义导航栏开始 -->
		<!-- <uni-nav-bar
			:status-bar="true"
			:border="false"
			:background-color="'transparent'"
			:fixed="true"
			@click-left="handleClickLeft"
		>
			<block v-slot:left>
				<view class="back-wrap u-f u-f-fdr u-f-aic u-f-jcfs">
					<image style="width: 16rpx;height:30rpx;" src="../.././static/common/white_left_arrrow.png"></image>
				</view>
			</block>
		</uni-nav-bar> -->
		<u-navbar leftIconColor="#ffffff" leftIconSize='38rpx' autoBack="true" :bgColor="bgColor"></u-navbar>
		<!-- 自定义导航栏结束 -->

		<view class="bg">
			<image src="../.././static/common/refund_bp.png" :mode="'widthFix'" style="width: 100%;height: 100%"></image>
		</view>

		<view :style="{height: paddingTop}"></view>
		
		<view class="maintenance-content mg-lr-24">
			
			<view class="u-f u-f-jcsb mg-bot-28 white-color fs28">
				<view class="shenhe u-f u-f-fdc u-f-jcc u-f-aic">
					<view class="completed mg-bot-20">
						<image style="width: 100%;height: 100%;" src="../.././static/common/refund_completed.png"></image>
					</view>
					<view class="line"></view>
					<text class="completed-text">提交申请</text>
				</view>
				<view class="shenhe u-f u-f-fdc u-f-jcc u-f-aic">
					<view class="completed mg-bot-20">
						<image style="width: 100%;height: 100%;" src="../.././static/common/refund_completed.png"></image>
					</view>
					<view class="line"></view>
					<text class="completed-text">待审核</text>
				</view>
				<view class="shenhe u-f u-f-fdc u-f-jcc u-f-aic">
					<view class="completed mg-bot-20">
						<image style="width: 100%;height: 100%;" src="../.././static/common/refund_uncompleted.png" v-if="shopSureBillInfo.afterSalesStatus<2"></image>
						<image style="width: 100%;height: 100%;" src="../.././static/common/refund_completed.png" v-else></image>
					</view>
					<view class="line"></view>
					<text :class="shopSureBillInfo.afterSalesStatus < 2 ? 'uncompleted-text' : 'completed-text'">处理中</text>
				</view>
				<view class="shenhe u-f u-f-fdc u-f-jcc u-f-aic">
					<view class="completed mg-bot-20">
						<image style="width: 100%;height: 100%;" src="../.././static/common/refund_uncompleted.png" v-if="shopSureBillInfo.afterSalesStatus<3"></image>
						<image style="width: 100%;height: 100%;" src="../.././static/common/refund_completed.png" v-else></image>
					</view>
					<text :class="shopSureBillInfo.afterSalesStatus < 3 ? 'uncompleted-text' : 'completed-text'">已完成</text>
				</view>
			</view>

			<view class="process-wrap" v-show="activeOperateMenu == 'huanluntai'">
				<view class="u-f u-f-jcfe u-f-aic mg-bot-10">
					<text class="fs28 fw400 light-black">205/55R16</text>
					<text class="gray-down-arrow"></text>
				</view>
			<!-- 	<image style="height: 72rpx;width: 100%" :mode="'widthFix'" src="../.././static/common/process_1.png">
				</image> -->
			</view>
		</view>
		
		
		<view class="mg-lr-24">
			<view class="white-bg-wrap">
				<view class="title u-f u-f-jcfs u-f-aic mg-bot-20" @click="goDetail('/pagesC/shop-detail/shop-detail')">
					<text class="fs24 fw400 light-black mg-right-10">{{shopSureBillInfo.storeName}}</text>
					<text class="fs24 fw400 light-gray">共{{shopSureBillInfo.storeNum}}家店通用</text>
				</view>
				<view class="u-f u-f-jcfs u-f-aic mg-bot-20 white-bg-wrap">
					<image :src="shopSureBillInfo.goodsImage"
						style="width: 128rpx;height: 128rpx;"
						:mode="'scaleToFill'" class="mg-right-10 border-radius-9"></image>
					<view class="u-f u-f-fdc" style="flex: calc(100% - 138rpx)">
						<view class="fs28 light-black fw400 mg-bot-10">{{shopSureBillInfo.goodsName}}</view>
						<view class="mg-bot-10 u-f u-f-aic u-f-jcfs">
							<text class="light-gray fs24 mg-right-8">{{shopSureBillInfo.goodsSpecification}}</text>
						</view>
						<view class="u-f u-f-aic u-f-jcsb">
							<view class="u-f u-f-jcsb u-f-aic main-color" style="margin-right: 96rpx;">
								<text class="fs24">￥</text>
								<text class="fs32 fw600">{{shopSureBillInfo.estimatedRefundAmount}}</text>
							</view>
							<view class="fs24 light-gray">x{{shopSureBillInfo.goodsNum}}</view>
						</view>
					</view>
				</view>
			</view>
			
			<view class="white-bg-wrap mg-bot-14">
				<view class="fs28 mg-bot-30 u-f u-f-jcsb">
					<text class="light-gray">商品件数</text>
					<text class="light-blac">{{shopSureBillInfo.goodsNum}}件</text>
				</view>
				<view class="fs28 mg-bot-30 u-f u-f-jcsb">
					<text class="light-gray">退款金额</text>
					<view class="u-f u-f-fdc u-f-aife">
						<text class="light-black">￥{{shopSureBillInfo.estimatedRefundAmount}}</text>
						<text class="fs28 main-color" v-if="shopSureBillInfo.afterSalesStatus==3">退款成功</text>
						<text class="fs28 main-color" v-if="shopSureBillInfo.afterSalesStatus==4">退款失败</text>
					</view>
				</view>
				<view class="fs28 mg-bot-30 u-f u-f-fdc u-f-jcsb">
					<text class="light-gray mg-bot-10">申请原因</text>
					<textarea v-model="shopSureBillInfo.applyContent" auto-height />
				</view>
			</view>
			
			<view class="white-bg-wrap mg-bot-56">
				<view class="fs28 mg-bot-30 u-f u-f-jcsb">
					<text class="light-gray">订单编号</text>
					<text class="light-black">{{shopSureBillInfo.orderNo}}</text>
				</view>
				<view class="fs28 mg-bot-30 u-f u-f-jcsb">
					<text class="light-gray">创建时间</text>
					<text class="light-black">{{shopSureBillInfo.createTime}}</text>
				</view>
			</view>
			
			<view class="u-f u-f-aic u-f-jcc">
				<view class="line-gradient-btn"
					style="width: calc(100% - 48rpx)"
					@click="cancelOrder"
					v-if="shopSureBillInfo.afterSalesStatus === 1 || shopSureBillInfo.afterSalesStatus === 2"
				>
					取消
				</view>
				
				<view class="line-gradient-btn"
					style="width: calc(100% - 48rpx)"
					@click="goBack"
					v-if="shopSureBillInfo.afterSalesStatus == 3"
				>
					返回
				</view>
				
				<view class="line-gradient-btn"
					style="width: calc(100% - 48rpx)"
					@click="contactCustomerService"
					v-if="shopSureBillInfo.afterSalesStatus == 4"
				>
					联系客服
				</view>
			</view>
			
		</view>


	</view>
</template>

<script>
	import uniNavBar from "../.././components/uni-nav-bar/uni-nav-bar.vue"
	import {
		getCusNavBarInfo
	} from "../.././common/customizeNavBarInfo.js"
	import maintenanceShop from "../.././components/maintenance-shop/maintenance-shop.vue"
	export default {
		components: {
			uniNavBar,
			maintenanceShop
		},
		data() {
			return {
				reason: '申请原因申请原因申请原因申请原因申请原因申请原',
				isBindCar: true,
				showBindCarPop: false,
				activeOperateMenu: 'baoyang',
				activeShopGood: 'distance',
				paddingTop: 0,
				operateMenu: [{
						name: '保养门店',
						id: 'baoyang'
					},
					{
						name: '维修门店',
						id: 'weixiu'
					},
					{
						name: '汽车美容',
						id: 'qiche'
					},
					{
						name: '改装门店',
						id: 'gaizhuang'
					}
				],
				shopGood: [{
						name: '距离最近',
						id: 'distance'
					},
					{
						name: '价格最高',
						id: 'price'
					},
					{
						name: '销量最高',
						id: 'sell'
					},
				],
				shopSureBillInfo: {},
				orderId: 0,
				bgColor: 'rgba(0,0,0,0)'
			}
		},
		mounted() {
			let {
				customizeNavBarHeight
			} = getCusNavBarInfo()
			this.paddingTop = customizeNavBarHeight + 'px'

		},
		onLoad(options) {
			this.orderId = options.orderId || 0
			console.log('this.status', typeof this.status)
			this.getDetail()
		},
		methods: {
			//取消申请
			cancelOrder() {
				let item = this.shopSureBillInfo
				uni.showModal({
					content: '确定取消该申请吗？',
					success: (res) => {
						console.log(res);
						if (res.confirm) {
							this.$http.get('/api/client/order/withdraw', {
								afterSalesId: item.afterSalesId
							}).then(res => {
								uni.showToast({
									icon: 'none',
									title: res.data.msg
								})
								if (res.data.code == 200) {
									uni.navigateTo({
										url: `/pagesA/order-center/order-center`
									})
								}
							})
						}
					},
					fail: (res) => {
						console.log(res);
					}
				})
			},
			getDetail() {
				this.$http.get('/api/client/order/afterSalesDetails?orderId='+this.orderId).then(res => {
					let resData = res.data.data
					this.shopSureBillInfo = resData
				})
			},
			checkOperte(id) {
				console.log("checkOperte")
				console.log("id", id)
				this.activeOperateMenu = id
			},
			checkGood(id) {
				console.log("checkGood")
				this.activeShopGood = id
			},
			handleClickLeft() {
				navigateBack()
			},
			handleHidePopup() {
				this.showBindCarPop = false
			},
			handleBindCar() {
				uni.navigateTo({
					url: '/pagesA/add-car/add-car'
				})
			},
			handleEnterDetail() {
				uni.navigateTo({
					url: '/pagesF/maintenance-detail/maintenance-detail'
				})
			},
			handleClickInput() {
				uni.navigateTo({
					url: "/pagesA/my-garage/my-garage"
				})
			},
			goDetail(url) {
				uni.navigateTo({
					url: url
				})
			},
			handleCancelShouHou() {
				let feedbackImage = []
				this.fileList.map(item => {
					feedbackImage.push(item.thumb)
				})
				
				let data = {
					storeId: this.shopSureBillInfo.storeId,
				    goodsId: this.shopSureBillInfo.goodsId,
				    orderId: this.shopSureBillInfo.orderId,
					type: 2, // 类型（1-退款 2-售后）
				    score: this.score,
					applyContent: this.applyContent,
					afterSalesPictureList: feedbackImage
				}
				
				this.$http.post('/api/client/afterSales/add', data).then(res => {
					uni.showToast({
						icon: 'none',
						title: res.data.msg
					})
					
					let orderId = res.data.orderId
					if (res.data.code == 200) {
						uni.navigateTo({
							url: `/pagesB/refund/refund?orderId=${orderId}`
						})
					}
				})
			},
			contactCustomerService() {
				uni.navigateTo({
					url: '/pages/contactTheCustomerService/contactTheCustomerService'
				})
			},
			goBack() {
				uni.navigateBack({
					delta: 1
				})
			}
		}
	}
</script>

<style>
	page {
		background-color: #FBF6F3;
	}
</style>

<style lang="scss" scoped>
	.shenhe {
		position: relative;
		margin-right: 96rpx;
		&:last-child {
			margin-right: 0;
		}
		.line {
			left: 50%;
			top: 25%;
			transform: translate(45%, -50%);
			position: absolute;
			height: 1rpx;
			background-color: #fff;
			width: 102rpx;
		}
		.uncompleted {
			width: 54rpx;
			height: 54rpx;
		}
		.uncompleted-text {
			color: rgba(255, 255, 255, 0.6);
		}
		.completed {
			width: 54rpx;
			height: 54rpx;
		}
		.completed-text {
			color: #ffffff;
		}
	}
	$nav-height: 68rpx;
	.maintenance {
		position: relative;
		padding: 24rpx 0;

		.bg {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 540rpx;
			z-index: -1;
		}

		.back-wrap {
			.back-icon {
				width: 30rpx;
				height: 30rpx;
				// background: url(../.././static/left-arrow.png) no-repeat center center;
				background-size: 50%;
			}
		}

		.maintenance-content {
			.youdian {
				margin-top: 30rpx;
				height: 34rpx;

				.item {
					flex: calc(25% - 30rpx);
					margin-right: 30rpx;

					.image {
						width: 26rpx;
						height: 30rpx;
						// background: url(../.././static/dunpai.png) no-repeat center center;
						background-size: 100%;
					}

					&:last-child {
						margin-right: 0;
					}
				}
			}

			.func {
				padding: 4rpx 6rpx;
				background: #FFFDFC;
				border-radius: 36rpx 36rpx 36rpx 36rpx;

				.item {
					color: #333333;
					text-align: center;
					padding: 12rpx 0;
					flex: calc(25% - 17rpx);
					margin-right: 17rpx;

					&:last-child {
						margin-right: 0;
					}

					&.active {
						color: #ffffff;
						background: linear-gradient(90deg, #FF4502 0%, #FF8903 100%);
						border-radius: 36rpx 36rpx 36rpx 36rpx;
					}
				}
			}

			.shop-good {
				.item {
					text-align: center;
					padding: 16rpx 0;
					background-color: #ffffff;
					flex: calc(100% / 3 - 30rpx);
					margin-right: 30rpx;
					border-radius: 18rpx;

					&.active {
						text-align: center;
						color: #ffffff;
						background-color: #FF4502;
					}

					&:last-child {
						margin-right: 0;
					}
				}
			}

			.recomend {
				font-style: italic;
				letter-spacing: 4rpx;

				.bold-line {
					margin-top: -10rpx;
					width: 231rpx;
					height: 15rpx;
					background: linear-gradient(90deg, #FF4502 0%, rgba(251, 246, 243, 0) 100%);
					border-radius: 0rpx 0rpx 0rpx 0rpx;
				}
			}

			.good-list {
				.good-item {
					background-color: #ffffff;
					border-radius: 18rpx;
					padding: 20rpx;

					.fs22 {
						.light-black {
							padding: 6rpx 10rpx;
							background: #F1F1F1;
							border-radius: 20rpx 20rpx 20rpx 20rpx;
						}
					}
				}
			}
		}
	}
	
	.rec-show-desc {
		padding: 20rpx;
		.left {
			.lf-content {
				margin-right: 10rpx;
				image {
					width: 128rpx;
					height: 128rpx;
				}
			}
			.rt-content {
				.evaluate {
					.star-icon {
						width: 32rpx;
						height: 32rpx;
						background: url(../.././static/common/star.png) no-repeat center center;
						background-size: 100%;
					}
				}
			}
		}
		.right {
			.plane {
				width: 52rpx;
				height: 52rpx;
				// background: url(../.././static/plane.png) no-repeat center center;
				background-size: 100%;
			}
			.total-sell {
				color: #999999;
				margin-top: 10rpx;
			}
		}
	}

	.shop-icon {
		width: 24rpx;
		height: 24rpx;
		// background: url(../.././static/shop/shop-icon.png) no-repeat center center;
		background-size: 100%;
	}

	.go-look {
		color: #ffffff;
		padding: 6rpx 26rpx;
		background: linear-gradient(90deg, #FF4502 0%, #FF8903 100%);
		border-radius: 24rpx 24rpx 24rpx 24rpx;
	}

	.sys-mes-nofity {
		padding: 0 90rpx;
		padding-bottom: 50rpx;
		position: relative;
		width: 100%;
		background: linear-gradient(180deg, #FFE3D9 0%, #FFFFFF 100%);
		border-radius: 14rpx;

		.top {
			border-radius: 14rpx;
			height: 148rpx;
		}

		.bot {
			margin-top: 72rpx;

			.confirm {
				padding: 10rpx 60rpx;
				border-radius: 30rpx;
				color: #ffffff;
				background-color: #FF4502;
			}
		}
	}

	.small-gray-right-arrow {
		width: 16rpx;
		height: 16rpx;
		// background: url(../.././static/common/gray_right_arrow.png) no-repeat center center;
		background-size: 100%;
	}

</style>