<template>
	<view class="container">
		<view class="header flex flex-y-center">
			<view :class="['item','flex','flex-center',typeActive == 1 ? 'active' : '']" @click="onTypeChange(1)">
				<view class="title">全部商品</view>
			</view>
			<view :class="['item','flex','flex-center',typeActive == 2 ? 'active' : '']" @click="onTypeChange(2)">
				<view class="title">售卖中</view>
			</view>
			<view :class="['item','flex','flex-center',typeActive == 3 ? 'active' : '']" @click="onTypeChange(3)">
				<view class="title">已下架</view>
			</view>
			<view :class="['item','flex','flex-center',typeActive == 4 ? 'active' : '']" @click="onTypeChange(4)">
				<view class="title">已售罄</view>
			</view>
		</view>
		<view class="main-block flex box-pack-between">
			<scroll-view scroll-y class="left-bar">
				<view class="item" :class="[catIndex == -1?'active':'']" @click="onCatChange(-1)">全部(500)</view>
				<view class="item" :class="[catIndex == index?'active':'']" v-for="(item,index) in 20" :key="index" @click="onCatChange(index)">美味午餐</view>
			</scroll-view>
			<scroll-view scroll-y class="right-bar">
				<view class="cat-name">美味午餐</view>
				<view class="goods-list">
					<view class="item flex" v-for="(item,index) in 15" :key="index">
						<view class="goods-img-block">
							<image src="../static/images/icon_6.png" mode="aspectFill" class="goods-img"></image>
						</view>
						<view class="info-block">
							<view class="goods-name text-1 flex flex-y-center box-pack-between arr-r">香辣鸡翅套餐</view>
							<view class="flex flex-y-center box-pack-between" style="margin-top: 16rpx;">
								<view class="stock">库存:100</view>
								<view class="choose-btn">
									<image src="../static/images/icon_19.png" mode="aspectFit" class="icon-19"></image>
								</view>
							</view>
							<view class="goods-btm flex flex-y-center box-pack-between">
								<view class="price">￥14.70</view>
							</view>
						</view>
					</view>
				</view>
				
			</scroll-view>
		</view>
		<view class="footer-bar">
			<view class="content flex flex-center">
				<view class="btn">指定商品</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				typeActive: 1,
				catIndex:-1,//选中分类
			}
		},
		methods: {
			onTypeChange(index) {
				if (index != this.typeActive) {
					this.typeActive = index
				}
			},
			onCatChange(index){
				if(index != this.catIndex){
					this.catIndex = index
				}
			}
		}
	}
</script>

<style>
	@import url("../static/css/common.css");
	page {}

	.header {
		height: 96rpx;
		background-color: #fff;
		position: sticky;
		top: 0;
		z-index: 100;
		box-sizing: border-box;
		border-bottom: 8rpx solid #F4F5F7;

	}

	.header .item {
		width: 25vw;
		box-sizing: border-box;
		flex: none;
		height: 88rpx;
		position: relative;
	}

	.header .item.active .title{
		color: #247EFF;
		font-size: 32rpx;
		font-weight: 600;
	}

	.header .item.active::after {
		content: "";
		display: block;
		width: 40rpx;
		height: 4rpx;
		border-radius: 2rpx;
		background-color: #247EFF;
		position: absolute;
		bottom: 8rpx;
		left: 50%;
		transform: translateX(-50%);
	}

	.header .item .title {
		font-size: 28rpx;
		color: #666;

	}
	.main-block{
		width: 100%;
		height: calc(100vh - 96rpx - 160rpx);
		padding-bottom: constant(safe-area-inset-bottom);
		/*兼容 IOS>11.2*/
		padding-bottom: env(safe-area-inset-bottom);
	}
	.main-block .left-bar{
		width: 176rpx;
		flex:none;
		height: 100%;
		background-color: #F4F5F7;
		/*兼容 IOS<11.2*/
		
	}
	.main-block .item {
		padding:30rpx 15rpx;
		font-size: 28rpx;
		color: #666;
		font-weight: 500;
		line-height: 40rpx;
	}
	.main-block .item.active {
		color: #247EFF;
		font-weight: 600;
		background-color: #fff;
	}
	.main-block .right-bar{
		width: 574rpx;
		flex:none;
		height: 100%;
		background-color: #fff;
		box-sizing: border-box;
		padding:30rpx 0 0 25rpx ;
		position: relative;
		
	}
	.main-block .right-bar .cat-name{
		font-size: 30rpx;
		font-weight: 600;
		color: #333;
		line-height: 42rpx;
		background-color: #fff;
		
	}
	.main-block .right-bar .item{
		padding:40rpx 30rpx 40rpx 0;
		border-bottom: 1rpx solid #f5f5f5;
	}
	.main-block .right-bar .item .goods-img-block{
		flex:none;
		width: 120rpx;
		height: 120rpx;
		overflow: hidden;
		border-radius: 8rpx;
		position: relative;
	}
	.main-block .right-bar .item .goods-img-block .goods-img{
		display: block;
		width: 120rpx;
		height: 120rpx;
	}
	.main-block .right-bar .item .goods-img-block .goods-tips{
		background-color: rgba(0,0,0,0.5);
		width: 100%;
		height: 35rpx;
		position: absolute;
		left: 0;
		bottom: 0;
		color: #fff;
		line-height: 35rpx;
		text-align: center;
		font-size: 20rpx;
	}
	.main-block .right-bar .item .info-block{
		padding-left: 24rpx;
		width: 405rpx;
		box-sizing: border-box;
	}
	.main-block .right-bar .item .info-block .goods-name{
		padding-right: 15rpx;
		font-size: 30rpx;
		font-weight: 600;
		color: #333;
		line-height: 1;
	}
	.main-block .right-bar .item .arr-r::after{
		border-color: #333 #333 transparent transparent;
	}
	.main-block .right-bar .item .info-block .stock{
		font-size: 24rpx;
		color: #999;
		line-height: 1;
		
	}
	.main-block .right-bar .item .info-block .goods-btm{
		margin-top: 12rpx;
	}
	.main-block .right-bar .item .info-block .goods-btm .price{
		font-size: 30rpx;
		color: #FD3939;
		font-weight: 600;
	}
	.main-block .right-bar .item .info-block .choose-btn{
		width: 30rpx;
		height: 30rpx;
		border-radius: 50%;
		border:2rpx solid #CDCDCD;
	}
	.main-block .right-bar .item .info-block .choose-btn .icon-19{
		display: block;
		width: 100%;
		height: 100%;
	}
</style>
