<template>
	<view class="content">
		<!-- 搜索 -->
		<search @handleSearch="handleSearch"></search>

		<view class="box menu">
			<!-- 左侧菜单栏 -->
			<view class="left">
				<view class="name" v-for="(ite,ind) in menu" :key="ind" :class="[index==ind?'active':'']"
					@click="handleToggle(ind)">
					{{ite.name}}
				</view>
			</view>

			<!-- 右侧商品 -->
			<view class="right">
				<view class="right_list" v-for="(ite,ind) in menulist" :key="ind">
					<view class="title" @click="handleList(ite)">
						<view>{{ite.name}}</view>
						<icon class="iconfont icon-arrow-right"></icon>
					</view>
					<view class="list" @click="handleDetail(ite)">
						<view class="item" v-for="(it,id) in ite.list" :key="id">
							<image :src="it.image" mode="aspectFill"></image>
							<text>{{it.name}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import search from "../../components/search.vue"
	export default {
		components: {
			search
		},
		data() {
			return {
				text: "",
				index: 0,
				menu: [],
				menulist: []
			};
		},
		onLoad() {
			let that = this
			that.menu = that.$json.menu
			that.text = that.menu[0].name
			that.menulist = that.$json.menulist
		},
		methods: {
			// 左侧切换
			handleToggle(index) {
				let that = this
				that.index = index
				that.text = that.menu[index].name
				// console.log("111", that.menu[index].name)
			},
			// 查看更多
			handleList() {
				uni.navigateTo({
					url: "/pageTwo/me/mymenu?type=" + this.text
				})
			},
			// 商品详情
			handleDetail() {
				uni.navigateTo({
					url: "/pageTwo/me/menudetail"
				})
			},
			// 搜索
			handleSearch(ite) {
				console.log("菜谱搜索", ite)
			},
		}
	}
</script>

<style lang="scss" scoped>
</style>
