<template>
	<view class="car-beaufy mg-lr-24">
		<view class="white-bg-wrap mg-bot-30">
			<scroll-view class="scroll-view" scroll-x="true">
				<view class="content u-f u-f-jcc u-f-aic">
					<view @click="handleTab(item)"
						:class="['swiper-item u-f u-f-fdc u-f-aic', activeTab === item.name ? 'active' : '']"
						v-for="(item, index) in tabList" :key="index" style="flex: 1;">
						<image class="top mg-bot-10"
							:src="activeTab === item.name ? item.highlightPicture : item.ordinaryPicture"></image>
						<text class="fs24 light-black">{{ item.name }}</text>
						<view class="bot-line"></view>
					</view>
				</view>
			</scroll-view>
		</view>

		<view class="white-bg-wrap mg-bot-20" v-if="activeTab === '玻璃贴膜' || activeTab === '打蜡镀晶'">
			<view class="shop-good u-f u-f-jcsb u-f-aic">
				<view :class="['item', activeShopGood2 == item.id ? 'active' : '']" v-for="item in shopGood2"
					:key="item.id" @click="checkGood2(item.id)">{{item.name}}</view>
			</view>
		</view>
		<view class="white-bg-wrap mg-bot-20" v-else>
			<view class="shop-good u-f u-f-jcfs u-f-aic">
				<view :class="['item mg-right-30', activeShopGood == item.id ? 'active' : '']" v-for="item in shopGood"
					:key="item.id" @click="checkGood(item.id)">{{item.name}}</view>
			</view>
		</view>

		<!-- 精致洗车 and 高端精洗 and 车衣改色-->
		<view v-if="activeTab === '精致洗车' || activeTab === '高端精洗' || activeTab === '车衣改色'">
			<view class="white-bg-wrap mg-bot-20" v-for="item in tabContentList1" :key="item.id">
				<view class="rec-show-desc u-f u-f-aic u-f-jcsb" @click="enterMaintenceDetail(item)">
					<view class="left u-f u-f-aifs">
						<view class="lf-content">
							<image class="product-image" :src="item.storeLogo"></image>
						</view>
						<view class="rt-content">
							<view class="shop-name fs28 fw400">{{item.storeName}}</view>
							<view class="u-f u-f-aic">
								<image style="width: 30rpx;height: 30rpx;" src="/static/common/star.png"
									v-for="i in item.score==0?5:item.score" :key="i" mode="">
								</image>
								<view style="color: #F2CB51;font-size: 24rpx;">{{item.score==0?5:item.score}}.0分
								</view>
								<view v-if="item.commentNumber!=0" style="color: #999999;font-size: 24rpx;">
									{{item.commentNumber}}条评价
								</view>
							</view>
							<view class="light-gray fs24 mg-bot-10 mg-top-10">总售 {{item.totalSales}}</view>
							<view class="fs24">
								<text class="light-black">{{item.distance}}km | </text>
								<text class="light-gray">{{item.address}}</text>
							</view>
						</view>
					</view>
					<view class="right" @click.stop="goMapPages(item)">
						<view class="plane">
							<image src="../.././static/common/plane.png" style="width: 100%;height: 100%"
								:mode="'widthFix'"></image>
						</view>
					</view>
				</view>

				<scroll-view class="scroll-view_H" scroll-x="true"
					style="padding-top: 20rpx;border-top: 1rpx solid #F0F0F0;">
					<view class="u-f u-f-jcfs u-f-aic u-f-fwnw">
						<view class="u-f u-f-aic u-f-fdc list-card" v-for="innerItem in item.goodsInfoList"
							:key="innerItem.id" @click="createBill(item, innerItem)">
							<image class="product-image mg-bot-10" :src="innerItem.goodsImage" :mode="'widthFix;'"
								:lazy-load="true"></image>
							<text class="one-line-ellipsis mg-bot-10 fs26"
								style="width: 100%">{{innerItem.goodsName}}</text>
							<view class="main-color fs28 u-f u-f-jcfs">
								<text>￥</text>
								<text class="fw600">{{innerItem.commodityPrice ? innerItem.commodityPrice : '-'}}</text>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>

		<!-- 玻璃贴膜 and 打蜡镀晶  -->
		<view v-if="activeTab === '玻璃贴膜' || activeTab === '打蜡镀晶'">
			<view class="white-bg-wrap mg-bot-20" v-for="item in tabContentList2" :key="item.id">
				<maintenance-shop :item="item" @enter-detail="handleEnterDetail"></maintenance-shop>
			</view>
		</view>

		<!-- 自助洗车 -->
		<view v-if="activeTab === '自助洗车'">
			<view class="white-content-wrap mg-bot-20" v-for="(item, index) in tabContentList3" :key="index"
				@click="goAutoWashCar(item)">
				<view class="u-f u-f-jcsb u-f-aic">
					<view class="mg-right-10 u-f u-f-aic u-f-jcc">
						<image :src="item.storeLogo" class="product-image" :lazy-load="true" :mode="'scaleToFill'">
						</image>
					</view>
					<view class="u-f u-f-jcsb u-f-aifs" style="width: calc(100% - 180rpx)">
						<view class="u-f u-f-fdc">
							<view class="fs28 light-blac fw400 mg-bot-10">{{item.storeName}}</view>
							<view class="u-f u-f-jcfs u-f-aic mg-bot-10">
								<text class="sign mg-right-8" v-for="(innerItem, index) in item.storeLabelList"
									:key="index">{{innerItem}}</text>
							</view>
							<view class="u-f u-f-jcfs u-f-aic fs24 mg-bot-10">
								<text class="mg-right-8 light-gray">距离</text>
								<text class="light-black">{{item.distance}}km</text>
							</view>
							<view class="one-line-ellipsis">
								<text class="light-gray fs24">{{item.address}}</text>
							</view>
						</view>
						<view @click.stop="skipCityMap(item)">
							<image src="../.././static/common/plane.png" class="goplane"></image>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import maintenanceShop from "../.././components/maintenance-shop/maintenance-shop.vue"
	export default {
		components: {
			maintenanceShop
		},
		data() {
			return {
				storeTypeId: 0,
				activeTab: '精致洗车',
				activeTabId: 0,
				activeShopGood: 1,
				tabList: [],
				pageNum: 1,
				pageSize: 10,
				total: 0,
				shopGood: [{
						name: '距离最近',
						id: 1
					},
					{
						name: '销量最高',
						id: 3
					},
				],
				shopGood2: [{
						name: '距离最近',
						id: 1
					},
					{
						name: '价格最低',
						id: 2
					},
					{
						name: '销量最高',
						id: 3
					},
				],
				activeShopGood2: 2,
				tabContentList1: [],
				tabContentList2: [],
				tabContentList3: [],
				type: 0, //1 定位到洗车机
			}
		},
		onLoad(option) {
			this.storeTypeId = option.id
			this.type = option.type
			this.getStoreTypeList()

		},
		onReachBottom() {
			if (this.activeTab === '玻璃贴膜' || this.activeTab === '打蜡镀晶') {
				if (this.total > this.tabContentList2.length) {
					this.pageNum = this.pageNum + 1
					this.carWashBeauty(true)
				} else {
					uni.showToast({
						title: '没有更多啦！',
						icon: 'none'
					})
				}
			} else if (this.activeTab === '精致洗车' || this.activeTab === '高端精洗' || this.activeTab === '车衣改色') {
				if (this.total > this.tabContentList1.length) {
					this.pageNum = this.pageNum + 1
					this.carWashBeauty(true)
				} else {
					uni.showToast({
						title: '没有更多啦！',
						icon: 'none'
					})
				}
			} else {
				if (this.total > this.tabContentList3.length) {
					this.pageNum = this.pageNum + 1
					this.autoClearCar(true)
				} else {
					uni.showToast({
						title: '没有更多啦！',
						icon: 'none'
					})
				}
			}
		},
		methods: {
			handleTab(item) {
				console.log("LMG", item)
				this.total = 0
				this.pageNum = 1
				this.activeTab = item.name
				this.activeTabId = item.id

				if (this.activeTab === '精致洗车' || this.activeTab === '高端精洗' || this.activeTab === '车衣改色') {
					this.carWashBeauty()
				} else if (this.activeTab === '打蜡镀晶' || this.activeTab === '玻璃贴膜') {
					this.getOtherInfo()
				} else {
					this.autoClearCar()
				}
			},
			checkGood(id) {
				this.activeShopGood = id
				this.carWashBeauty()
			},
			checkGood2(id) {
				this.activeShopGood2 = id
				this.getOtherInfo()
			},
			enterMaintenceDetail(item) {
				this.User.navigate({
					url: "/pagesC/shop-detail/shop-detail?id=" + item.storeId
				}, "navigateTo", true);
			},
			// 跳转地图
			goMapPages(data) {
				console.log(data);
				uni.openLocation({
					// 
					latitude: Number(data.lat),
					longitude: Number(data.lon),
					name: data.storeName,
					address: data.detailedAddress,
					success: function(res) {
						console.log('打开系统位置地图成功')
					},
					fail: function(error) {
						console.log(error)
					}
				})
			},
			async getStoreTypeList() {
				let data = {
					"storeTypeId": this.storeTypeId
				}
				let res = await this.$http.get('/api/client/index/storeTypeList', data, {
					token: true,
					checkToken: true
				})
				let tabList = res.data.data
				this.tabList = tabList
				if (this.type == 1) {
					this.handleTab(tabList[1])
				} else {
					this.handleTab(tabList[0])
				}
			},
			async carWashBeauty(flag) {
				let data = {
					"pageNum": this.pageNum,
					"pageSize": this.pageSize,
					"storeType1Id": this.storeTypeId,
					"storeType2Id": this.activeTabId,
					"sortOrder": this.activeShopGood,
					"lon": this.User.curcity.lng,
					"lat": this.User.curcity.lat
				}

				let res = await this.$http.post('/api/client/index/carWashBeauty', data, {
					token: true,
					checkToken: true
				})
				this.tabContentList1 = !flag ? res.data.data.rows : this.tabContentList1.concat(res.data.data.rows)
				this.total = res.data.data.total
			},
			async getOtherInfo(flag) {
				let data = {
					"pageNum": this.pageNum,
					"pageSize": this.pageSize,
					"storeType1Id": this.storeTypeId,
					"storeType2Id": this.activeTabId,
					"sortOrder": this.activeShopGood2,
					"lon": this.User.curcity.lng,
					"lat": this.User.curcity.lat
				}

				let res = await this.$http.post('/api/client/index/carWashBeautyType', data, {
					token: true,
					checkToken: true
				})
				this.tabContentList2 = !flag ? res.data.data.rows : this.tabContentList2.concat(res.data.data.rows)
				this.total = res.data.data.total
			},
			async autoClearCar(flag) {
				let data = {
					"pageNum": this.pageNum,
					"pageSize": this.pageSize,
					"sortOrder": this.activeShopGood2,
					"lon": this.User.curcity.lng,
					"lat": this.User.curcity.lat
				}

				let res = await this.$http.post('/api/client/index/selfServiceCarWash', data, {
					token: true,
					checkToken: true
				})
				this.tabContentList3 = !flag ? res.data.data.rows : this.tabContentList3.concat(res.data.data.rows)
				this.total = res.data.data.total
			},
			async createBill(item, ele) {
				let data = {
					"lon": this.User.curcity.lng,
					"lat": this.User.curcity.lat,
					"storeId": item.storeId,
					"type": 1, // 1-商品 2-会员权益 3-团购商品 4-积分商品 5-优惠券 6-投诉
					"goodsId": ele.goodsId,
					"goodsNum": 1
				}

				// 创建订单
				let res = await this.$http.post('/api/client/order/createOrder', data, {
					token: true,
					checkToekn: true
				})
				let resData = res.data.data
				let key = resData.key
				let orderId = resData.orderId
				let storeId = resData.storeId
				this.User.navigate({
					url: '/pagesC/car-beautify-buy/car-beautify-buy?id=' + key + '&orderId=' + orderId +
						'&storeId=' + storeId
				}, "navigateTo", true)
			},
			handleEnterDetail(item) {
				this.User.navigate({
					url: '/pagesB/shop-goods-detail/shop-goods-detail?storeId=' + item.storeId + '&goodsId=' + item
						.goodsId
				}, "navigateTo", true)
			},
			goAutoWashCar(item) {
				this.User.navigate({
					url: '/pagesD/self-car-wash/self-car-wash?storeId=' + item.storeId + '&lon=' + item.lon +
						'&lat=' + item.lat
				}, "navigateTo", true)
			},
			skipCityMap(data) {
				uni.openLocation({
					// 
					latitude: Number(data.lat),
					longitude: Number(data.lon),
					name: data.storeName,
					address: data.detailedAddress,
					success: function(res) {
						console.log('打开系统位置地图成功')
					},
					fail: function(error) {
						console.log(error)
					}
				})
			}
		}
	}
