<template>
	<view class="b-page-home">
		<view class="content-top">
			<view class="content-top-banner">
				<image class="img" :src="qnyurl('banner-1.jpg','rx')" mode=""></image>
			</view>
			<!-- 地址/搜索/选择 -->
			<view class="content-top-search">
				<view class="content-top-search-area-search">
					<navigator url="/pages/restaurant/arealist/arealist" hover-class="none">
						<view class="content-top-search-area-search-text">
							<!-- 第一次获取肯定是获取不到的，主要是动态显示用户改变的地址 -->
							{{UserArae1?UserArae1:UserArae2}}
							<view
								style="width: 50rpx;height: 30rpx;display: flex;justify-content: center;align-items: center;">
								<image style="width: 15rpx;height: 12rpx;" class="img" :src="qnyurl('xiala.jpg','rx')">
								</image>
							</view>
						</view>
					</navigator>

					<u-search placeholder="输入门店名称查询" :showAction="false" v-model="keyword" @search="search">
					</u-search>
				</view>
				<!-- 收藏项 -->
				<!-- <view class="content-top-search-tabs">
					<u-tabs @change="e=>{tabsconfig['index'] = e['index']}" :list="tabsconfig['list']"
						:scrollable="tabsconfig['scrollable']" :lineColor="tabsconfig['lineColor']"
						:lineWidth="tabsconfig['lineWidth']"></u-tabs>
				</view> -->
			</view>
		</view>
		
		<!-- 店铺列表 -->
		<!-- 因为骨架屏的颜色和UI设置背景色冲突所以在没有列表元素时先将背景色设置为白色 -->
		<view class="Store-List" :style="{height:`${height}rpx`,'background-color':'#F2F2F2'}">
			<!-- 附近餐厅 -->
			<view v-show="tabsconfig['index'] == 0">
				<scroll-view scroll-y="true" class="scroll-Y" :style="{height:`${height}rpx`,'position': 'relative'}"
					@scrolltolower="scrolltolower">
					<!-- 骨架屏占位元素 -->
						<template v-if="StoreList[0]['list']['length'] > 0">
							<!-- 组件内部会获取到品牌类型,从而显示对应类型的店铺列表样式 -->
							<view style="padding-bottom: 32rpx;" v-for="(item,index) in StoreList[0]['list']">
								<!-- 店铺列表样式 -->
								<b-shop-list-item :item="item" :key="index" @itemclick="this.SETSHOPDETAIL(item);eattypeShow = true">
								</b-shop-list-item>
							</view>
						</template>
						<template v-else>
							<!-- 必须先确保scoll有高度 -->
							<!-- 缺省图 -->
							<view class="default" v-if="Show == 1">
								<img class="img" :src="qnyurl('default.png','rx')" alt="">
								<text>该地区暂无门店信息</text>
							</view>
							<!-- 加载中 -->
							<b-load :show="Show == 2" position="absolute" background="transparent" width="79" height="80" color="#000000"></b-load>
						</template>
						
						<!-- <b-shop-load type="load" width="79" height="74" :show="loading"></b-shop-load> -->
				</scroll-view>
			</view>
		</view>
		<u-modal :show="eattypeShow" title="温馨提示" width="580rpx">
			<template v-slot:default>
				<view class="slot-content">
					<view class="slot-content-Tips">
						瑞幸咖啡点餐为<text class="text1">第三方提供的点餐服务</text>，该服务与瑞幸官方无关，有问题请联系在线客服。
					</view>
					<view class="slot-content-Tips2">
						<view>
							● 优惠点餐，不支持开发票!
						</view>
						<view>
							● 出餐后不支持退款！
						</view>
					</view>
				</view>
			</template>
			<template v-slot:confirmButton>
				<view class="confirmButton" @tap="InforPage">
					我知道了
				</view>
			</template>
		</u-modal>
	</view>
</template>

