<template>
	<view >
		<loadlogo v-if="!loadlogo" />
		<view class="businessCenter" v-if="loadlogo">
			
			<!-- 飞起来的头部 -->
			<view class="fixedBox dis-flex">
				<!-- 搜索 -->
				<view class="f-24">
					<view class="bankindex" @click="goindex">
						<text class="iconfont icon-pullleft" style="font-size: 28upx;padding-right: 10upx;"></text>首页
					</view>
				</view>
				<view class="search">
					<view class="dis-il-block iconfont icon-search f-28 searchIcon" style="color: #999999;"></view>
					<input
						class="uni-input"
						confirm-type="search"
						v-model="inputValue"
						placeholder-style="color:#999999;font-size:26upx;background-color: #ffffff;"
						placeholder="请输入商铺名称"
						@confirm="search"
					/>
					<!-- <view @click="search" class="f-30 dis-il-block t-c searchs">搜索</view> -->
				</view>
				<!-- 下拉筛选框 -->
			</view>
			<!-- <view class="flxedBoxTwo">
				<view class="m-top30" v-if="true"><ChooseLits :list="list" :arr="arr" @chooseLike="chooseLike"></ChooseLits></view>
			</view> -->
			<!-- 列表分 -->
			<view class="storeList" style="padding-top: 100upx;">
				<!-- 商铺配图 -->
				<view class="swiperBox" :style="{width: listimgstyle.width - 30 + 'px',height: listimgstyle.height - 30 + 'px'}" v-if="swiperList.length !== 0">
					<swiper class="swiper" indicator-color="rgba(255,255,255,.4)" indicator-active-color="rgba(255,255,255,.85)" :indicator-dots="true" :autoplay="true" :interval="interval" :duration="duration">
						<swiper-item v-for="(item, index) in swiperList" :key="index" style="border-radius: 15upx;">
							<image :src="item.thumb" style="width: 100%; height: 100%;"></image>
						</swiper-item>
					</swiper>
				</view>
				<filtertab :requestType="'5'" :isPageScroll="'1'" @selectAreaid="selectAreaid" @selectClassid="selectClassid"
				 @selectClassTwoid="selectClassTwoid" @selectOrders="selectOrders" :cate_one="cate_one" :cate_two="cate_two" :title="title"></filtertab>
				<view  v-if="strodatas.community">
					<view class="diyPages-community dis-flex flex-x-between flex-y-center" style="margin-bottom: 4upx;background-color: #FFFFFF;margin-top: 20upx;border-radius: 10upx;">
						<view class="community-user dis-flex flex-y-center flex-box ">
							<image :src="strodatas.community.communimg" class="community-user-img" style="width: 80upx;height: 80upx;"></image>
							<view class="community-user-info flex-box">
								<view class="community-user-name col-0 f-28">{{ strodatas.community.commundesc }}</view>
								<view class="community-user-des f-24 col-9 onelist-hidden">{{ strodatas.community.communname }}</view>
							</view>
						</view>
						<view class="community-btn">
							<button class="community-add f-24" style="color: #FFFFFF;background-color: #28BC17;" @click="showCommunity = true" >添加社群</button>
						</view>
					</view>
					<!-- 社群弹窗 -->
					<popup-view :show="showCommunity" type="center" @clickmask="showCommunity = false">
						<view class="community-detail b-f t-c">
							<view class="community-header f-w f-36 p-r col-f">
								<text class="community-header-text p-r">{{ strodatas.community.communname }}</text>
							</view>
							<!-- #ifdef H5 -->
							<view class="community-body">
								<image :src="strodatas.community.communqrcode" class="community-qrcodeimg"></image>
								<view class="community-toreply f-26 col-3">长按识别二维码</view>
							</view>
							<!-- #endif -->
							<!-- #ifndef H5 -->
							<view class="community-body f-26 col-3">
								有任何疑问，点击“
								<text class="col-m">去回复</text>
								”发送“
								<text class="col-m">{{ strodatas.community.systel }}</text>
								”,即可添加{{ strodatas.community.communname }}
							</view>
							<!-- #endif -->
							<view class="community-phone dis-flex flex-y-center flex-x-between" v-if="!!strodatas.community.systel">
								<view class="community-number dis-flex flex-y-center">
									<image :src="imgfixUrls + 'goods/community.png'" class="community-number-icon" style="width: 80upx;height: 80upx;"></image>
									<view class="f-24 col-3">{{ strodatas.community.systel }}</view>
								</view>
								<view class="community-bdial f-24" @click="callPhone(strodatas.community.systel)">拨号</view>
							</view>
							<button class="community-reply f-24 col-f" open-type="contact" v-if="clienType === '3'">去回复</button>
						</view>
					</popup-view>
				</view>
				<view class="dining dis-flex" v-for="(item, index) in diningList" :key="index" @click="selectDining(item)">
					<view style="flex: 3;position: relative;">
						<view class="dis-il-block t-c f-30" v-if="item.is_business == 0" style="position: absolute;bottom: 10upx;left: 0;width: 170upx;color: #FFFFFF;z-index: 99;background-color: rgba(0,0,0,0.4);">
							休息中
						</view>
						<image :src="item.logo" mode="aspectFill" style="width: 170upx; height: 170upx;border-radius: 15upx;"></image></view>
					<view style="flex: 7;padding-left: 20upx;">
						<view class="diningName f-30">{{ item.storename }}</view>
						<view class="dis-flex">
							<view  style="flex: 8;">
								<tui-rate :current="item.score" :disabled="true" :score="1" active="#F5D145"></tui-rate>
								<view class="f-24 dis-il-block" style="color: #999999;height: 46upx;line-height: 44upx;">{{ item.score }}分</view>
							</view>
							<view class="f-24" style="flex: 2;text-align: right;color: #999999;height: 46upx;line-height: 46upx;">{{ item.distance }}</view>
						</view>
						<view style="padding-bottom: 10upx;">
							<text class="f-24" style="padding-right: 10upx;color: #999999;" v-if="item.deliverymoney !== '0.00'">配送费</text>
							<text class="f-24" v-if="item.deliverymoney !== '0.00'">¥{{ item.deliverymoney }}</text>
							<text class="f-24" style="padding:0 10upx 0 20upx;color: #999999;" v-if="item.deliverymoney !== '0.00'">已售</text>
							<text class="f-24" style="padding:0 10upx 0 0upx;color: #999999;" v-else>已售</text>
							<text class="f-24">{{ item.salenum }}</text>
						</view>
						<view class="f-24" style="color: #999999;padding-bottom: 10upx;">
							<!-- <view  style="padding: 5upx 10upx;">
							{{tagItem}}
						</view> -->
							<text>{{ item.catename }}</text>
						</view>
					</view>
				</view>
			</view>
			<TabBars :tabBarAct="0" :pageType="''" />
			<shopPing :shopNum="shopNum" ref="shopPing"></shopPing>
			<far-bottom></far-bottom>
			<!-- 下拉刷新 -->
			<load-more :isMore="isMore"></load-more>
		</view>
	</view>
