<template>
	<view class="mg-lr-24">
		<u-navbar
			title="选择门店"
			leftIconColor="#000"
			leftIconSize="38rpx"
			:autoBack="true"
			:bgColor="'#F9F9F9'"
			:fixed="false"
		></u-navbar>

		<view class="shop-good u-f u-f-jcfs u-f-aic mg-bot-36">
			<view :class="['item', activeShopGood == item.id ? 'active' : '']" v-for="item in shopGood" :key="item.id"
				@click="handleTabItem(item)">{{item.name}}</view>
		</view>

		<view class="u-f u-f-aic u-f-jcfs mg-bot-24">
			<image class="mg-right-8" style="width: 30rpx;height: 30rpx;" src="../.././static/common/location.png">
			</image>
			<text class="fw400 fs24 deep-gray">{{city}}</text>
		</view>
		
		<view v-for="item in shopList"
			:key="item.storeId"
			class="rec-show-desc u-f u-f-aifs u-f-jcsb mg-bot-24"
			@click="goDetail(item)">
			<view class="left u-f u-f-aic">
				<view class="lf-content">
					<image class="border-radius-9" :mode="'scaleToFill'" style="width: 146rpx;height: 146rpx;"
						:src="item.storeLogo"></image>
				</view>
				<view class="rt-content">
					<view class="shop-name fs28 fw400">{{item.storeName}}</view>
					<view class="evaluate u-f">
						<view class="u-f">
							<view v-if="item.score!=0">
								<image v-for="i in item.score" :key="i" src="../.././static/common/star.png"
									style="width: 32rpx;height: 32rpx;">
								</image>
							</view>
							<view v-else>
								<image v-for="i in 5" :key="i" src="../.././static/common/star.png"
									style="width: 32rpx;height: 32rpx;">
								</image>
							</view>
							<view class="star-num fs24 mg-right-10">{{item.score === 0 ? 5 : item.score}}分</view>
							<view class="light-gray fs24">{{item.commentNum}}条评价</view>
						</view>
					</view>
					<view class="light-gray fs24 mg-bot-10 mg-top-10">总售 {{item.totalSales}}</view>
					<view class="address fs24 one-line-ellipsis">
						<text class="distance">{{item.distance}}km | </text>
						<text class="detail-address">{{item.detailedAddress}}</text>
					</view>
				</view>
			</view>
			<view class="right" @click.stop="skipCityMap(item)">
				<image class="plane" src="/static/common/plane.png" mode=""></image>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				goodsId: 0,
				activeShopGood: '1',
				shopGood: [{
						name: '距离最近',
						id: '1'
					},
					{
						name: '销量最高',
						id: '2'
					}
				],
				pageNum: 1,
				pageSize: 10,
				total: 0,
				flag: false,
				shopList: [],
				city:''
			}
		},
		onLoad(option) {
			this.goodsId = option.goodsId
			this.storeType2Id = option.storeType2Id
			this.city = this.User.curcity.name;
			this.init()
		},
		onReachBottom() {
			if (this.total > this.shopList.length) {
				this.pageNum = this.pageNum + 1
				this.getApplyStoreList(true)
			} else {
				wx.showToast({
					title: '没有更多啦！',
					icon: 'none'
				})
			}
		},
		methods: {
			init() {
				this.pageNum = 1
				this.total = 0
				this.getApplyStoreList()
			},
			getApplyStoreList(flag) {
				this.$http.post('/api/client/store/applyStoreList', {
					pageNum: this.pageNum,
					pageSize: this.pageSize,
					goodsId: this.goodsId,
					sortType: this.activeShopGood,
					lon: this.User.curcity.lng,
					lat: this.User.curcity.lat
				}).then(res => {
					console.log("res", res)
					this.shopList = !flag ? res.data.data.rows : this.shopList.concat(res.data.data.rows)
					this.total = res.data.data.total
				})
			},
			handleTabItem(item) {
				this.activeShopGood = item.id
				this.init()
			},
			skipCityMap(data) {
				uni.openLocation({
					latitude: Number(this.User.curcity.lat),
					longitude: Number(this.User.curcity.lng),
					name: data.storeName,
					address: data.detailedAddress,
					success: function(res) {
						console.log('打开系统位置地图成功')
					},
					fail: function(error) {
						console.log(error)
					}
				})
			},
			goDetail(item) {
				console.log("goDetail", item)
				uni.setStorageSync('detail', JSON.stringify(item));
				uni.navigateBack({ delta: 1 });
			}
		}
	}
</script>

<style>
	page {
		background: #F9F9F9;
	}
</style>

<style lang="scss" scoped>
	.shop-good {
		.item {
			text-align: center;
			padding: 16rpx 0;
			background-color: #ffffff;
			width: 214rpx;
			margin-right: 30rpx;
			border-radius: 18rpx;
			font-size: 28rpx;

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

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

	.rec-show-desc {
		padding: 20rpx;
		background-color: #ffffff;
		.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;
			}
		}
	}
</style>