<script>
	import mixin from '@/static/js/mixin/mixin.js';
	import restaurantmixins from '@/static/js/mixin/restaurantmixins.js';
	// 请求接口
	import {
		restaurantQueryAPI,
		storeCollectionListAPI
	} from '@/request/restaurant/index.js';

	// vuex
	import {
		mapGetters,
		mapMutations
	} from 'vuex';
	export default {
		mixins: [mixin,restaurantmixins],
		name: "b-page-home",
		data() {
			return {
				// 就餐方式
				eattypeShow: false,
				eat_type: 'EAT_IN',
				// 店铺接口数据用于分页
				temporaryData: [],
				// 收藏接口数据用于分页
				CollectiontemporaryData: [],
				// 餐厅列表/收藏列表
				StoreList: [{
						page: 1,
						count: 0,
						list: []
					},
					{
						page: 1,
						count: 0,
						list: []
					},
				],
				// 餐厅列表scroll高度
				height: 0,
				// 搜索值
				keyword: '',
				// 滑动tabs配置参数参数
				tabsconfig: {
					// 当前激活索引
					index: 0,
					scrollable: false,
					// 滑块宽度
					lineWidth: '40',
					// 滑块颜色
					lineColor: "#C63836",
					list: [{
						name: '附近餐厅',
					}, {
						name: '我的关注',
					}]
				},
				// 加载状态
				loading: true,
			};
		},
		computed: {
			tabindex() {
				return this['tabsconfig']['index']
			},
			
			Show(){
				console.log(this['StoreList'][0]['list']['length'],'length');
				console.log(this['loading'],'loading');
				// 显示没地区门店
				if(this['StoreList'][0]['list']['length'] <= 0 && !this['loading'] && this['height'] > 0){
					return 1;
				};
				// 显示正在加载
				if(this['loading'] && this['height'] > 0){
					return 2
				}
			}
			// islist(){
			// 	return this['StoreList'][0]['list']['length'] <= 0;
			// }
		},
		watch: {
			GetCityCode(val) {
				console.log(val, '监听器');
				// 用户自主切换地址时更换列表
				this['StoreList'][0]['list'] = [];
				this.GetList();
			},
			tabindex(val) {
				if (val == 1) {
					console.log(this['StoreList'][1]['list']);
					this['StoreList'][1]['list'] = [];
					this.GetstoreCollectionList();
				}
			}
		},
		mounted() {
			console.log('进入选店组件');
			this.GetList();
			
		},
		methods: {
			

			/**
			 * @搜索
			 * */
			search() {
				if (this['tabsconfig']['index'] == 0) {
					this['StoreList'][0]['page'] = 1;
					this['StoreList'][0]['list'] = [];
					this.GetList();
					return
				}
				this['StoreList'][1]['page'] = 1;
				this['StoreList'][1]['list'] = [];
				this.GetstoreCollectionList();
			},
			/**
			 * @获取餐厅列表
			 * */
			GetList() {
				let self = this;
				this['loading'] = true;
				// 预留足够的时间让DOM渲染完毕
				setTimeout(()=>{
					self.initScrollView({
						el: 'content-top',
					}).then(eres => {
						self['height'] = eres;
						let parameters = {
							brand_id: this['BrandInfor']['brand_id'],
							city_code: this.GetCityCode,
							address: this['keyword'],
						}
						restaurantQueryAPI(parameters).then(res => {
							console.log(res,'ressssssss');
							self['loading'] = false;
							if (res['data']['data']['length'] <= 0) {
								uni.showToast({
									title: '该区域暂无数据',
									icon: 'none'
								});
								return;
							}
							// 后端未按照分页数据格式返回所以前端自行分页
							if (res['data']['data']['length'] > 0) {
								// 赋值总长度
								self['StoreList'][0]['count'] = res['data']['count'];
								// 辅助临时数据
								self['temporaryData'] = res['data']['data'];
								self['StoreList'][0]['page'] += 1;
								// 取出数据
								self.arrObtain('temporaryData', 0);
							} else {
								console.log('没数1');
							}
						}).catch(err=>{
							self['loading'] = false;
						})
					})
				},1000)
			},

			/**
			 * @获取关注冽表
			 * */

			GetstoreCollectionList() {
				let parameters = {
					brand_id: this['BrandInfor']['brand_id'],
					address: this['keyword'],
				}

				storeCollectionListAPI(parameters).then(data => {
					if (data['data']['length'] > 0) {
						// 赋值总长度
						this['StoreList'][1]['count'] = data['data']['count'];
						// 辅助临时数据
						this['CollectiontemporaryData'] = data['data']['data'];
						this['StoreList'][1]['page'] += 1;
						// 取出数据
						this.arrObtain('CollectiontemporaryData', 1);
					} else {
						console.log('没数');
					}
				})
			},

			/**
			 * @进入餐厅
			 * */
			InforPage(item) {
				uni.navigateTo({
					url: `/pages/restaurant/home/shop_home/shop_home?restaurant_id=${this['GetShopInfor']['restaurant_id']}`,
					success: () => {
						this['eattypeShow'] = false;
					}
				})
			},

			/**
			 * @scroll触底时间
			 * */
			scrolltolower() {
				// 触底防抖
				uni.$u.debounce(() => {
					// 是否是餐厅列表并且待取数组中的长度大于0
					if (this['tabsconfig']['index'] == 0 && this['temporaryData']['length'] > 0) {
						this.arrObtain('temporaryData', 0);
					} else {
						this.arrObtain('CollectiontemporaryData', 1);
					}
				}, 800, true)

			},

			/**
			 * @获取数据前十个
			 * */
			arrObtain(key, index) {
				let arr = this[key].splice(0, 9);
				this['StoreList'][index]['list'].push(...arr);
				console.log(this['StoreList'][index]['list'], 'list');
			}
		}
	}
</script>

<style lang="scss">
	// 顶部步骤/筛选/查询样式
	.content-top {
		width: 100%;
		height: auto;
		background-color: #ffffff;

		&-banner {
			width: 100%;
			height: 314rpx;

			.img {
				width: 100%;
				height: 100%;
			}
		}


		&-search {
			background-color: #ffffff;
			padding: 32rpx;

			&-area-search {
				padding: 0 32rpx;
				box-sizing: border-box;
				display: flex;
				align-items: center;

				&-text {
					font-size: $FONTSIZE28;
					display: flex;
					align-items: center;

					.icon-youjiantou {
						font-size: $FONTSIZE25;
						color: #666666;
						margin: 0 15rpx;
					}
				}


			}
		}
	}

	// 列表样式
	.Store-List {
		padding: 0 32rpx;
	}

	// 就餐方式弹框
	.slot-content-Tips {
		font-size: 30rpx;
		line-height: 40rpx;
		.text1 {
			color: #DB9F5E;
		}
	}

	.slot-content-Tips2 {
		width: 100%;
		background-color: #FFF9F3;
		margin-top: 20rpx;
		color: #FF7910;
		font-size: 26rpx;
		line-height: 49rpx;
		padding: 15rpx 32rpx;
	}
	.confirmButton{
		background: #0122A4;
		border-radius: 43px;
		color: #ffffff;
		font-size: 30rpx;
		text-align: center;
		line-height: 80rpx;
	}
</style>
