<template>
	<!-- 商户列表 -->
	<view>
		<loadlogo v-if="!loadlogo" />
		<view class="content" v-if="loadlogo">
			<far-bottom></far-bottom>
			<filtertab @selectAreaid="selectAreaid" @selectClassid="selectClassid" @selectClassTwoid="selectClassTwoid"
			 @selectOrders="selectOrders" :requestType="'2'" :cate_one="cate_one" :cate_two="cate_two" :title="title" @getOrderId="shopInit"></filtertab>
			<view class="shop b-color-f8">
				<block v-if="!!shopInfoList && shopInfoList.length>0">
					<view class="shangjia">
						<view class="shangjia-i" :class="{shangjiaISty: item2.goods.length == 0}" v-for="(item2, key2) in shopInfoList"
						 :key="key2">
							<view class="a shangjia-i-t" @click="navigateTo(item2.shop_url)">
								<view class="shangjia-i-l">
									<image class="image" :src="item2.logo" mode="aspectFill"></image>
								</view>
								<view class="shangjia-i-r">
									<view class="shangjia-i-r-d">
										<view class="dis-flex flex-y-center flex-x-between">
											<view class="shop3-title-width shangjia-i-r-t1 over-omit onelist-hidden">{{ item2.storename }}</view>
											<view class="store-containerIcon dis-flex flex-y-center">
												<image :src="imgfixUrls + 'homePage/home_logo2.png'" class="image30" v-if="item2['attestation']['attestation'] == 2" />
												<!-- <img src="@imgfixUrls + 'merchant/qyrz.png" /> -->
												<image :src="imgfixUrls + 'homePage/home_logo3.png'" class="image30" v-if="item2['attestation']['bondflag'] == 1" />
												<image :src="imgfixUrls + 'diypage/720icon.png'" mode="" class="m-right10" v-if="item2.panorama===1"></image>
												<image :src="imgfixUrls + 'diypage/videoicon.png'" mode="" v-if="item2.videourl===1"></image>
											</view>
										</view>
										<view class="shangjia-i-r-t2 over-omit dis-flex flex-x-between flex-y-center">
											<view class="dis-flex flex-y-center">
												<view class="shangjia-i-r-t2-icon">
													<view class="star star-dark">
														<view class="i icon iconfont icon-shoucangxiao" v-for="(item3, key3) in 5" :key="key3"></view>
													</view>
													<view class="star star-light">
														<view class="star-width" :style="'width:'+(item2.score / 5) * 100+'%;'">
															<view class="i icon iconfont icon-shoucangxiao" v-for="(item3, key3) in 5" :key="key3"></view>
														</view>
													</view>
												</view>
												<view class="f-28 col-6 star-grade">{{item2.score}}分</view>
											</view>
											<view class="shop3-distance f-24 col-6" v-if="!!item2.distance">{{item2.distance}}</view>
										</view>
										<view class="shangjia-i-r-t3 over-omit">
											<view class="p" v-html="item2.storehours"></view>
										</view>
										<view class="shangjia-i-r-t4 over-omit">
											<view v-for="(item3,index3) in item2.tags" class="tags_view">{{item3}}</view>
										</view>
									</view>
								</view>
							</view>
							<view class="shangjia-i-b" v-if="((shopFold && shopFoldIndex == key2) || (shopFoldIndex !== key2)) && item2.goods.length > 0">
								<view class="shangjia-i-b-t1" v-if="item2.goods.length <= 2">
									<view class="shangjia-i-b-i" v-for="(tag, key3) in item2.goods" :key="key3" v-if="key3 == 0">
										<view class="em" :class="tag.css">{{ tag.tag }}</view>
										<view class="span">{{ tag.name }}</view>
									</view>
								</view>
								<view class="shangjia-i-b-t1" @click="shangjiaFold(key2)" v-if="item2.goods.length > 2">
									<view class="i icon iconfont icon-unfold"></view>
									<view class="shangjia-i-b-i" v-for="(tag, key3) in item2.goods" :key="key3" v-if="key3 == 0">
										<view class="em" :class="tag.css">{{ tag.tag }}</view>
										<view class="span">{{ tag.name }}</view>
									</view>
								</view>
								<view class="shangjia-i-b-i" v-for="(tag, key3) in item2.goods" :key="key3" v-if="item2.goods.length == 2 && key3 == 1">
									<view class="em" :class="tag.css">{{ tag.tag }}</view>
									<view class="span">{{ tag.name }}</view>
								</view>
								<view class="shangjia-i-b-t2" v-if="item2.goods.length > 2">
									<view class="em" :class="tag.css" v-for="(tag, key3) in item2.goods" :key="key3" v-if="key3 > 0">{{ tag.tag }}</view>
								</view>
							</view>
							<view class="shangjia-i-b" v-if="!shopFold && shopFoldIndex == key2 &&  item2.goods.length > 2">
								<view class="shangjia-i-b-t1" @click="shangjiaUpFold(key2)">
									<view class="i icon iconfont icon-fold"></view>
									<view class="shangjia-i-b-i" v-for="(tag, key3) in item2.goods" :key="key3">
										<view class="em" :class="tag.css">{{ tag.tag }}</view>
										<view class="span">{{ tag.name }}</view>
									</view>
								</view>
							</view>
						</view>
						<load-more :isMore="loadingMore"></load-more>
					</view>
				</block>
				<block v-else>
					<none-mores></none-mores>
				</block>
			</view>
		</view>
		<GoTopBtn :page-scroll="pageScroll"></GoTopBtn>
	</view>
