<template>
	<view :class="[AppTheme]" class="all_box">
		<!-- #ifdef APP-PLUS || MP-WEIXIN -->
		<u-sticky offset-top="0" style="z-index: 10;">
			<!-- #endif -->
			<!-- #ifdef H5 -->
			<u-sticky offset-top="-44" style="z-index: 10;">
				<!-- #endif -->
				<view class="navbar">
					<u-tabs ref="uTabs" @click="tabsChange" :list="titlelist" :scrollable="false" lineWidth="30"
						:lineColor="primary" :current="current" :activeStyle="{
				         color: primary,
				         transform: 'scale(1.05)'
				     }" :inactiveStyle="{
				         color: '#606266',
				         transform: 'scale(1)'
				     }">
					</u-tabs>
				</view>
			</u-sticky>
			<swiper class="swiper_item" :current="swiperCurrent" @transition="transition"
				@animationfinish="animationfinish">
				<swiper-item v-for="(item, index) in swimglist" :key="index" @touchmove="stopTouchMove">
					<scroll-view class="scroll_bar" :scroll-y="true" @scrolltolower="expandbottom">
						<view class="chooseaddress" v-if="position" @click="getlocation">
							<view class="chooseaddress_p1">
								<u-icon name="map" color="#999" size="20"></u-icon>
								<view class="chdress_p1txt">{{shipping_address||"请选择我的地址"}}</view>
							</view>
							<view class="chooseaddress_p2">
								<u-icon name="arrow-right" color="#999" size="20"></u-icon>
							</view>
						</view>
						<view class="merchant_box" v-for="(item,index2) in storelist" :key="index2">
							<view class="text_area">
								<view class="shop_name">
									<image :src="item.farm_logo" :lazy-load="true" class="shop_thumbnail"></image>
									<view class="right_shop_mess">
										<view class="shop_line">
											<view class="shop_line_p1">{{item.farm_name}}
											</view>
											<view class="right_shop_mess_p2" @click="gostoredetail(item.id)">
												进店逛逛
											</view>
										</view>
										<view class="shop_line_fl">
										</view>
										<view class="shop_line">
											<view class="shop_line_p2">
												<u-icon :key="index2" name="map" size="20" color="#9C9C9C"></u-icon>
												<view class="address">
													{{item.farm_address}}
												</view>
											</view>
										</view>
									</view>
								</view>
							</view>
							<view class="shop_one">
								<view class="shop_one_1">
									<view class="view1">{{item.page_view}}</view>
									<view class="view2">访客数</view>
								</view>
								<view>
									<u-line color="#999998" direction="col" length='60%'></u-line>
								</view>

								<view class="shop_one_1">
									<view class="view1">{{item.shopnum}}</view>
									<view class="view2">全部商品</view>
								</view>
								<view>
									<u-line color="#999998" direction="col" length='60%'></u-line>
								</view>

								<view class="shop_one_1">

									<view class="view1">{{item.shoporder}}</view>

									<view class="view2">已售出</view>
								</view>
							</view>
							<view style="padding: 0 0 20rpx 0;">
								<u-album singleSize="75" multipleSize='75' singleMode="aspectFill"
									multipleMode="aspectFill" :urls="item.detail_img" maxCount="4" :showMore='true'
									rowCount="4"></u-album>
							</view>
						</view>
						<u-loadmore :line="true" :status="loadmore" />
					</scroll-view>
				</swiper-item>
			</swiper>
	</view>