</template>

<script>
import App from '@/common/js/app.js';
import tuiRate from '@/components/template/rate.vue';
import loadMore from '@/components/template/loadmore.vue';
import Loadlogo from '@/components/template/loadlogo.vue';
import shopPing from '@/pages/subPages2/tamplate/shopPing.vue';
import shopEnter from '@/components/page/pageComponents/shopEnter.vue';
import PopupView from '@/components/template/PopManager.vue';
import filtertab from '@/components/template/filtertab.vue';
import TabBars from '@/components/template/tabBar';
export default {
	components: {
		tuiRate,
		Loadlogo,
		loadMore,
		shopPing,
		shopEnter,
		PopupView,
		filtertab,
		TabBars
	},
	onLoad() {
		this.HomeType = true;
		this.clienType = App.getClientType();
		this.lnglat = uni.getStorageSync('agencyData');
		this.listimgstyle = uni.getStorageSync('listimgstyle');
		this.getCommercialTenantList();
	},
	onShow() {
		this.pages = 1;
		this.getCommercialTenantList();
	},
	data() {
		return {
			loadlogo: false,
			isMore: true,
			HomeType: false,
			showCommunity: false,
			//餐厅商铺列表
			diningList: [],
			// 轮播图
			swiperList: [],
			duration: 500, //滑动时间
			interval: 2000, //间隔时间
			list: ['商家类别', '全城', '全部筛选'], //筛选条件
			//筛选详细条件
			arr: [
				[],
				[],
				[]
			],
			i2: [0, 0, 0], //筛选栏索引
			inputValue: '',
			strodatas: null,
			pages: 1,
			pullUpOn: true,
			count: 0,
			shopNum: 0,
			lnglat:{},
			clienType:'',
			cate_one:'',
			cate_two:'',
			two_id:'',
			title:'',
			orderid:'',
			onecate_one:'',
			twocate_two:'',
			region_id:'',
			listimgstyle:{}
		};
	},
	computed:{
		curLoction(){
			return uni.getStorageSync('curLoction')
		}
	},
	methods: {
		goindex(){
			App.navigationTo({
				url: "pages/mainPages/index/index"
			})
		},
		// handleLaunchFn(e){
		// 				console.log('跳小程序吗还是不呢')
		// 			},
		// handleErrorFn(e){
		// 				console.log('跳小程序吗')
		// 			},
		// getInfoList(){
			
		// },
		selectOrders(data) {
			console.log('1分类');
			let _this = this;
			console.info('selectOrders', data)
			_this.two_id = 0;
			_this.pages = 1;
			_this.orderid = data.val;
			_this.getCommercialTenantList();
			// _this.getInfoList();
		},
		selectClassTwoid(data) {
			console.log('2分类');
			let _this = this;
			console.info('selectClassTwoid', data)
			_this.two_id = data.cate_two;
			_this.cate_two = '';
			_this.title = '';
			_this.pages = 1;
			_this.cate_two = data.cate_two;
			// _this.getInfoList();
			_this.getCommercialTenantList();
		
		},
		selectClassid(data) {
			console.log('3分类');
			let _this = this;
			console.info('selectClassid', data)
			_this.id = data.cate_one;
			_this.cate_one = '';
			_this.cate_two = '';
			_this.title = '';
			_this.two_id = 0;
			_this.pages = 1;
			_this.cate_one = data.cate_one;
			_this.getCommercialTenantList();
			// _this.getInfoList();
		
		},
		selectAreaid(data) {
			console.log('4分类');
			let _this = this;
			console.info('selectAreaid', data)
			// _this.region_id = data.id;
			_this.two_id = 0;
			_this.pages = 1;
			_this.cate_one = '';
			_this.cate_two = '';
			_this.region_id = data.id;
			_this.getCommercialTenantList();
			// _this.getInfoList();
		},
		callPhone(phone) {
			uni.makePhoneCall({
				phoneNumber: phone
			});
		},
		communityShow() {
			this.showCommunity = !this.showCommunity;
		},
		search() {
			this.getCommercialTenantList(this.inputValue);
		},
		// 获取初始化数据
		getCommercialTenantLists(name) {
			let data={
				name:this.inputValue || '',
				page:this.pages,
				lng:this.curLoction.longitude,
				lat:this.curLoction.latitude
			};
			App._post_form(
				`&p=citydelivery&do=storeList`,
				data,
				res => {
					this.swiperList = res.data.advs;
					this.strodatas = res.data;
					this.loadlogo = true;
					this.count = res.data.total;
					this.shopNum = Number(res.data.cartnum);
					console.log(this.$refs.shopPing);
				},
				false,
				() => {}
			);
		},
		// 获取初始化数据
		getCommercialTenantList(name) {
			let data={
				name:this.inputValue || '',
				page:this.pages,
				lng:this.curLoction.longitude || '',
				lat:this.curLoction.latitude || '',
				is_init:(this.pages == 1)?1:0,
				order:this.orderid || '',
				cate_one:this.cate_one || '',
				cate_two:this.cate_two || '',
				region_id:this.region_id || ''
			};
			App._post_form(
				`&p=citydelivery&do=storeList`,
				data,
				res => {
					this.setData({
						diningList: res.data.list
					});
					this.swiperList = res.data.advs;
					this.strodatas = res.data;
					this.loadlogo = true;
					this.count = res.data.total;
					this.shopNum = Number(res.data.cartnum);
					console.log(this.$refs.shopPing);
				},
				false,
				() => {}
			);
		},
		chooseLike(i1) {
			if (this.i2[i1[0]] != i1[1]) {
				this.i2[i1[0]] = i1[1];
			}
		},
		// 点击商铺
		selectDining(item) {
			App.navigationTo({
				url: 'pages/subPages2/businessCenter/foodList/foodList?id=' + item.id + '&storeid=' + item.storeid
			});
		}
	},
	//页面相关事件处理函数--监听用户下拉动作
	onPullDownRefresh: function() {
		//延时为了看效果
		// setTimeout(() => {
		// this.houseDataList = this.newHouseDataList;
		// this.pageIndex = 1;
		// this.pullUpOn = true;
		// this.loadding = false;

		// this.uni.toast("刷新成功");
		this.pages = 1;
		let data={
			name: '',
			page:1,
			lng:this.curLoction.longitude || '',
			lat:this.curLoction.latitude || '',
			is_init:(this.pages == 1)?1:0,
			order:'',
			cate_one:'',
			cate_two:'',
			region_id:''
		};
		App._post_form(
			`&p=citydelivery&do=storeList`,
			data,
			res => {
				this.setData({
					diningList: res.data.list
				});
				this.swiperList = res.data.advs;
				this.strodatas = res.data;
				this.count = res.data.total;
				uni.stopPullDownRefresh();
				uni.showToast({
					icon: 'none',
					title: '刷新成功'
				});
			},
			false,
			() => {}
		);
		// }, 200);
	},

	// 页面上拉触底事件的处理函数
	onReachBottom: function() {
		this.isMore = false;
		if (this.pages == this.count) {
			this.isMore = true;
		} else {
			this.pages++;
			let data={
				name:this.inputValue || '',
				page:this.pages,
				lng:this.curLoction.longitude || '',
				lat:this.curLoction.latitude || '',
				is_init:(this.pages == 1)?1:0,
				order:this.orderid || '',
				cate_one:this.cate_one || '',
				cate_two:this.cate_two || '',
				region_id:this.region_id || ''
			};
			App._post_form(
				`&p=citydelivery&do=storeList`,
				data,
				res => {
					this.diningList = this.diningList.concat(res.data.list);
					this.isMore = true;
				},
				false,
				() => {}
			);
		}
	}
};
</script>

