<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-jcfs 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">
						<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">
			<view class="shop-good u-f u-f-jcsb u-f-aic">
				<view :class="['item', 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-aic">
						<view class="lf-content">
							<image :src="item.storeLogo"></image>
						</view>
						<view class="rt-content">
							<view class="shop-name fs28 fw400">{{item.storeName}}</view>
							<view class="evaluate u-f">
								<image src="../.././static/common/star.png" class="star-icon" style="width: 32rpx;height: 32rpx;" v-for="i in item.score" :key="i" :mode="'widthFix'" />
								<view class="star-num fs24 mg-right-10">{{item.score}}</view>
								<view class="fs24 light-gray">{{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">
						<view class="plane">
							<image src="../.././static/common/plane.png" style="width: 100%;height: 100%" :mode="'widthFix'"></image>
						</view>
					</view>
				</view>
		
				<view class="u-f u-f-jcfs u-f-aic"
					style="padding-top: 20rpx;border-top: 1rpx solid #F0F0F0;"
				>
					<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="mg-bot-10"
							:src="innerItem.goodsImage"
							style="width: 155rpx;height: 155rpx;background-color: #ffffff;border-radius: 9rpx;"
							:mode="'widthFix;'"
							:lazy-load="true"
						></image>
						<text class="one-line-ellipsis mg-bot-10 fs26">{{innerItem.goodsName}}</text>
						<view class="main-color fs28 u-f u-f-jcfs">
							<text>￥</text>
							<text class="fw700">{{innerItem.commodityPrice ? innerItem.commodityPrice : '-'}}</text>
						</view>
					</view>
				</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>
</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,
				shopGood: [{
						name: '距离最近',
						id: 1
					},
					{
						name: '价格最高',
						id: 2
					},
					{
						name: '销量最高',
						id: 3
					},
				],
				tabContentList1: [],
				tabContentList2: [],
			}
		},
		onLoad(option) {
			this.storeTypeId = option.id
			this.getStoreTypeList()
		},
		methods: {
			handleTab(item) {
				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()
			},
			enterMaintenceDetail(item) {
				this.User.navigate({url: "/pages/shop-detail/shop-detail?id="+item.storeId}, "navigateTo", true);
			},
			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
				this.activeTabId = tabList[0].id
				this.carWashBeauty()
			},
			async carWashBeauty() {
				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})
				let resData = res.data.data
				this.tabContentList1 = resData.rows
			},
			async getOtherInfo() {
				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/carWashBeautyType', data, {token: true, checkToken: true})
				let resData = res.data.data
				this.tabContentList2 = resData.rows
			},
			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: '/pages/shop-sure-bill/shop-sure-bill?id='+key+'&orderId='+orderId+'&storeId='+storeId}, "navigateTo", true)
			},
			autoClearCar() {
				uni.scanCode({
					onlyFromCamera: true,
					success: function (res) {
						console.log('条码类型：' + res.scanType);
						console.log('条码内容：' + res.result);
					}
				});
			},
			handleEnterDetail(item) {
				this.User.navigate({url: '/pages/shop-goods-detail/shop-goods-detail?storeId='+item.storeId+'&goodsId='+item.goodsId}, "navigateTo", true)
			}
		}
	}
</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 {
		flex: calc(25% - 14rpx);
		max-width: 25%;
	}
	
	.shop-good {
		.item {
			flex: 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;
			}
		}
	}

</style>