<template>
	<view class="check-car mg-lr-24">
		<view class="white-bg-wrap mg-bot-20">
			<view class="shop-good u-f u-f-jcfs u-f-aic" v-if="activeOperateMenu !== 'huanluntai'">
				<view :class="['item', activeShopGood == index ? 'active' : '']" v-for="(item,index) in shopGood"
					:key="index" @click="checkGood(item,index)">{{item}}</view>
			</view>
		</view>

		<view class="white-bg-wrap mg-bot-20" v-for="(item,index) in vehicleList" :key="index">
			<view class="rec-show-desc u-f u-f-aic u-f-jcsb"
				@click="goDetail(`/pagesC/shop-detail/shop-detail?id=${item.storeId}`)">
				<view class="left u-f u-f-aic">
					<view class="lf-content">
						<image :src="item.storeLogo" class="border-radius-9"></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 one-line-ellipsis">
							<text class="light-black">{{item.distance}}km | </text>
							<text class="light-gray">{{item.address}}</text>
						</view>
					</view>
				</view>
				<view class="right">
					<view class="plane" @click.stop="openCity(item)">
						<image class="planeImg" src="../../static/common/plane.png" mode=""></image>
					</view>
					<!-- <view class="total-sell fs24 fw400">总售 1285</view> -->
				</view>
			</view>
			<view class="goodslist" style="padding-top: 20rpx;border-top: 1rpx solid #F0F0F0;">
				<!-- <view class="u-f u-f-jcfs u-f-fww u-f-aic" style="padding-top: 20rpx;border-top: 1rpx solid #F0F0F0;"> -->
				<view class="u-f u-f-aifs u-f-fdc list-card mg-bot-10" v-for="(ele,eleIndex) in item.goodsInfoList"
					:key="eleIndex" @click="handleClickGoods(item, ele)">
					<image class="mg-bot-10 border-radius-9" :src="ele.goodsImage" style="width: 146rpx;height: 146rpx;"
						:mode="'widthFix;'"></image>
					<text class="one-line-ellipsis mg-bot-10 fs26">{{ele.goodsName}}</text>
					<view class="main-color fs28 u-f u-f-jcfs">
						<text>￥</text>
						<text class="fw700">{{ele.commodityPrice}}</text>
						<!-- <text>.80</text> -->
					</view>
				</view>
				<!-- </view> -->
			</view>
		</view>

	</view>
</template>

<script>
	const app = getApp()
	export default {
		data() {
			return {
				activeShopGood: 1,
				shopGood: ['距离最近', '价格最低', '销量最高'],
				cardID: "",
				pageNum: 1,
				pageSize: 10,
				lon: "",
				lat: "",
				vehicleList: [],
			}
		},
		onLoad(opt) {
			this.cardID = opt.id || ""
			this.lon = this.User.curcity.lng
			this.lat = this.User.curcity.lat
			console.log('this.User', this.User);
		},
		onShow() {
			this.getcaVehicleData()
		},
		methods: {
			checkGood(data, index) {
				this.activeShopGood = index
				this.getcaVehicleData()
			},
			goDetail(url) {
				uni.navigateTo({
					url: url
				})
			},
			// 列表
			getcaVehicleData() {
				this.$http.post('/api/client/index/caVehicle', {
					pageNum: this.pageNum,
					pageSize: this.pageSize,
					storeType1Id: this.cardID || 6,
					lon: this.lon,
					lat: this.lat,
					sortOrder: this.activeShopGood + 1, //排序方式(1-距离最近 2-价格最低 3-销量最高)
					userCarId: "",
				}).then((res) => {
					this.vehicleList = res.data.data.rows && res.data.data.rows
				})
			},
			openCity(data) {
				uni.openLocation({
					latitude: Number(data.lat),
					longitude: Number(data.lon),
					name: '地点',
					address: data.address,
					success: function(res) {
						console.log('打开系统位置地图成功')
					},
					fail: function(error) {
						console.log(error)
					}
				})
			},
			handleClickGoods(item, ele) {
				this.User.navigate({
					url: '/pagesB/shop-goods-detail/shop-goods-detail?storeId=' + item.storeId +
						'&goodsId=' + ele.goodsId
				}, "navigateTo", true)
				//this.createBill(item, ele)
			},
			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
				}

				uni.showLoading({
					title: '正在创建订单...',
					mask: true
				})

				// 创建订单
				let res = await this.$http.post('/api/client/order/createOrder', data, {
					token: true,
					checkToekn: true
				})

				uni.hideLoading()
				let resData = res.data.data
				let key = resData.key
				let orderId = resData.orderId
				let storeId = resData.storeId

				this.User.navigate({
					url: '/pagesE/check-car-bill/check-car-bill?id=' + key + '&orderId=' + orderId +
						'&storeId=' + storeId
				}, "navigateTo", true)
			}
		}
	}
</script>

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

<style lang='scss' scoped>
	.check-car {
		.shop-good {
			.item {
				padding: 16rpx 0;
				text-align: center;
				flex: calc(50% - 38rpx);
				background-color: #ffffff;
				border-radius: 18rpx;
				margin-right: 38rpx;
				font-size: 28rpx;

				&:nth-chid(odd) {
					margin-right: 0rpx;
					font-size: 28rpx;
				}

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

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

				.evaluateStar {
					image {
						width: 100%;
						height: 100%;
					}
				}

				.evaluate {
					.star-icon {
						width: 32rpx;
						height: 32rpx;
					}

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

				.address {
					.distance {
						color: #333333;
					}

					.detail-address {
						color: #999999;
					}
				}
			}
		}

		.right {
			position: relative;
			z-index: 9;
			margin-left: auto;


			.plane {
				width: 52rpx;
				height: 52rpx;
				/* background: url(../.././static/plane.png) no-repeat center center; */
				background-size: 100%;

			}

			.planeImg {
				width: 52rpx;
				height: 52rpx;
			}

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

	.goodslist {
		display: flex;
		overflow-x: auto;
		width: 100%;
		padding: 10rpx 20rpx;
	}

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

		/* &:nth-child(4n) {
			margin-right: 0;
		} */
	}
</style>