</template>
<script>
	import mineApi from "@/api/mine/index.js"
	export default {
		data() {
			return {
				primary: this.$theme.primary,
				settingFile: getApp().globalData.siteinfo,
				loadmore: '',
				titlelist: [{
						name: '全部'
					},
					{
						name: '销量最高'
					}
				],
				// 因为内部的滑动机制限制，请将tabs组件和swiper组件的current用不同变量赋值
				couponlist: [],
				// tabs组件的current值，表示当前活动的tab选项
				current: 0,
				// swiper组件的current值，表示当前那个swiper-item是活动的
				swiperCurrent: 0,
				//轮播图数组
				swimglist: [1, 2, 3, 4],
				swierheight: 0,
				storelist: [], //店铺列表
				longitude: '',
				latitude: '',
				position: false,
				shipping_address: '', //收货地址
				pages: 1, //店铺列表分页
				listtype: 1 //店铺列表分页的排序类型
			}
		},
		onLoad() {
			this.titlelist = [{
					name: '全部'
				},
				{
					name: '距离最近'
				},
				{
					name: '销量最高'
				}
			]
			if (this.$config && this.$config.app.position != 1) {
				this.position = false;
			} else {
				this.position = true;
			}
			this.vueinit()
			this.getlist()
		},
		onPullDownRefresh() {
			this.vueinit()
			this.getlist(function() {
				uni.stopPullDownRefresh()
			})
		},
		onReachBottom() {
			console.log("上拉加载了")
		},
		methods: {
			preview(url, idx) { //预览图片
				uni.previewImage({
					current: idx,
					urls: url,
					success: function(res) {
						console.log(res, '预览')
					}
				})
			},
			getlocation() { //获取当前位置
				let that = this
				// #ifdef MP-WEIXIN || APP-PLUS
				that.$until.chooseLocation(function(res) {
					that.shipping_address = res.address
					that.longitude = res.longitude
					that.latitude = res.latitude
					that.storelist = []
					that.getlist()
				});
				// #endif
			},
			gostoredetail(farmid) { //跳转店铺详情
				uni.navigateTo({
					url: "../merchantdetails/merchantdetails?id=" + farmid
				})
			},
			getlist(fun) { //店铺列表
				let data = {
					type: this.listtype,
					p: this.pages,
					longitude: this.longitude,
					latitude: this.latitude
				}
				this.loadmore = 'loading'
				mineApi.farm_list(data)
					.then(res => {
						if (this.pages <= 1) {
							this.storelist = res.data;
						} else {
							res.data.forEach(ele => {
								this.storelist.push(ele)
							})
						}
						this.loadmore = 'nomore'
						if (res.data == '') {
							this.pages--
						}
						if (fun) {
							fun();
						}
					})
					.catch(error => {})
			},
			//初始化方法
			vueinit() {
				let that = this
				uni.getSystemInfo({
					success: function(res) {
						that.swierheight = res.windowWidth * 0.9 * 0.65 * 2
					}
				})
			},
			// tabs通知swiper切换并更改数据
			tabsChange(e) {
				this.storelist = []
				this.pages = 1
				this.swiperCurrent = e.index
				this.listtype = e.index + 1
				this.getlist()
			},
			// swiper-item左右移动，通知tabs的滑块跟随移动
			transition(e) {
				let dx = e.detail.dx
				// this.$refs.uTabs.setDx(dx)
			},
			// 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
			// swiper滑动结束，分别设置tabs和swiper的状态
			animationfinish(e) {
				let current = e.detail.current
				// this.$refs.uTabs.setFinishCurrent(current)
				this.swiperCurrent = current
				this.current = current
			},
			//展开底部，可以查看全部信息
			expandbottom() {
				this.pages++
				this.getlist()
			},
			//阻止用户手动滑动
			stopTouchMove() {
				return true
			}
		}
	}
</script>
<style scoped lang="scss">
	.all_box {
		width: auto;
		background-color: #f5f9fc;
		min-height: 100vh;

		.navbar {
			background-color: #fff;
			width: 100%;
			z-index: 99;
		}

		.swiper_item {
			height: calc(100vh - 44px);

			.chooseaddress {
				box-shadow: 2px 4px 12px rgba(0, 0, 0, 0.08);
				background-color: #ffffff;
				padding: 20rpx 10rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin: 15rpx 20rpx;
				margin-top: 20rpx;
				border-radius: 10rpx;

				.chooseaddress_p1 {
					display: flex;
					align-items: center;

					.chdress_p1txt {
						color: #999;
						font-size: 24rpx;
					}
				}
			}

			.merchant_box {
				padding: 20rpx;
				margin: 25rpx 20rpx;
				border-radius: 10rpx;
				box-shadow: 2px 4px 12px rgba(0, 0, 0, 0.08);
				background-color: #ffffff;

				.text_area {
					.shop_name {
						display: flex;
						justify-content: space-between;
						align-items: center;

						.shop_thumbnail {
							width: 90rpx;
							height: 90rpx;
							border-radius: 50%;
						}

						.right_shop_mess {
							width: calc(100% - 90rpx);
                             padding-left: 15rpx;
							.shop_line {
								display: flex;
								justify-content: space-between;
								align-items: center;

								.shop_line_p1 {
									color: #1f1f1f;
									font-size: 32rpx;
									padding-left: 3rpx;
									font-weight: 300;
								}

								.shop_line_p2 {
									width: 100%;
									display: flex;
									align-items: center;

									.address {
										color: #333;
										font-size: 26rpx;
										overflow: hidden;
										text-overflow: ellipsis;
										white-space: nowrap;
									}
								}
							}

							.shop_line_fl {
								display: flex;
								justify-content: flex-start;
								align-items: center;
								margin: 5rpx 0;
							}

							.right_shop_mess_p2 {
								border: 1rpx solid #cccccc;
								color: #666;
								font-size: 24rpx;
								padding: 12rpx 20rpx;
								border-radius: 40rpx;
							}
						}
					}
				}

				.display_diagram {
					width: 100%;
					white-space: nowrap;
					margin: 10rpx 0;

					.display_diagram_item {
						width: 200rpx;
						height: 200rpx;
						margin: 0 15rpx 0 0;
						border-radius: 7.5%;
					}
				}
			}

			.scroll_bar {
				height: 100%;
			}
		}
	}

	.shop_one {
		display: flex;
		justify-content: space-evenly;
		padding: 30rpx 0rpx;

		.shop_one_1 {
			display: flex;
			flex-direction: column;
			align-items: center;

			.view1 {
				font-size: 36rpx;
				margin-bottom: 10rpx;

			}

			.view2 {
				font-size: 24rpx;
				color: #999999;
			}
		}



	}
</style>
