<template>
	<view class="maintenance">
		<!-- 自定义导航栏开始 -->
		<uni-nav-bar :status-bar="true" :border="false" :background-color="'transparent'" :fixed="true"
			@click-left="handleClickLeft" @click-title="handleClickInput">
			<block v-slot:left>
				<view class="back-wrap u-f u-f-fdr u-f-aic u-f-jcfs">
					<image src="../.././static/common/left_gray_arrow.png" class="back-icon" />
				</view>
			</block>
			<view class="input-view light-gray u-f u-f-fdr u-f-aic u-f-fwnw u-f-jcfe">
				<view v-if="isBindCar"> 
					<text class="fs28 light-black mg-right-10">{{carInfo.vehicleModel?carInfo.vehicleModel:'您还未添加车辆'}}</text>
					<text class="bot-arrow-icon"></text>
				</view> 
				<view class="fs28 light-black" v-else>维修保养</view>
			</view>
			<block v-slot:right>
				<view></view>
			</block>

		</uni-nav-bar>
		<!-- 自定义导航栏结束 -->

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

		<view :style="{height: paddingTop}"></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="fw400 fs28 main-color">正品保障</text>
				</view>
				<view class="item u-f u-f-jcfs u-f-aic">
					<image class="mg-right-10 image"></image>
					<text class="fw400 fs28 main-color">精准适配</text>
				</view>
				<view class="item u-f u-f-jcfs u-f-aic">
					<image class="mg-right-10 image"></image>
					<text class="fw400 fs28 main-color">专业服务</text>
				</view>
				<view class="item u-f u-f-jcfs u-f-aic">
					<image class="mg-right-10 image"></image>
					<text class="fw400 fs28 main-color">售后无忧</text>
				</view>
			</view>

			<view class="func u-f u-f-jcfs mg-bot-28">
				<view :class="['item', activeOperateMenu == item.id ? 'active' : '']" v-for="item in operateMenu"
					:key="item.id" @click="checkOperte(item.id)">{{item.name}}</view>
			</view>

			<view class="shop-good u-f u-f-jcfs u-f-aic" v-if="activeShopGood !== 'huanluntai'">
				<view :class="['item', activeShopGood == item.id ? 'active' : '']" v-for="item in shopGood"
					:key="item.id" @click="checkGood(item.id)">{{item.name}}</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 class="mg-top-30 recomend fs36 fw400 main-color u-f u-f-fdc">
				<text>养车助手专属推荐</text>
				<text class="bold-line"></text>
			</view>

			<view class="good-list mg-top-24" v-for="item in list" :key="item.id">
				<maintenance-shop :item="item" @enter-detail="handleEnterDetail(item)"></maintenance-shop>
			</view>

		</view>

		<uni-popup :position="'middle'" :show="showBindCarPop" @hidePopup="handleHidePopup">
			<view class="sys-mes-nofity">
				<view class="top u-f u-f-aic u-f-jcc">绑定信息</view>
				<view class="mg-top-38 fs28 deep-gray">您还未绑定车辆，请前往绑定</view>
				<view class="bot 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"
	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: [],
				pageNum: 1,
				total: 0,
				type: 1,
				shopGood: [{
						name: '距离最近',
						id: '1'
					},
					{
						name: '价格最高',
						id: '2'
					},
					{
						name: '销量最高',
						id: '3'
					},
				]
			}
		},
		onLoad(options) {
			this.classId = options.id
			this.getCarInfo()
			this.getShopType()
		},
		mounted() {
			let {
				customizeNavBarHeight
			} = getCusNavBarInfo()
			this.paddingTop = customizeNavBarHeight + 'px'

			// this.showTip()
		},
		methods: {
			//首页车辆
			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.showBindCarPop = true
				}
				this.pageNum = 1
				this.getList()
			},
			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: '/pages/add-car/add-car'
				})
			},
			showTip() {
				uni.showToast({
					icon: 'none',
					title: '已根据当前车型匹配车辆',
					duration: 500
				})
			},
			handleEnterDetail(item) {
				console.log(item);
				uni.navigateTo({
					url: '/pages/maintenance-detail/maintenance-detail?goodsId='+item.goodsId+'&storeId='+item.storeId
				})
			},
			handleClickInput() {
				if(!this.carInfo.vehicleBrand){
					this.handleBindCar()
				} else {
					uni.navigateTo({
						url: "/pages/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/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
					})
				},
			getShopType() {
				this.$http.get("/api/client/index/storeTypeList", {
					storeTypeId:this.classId
				}).then(res => {
					console.log(res.data.data)
					this.activeOperateMenu = res.data.data[0].id
					this.operateMenu = res.data.data
				})
			},
		}
	}
</script>

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

<style lang="scss" scoped>
	.maintenance {
		position: relative;
		padding: 24rpx 0;

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

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

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