、<template>
	<view class="maintenance">
		<up-navbar placeholder :bgColor="`rgb(255 255 255 / ${isScrollTop}%)`" :title="navbarTitle"
			@rightClick="rightClick" :autoBack="true">
			<template #center>
				<view class="u-nav-slot" @click="selectCar">
					<text>{{navbarTitle}}</text>
					<image style="width: 16rpx;
								height: 20rpx;
								margin-left: 10rpx;
					transform: rotate(90deg);" src="/pagesA/states/youjiantou.png" mode=""></image>
				</view>
			</template>
		</up-navbar>
		<view class="bg">
			<image src="../../static/common/bg.png" :mode="'widthFix'" style="width: 100%;height: 100%"></image>
		</view>

		<view class="maintenance-content mg-lr-24">
			<view class="youdian u-f u-f-jcfs u-f-aic mg-bot-30">
				<view class="item u-f u-f-jcfs u-f-aic">
					<image class="mg-right-10 image"></image>
					<text class="fw600 fs28 main-color  special-text">正品保障</text>
				</view>
				<view class="item u-f u-f-jcfs u-f-aic">
					<image class="mg-right-10 image"></image>
					<text class="fw600 fs28 main-color  special-text">精准适配</text>
				</view>
				<view class="item u-f u-f-jcfs u-f-aic">
					<image class="mg-right-10 image"></image>
					<text class="fw600 fs28 main-color special-text">专业服务</text>
				</view>
				<view class="item u-f u-f-jcfs u-f-aic">
					<image class="mg-right-10 image"></image>
					<text class="fw600 fs28 main-color special-text">售后无忧</text>
				</view>
			</view>

			<view class="mg-top-30 recomend fs36 fw400 main-color u-f u-f-fdc">
				<text class="special-text">{{activeOperateMenu == 11 ? '您的专属轮胎推荐' : '养车助手专属推荐'}}</text>
				<text class="bold-line"></text>
			</view>

			<view class="content-wrap" v-if="list.length">
				<view class="title-box">套餐</view>
				<view class="content-list" v-for="(item,index) in list" :key="index" @click="hanldeBuyNow(item)">
					<view class="conent-item" style="display: flex;">
						<view class="content-left">
							<view>
								<image :src="item.goodsImage" mode="aspectFill" class="goodsImage-box"></image>
							</view>
						</view>
						<view class="content-right">
							<view class="content-title">{{item.goodsName}}</view>
							<view class="content-tips">{{item.storeName}}</view>
							<view class="content-number">总售：{{item.orderNum}}</view>
							<view class="flex-box">
								<view class="flex-left">￥{{item.commodityPrice}}</view>
								<view class="flex-right" @tap.stop="hanldeBuyNow(item)">立即抢购</view>
							</view>
						</view>
					</view>
				</view>
			</view>

			<view class="content-wrap" v-if="list2.length">
				<view class="title-box">附加业务</view>
				<view class="content-list" v-for="(item,index) in list2" :key="index" @click="hanldeBuyNow(item)">
					<view class="conent-item" style="display: flex;">
						<view class="content-left">
							<view>
								<image :src="item.goodsImage" mode="aspectFill" class="goodsImage-box"></image>
							</view>
						</view>
						<view class="content-right">
							<view class="content-title">{{item.goodsName}}</view>
							<view class="content-tips">{{item.storeName}}</view>
							<view class="content-number">总售：{{item.orderNum}}</view>
							<view class="flex-box">
								<view class="flex-left">￥{{item.commodityPrice}}</view>
								<view class="flex-right" @tap.stop="hanldeBuyNow(item)">立即抢购</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="height-box"></view>
		</view>

		<uni-popup :position="'middle'" :show="showBindCarPop" @hidePopup="handleHidePopup">
			<view class="sys-mes-nofity">
				<div class="sys-mes-nofityheader"></div>
				<image class="sys-mes-nofityImage" src="/static/chepai.png" mode=""></image>
				<view class="mg-top-38 fs28 deep-gray">您还未绑定爱车，请前往绑定</view>
				<div class="btns">
					<div class="quxiao" @click="showBindCarPop = false">
						取消
					</div>
					<div class="bangding" @click="handleBindCar">
						去绑定
					</div>
				</div>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import uniNavBar from "../.././components/uni-nav-bar/uni-nav-bar.vue"
	import {
		NumberUtil
	} from '@/utils/numberUtil.js'
	import {
		getCusNavBarInfo
	} from "../.././common/customizeNavBarInfo.js"
	import select from '@/static/common/select.png'
	import selectActive from '@/static/common/selectActive.png'
	import maintenanceShop from "../.././components/maintenance-shop/maintenance-shop.vue"
	export default {
		components: {
			uniNavBar,
			maintenanceShop
		},
		data() {
			return {
				isBindCar: true,
				showBindCarPop: false,
				activeOperateMenu: '',
				activeShopGood: '1',
				paddingTop: 0,
				classId: '',
				carInfo: {},
				advantages: [{
						name: '正品保障',
						id: 1
					},
					{
						name: '精准适配',
						id: 2
					},
					{
						name: '专业服务',
						id: 3
					},
					{
						name: '售后无忧',
						id: 4
					}
				],
				operateMenu: [],
				list: [],
				list2: [],
				pageNum: 1,
				total: 0,
				type: 1,
				shopGood: [{
						name: '距离最近',
						id: '1'
					},
					{
						name: '价格最低',
						id: '2'
					},
					{
						name: '销量最高',
						id: '3'
					}
				],
				select,
				selectActive,
				checkedList: [],
				navbarTitle: '添加车辆',
				scrollTop: 0
			}
		},
		computed: {
			totalPrice() {
				let totalNum = 0
				this.list.map(item => {
					return item.checked ? totalNum += this.numAdd(item.commodityPrice) : totalNum += 0
				})
				return totalNum
			},
			isScrollTop() {
				return this.scrollTop > 100 ? 100 : this.scrollTop / 1
			}

		},
		onLoad(options) {
			this.classId = options.id
			// this.getShopType()
			this.getList()
			this.loadFont()
			// this.getCarInfo()
		},

		//钩子函数，与onLoad平级，scrollTop 需要在data中先定义
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},


		onShow() {
			this.getCarInfo()
		},

		mounted() {
			let {
				customizeNavBarHeight
			} = getCusNavBarInfo()
			this.paddingTop = customizeNavBarHeight + 'px'
			// this.showTip()
		},


		methods: {

			selectCar() {
				if (this.carInfo.vehicleBrand) {
					uni.navigateTo({
						url: '/pagesA/my-garage/my-garage'
					})
				} else {
					this.handleBindCar()
				}
			},

			//首页车辆
			async getCarInfo() {
				let res = await this.$http.get('/api/client/index/carInfo')
				let carInfo = res.data.data
				this.carInfo = carInfo || {}
				if (!this.carInfo.vehicleBrand || !this.carInfo) {
					if (uni.getStorageSync('isShowBindCarPop2') == 1) {
						this.showBindCarPop = true
						uni.setStorageSync('isShowBindCarPop2', 2)
					}
					this.navbarTitle = '添加车辆'
				} else {
					uni.setStorageSync('isShowBindCarPop2', 2)
					this.showBindCarPop = false
					this.navbarTitle = carInfo.vehicleBrand + '' + carInfo.vehicleModel
				}
			},

			handleBalance() {
				if (this.totalPrice == 0) {
					uni.showToast({
						title: '结算金额不能为0元',
						icon: 'none'
					})
					return
				}

			},
			hanldeChange(item, index) {
				this.checkedList = []
				item.checked = !item.checked

				this.list.map(el => {
					if (el.checked) {
						this.checkedList.push(el)
					}
				})
			},
			hanldeBuyNow(el) {
				uni.navigateTo({
					url: `/pagesB/good-product-detail/good-product-detail?id=${el.goodsId}&storeId=${el.storeUserId}`
				})
			},
			numAdd(num1, num2) {
				if (!num1) {
					num1 = 0
				}
				if (!num2) {
					num2 = 0
				}
				var baseNum, baseNum1, baseNum2;
				try {
					baseNum1 = num1.toString().split(".")[1].length;
				} catch (e) {
					baseNum1 = 0;
				}
				try {
					baseNum2 = num2.toString().split(".")[1].length;
				} catch (e) {
					baseNum2 = 0;
				}
				baseNum = Math.pow(10, Math.max(baseNum1, baseNum2));
				return (NumberUtil.accMul(num1, baseNum) + NumberUtil.accMul(num2, baseNum)) / baseNum;
			},

			loadFont() {
				uni.loadFontFace({
					family: 'myFont',
					source: 'url("https://mycsh.xnszz.com/xiaoniu/file/zihunbiantaoti.ttf")',
					success() {
						console.log('success')
					}
				})
			},
			checkOperte(id) {
				console.log("checkOperte")
				console.log("id", id)
				this.activeOperateMenu = id
				this.pageNum = 1
				this.getList()
			},
			checkGood(id) {
				console.log("checkGood")
				this.activeShopGood = id
				this.pageNum = 1
				this.getList()
			},
			handleClickLeft() {
				uni.switchTab({
					url: "/pages/index/index"
				})
			},
			handleClickIput() {},
			handleHidePopup() {
				this.showBindCarPop = false
			},
			handleBindCar() {
				uni.navigateTo({
					url: '/pagesA/add-car/add-car'
				})
			},
			showTip() {
				uni.showToast({
					icon: 'none',
					title: '已根据当前车型匹配车辆',
					duration: 500
				})
			},
			handleEnterDetail(item) {
				console.log(item);
				uni.navigateTo({
					url: '/pagesF/maintenance-detail/maintenance-detail?goodsId=' + item.goodsId + '&storeId=' +
						item.storeId + '&storeType2Id=' + this.activeOperateMenu
				})
			},
			handleClickInput() {
				if (!this.carInfo.vehicleBrand) {
					this.handleBindCar()
				} else {
					uni.navigateTo({
						url: "/pagesA/my-garage/my-garage"
					})
				}
			},
			onPullDownRefresh() {
				this.pageNum = 1
				this.getList()
			},
			onReachBottom() {
				console.log(this.total, this.list.length);
				if (this.total > this.list.length) {
					this.pageNum = this.pageNum + 1
					this.getList(true)
				} else {
					wx.showToast({
						title: '没有更多啦！',
						icon: 'none'
					})
				}
			},
			getList(flag) {
				console.log(uni.getStorageSync('curcity'));
				var location = uni.getStorageSync('curcity')
				this.$http.post("/api/client/index/maintenanceGoodsList", {
					pageNum: this.pageNum,
					pageSize: '20',
					storeId: this.classId,
					parentId: 0,
					lon: location.lng,
					lat: location.lat,
					// userCarId: this.carInfo.id,
				}).then(res => {
					console.log(res.data.data.rows)
					let list = []
					let list2 = []
					res.data.data.map(item => {
						if (item.goodsTypeName == '套餐') {
							list.push(item)
						} else {
							list2.push(item)
						}
					})
					this.list = list
					this.list2 = list2
					// this.list = !flag ? res.data.data.rows : this.data.data.list.concat(res.data.data.rows)
					this.total = res.data.data.total
				})
			},
			getShopType() {
				var location = uni.getStorageSync('curcity')
				this.$http.get("/api/client/index/storeTypeList1", {
					storeTypeId: this.classId,
					lon: location.lng,
					lat: location.lat,
				}).then(res => {
					console.log('data', res);
					console.log(res.data.data.goodsList, '参数哈哈哈')
					// this.list = res.data.data.goodsList.map(el => {
					// 	el.checked = false
					// 	return el
					// })

					// this.activeOperateMenu =res.data.data?res.data.data[0].id:''
					this.operateMenu = res.data.data
					this.getCarInfo()
				})
			},

			//获取商品信息列表
			getGoodsPage(flag) {
				var location = uni.getStorageSync('curcity')
				this.$http.post("/api/client/index/goodsPage", {
					storeId: this.storeId,
					parentId: this.parentId ? this.parentId : this.classId,
					lon: location.lng,
					lat: location.lat,
					pageNum: this.pageNum,
					pageSize: this.pageSize,
					couponId: this.couponId
				}).then(res => {
					this.goodsList = !flag ? res.data.data.rows : this.goodsList.concat(res.data
						.rows)
					console.log(this.goodsList);
					this.total = res.data.total
				})
			}
		}
	}
