<template>
	<view class="cate">
		<view class="cate-one row">
			<view class="aside">
				<scroll-view style="height: 100%;" scroll-y="true" scroll-with-animation="true">
					<view style="padding-bottom: 200rpx;">
						<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>
					</view>
				</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-p-t-32 bold-600">{{cateName}}</view>
							
							<view class="u-p-t-32">
								<navigator hover-class="none" class="bg-white br16 row u-col-top u-m-b-24" v-for="(item, index) in goodsList" :key="index" @click="toShop()">
									<view>
										<u-image :src="item.image" width="136" height="136" border-radius="16"></u-image>
									</view>
									<view class="info">
										<view>
											<view class="u-line-2 u-p-t-10">{{item.name}}</view>
											<view class="u-p-t-20 row-between">
												<view class="row">
													<view class="primary">
														<price-format :price="item.price" :subscriptSize="22" :firstSize="34" :secondSize="26"></price-format>
													</view>
													<view class="u-m-l-8">
														<price-format  :price="item.market_price" :lineThrough="true" color="#C0C0C0" :subscriptSize="22" :firstSize="22" :secondSize="22"></price-format>
													</view>
												</view>
											</view>
										</view>
										<view class="column-end" @click.stop="count++">
											<u-icon name="plus-circle-fill" color="#254062" size="48"></u-icon>
										</view>
									</view>
								</navigator>
								
								<loading-footer :status="status" :slot-empty="true">
									<view slot="empty" class="column-center" style="padding: 200rpx 0 0">
										<text class="lighter sm">暂无商品</text>
									</view>
								</loading-footer>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
		<view class="buy mx40 px40 br60 row-between">
			<view class="row">
				<view class="u-relative">
					<u-image :src="cloudPath + 'img/icon_cart.png'" width="80" height="80"></u-image>
					<view class="u-absolute top-0 right-0 text-fff number u-text-center xxs" v-if="buyNumber">
						{{ buyNumber }}
					</view>
				</view>
				<view class="text-fff u-m-l-32">未选购商品</view>
			</view>
			<view class="text-999">去结算</view>
		</view>
		
		<!-- 购物车 -->
		<u-popup v-model="showCart" mode="bottom" :border-radius="16">
			<view style="max-height: 800rpx;">
				<view class="px20 text-999 mt20">
					温馨提示：请适量点餐
				</view>
				<view>
					<scroll-view style="height: 700rpx;" scroll-y="true" scroll-with-animation="true">
						<view class="row-start u-row-between u-p-t-20 u-padding-bottom-20 px20" v-for="(item, index) in 20" :key="index">
							<view class="row-start">
								<view>
									<u-image :src="cloudPath + 'img/banner.png'" width="136" height="136" border-radius="16"></u-image>
								</view>
								<view class="ml20">
									<view class="u-line-2 u-p-t-10">葱烩海鲜卷边披萨</view>
									<view class="primary u-p-t-40">
										<price-format :price="12.9" :subscriptSize="22" :firstSize="34" :secondSize="26"></price-format>
									</view>
								</view>
							</view>
							<view>
								<view class="u-text-right">
									<u-icon class="u-p-t-10" name="trash" size="32"></u-icon>
								</view>
								<view class="u-p-t-30">
									<u-number-box min="1" v-model="numberVal" @change="changeNumber"></u-number-box>
								</view>
							</view>
						</view>
					</scroll-view>
				</view>
			</view>
		</u-popup>
		<shop-spec v-model="showSpec" @close="showSpec = false"></shop-spec>
	</view>
</template>

<script>
	import {
		loadingFun
	} from '@/utils/tools'
	import {
		getGoodsSearch,
	} from '@/api/store';
	import {
		loadingType
	} from '@/utils/type';

	export default {
		name: "cate-one",
		props: {
			list: {
				type: Array,
				default: () => ([])
			}
		},
		data() {
			return {
				page:1, 
				status: loadingType.LOADING,
				selectIndex: 0,
				cateList: [],
				goodsList: [],
				cateName: '',
				numberVal: 1,
				showCart: false,
				showSpec: false,
				count: 0
			}
		},
		methods: {
			changeActive(index) {
				const {
					cateList
				} = this
				this.cateName = cateList[index].name
				this.selectIndex = index
				this.onRefresh()
			},

			onRefresh() {
				this.page = 1
				this.goodsList = []
				this.status = loadingType.LOADING
				this.$nextTick(() => {
					this.getGoodsSearchFun();
				});
			},
			
			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)
				console.log(data);
				
				if (!data) return
				this.page = data.page
				this.goodsList = data.dataList
				this.status = data.status
			},
			
			changeNumber() {
				
			},
			
			// 跳转商品详情页
			toShop() {
				uni.navigateTo({
					url: '/pages/shop/shop'
				})
			}
		},
		computed: {
			buyNumber() {
				if (this.count > 0) {
					return this.count > 99 ? '99+' : this.count
				}

				return ''
			}
		},
		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.getGoodsSearchFun()
				}
			}
		},
	}
</script>

<style lang="scss">
	page {
		padding-bottom: 0;
	}
	
	$header-height: 94rpx;
	
	.cate {
		position: relative;
	}
	
	.cate-one {
		height: 100vh;
	
		.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;
				.goods {
					// padding-bottom: 200rpx;
					.info {
						width: 100%;
						display: flex; 
						justify-content: space-between; 
						margin: 0 16rpx;
					}
				} 
			}
		}
	}
	
	.buy {
		position: fixed;
		left: 0;
		right: 0;
		bottom: env(safe-area-inset-bottom);
		height: 100rpx;
		background-color: #212526;
	}

	.number {
		background-color: #FF2C3C;
		width: 40rpx;
		height: 40rpx;
		line-height: 40rpx;
		border-radius: 100%;
	}

</style>