<template>
	<view class="NX-home-head">
		<view class="NX-home-head-b">
			<image class="img" :src="qnyurl('banner-1.jpg','nx')" mode=""></image>
		</view>
		<view class="NX-home-head-x-search">
			<view class="NX-home-head-x-search-area-search">
				<navigator url="/pages/restaurant/arealist/arealist" hover-class="none">
					<view class="NX-home-head-x-search-area-search-text">
						<!-- 第一次获取肯定是获取不到的，主要是动态显示用户改变的地址 -->
						{{UserArae1?UserArae1:UserArae2['city']}}
						<view style="transform: rotate(90deg);">
							<text class="icon iconfont icon-youjiantou"></text>
						</view>
					</view>
				</navigator>
				<u-search placeholder="输入门店名称查询" :showAction="false" v-model="keyword" @input="search" @search="search">
				</u-search>
			</view>
			<view class="NX-home-head-x-search-tabs">
				<u-tabs @change="change" :list="tabsconfig['list']" :scrollable="tabsconfig['scrollable']"
					:lineColor="Brand()['ThemeColor']" :lineWidth="tabsconfig['lineWidth']"></u-tabs>
			</view>
		</view>
	</view>
</template>

<script>
	// 点餐混入
	import restaurantmixins from '@/static/js/mixin/restaurantmixins.js';
	// 公用混入
	import mixin from '@/static/js/mixin/mixin.js';
	export default {
		name:'Home-Head-XBK',
		mixins: [mixin, restaurantmixins],
		data() {
			return {
				// 搜索
				keyword: '',
				// 顶部tabs
				tabsconfig: {
					// 当前激活索引
					index: 0,
					scrollable: false,
					// 滑块宽度
					lineWidth: '40',
					list: [{
						name: '附近门店',
					}, {
						name: '我的收藏',
					}]
				},
			}
		},
		mounted() {
			// this.$emit('_Change', this['tabsconfig']['index']);
		},
		methods: {
			// 输入框确认事件
			search() {
				let self = this;
				uni.$u.throttle(()=>{
					self.$emit('_Search', self['keyword']);
				}, 500)
			},

			// tabs切换事件
			change(e) {
				this['tabsconfig']['index'] = e['index'];
				this.$emit('_Change', this['tabsconfig']['index']);
			},

			SetTabnum(n, k) {
				console.log(n, k, '123123');
				let list = [{
					name: `附近餐厅（${n}）`,
				}, {
					name: `我的关注（${k}）`,
				}];
				this.$set(this['tabsconfig'], 'list', list)
			}
		}
	}
</script>

<style scoped lang="scss">
	.NX-home-head{
		width: 100%;
		height: auto;
		background-color: #ffffff;
		// &-b{
		// 	&-background {
		// 		width: 100%;
		// 		height: auto;
		// 		position: relative;
		// 		&-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;
		// 			}
		// 		}
		// 	}
		// }
		&-b{
			width: 100%;
			height: 314rpx;
			.img {
				width: 100%;
				height: 100%;
			}
		}
		&-x{
			position: relative;
			width: 100%;
			height: 100rpx;
			&-process {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 0 32rpx;
				box-sizing: border-box;
				position: absolute;
				width: 94%;
				height: 210rpx;
			    top: -110rpx;
				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;
				border-radius: 20rpx 20rpx 0 0;
			
				&-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;
						}
					}
				}
			}
		}
		
	}
	
</style>
