<template>
	<view class="cate">
		<view class="cate-one row">
			<view class="aside">
				<scroll-view style="height: 100%" scroll-y="true" scroll-with-animation="true">
					<block v-for="(item, index) in cateList" :key="index">
						<view :class="'one-item sm ' + (index == selectIndex ? 'active bg-white' : '')" @click="changeActive(index)">
							<text class="name">{{ item.name }}</text>
							<view v-if="index == selectIndex" class="active-line bg-default"></view>
						</view>
					</block>
				</scroll-view>
			</view>

			<view class="main">
				<scroll-view style="height: 100%" scroll-y="true" scroll-with-animation="true" @scrolltolower="getGoodsSearchFun">
					<view class="main-wrap">
						<view class="goods">
							<view class="u-margin-top-32 bold-600">{{cateName}}</view>
							
							<view class="u-margin-top-32">
								<view class="bg-white br16 row u-col-top u-margin-bottom-24" v-for="(item, index) in 10" :key="index">
									<view>
										<u-image :src="cloudPath + 'img/banner.png'" width="136" height="136" border-radius="16"></u-image>
									</view>
									<view class="info">
										<view>
											<view class="u-line-2 u-padding-top-10">葱烩海鲜卷边披萨--{{index}}</view>
											<view class="u-padding-top-44 row-between">
												<view class="row">
													<view class="primary">
														<price-format :price="12.9" :subscriptSize="22" :firstSize="34" :secondSize="26"></price-format>
													</view>
													<view class="u-margin-left-8">
														<price-format :lineThrough="true" color="#C0C0C0" :subscriptSize="22" :firstSize="22" :secondSize="22" :price="16.9"></price-format>
													</view>
												</view>
											</view>
										</view>
										<view class="column-end">
											<u-icon name="plus-circle-fill" color="#254062" size="48"></u-icon>
										</view>
									</view>
								</view>
								
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
		<view class="buy mx40 px40 br60 row-between">
			<view class="row">
				<u-image :src="cloudPath + 'img/icon_cart.png'" width="56" height="56"></u-image>
				<view class="text-fff u-margin-left-32">未选购商品</view>
			</view>
			<view class="text-999">去结算</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "cate-one",
		props: {
			list: {
				type: Array,
				default: () => ([])
			}
		},
		data() {
			return {
				selectIndex: 0,
				cateList: [],
				cateName: ''
			}
		},
		methods: {
			changeActive(index) {
				const {cateList} = this
				this.selectIndex = index
				this.cateName = cateList[index].name
				// this.onRefresh()
			},
			
			async getGoodsSearchFun() {
				// let {
				// 	page,
				// 	goodsList,
				// 	priceSort,
				// 	saleSort,
				// 	status,
				// 	cateList,
				// 	selectIndex
				// } = this;
				// const item = cateList[selectIndex] 
				// if(item.type == 0) return
				// if (status == loadingType.FINISHED) return;
				// const params = {
				// 	category_id: item.id,
				// 	page_no: page,
				// 	price: priceSort,
				// 	sales_sum: saleSort
				// }
				// const data = await loadingFun(getGoodsSearch, page, goodsList, status, params)
				// if (!data) return
				// this.page = data.page
				// this.goodsList = data.dataList
				// this.status = data.status
			},
		},
		watch: {
			list: {
				handler(val) {
					if(!val.length) return
					let index = val.findIndex((item) => item.type == 1)
					
					this.selectIndex = index == -1 ? 0 : index
					this.cateName = val[this.selectIndex].name
					this.cateList = val
					this.cateTwoList = val[this.selectIndex] ? val[this.selectIndex].sons : []
					this.getGoodsSearchFun()
				}
			}
		},
	}
</script>

<style lang="scss">
	$header-height: 94rpx;
	
	.cate {
		position: relative;
	}
	
	.cate-one {
		height: calc(100vh - #{$header-height} - var(--window-top) - var(--window-bottom));
	
		.aside {
			width: 180rpx;
			flex: none;
			height: 100%;
			background-color: #F7F8FA;
	
			.one-item {
				position: relative;
				text-align: center;
				height: 108rpx;
				line-height: 108rpx;
	
				&.active {
					color: $-color-theme;
					font-size: 26rpx;
					font-weight: bold;
				}
	
				.active-line {
					position: absolute;
					width: 6rpx;
					height: 30rpx;
					left: 4rpx;
					top: 50%;
					transform: translateY(-50%);
				}
			}
		}
	
		.main {
			background-color: #FFFAFB;
			height: 100%;
			flex: 1;
	
			.main-wrap {
				position: relative;
				padding: 0 20rpx 120rpx;
				.info {
					width: 100%;
					display: flex; 
					justify-content: space-between; 
					margin: 0 16rpx;
				}
			}
		}
	}
	
	.buy {
		position: absolute;
		left: 0;
		right: 0;
		bottom: calc( 20rpx + env(safe-area-inset-bottom));
		height: 100rpx;
		background-color: #212526;
	}
</style>