<template>
	<view class="b-page-home">
		<view class="content-top">
			<view class="store_background">
				<image class="store_background-img" :src="qnyurl('store_background.jpg','xbk')" mode="widthFix"></image>
				<view class="store_background-content">
					<view class="store_background-content-text1">
						<image class="img" :src="qnyurl('icon.png','xbk')" mode=""></image>
						<text>自助点餐，不支持外卖</text>
					</view>
					<view class="store_background-content-text2">
						到店前10~15分钟在线点餐，到店后直接在“取品台”领取即可
					</view>
				</view>
			</view>
			<!-- 步骤 -->
			<view class="content-top-process">
				<view class="content-top-process-item">
					<image class="content-top-process-item-img" :src="qnyurl('choose_one.png','xbk')" mode=""></image>
					<view class="content-top-process-item-text">
						选择餐厅
						<text class="content-top-process-item-text-choose">》</text>
					</view>
				</view>
				<view class="content-top-process-item">
					<image class="content-top-process-item-img" :src="qnyurl('choose_two.png','xbk')" mode=""></image>
					<view class="content-top-process-item-text">
						选择菜品
						<text class="content-top-process-item-text-choose">》</text>
					</view>
				</view>
				<view class="content-top-process-item">
					<image class="content-top-process-item-img" :src="qnyurl('choose_three.png','xbk')" mode=""></image>
					<view class="content-top-process-item-text">
						等待取餐码
						<text class="content-top-process-item-text-choose">》</text>
					</view>
				</view>
				<view class="content-top-process-item">
					<image class="content-top-process-item-img" :src="qnyurl('choose_four.png','xbk')" mode=""></image>
					<view class="content-top-process-item-text">
						到店取餐
					</view>
				</view>
			</view>
			<!-- 占位元素 -->
			<view style="width: 100%;height: 100rpx;"></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="transform: rotate(90deg);">
								<text class="icon iconfont icon-youjiantou"></text>
							</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>
		
		<view class="Store-List" :style="{height:`${height}rpx`,'background-color':loading? '#ffffff':'#F2F2F2'}">
			<!-- 附近餐厅 -->
			<view v-show="tabsconfig['index'] == 0">
				<scroll-view scroll-y="true" class="scroll-Y" :style="{height:`${height}rpx`}"
					@scrolltolower="scrolltolower">
					<!-- 骨架屏占位元素 -->
						<template v-for="(item,index) in StoreList[0]['list']">
							<view class="Store-List-Item" @tap="PageShopHome(item)" :key="index">
								<view class="Store-List-Item-Top">
									<view class="Store-List-Item-Top-Name">
										{{item['restaurant_name']}}
									</view>
									<view class="Store-List-Item-Top-distance">
										{{item['distance']}}km
									</view>
								</view>
								<view class="Store-List-Item-Area">
									{{item['restaurant_address']}}
								</view>
							</view>
						</template>
						<view style="width: 100%;height: 32rpx;"></view>
						<view class="default" v-if="StoreList[0]['list']['length'] <= 0">
							<img class="img" :src="qnyurl('default.png','rx')" alt="">
							<text>该地区暂无门店信息</text>
						</view>
				</scroll-view>
			</view>
			<!-- 我的收藏 -->
			<view v-show="tabsconfig['index'] == 1">
				<scroll-view scroll-y="true" class="scroll-Y" :style="{height:`${height}rpx`}"
					@scrolltolower="scrolltolower">
						<template v-for="(item,index) in StoreList[1]['list']">
							<view class="Store-List-Item" @tap="PageShopHome(item)" :key="index">
								<view class="Store-List-Item-Top">
									<view class="Store-List-Item-Top-Name">
										{{item['restaurant_name']}}
									</view>
									<view class="Store-List-Item-Top-distance">
										{{item['distance']}}m
									</view>
								</view>
								<view class="Store-List-Item-Area">
									{{item['restaurant_address']}}
								</view>
							</view>
						</template>
						<view style="width: 100%;height: 32rpx;"></view>
						<view class="default" v-if="StoreList[1]['list']['length'] <= 0">
							<img class="img" :src="qnyurl('default.png','rx')" alt="">
							<text>该地区暂无门店信息</text>
						</view>
				</scroll-view>
			</view>
			<!-- 加载状态 -->
			<b-load :show="loading && height>0" position="absolute"  width="79" height="80" color="#000000"></b-load>
			<!-- 必须先确保scoll有高度 -->
		</view>
	</view>
