<template>
	<view class="pages-shopstore" v-if="isLoad">
		<block v-if="configInfo.plugAuth.store">
			
			<fixed>
				<search @input="toSearch" type="input" :padding="30" :radius="0" backgroundColor="#fff"
					placeholder="请输入门店名称">
				</search>
			</fixed>

			<view @tap.stop="goDetail(index)" class="list-item flex-center pd-lg mt-md ml-md mr-md fill-base radius-16"
				v-for="(item,index) in list.data" :key="index">
				<!-- #ifdef H5 -->
				<view class="item-img radius-16">
					<view class="h5-image item-img radius-16" :style="{ backgroundImage : `url('${item.cover}')`}">
					</view>
				</view>
				<!-- #endif -->
				<!-- #ifndef H5 -->
				<image mode="aspectFill" class="item-img radius-16" :src="item.cover">
				</image>
				<!-- #endif -->
				<view class="flex-1 ml-md max-510">
					<view class="flex-y-center f-title c-title">
						<view class="text-bold max-380 ellipsis">{{item.title}}</view>
						<view @tap.stop="toPreviewImage(index)" class="store-status-btn flex-center ml-sm f-icontext"
							:style="{color:item.work_status==1?primaryColor:'#888',borderColor:item.work_status==1?primaryColor:'#888'}">
							{{item.work_status==1?'营业中':'休息中'}}
						</view>
					</view>
					<view class="flex-between f-icontext mt-sm">
						<view class="icon-item flex-y-center c-caption">
							<view class="flex-y-center mr-lg"><i class="iconfont iconpingfen1 icon-font-color"></i>
								<view class="star-text">{{item.star}}</view>
							</view>
							<view class="flex-y-center"><i
									class="iconfont iconyingyeshijian"></i>{{item.start_time && item.end_time?`${item.start_time} - ${item.end_time}`:'暂未设置'}}
							</view>
						</view>
						<view style="color: #E67D4B;"> {{item.total_num}}+次服务</view>
					</view>
					<view class="flex-between f-icontext mt-md">
						<view class="rate-info flex-center c-base rel" :style="{color:primaryColor}">
							<view class="bg abs" :style="{background:primaryColor}"></view>
							<view class="mr-sm">好评率</view>{{item.positive_rate}}% <view class="ml-md mr-sm">接单率</view>
							{{item.order_rate}}%
						</view>
						<view style="color: #636363;">{{item.distance}}</view>
					</view>
				</view>
			</view>



			<load-more :noMore="list.current_page>=list.last_page&&list.data.length>0" :loading="loading"
				v-if="loading">
			</load-more>
			<abnor v-if="!loading&&list.data.length<=0&&list.current_page==1"></abnor>


		</block>
		<block v-else>
			<abnor :tip="[{ text: '当前页面没有权限，请点击导航栏切换页面', color: 0 }]"
				image="https://lbqny.migugu.com/admin/anmo/technician/no_data.png"></abnor>
		</block>


		<view class="space-footer"></view>
		<view :style="{height: `${configInfo.tabbarHeight}px`}"></view>
		<tabbar :cur="6"></tabbar>

		<!-- #ifdef APP-PLUS -->
		<login-info></login-info>
		<!-- #endif -->
	</view>
</template>