</script>

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

<style lang="scss">
	.car-beaufy {
		.white-bg-wrap {
			.content {
				border-bottom: 1rpx solid #F1F1F1;

				.swiper-item {
					margin-right: 30rpx;

					.top {
						border-radius: 18rpx;
						width: 74rpx;
						height: 74rpx;
					}

					.bot-line {
						width: 100%;
						height: 18rpx;
					}

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

					&.active {
						.bot-line {
							border-bottom: 1rpx solid #FF4502;
						}
					}
				}
			}

			.rec-show-desc {
				padding: 20rpx;

				.left {
					.lf-content {
						margin-right: 10rpx;

						image {
							width: 146rpx;
							height: 146rpx;
						}
					}

					.rt-content {
						.shop-name {
							color: #333333;
							margin-bottom: 10rpx;
						}

						.evaluate {
							.star-num {
								color: #F2CB51;
							}
						}
					}
				}

				.right {
					.plane {
						width: 52rpx;
						height: 52rpx;
					}

					.total-sell {
						color: #999999;
						margin-top: 10rpx;
					}
				}
			}

		}
	}

	.scroll-view {
		white-space: nowrap;
		width: 100%;
	}

	.list-card {
		width: calc(25% - 14rpx);
		margin-right: 14rpx;
	}

	.shop-good {
		justify-content: center;

		.item {
			width: 30%;
			text-align: center;
			padding: 16rpx 0;
			background-color: #ffffff;
			border-radius: 18rpx;
			font-size: 28rpx;

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

	.product-image {
		width: 146rpx;
		height: 146rpx;
		border-radius: 9rpx;
	}

	.goods-list {
		background-color: green;
		overflow-x: auto;
		width: 100%;
	}

	.scroll-view_H {
		white-space: nowrap;
		width: 100%;
		padding: 20rpx;
	}
</style>