<template>
	<view class="content">
		<!-- banner -->
		<view class="banner">
			<image v-if="banner != ''" class="banner-cover" :src="banner" mode="aspectFill"></image>
		</view>
		<!-- 分类 -->
		<u-sticky bgColor="#fff" zIndex="99">
			<u-tabs :list="classify" lineColor="#34CE98" @click="onTabs"></u-tabs>
		</u-sticky>
		<!-- 套餐列表 -->
		<oct-goods
			:lists="goodsArr"
			color="#e6576b"
			@onGoods="$Router.push({ name: 'StoreGoods', params: {id: $event.goods_id}})"
		/>
	</view>
</template>

<script>
	import { meals } from "@/apis/interfaces/store"
	export default {
		data() {
			return {
				banner  	: "",
				goodsArr	: [],
				classify	: [],
				categoryId	: ""
			};
		},
		mounted(){
			this.getMeals()
		},
		methods:{
			getMeals(){
				meals(this.$Route.query.id, this.categoryId).then(res => {
					uni.setNavigationBarTitle({
						title: res.meal.subtitle
					})
					this.banner   	= res.meal.banner
					this.goodsArr 	= res.goods
					this.classify   = [{ name: "全部", category_id: "" }].concat(res.categories)
					uni.stopPullDownRefresh()
				})
			},
			onTabs(e){
				this.categoryId = e.category_id
				this.getMeals()
			}
		},
		onPullDownRefresh() {
			this.getMeals()
		}
	}
</script>

<style lang="scss" scoped>
	.content{
		background: $window-color;
		min-height: 100vh;
	}
	// banner
	.banner{
		position: relative;
		width: 100%;
		background-color: white;
		padding-top: 40%;
		&-text,
		&-cover{
			position: absolute;
			top: 0;
			left: 0;
			height: 100%;
			width: 100%;
		}
	}
	// 筛选
	.classify-tabs{
		background: white;
	}
</style>