</script>

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

<style lang="scss" scoped>
	.maintenance :deep(.uni-navbar__header) {
		height: 28rpx !important;
	}

	.maintenance :deep(.uni-popup) {
		border-radius: 14rpx 14rpx 14rpx 14rpx;
	}

	.maintenance {
		position: relative;
		padding: 24rpx 0;

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

		.bg-navbar {
			// position: fixed;
			// top: 0;
			// left: 0;
			// width: 100%;
			// background-color: #FDEEE5;
			// z-index: 10;
		}

		.back-wrap {
			width: 100%;
			height: 100%;

			.back-icon {
				width: 15rpx;
				height: 30rpx;
				// background: url(../.././static/common/left_gray_arrow.png) no-repeat center center;
				background-size: 100%;
			}
		}

		.input-view {
			width: 100%;

			.bot-arrow-icon {
				width: 18rpx;
				height: 18rpx;
				// background: url(../.././static/common/gray_down_arrow.png) no-repeat center center;
				background-size: 100%;
			}
		}

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

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

					.image {
						width: 26rpx;
						height: 30rpx;
						background: url(../.././static/common/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(33% - 103rpx);
					margin-right: 103rpx;

					&: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 {
				text-align: center;

				.bold-line {
					display: block;
					margin: 0 auto;
					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;
				}

				.special-text {
					font-family: 'myFont';
					display: block;
					text-align: center;
				}
			}

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

	.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;
		// background: linear-gradient(180deg, #FFE3D9 0%, #FFFFFF 100%);
		border-radius: 14rpx;
		position: relative;
		width: 624rpx;
		height: 618rpx;
		background: #FFFFFF;
		border-radius: 14rpx 14rpx 14rpx 14rpx;
		overflow: hidden;

		.sys-mes-nofityheader {
			height: 108rpx;
			background: linear-gradient(180deg, #FFE3D9 0%, #FFFFFF 100%);
			border-radius: 14rpx 14rpx 0rpx 0rpx;
		}

		.sys-mes-nofityImage {
			width: 589rpx;
			height: 296rpx;
		}

		.btns {
			display: flex;
			align-items: center;
			justify-content: space-evenly;

			.quxiao {
				width: 233rpx;
				height: 67rpx;
				background: #999999;
				border-radius: 34rpx 34rpx 34rpx 34rpx;
				line-height: 67rpx;
				font-size: 28rpx;
				color: #FFFFFF;
				text-align: center;
			}

			.bangding {
				width: 232rpx;
				height: 67rpx;
				background: #FF4502;
				border-radius: 34rpx 34rpx 34rpx 34rpx;
				font-size: 28rpx;
				color: #FFFFFF;
				line-height: 67rpx;
				text-align: center;
			}
		}

		.btnview {
			font-family: Microsoft YaHei, Microsoft YaHei;
			font-weight: 400;
			font-size: 28rpx;
			color: #FFFFFF;
			display: flex;
			align-items: center;
			justify-content: center;
			line-height: 67rpx;
			text-align: center;

			.no {
				width: 233rpx;
				height: 67rpx;
				background: #999999;
				border-radius: 34rpx 34rpx 34rpx 34rpx;
				margin: 0 24rpx;
			}

			.ok {
				width: 232rpx;
				height: 67rpx;
				background: #FF4502;
				border-radius: 34rpx 34rpx 34rpx 34rpx;
				margin: 0 24rpx;
			}
		}

		.deep-gray {
			font-family: Microsoft YaHei, Microsoft YaHei;
			font-weight: bold;
			font-size: 28rpx;
			color: #FF4502;
			text-align: center;
			padding-top: 34rpx;
			padding-bottom: 49rpx;
			margin: 0;
		}

		.backcorol {
			width: 624rpx;
			height: 108rpx;
			background: linear-gradient(180deg, #FFE3D9 0%, #FFFFFF 100%);
			border-radius: 14rpx 14rpx 0rpx 0rpx;
		}

		image {
			width: 589rpx;
			height: 296rpx;
			display: block;
			margin: 0 auto;
		}


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

	.slot-icon {
		width: 38rpx;
		height: 38rpx;
		background-color: $u-warning;
		border-radius: 100px;
		font-size: 12px;
		color: #fff;
		text-align: center;
	}

	.title-box {
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		font-size: 24rpx;
		color: #999999;
	}

	.content-list {
		padding: 20rpx;
		background: #fff;
		border-radius: 10rpx;
		margin: 20rpx 0;
	}

	.img-box {
		width: 40rpx;
		height: 40rpx !important;
		margin: 10rpx 20rpx 0 10rpx;
	}

	.content-left {
		display: flex;
	}

	.goodsImage-box {
		width: 150rpx;
		height: 150rpx !important;
		margin-right: 20rpx;
		border-radius: 10rpx;
	}

	.content-item {
		display: flex;
	}

	.content-title {
		color: #2B2B2B;
		font-size: 30rpx;
	}

	.content-tips {
		color: #252525;
		font-size: 26rpx;
	}

	.content-number {
		color: #999999;
		font-size: 26rpx;
	}

	.content-right {
		flex: 1;
	}

	.flex-box {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.flex-right {
		width: 150rpx;
		height: 60rpx;
		line-height: 60rpx;
		text-align: center;
		font-size: 28rpx;
		color: #fff;
		background: #FA5221;
		border-radius: 30rpx;
	}

	.flex-left {
		color: #EF431A;
	}

	.footer-box {
		width: 100%;
		height: calc(40rpx + env(safe-area-inset-bottom));
		background: #FFFFFF;
		padding: 20rpx;
		padding-bottom: constant(safe-area-inset-bottom);
		/* 兼容iOS */
		padding-bottom: env(safe-area-inset-bottom);
		/* 兼容Android */
		position: fixed;
		z-index: 3;
		bottom: 0;
		left: 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.totalPrice-box {
		color: #B0B0B0;
		font-size: 28rpx;
	}

	.totalPrice-color {
		color: #F9390E;
	}

	.footer-btn {
		width: 300rpx;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		font-size: 28rpx;
		color: #fff;
		background: #EC602B;
		margin-right: 100rpx;
		border-radius: 40rpx;
	}

	.height-box {
		height: 150rpx;
	}
</style>