<template>
	<view class="page-category">
		<view class="my-nav">
			<CustNavBar>
				<view class="search-input-container">
					<view class="search-inut">搜索 鱼香肉丝 试试</view>
				</view>
			</CustNavBar>
		</view>
		<view class="category-list-container">
			<view class="left-category">
				<view class="category-item" v-for="c in categorys" 
					:class="{active:c.id == activeCategory}" :key="c.id"
					@click="loadListByCid(c.id)">
					<text>{{c.title}}</text>
				</view>
			</view>
			<view class="foods-list-container">
				<FoodsList v-if="foodsList" :foodsList="foodsList"></FoodsList>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { ref } from "vue";
	import { allCategories, loadCategoryGoods } from "../../service/api";
	import { CategoryModel } from "../../service/models";

	const foodsList = ref([])
	const categorys = ref<CategoryModel[]>([])
	const activeCategory = ref(0)
	allCategories().then(list => {
		categorys.value = list
	})
	function loadListByCid(cid: number){
		activeCategory.value = cid
		loadCategoryGoods(cid).then(list=>{
			foodsList.value = list;
		})
	}
</script>

<style lang="scss">
	.page-category {
		min-height: 100vh;

		.my-nav {
			height: 50px;
		}

		.search-input-container {
			margin-left: 10px;
		}

		.search-inut {
			border: solid 1px $uni-color-primary;
			width: 100%;
			border-radius: 30px;
			box-sizing: border-box;
			height: 28px;
			line-height: 28px;
			color: #666;
			font-size: 14px;
			padding: 0px 10px;
		}

		.category-list-container {
			height: calc(100vh - 50px);
			display: flex;
		}

		.left-category {
			height: 100%;
			background-color: #eee;
			width: 100px;
			text-align: center;
			padding: 10px 0;
			box-sizing: border-box;
		}

		.category-item {
			padding: 10px 0;
			&.active{
				background-color: #fff;
			}
		}
		.foods-list-container{
			flex:1;
			overflow-y: auto;
			scroll-behavior: smooth;
		}
	}
</style>