<template>
	<view class="KDJ-content-top">
		<view class="KDJ-content-top-process">
			<view class="KDJ-content-top-process-item">
				<image class="KDJ-content-top-process-item-img" src="https://img.agrimedia.cn/chwl/v2/choose_one.png"
					mode=""></image>
				<view class="KDJ-content-top-process-item-text">
					选择餐厅
				</view>
			</view>
			<view class="KDJ-content-top-process-item">
				<image class="KDJ-content-top-process-item-img" src="https://img.agrimedia.cn/chwl/v2/choose_two.png"
					mode=""></image>
				<view class="KDJ-content-top-process-item-text">
					选择菜品
				</view>
			</view>
			<view class="KDJ-content-top-process-item">
				<image class="KDJ-content-top-process-item-img" src="https://img.agrimedia.cn/chwl/v2/choose_three.png"
					mode=""></image>
				<view class="KDJ-content-top-process-item-text">
					等待取餐码
				</view>
			</view>
			<view class="KDJ-content-top-process-item">
				<image class="KDJ-content-top-process-item-img" src="https://img.agrimedia.cn/chwl/v2/choose_four.png"
					mode=""></image>
				<view class="KDJ-content-top-process-item-text">
					到店取餐
				</view>
			</view>
		</view>
		<!-- 地址/搜索/选择 -->
		<view class="KDJ-content-top-search">
			<view class="KDJ-content-top-search-area-search">
				<navigator url="/pages/restaurant/arealist/arealist" hover-class="none">
					<view class="KDJ-content-top-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" @search="search">
				</u-search>
			</view>
			<view class="KDJ-content-top-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-KDJ',
		mixins: [mixin, restaurantmixins],
		data() {
			return {
				// 搜索
				keyword: '',
				// 顶部tabs
				tabsconfig: {
					// 当前激活索引
					index: 0,
					scrollable: false,
					// 滑块宽度
					lineWidth: '40',
					// // 滑块颜色
					// lineColor: "#C63836",
					// // 滑块颜色
					// lineColor2: "##FFBC0D",
					list: [{
						name: '附近餐厅',
					}, {
						name: '我的关注',
					}]
				},
			}
		},
		computed:{
			brandColor(){
				switch(this['BrandInfor']['brand_id']){
					case 1:
					return "#C63836";
					case 5:
					return "#FFBC0D"
				}
			}
		},
		mounted() {
			// this.$emit('_Change', this['tabsconfig']['index']);
		},
		methods: {
			// 输入框确认事件
			search() {
				this.$emit('_Search', this['keyword']);
			},

			// 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 lang="scss">
	.KDJ-content-top {
		width: 100%;
		height: auto;
		background-color: #ffffff;

		&-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;
			background-image: url(https://img.agrimedia.cn/chwl/v2/choose.png);
			background-size: 100% 100%;
			background-repeat: no-repeat;
			padding: 0 32rpx;
			box-sizing: border-box;

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

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

		&-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;
					}
				}
			}
		}
	}
</style>