</template>

<script>
	import App from "@/common/js/app.js"
	import Loadlogo from '@/components/template/loadlogo'
	import loadMore from '@/components/template/loadmore.vue'
	import GoTopBtn from "@/components/template/GoTopBtn.vue"
	import listMixin from "@/common/js/pageListMixin.js"
	import noneMores from '@/components/template/nonemores.vue'
	// #ifdef H5
	import wxApi from "@/common/js/wxApi.js"
	// #endif
	import filtertab from "@/components/template/filtertab.vue"
	export default {
		mixins: [listMixin],
		data() {
			return {
				showTabbar: false,
				homeInfoData: {},
				goodsListData: [],
				loadlogo: false, //页面是否加载完成,
				currentType: null,
				current_page: 1,
				order: "",
				cate_one: "",
				cate_two: "",
				region_id: "",
				lat: "",
				lng: "",
				shopInfoList: [],
				pageScroll: 0,
				total: null,
				shopFold: true,
				shopFoldIndex: -1,
				loadingMore: true,
				title:'',
				search:'',
				onPage:true
			}
		},
		watch: {

		},
		components: {
			Loadlogo,
			GoTopBtn,
			loadMore,
			noneMores,
			filtertab
		},
		computed: {
			agencyData() {
				return uni.getStorageSync('agencyData')
			},
			curLoction(){
				return uni.getStorageSync('curLoction')
			}
		},
		onLoad(option) {
			let _this = this;
			_this.setData({
				cate_one: option.cate_one > 0 ? option.cate_one : "",
				cate_two: option.cate_two > 0 ? option.cate_two : "",
				title: option.title? option.title : "",
				search:option.search?option.search:""
			})
			
			console.log(_this.cate_one,_this.cate_two,_this.title)
			_this.shopInit('',option.title,true)
		},
		methods: {
			shopInit(orderid,title,flag) {
				if(this.onPage && !flag) return
				let _this = this;
				// _this.title = title;
				_this.setData({
					orderid
				});
				_this.getShoplist(1, orderid, _this.cate_one, _this.cate_two, _this.agencyData.areaid, _this.curLoction.latitude, _this.curLoction.longitude)
			},
			getShoplist(page = 1, order = "", cate_one = "", cate_two = "", region_id = "", lat = "", lng = "", isPage = false) {
				let _this = this,
					requestData = {
						page,
						order,
						cate_one,
						cate_two,
						region_id,
						lat,
						lng,
						is_total: 1,
						search:_this.search
					};
				App._post_form('&p=store&do=homeList', requestData, res => {
					let storeList = res.data.list;
					if (!!storeList && storeList.length > 0) {
						for (let i = 0; i < storeList.length; i++) {
							let goodsList = [];
							for (let j in storeList[i].goods) {
								let goodsData = storeList[i].goods[j];
								if (goodsData !== '') {

									if (j == 'active') {
										goodsData.css = 'qiang'
										goodsData.tag = '抢'
									} else if (j == 'coupon') {
										goodsData.css = 'hui'
										goodsData.tag = '券'
									} else if (j == 'fightgroup') {
										goodsData.css = 'pin'
										goodsData.tag = '拼'
									} else if (j == 'groupon') {
										goodsData.css = 'tuan'
										goodsData.tag = '团'
									} else if (j == 'halfcard') {
										goodsData.css = 'ka'
										goodsData.tag = '卡'
									} else if (j == 'packages') {
										goodsData.css = 'li'
										goodsData.tag = '礼'
									} else if (j == 'bargain') {
										goodsData.css = 'kan'
										goodsData.tag = '砍'
									}
									goodsList.push(goodsData);
								}
							}
							storeList[i].goods = goodsList;
						}
					}
					if (isPage) {
						if (storeList.length > 0) {
							_this["shopInfoList"].push(...storeList);
						} else {
							_this.loadingMore = true;
						}
					} else {
						_this.setData({
							shopInfoList: storeList,
							loadingMore: storeList.length === 0 || _this.current_page === res.data.total,
							total: res.data.total
						})
					}
				}, false, () => {
					_this.search = '';
					_this.loadlogo = true;
				})
			},
			navigateTo(url) {
				let isHttpUrl = url.indexOf('https') !== -1;
				if (isHttpUrl) {
					location.href = url;
				} else {
					App.navigationTo({
						url: url
					})
				}
			},
			shangjiaFold(key2) {
				this.shopFold = false
				this.shopFoldIndex = key2
			},
			shangjiaUpFold(key2) {
				this.shopFold = true
				this.shopFoldIndex = key2
			},
			selectAreaid(cityItemData) {
				if(this.onPage){
					this.onPage = false;
					return
				}
				let _this = this,
					{
						order,
						cate_one,
						cate_two
					} = _this;
				_this.setData({
					region_id: cityItemData.id,
					current_page: 1,
				})
				_this.getShoplist(1, order, cate_one, cate_two, cityItemData.id, _this.curLoction.latitude, _this.curLoction.longitude);
			},
			selectClassid(classItemData) {
				if(this.onPage) return
				let _this = this,
					{
						order,
						region_id
					} = _this;
				if (classItemData.list.length === 0) {
					_this.getShoplist(1, order, classItemData.cate_one, "", region_id, _this.curLoction.latitude, _this.curLoction.longitude);
					_this.setData({
						current_page: 1,
					})
				}
				_this.setData({
					cate_one: classItemData.cate_one
				});
				// _this.title = '';
			},
			selectClassTwoid(classItemTwoData) {
				if(this.onPage) return
				let _this = this,
					{
						order,
						region_id,
						cate_one
					} = _this;
				_this.getShoplist(1, order, cate_one, classItemTwoData.cate_two, region_id, _this.curLoction.latitude, _this.curLoction.longitude);
				_this.setData({
					cate_two: classItemTwoData.cate_two,
					current_page: 1,
				});
				// _this.title = '';
			},
			selectOrders(ordersItem) {
				if(this.onPage) return
				let _this = this,
					{
						region_id,
						cate_one,
						cate_two
					} = _this;
				_this.getShoplist(1, ordersItem.val, cate_one, cate_two, region_id, _this.curLoction.latitude, _this.curLoction.longitude);
				_this.setData({
					order: ordersItem.val,
					current_page: 1
				})
			}
		},
		mounted() {

		},
		onReachBottom(e) {
			console.log('Bottom')
			let _this = this,
				{
					order,
					cate_one,
					cate_two,
					region_id,
					current_page,
					total
				} = _this;
			if (current_page >= total) {
				_this.loadingMore = true;
				return false;
			}
			_this.getShoplist(++_this.current_page, order, cate_one, cate_two, region_id, _this.curLoction.latitude, _this.curLoction.longitude, true)
		}
	}
</script>

<style lang="scss">
	@import "../../../common/css/old_diyPages";

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