<template>
	<view class="maintenance">
		<!-- 自定义导航栏开始 -->
		<uni-nav-bar
			:status-bar="true"
			:border="false"
			:background-color="'transparent'"
			:fixed="true"
			@clickLeft="handleClickLeft"
			@clickTitle="handleClickInput"
		>
			<block v-slot:left>
				<view class="back-wrap u-f u-f-fdr u-f-aic u-f-jcfs">
					<text class="white-back-icon"></text>
				</view>
			</block>
		</uni-nav-bar>
		<!-- 自定义导航栏结束 -->

		<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>
					<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>
					<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/check_progress.png"></image>
					</view>
					<text class="uncompleted-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"></image>
					</view>
					<text class="uncompleted-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="rec-show-desc u-f u-f-aic u-f-jcsb" @click="goDetail('/pages/shop-detail/shop-detail')">
					<view class="left u-f u-f-aic">
						<view class="lf-content">
							<!-- <image src="../.././static/demo/test.png"></image> -->
						</view>
						<view class="rt-content">
							<view class="light-black mg-bot-10 fs28 fw400">宏达汽修（民族路店）</view>
							<view class="evaluate u-f">
								<view class="star-icon" v-for="i in 5" :key="i"></view>
								<view class="gold-color fs24">5.0分</view>
							</view>
							<view class="light-gray fs24 mg-bot-10 mg-top-10">总售 1285</view>
							<view class="light-gray fs24">南阳市西峡县民族路135号</view>
						</view>
					</view>
					<view class="right">
						<view class="plane"></view>
						<view class="total-sell fs24 fw400">总售 1285</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-black">1件</text>
				</view>
				<view class="fs28 mg-bot-30 u-f u-f-jcsb">
					<text class="light-gray">退款金额</text>
					<text class="light-black">￥4999</text>
				</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="reason" 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">12345678910</text>
				</view>
				<view class="fs28 mg-bot-30 u-f u-f-jcsb">
					<text class="light-gray">创建时间</text>
					<text class="light-black">2024-08-09</text>
				</view>
			</view>
			
			<view class="u-f u-f-aic u-f-jcsb">
				<view class="line-gradient-btn" style="padding: 24rpx 0;width: 90%" @click="goDetail('/pages/exchange-success/exchange-success')">
					去使用
				</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'
					},
				]
			}
		},
		mounted() {
			let {
				customizeNavBarHeight
			} = getCusNavBarInfo()
			this.paddingTop = customizeNavBarHeight + 'px'

			// this.showTip()
		},
		methods: {
			checkOperte(id) {
				console.log("checkOperte")
				console.log("id", id)
				this.activeOperateMenu = id
			},
			checkGood(id) {
				console.log("checkGood")
				this.activeShopGood = id
			},
			handleClickLeft() {
				uni.switchTab({
					url: "/pages/index/index"
				})
			},
			handleClickIput() {},
			handleHidePopup() {
				this.showBindCarPop = false
			},
			handleBindCar() {
				uni.navigateTo({
					url: '/pages/add-car/add-car'
				})
			},
			showTip() {
				uni.showToast({
					icon: 'none',
					title: '已根据当前车型匹配车辆',
					duration: 500
				})
			},
			handleEnterDetail() {
				uni.navigateTo({
					url: '/pages/maintenance-detail/maintenance-detail'
				})
			},
			handleClickInput() {
				uni.navigateTo({
					url: "/pages/my-garage/my-garage"
				})
			},
			goDetail(url) {
				uni.navigateTo({
					url: url
				})
			}
		}
	}
</script>

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

<style lang="scss" scoped>
	.shenhe {
		margin-right: 96rpx;
		&:last-child {
			margin-right: 0;
		}
		.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: 146rpx;
					height: 146rpx;
				}
			}
			.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>