</template>

<script>
	/**
	 * @肯德基首页
	 * */
	import restaurantmixins from '@/static/js/mixin/restaurantmixins.js';
	import mixin from '@/static/js/mixin/mixin.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: "#00AF66",
					list: [{
						name: '附近餐厅',
					}, {
						name: '我的关注',
					}]
				},
				// 加载状态
				loading: true,
				// 暂无门店
				Show:false
			};
		},
		computed: {
			tabindex() {
				return this['tabsconfig']['index']
			},
			// 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: {
			...mapMutations({
				SETSHOPDETAIL: 'shopping/SETSHOPDETAIL',
				SETMODE: 'shopping/SETMODE'
			}),

			/**
			 * @搜索
			 * */
			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;
				// 每次进入设置加载状态显示
				self['loading'] = true;
				// 每次进入隐藏暂无门店状态
				self['Show'] = false;
				// 延迟获取元素信息给渲染足够的时间
				setTimeout(()=>{
					self.initScrollView({
						el: 'content-top',
					}).then(eres => {
						console.log(eres,'resresresres');
						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,'餐厅列表');
							self['loading'] = false;
							// 后端未按照分页数据格式返回所以前端自行分页
							if (res['data']['length'] > 0) {
								// 赋值总长度
								self['StoreList'][0]['count'] = res['count'];
								// 辅助临时数据
								self['temporaryData'] = res['data'];
								self['StoreList'][0]['page'] += 1;
								// 取出数据
								self.arrObtain('temporaryData', 0);
							} else {
								self['Show'] = true;
								console.log('没数');
							};
							
						})
					});
				},800)
			},

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

			GetstoreCollectionList() {
				// 每次进入设置加载状态显示
				this['loading'] = true;
				// 每次进入隐藏暂无门店状态
				this['Show'] = false;
				let parameters = {
					brand_id: this['BrandInfor']['brand_id'],
					address: this['keyword'],
				}

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

			/**
			 * @进入餐厅
			 * */
			InforPage(type) {
				// 设置用户选择的就餐方式
				this.SETMODE(type);
				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);
			},
			
			/**
			 * @进入店铺
			 * */
			PageShopHome(item){
				this.SETSHOPDETAIL(item);
				uni.navigateTo({
					url: `/pages/restaurant/home/shop_home/shop_home?restaurant_id=${this['GetShopInfor']['restaurant_id']}`,
				})
			}
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #ffffff;
	};
	
	// 顶部步骤/筛选/查询样式
	.content-top {
		width: 100%;
		height: auto;
		background-color: #ffffff;
		position: relative;
		.store_background {
			width: 100%;
			height: auto;
			&-img {
				width: 100%;
				display: block;
			}
			&-content{
				color: #ffffff;
			    padding: 20rpx 20rpx 0 20rpx;
			    position: absolute;
			    left: 0;
			    top: 0;
			    width: 100%;
				&-text1{
					font-size: 30rpx;
					line-height: 60rpx;
					    display: flex;
					    align-items: center;
					.img{
						width: 20rpx;
						height: 30rpx;
						margin-right: 10rpx;
					}
				}
				&-text2{
					font-size: 24rpx;
					opacity: 0.7;
				}
			}
		}

		// &-process {
		// 	position: relative;
		// 	width: 100%;
		// 	height: 210rpx;

		// 	.img {
		// 		width: 100%;
		// 		height: 100%;
		// 		position: absolute;
		// 		top: 0;
		// 		left: 0;
		// 	}
		// }

		&-process {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 32rpx;
			box-sizing: border-box;
			position: absolute;
			width: 94%;
			height: 210rpx;
		    top: 150rpx;
			left: 50%;
			-webkit-transform: translateX(-50%);
			transform: translateX(-50%);
			border-radius: 15rpx;
			overflow: hidden;
			background-repeat: no-repeat;
			box-shadow: -5px 0px 20px 0px rgba(101, 101, 101, 0.2400);
			background-color: #ffffff;

			&-item {
				display: flex;
				flex-direction: column;
				align-items: center;
				font-size: $FONTSIZE25;
				color: #333333;

				&-img {
					width: 84rpx;
					height: 84rpx;
					border-radius: 50%;
					box-shadow: 0 0 20rpx rgba(255, 255, 255, 0.3);
					margin-bottom: 13rpx;
				}

				&-text {
					position: relative;

					&-choose {
						font-size: 25rpx;
						position: absolute;
						right: -60%;
						top: -5%;
						transform: translateX(-50%);
						color: #a0a0a0;
						display: flex;
						align-items: center;
					}
				}

			}
		}

		&-search {
			background-color: #ffffff;
			padding-top: 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;
		position: relative;
		&-Item {
			width: 100%;
			height: auto;
			background-color: #ffffff;
			border-radius: 15rpx;
			min-height: 155rpx;
			padding: 32rpx;
			margin-top: 20rpx;

			&-Top {
				display: flex;
				align-items: flex-end;
				margin-bottom: 30rpx;

				&-Name {
					font-size: $FONTSIZE30;
					color: $THEMECOLOR4;
					margin-right: 20rpx;
				}

				&-distance {
					font-size: $FONTSIZE26;
					color: $THEMECOLOR5;
					flex: 1;
					text-align: right;
				}
			}

			&-Area {
				font-size: $FONTSIZE26;
			}
		}
	}

	// 就餐方式弹框
	.poupconten {
		width: 100%;
		height: 656rpx;
		background-color: #ffffff;
		padding: 32rpx;

		.shop-inofr {
			margin-bottom: 50rpx;

			&-name {
				font-size: $FONTSIZE32;
				display: flex;
				align-items: center;
				margin-bottom: 20rpx;

				.icon {
					width: 33rpx;
					height: 30rpx;
					margin-right: 20rpx;
				}
			}

			&-area {
				font-size: $FONTSIZE24;
				color: #999999;
			}
		}

		.hint {
			font-size: $FONTSIZE24;
			line-height: 45rpx;

			.text1 {
				color: #DA2F35;
			}

			.text2 {
				color: #999999;
			}
		}

		// 方式
		.Way {
			width: 100%;

			&-title {
				font-size: $FONTSIZE24;
				color: #333333;
				line-height: 40rpx;
			}

			&-type {
				width: 100%;
				display: flex;
				justify-content: space-between;
				margin-top: 32rpx;

				&-rightactivation {
					color: #FFFFFF !important;
					border-color: #DE393F !important;
					background-color: #DE393F !important;
				}

				&-item {
					width: 320rpx;
					height: 130rpx;
					border: 1rpx solid #E3E3E3;
					border-radius: 6rpx;
					text-align: center;
					color: #666666;
					border-radius: 10rpx;
					display: flex;
					align-items: center;
					justify-content: space-around;

					&-img {
						width: 74rpx;
						height: 61rpx;

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

					&-right {
						display: flex;
						flex-direction: column;
						justify-content: center;

						&-text1 {
							font-size: $FONTSIZE30;
						}

						&-text2 {
							font-size: $FONTSIZE24;
						}
					}
				}
			}
		}
	}
</style>
