<template>
	<view class="content">
		<!-- 搜索 -->
		<search></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">
				<scroll-view class="right_list" scroll-y="true" @scrolltolower="onPullDown">
					<div class="right_inner_list">
						<view class="list" v-for="(ite,ind) in menulist" :key="ind" @click="handleDetail(ite.id)"
							v-if="menulist.length">
							<image :src="ite.cover" mode="aspectFill"></image>
							<text class="overflow">{{ite.title}}</text>
						</view>
					</div>
				</scroll-view>
				<view v-if="!menulist.length" class="nolist">
					<icon class="iconfont icon-wancan"></icon>
					<text>还没有记录哦</text>
				</view>
			</view>
		</view>
	</view>
	</view>
</template>

<script>
	import {
		mapState
	} from "vuex";
	import search from "../../components/search2.vue"
	export default {
		components: {
			search
		},
		computed: {
			...mapState(["menuList", "menu_search_value"]),
			menu() {
				return [...this.menuList, {
					id: 999,
					name: '搜索'
				}]
			},
		},
		data() {
			return {
				page: 1,
				text: "",
				index: 0,
				lastPage: "",
				loading: false,
				menulist: []
			};
		},
		onLoad(op) {
			let that = this
			that.page = 1
			that.handleCookListLabel()
		},
		onShow() {
			let that = this
			if (that.$store.state.menu_search_value != '') {
				that.handleSearch(that.$store.state.menu_search_value)
				that.$store.state.menu_search_value = ""
			}
		},
		methods: {
			onPullDown() {
				let that = this
				if (that.loading) {
					return
				}
				if (!this.lastPage || this.page >= this.lastPage) {
					uni.showToast({
						title: '没有更多数据！',
						icon: 'none'
					})
					return
				}
				this.page++
				this.handleCookListLabel()
			},
			// 食材列表
			handleCookListLabel() {
				let that = this
				that.loading = true
				that.$model.getCookListLabel({
					cook_label: that.menu[that.index].id,
					page: that.page,
				}).then(res => {
					that.loading = false
					if (res.code != 0) return
					that.menulist = that.menulist.concat(res.data.content_list)
					that.lastPage = res.data.page_total
					that.page = res.data.page_now
				})
			},
			// 左侧切换
			handleToggle(ind) {
				let that = this
				that.index = ind
				that.page = 1
				that.menulist = []
				that.handleCookListLabel()
			},
			// 商品详情
			handleDetail(id) {
				if (!uni.getStorageSync('token')) {
					this.$tools.msg("登录后查看等多！")
					return
				}
				uni.navigateTo({
					url: "/pageTwo/me/menudetail?id=" + id
				})
			},
			// 搜索
			handleSearch(ite) {
				let that = this
				console.log("搜索", ite)
				that.page = 1
				that.menulist = []
				if (ite == '') {
					that.index = 0
					that.handleCookListLabel()
				} else {
					uni.showLoading({
						title: '搜索中...'
					})
					that.$model.getMenuSearch({
						food_name: ite
					}).then(res => {
						uni.hideLoading()
						if (res.code != 0) return
						that.index = that.menu.length - 1
						that.menulist = res.data.content_list
					})
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.right_list {
		padding: 0 !important;
		height: 100%;
	}

	.right_inner_list {
		display: flex;
		flex-wrap: wrap;
		margin-top: 20rpx;
		// justify-content: space-between;
	}

	.list {
		width: 33.3%;

		image {
			margin: auto;
			width: 140rpx;
			height: 140rpx;
			border-radius: 20rpx;
		}

		text {
			width: 100%;
			display: inline-block;
			text-align: center;
			margin-bottom: 20rpx;
		}
	}
</style>