<style>
@import '../../../common/css/diyPages.css';
@import '../../../common/css/old_diyPages';
@import '../../../pages/subPages/goods/index.css';
page {
	background-color: #f7f7f7;
}
</style>
<style lang="scss" scoped>
	.bankindex{
		// position: absolute;
		// left: 3%;
		// top: 3%;
		// background-color: rgba(254, 213, 95,1);
		box-shadow: 0 5px 15px rgba(255,255,255,0.5);
		padding: 10upx 20upx;
		color: #333333;
		font-size: 24upx;
		line-height: 54upx;
		// border-radius: 60upx;
	}
.dining {
	padding: 10upx;
	background-color: #ffffff;
	margin: 20upx 0;
	border-radius: 10upx;
}
.uni-input{
	font-size: 30upx;
	background-color: #FFFFFF;
	text-align: center;
	 /deep/.uni-input-placeholder{
		top: 4upx!important;
	}
}
.diningName {
	width: 400upx;
	overflow: hidden; /*超出部分隐藏*/
	white-space: nowrap; /*不换行*/
	text-overflow: ellipsis; /*超出部分文字以...显示*/
	font-weight: 600;
}
.fixedBox {
	position: fixed;
	top: 0;
	left: 0;
	width: 92%;
	padding: 10upx 30upx;
	z-index: 9999;
	background-color: #f6f6f6;
}
.flxedBoxTwo {
	position: fixed;
	width: 100%;
	top: 10%;
	z-index: 9999;
	left: 0;
	background-color: #ffffff;
}
.search {
	background-color: #ffffff;
	color: #333333;
	border-radius: 60upx;
	width: 65%;
	position: relative;
	padding: 15upx 0upx 13upx 100upx;
}
.searchIcon {
	position: absolute;
	left: 5%;
	line-height: 50upx;
}
.uni-input {
	width: 80%;
	color: #000000;
	background-color: #ffffff;
	display: inline-block;
}
.businessCenter {
	background-color: #f6f6f6;
}
.storeList {
	padding: 200upx 30upx 30upx;
}
.swiper {
	height: 100%;
	width: 100%;
}
.swiperBox {
	// margin-top: 50upx;
}
.searchs {
	height: 100%;
	width: 150upx;
	background-color: #ff4444;
	color: #ffffff;
	position: absolute;
	right: 0;
	top: 0;
	z-index: 99;
	border-radius: 0 10upx 10upx 0;
	line-height: 80upx;
}
</style>
