<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="maintenance-content mg-lr-24">
			<view class="func u-f u-f-jcfs mg-bot-28">
				<view :class="tabName == index ? 'active item' : 'item'" v-for="(item,index) in operateMenu"
					:key="item.id" @click="checkOperte(index,item)">
					{{item.name}}
				</view>
			</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 no-wrap">
						<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 no-wrap">
						<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 no-wrap">
						<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 no-wrap">
						<image class="mg-right-10 image"></image>
						<text class="fw600 fs28 main-color special-text">售后无忧</text>
					</view>
				</view>
			</view>

			<view class="flex-info">
				<view class="flex-item" v-for="(item,index) in childrenList" :key="index"
					@click="handleClick(item,index)">
					<image :src="tabIndex==index?item.highlightPicture:item.ordinaryPicture" mode="widthFix"
						class="img-box"></image>
					<view :class="tabIndex==index?'active-box':''">
						{{item.name}}
					</view>
				</view>
			</view>

			<view class="list-wrap">
				<view :class="tabCard==index?'infoWrapColor info-wrap':'info-wrap'" v-for="(item,index) in arrListInfo"
					:key="i" @click="handleClickList(item.couponId,index)">
					{{item.text}}
				</view>
			</view>
			<view>
				<view class="list-info" v-if="goodsList.length>0">
					<view class="list-item" v-for="(el,index) in goodsList" :key="index" @click="hanldeBuyNow(el)">
						<view class="liet-item-left">
							<image :src="el.goodsImage" mode="aspectFill" class="img-info"></image>
						</view>
						<view class="liet-item-right">
							<view class="title-info">{{el.goodsName}}</view>
							<view class="title-tips">{{el.storeName}}</view>
							<view class="total-sales">总售: {{el.orderNum}}</view>
							<view class="address-box">
								<text class="distance-color">{{el.distance}}km</text>
								| {{el.address}}
							</view>
							<view class="flex-box">
								<view class="left-info">
									￥{{el.commodityPrice}}
								</view>
								<view class="right-info">
									立即抢购
								</view>
							</view>
						</view>
					</view>

				</view>
				<view v-else class="no-data-box">
					<image :src="nodata" class="no-data" mode="widthFix"></image>
				</view>
			</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 class="u-f u-f-jcc u-f-aic" @click="handleBindCar"><text class="confirm">去绑定</text></view> -->
			</view>
		</uni-popup>
	</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"
	import nodata from '@/static/common/nodata.png'
	export default {
		components: {
			uniNavBar,
			maintenanceShop
		},
		data() {
			return {
				nodata,
				isBindCar: true,
				showBindCarPop: false,
				tabName: 0,
				activeShopGood: '1',
				paddingTop: 0,
				classId: '',
				carInfo: {},
				advantages: [{
						name: '正品保障',
						id: 1
					},
					{
						name: '精准适配',
						id: 2
					},
					{
						name: '专业服务',
						id: 3
					},
					{
						name: '售后无忧',
						id: 4
					}
				],
				operateMenu: [],
				list: [],
				pageNum: 1,
				pageSize: 10,
				total: 0,
				type: 1,
				shopGood: [],
				childrenList: [], //列表页
				goodsList: [],
				arrListInfo: [{
						text: '距离最近',
						couponId: 1
					},
					{
						text: '价格最低',
						couponId: 2,
					},
					{
						text: '销量最高',
						couponId: 3,
					}
				],
				typeInfo: 0,
				tabIndex: 0,
				couponId: 1,
				tabCard: 0,
				parentId: 0,
				storeId: '',
				navbarTitle: '添加车辆',
				scrollTop: 0
			}
		},

		computed: {
			isScrollTop() {
				return this.scrollTop > 100 ? 100 : this.scrollTop / 1
			}
		},

		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},

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

		onShow() {
			this.getCarInfo()
		},

		mounted() {
			this.tabIndex = 0
			let {
				customizeNavBarHeight
			} = getCusNavBarInfo()
			this.paddingTop = customizeNavBarHeight + 'px'

			// this.showTip()
		},


		onReachBottom() {
			if (this.total > this.goodsList.length) {
				this.pageNum = this.pageNum + 1
				this.getGoodsPage(true)
			} else {
				wx.showToast({
					title: '没有更多啦！',
					icon: 'none'
				})
			}
		},

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

			hanldeBuyNow(el) {
				uni.navigateTo({
					url: `/pagesB/good-product-detail/good-product-detail?id=${el.goodsId}&storeId=${el.storeUserId}`
				})
			},
			handleClick(item, index) {
				this.goodsList = item.goodsList
				this.tabIndex = index
			},
			//首页车辆
			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('isShowBindCarPop1') == 1) {
						this.showBindCarPop = true
						uni.setStorageSync('isShowBindCarPop1', 2)
					}
					this.navbarTitle = '添加车辆'
				} else {
					uni.setStorageSync('isShowBindCarPop1', 2)
					this.showBindCarPop = false
					this.navbarTitle = carInfo.vehicleBrand + '' + carInfo.vehicleModel
				}
				this.pageNum = 1
				this.getList()
			},
			loadFont() {
				uni.loadFontFace({
					family: 'myFont',
					source: 'url("https://mycsh.xnszz.com/xiaoniu/file/zihunbiantaoti.ttf")',
					success() {
						console.log('success')
					}
				})
			},
			checkOperte(index, item) {
				this.couponId = 1
				this.tabCard = 0
				// this.goodsList = item.goodsList
				this.tabName = index
				this.typeInfo = index
				this.pageNum = 1
				this.storeId = item.id
				this.getGoodsPage()

			},
			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()
			},

			getList(flag) {
				console.log(uni.getStorageSync('curcity'));
				var location = uni.getStorageSync('curcity')
				this.$http.post("/api/client/index/maintenance", {
					pageNum: this.pageNum,
					pageSize: '20',
					storeType2Id: this.activeOperateMenu,
					storeType1Id: this.classId,
					sortOrder: this.activeShopGood,
					lon: location.lng,
					lat: location.lat,
					userCarId: this.carInfo.id,
				}).then(res => {
					console.log(res.data.data.rows)
					this.list = !flag ? res.data.data.rows : this.data.data.list.concat(res.data.data.rows)
					// this.total = res.data.data.total
				})
			},
			handleClickList(couponId, index) {
				this.tabCard = index
				this.couponId = couponId
				this.getShopType()
			},
			getShopType() {
				var location = uni.getStorageSync('curcity')
				this.$http.get("/api/client/index/storeTypeList", {
					storeTypeId: this.classId,
					lon: location.lng,
					lat: location.lat,
					couponId: this.couponId
				}).then(res => {
					console.log(res.data.data)
					this.operateMenu = res.data.data
					if (this.operateMenu[0].children.length) {
						this.childrenList = this.operateMenu[0].children
					}

					if (this.tabIndex == 0) {
						// this.goodsList = this.operateMenu[0].goodsList
						this.storeId = this.operateMenu[0].id
						this.getGoodsPage()
					}

					console.log(this.operateMenu, '参数哈哈哈')
					this.activeOperateMenu = res.data.data[0].id

				})
			},

			//获取商品信息列表
			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;
	}

	.no-wrap {
		white-space: nowrap;
	}

	.maintenance-content {
		font-size: 30rpx;

		.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: 23rpx;

				&: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;
					}
				}
			}
		}
	}

	.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: 80%;

			.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: 23rpx;

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

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

			.shop-good {
				font-size: 30rpx;

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

	.flex-info {
		display: flex;
		justify-content: space-between;
		font-size: 30rpx;

		.flex-item {
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;

		}
	}

	.active-box {
		color: #FE4F22;
	}

	.list-info {}

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

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

	.img-info {
		width: 150rpx;
		height: 150rpx !important;
		border-radius: 10rpx;
	}

	.liet-item-right {
		margin-left: 20rpx;
		flex: 1;

		.title-info {
			font-size: 28rpx;
			color: #333;
		}

		.title-tips {
			font-size: 26rpx;
			color: #242424;
		}

		.total-sales {
			color: #989898;
			font-size: 26rpx;
		}

		.address-box {
			color: #9E9E9E;
			font-size: 26rpx;
			margin: 10rpx 0;
		}

		.distance-color {
			color: #070707;
		}

	}

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

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

	.left-info {
		color: #FC421C;
	}

	.list-wrap {
		display: flex;
		justify-content: space-between;
	}

	.info-wrap {
		flex: 1;
		height: 60rpx;
		line-height: 60rpx;
		background: #FFFFFF;
		font-size: 28rpx;
		border-radius: 10rpx;
		text-align: center;
		color: #232323;
		margin-right: 40rpx;

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

	.infoWrapColor {
		background: #FE4F22 !important;
		color: #fff;
	}

	.no-data {
		width: 200rpx;
	}

	.no-data-box {
		display: flex;
		justify-content: center;
		align-items: center;
		padding-top: 100rpx;
	}
</style>