<script>
	import {
		mapState,
		mapActions,
		mapMutations
	} from "vuex"
	import siteInfo from '@/siteinfo.js';
	import tabbar from "@/components/tabbar.vue"
	export default {
		components: {
			tabbar
		},
		data() {
			return {
				isLoad: false,
				options: {},
				loading: true,
				lockTap: false
			}
		},
		computed: mapState({
			pageActive: state => state.shopstore.pageActive,
			param: state => state.shopstore.param,
			list: state => state.shopstore.list,
			primaryColor: state => state.config.configInfo.primaryColor,
			subColor: state => state.config.configInfo.subColor,
			configInfo: state => state.config.configInfo,
			autograph: state => state.user.autograph,
			userInfo: state => state.user.userInfo,
			location: state => state.user.location,
			isGzhLogin: state => state.user.isGzhLogin,
		}),
		async onLoad(options) {
			this.$util.showLoading()
			options = await this.updateCommonOptions(options)
			this.options = options
			// #ifndef H5
			this.$util.showLoading()
			// #endif
			await this.initIndex()
			this.updateShopstoreItem({
				key: 'pageActive',
				val: true
			})
		},
		async onShow() {
			// #ifdef H5
			if (this.$jweixin.isWechat()) {
				await this.$jweixin.initJssdk();
				this.toAppShare()
			}
			// #endif
		},
		onPullDownRefresh() {
			// #ifndef APP-PLUS
			uni.showNavigationBarLoading()
			// #endif
			this.initRefresh();
			uni.stopPullDownRefresh()
		},
		onReachBottom() {
			if (this.list.current_page >= this.list.last_page || this.loading) return;
			this.param.page = this.param.page + 1;
			this.loading = true;
			this.getList();
		},
		onShareAppMessage(e) {
			let {
				id: pid = 0
			} = this.userInfo
			let path = `/pages/shopstore?pid=${pid}`
			this.$util.log(path)
			return {
				title: '',
				imageUrl: '',
				path,
			}
		},
		methods: {
			...mapActions(['getConfigInfo', 'getUserInfo', 'updateCommonOptions',
				'getShopstoreList'
			]),
			...mapMutations(['updateUserItem', 'updateShopstoreItem']),
			async initIndex(refresh = false) {
				let {
					pid = 0
				} = this.options

				if (!refresh && this.pageActive && !pid) {
					this.isLoad = true
					this.loading = false
					this.$util.hideAll()
					return
				}

				let {
					isGzhLogin
				} = this
				let {
					id: uid = 0
				} = this.userInfo
				if (pid && !uid) {
					// #ifdef H5
					if (isGzhLogin) {
						setTimeout(() => {
							this.getUserInfo()
						}, 1000)
					} else {
						this.getUserInfo()
					}
					// #endif
					// #ifndef H5
					await this.getUserInfo()
					// #endif 
				}

				if (!this.configInfo.id || refresh || (this.configInfo.id && !this.configInfo.plugAuth.hasOwnProperty(
						'store'))) {
					await this.getConfigInfo()
				}
				this.$util.setNavigationBarColor({
					bg: this.primaryColor
				})
				
				let {
					store = false
				} = this.configInfo.plugAuth
				if (!store) {
					this.isLoad = true
					this.loading = false
					this.$util.hideAll()
					return
				}
				
				await this.getList(1)
			},
			async initRefresh() {
				await this.initIndex(true)
			},
			toAppShare() {
				let {
					id: pid = 0
				} = this.userInfo
				let title = '动态'
				let {
					siteroot
				} = siteInfo
				let url = siteroot.split('/index.php')[0]
				let href = `${url}/h5/#/pages/shopstore?pid=${pid}`
				let imageUrl = ''
				this.$jweixin.wxReady(() => {
					this.$jweixin.showOptionMenu()
					this.$jweixin.shareAppMessage(title, '', href, imageUrl)
					this.$jweixin.shareTimelineMessage(title, href, imageUrl)
				})
			},
			toSearch(val) {
				this.param.title = val
				this.getList(1)
			},
			async getList(flag) {
				if (flag) {
					this.param.page = 1
					this.list.data = []
				}
				let {
					location
				} = this
				if (!location.lat) {
					// #ifdef H5
					if (this.$jweixin.isWechat()) {
						this.$util.showLoading()
						// await this.$jweixin.initJssdk();
						await this.$jweixin.wxReady2();
						let {
							latitude: lat = 0,
							longitude: lng = 0
						} = await this.$jweixin.getWxLocation()
						location = {
							lng,
							lat,
							address: '定位失败',
							province: '',
							city: '',
							district: ''
						}
						if (lat && lng) {
							let key = `${lat},${lng}`
							let data = await this.$api.base.getMapInfo({
								location: key
							})
							let {
								status,
								result
							} = JSON.parse(data)
							if (status == 0) {
								let {
									address,
									address_component
								} = result
								let {
									province,
									city,
									district
								} = address_component
								location = {
									lng,
									lat,
									address,
									province,
									city,
									district
								}
							}
						}
					}
					// #endif
					// #ifndef H5
					location = await this.$util.getBmapLocation()
					// #endif
					this.updateUserItem({
						key: 'location',
						val: location
					})
				}
				let {
					lat = 0, lng = 0
				} = location

				let {
					list: oldList,
				} = this
				let param = Object.assign({}, this.param, {
					lat,
					lng
				});
				await this.getShopstoreList(param)
				this.isLoad = true
				this.loading = false
				this.$util.hideAll()
			},
			goDetail(index) {
				let {
					id
				} = this.list.data[index]
				this.$util.goUrl({
					url: `/shopstore/pages/detail?id=${id}`
				})
			}
		}
	}
</script>


<style lang="scss">
	.pages-shopstore {
		.list-item {
			.item-img {
				width: 160rpx;
				height: 143rpx;
			}

			.store-status-btn {
				width: 76rpx;
				height: 28rpx;
				border-radius: 2rpx;
				border: 1rpx solid #888;
				transform: rotateZ(360deg);
			}

			.iconpingfen1 {
				background-image: -webkit-linear-gradient(270deg, #FAD961 0%, #F76B1C 100%);
			}

			.icon-item {
				color: #4D4D4D;

				.iconfont {
					font-size: 24rpx;
					margin-right: 6rpx;
				}
			}

			.star-text {
				color: #FF9519;
			}

			.rate-info {
				height: 30rpx;
				border-radius: 4rpx;
				padding: 1rpx 12rpx 0 12rpx;

				.bg {
					opacity: 0.1;
					border-radius: 4rpx;
					top: 0;
					left: 0;
					right: 0;
					bottom: 0;
					z-index: 1;
				}
			}
		}
	}
</style>