<template>
	<view class="content">
		<!-- 分类 -->
		<u-sticky bgColor="#fff" zIndex="99">
			<u-tabs :list="classify" lineColor="#34CE98" @click="onTabs"></u-tabs>
		</u-sticky>
		<!-- 分类商品 -->
		<block v-if="goodsArr.length >= 1">
			<oct-goods
				:lists="goodsArr"
				color="#e6576b"
				@onGoods="$Router.push({ name: 'StoreGoods', params: {id: $event.goods_id}})"
			/>
			<!-- 加载更多 -->
			<view class="pages-load">
				<u-loadmore :status="status" />
			</view>
		</block>
		<block v-else>
			<view class="vertical pages-empty">
				<u-empty
					icon="http://cdn.uviewui.com/uview/empty/data.png"
					textColor="#999"
					text="暂无数据"
				>
				</u-empty>
			</view>
		</block>
	</view>
</template>

<script>
	import { lists, classify } from "@/apis/interfaces/store"
	export default {
		data() {
			return {
				goodsArr: [],
				classify: [
					{ name: "全部", category_id: "" }
				],
				cid		: "",
				page	: 1
			};
		},
		mounted(){
			uni.setNavigationBarTitle({
				title: this.$Route.query.title
			})
			this.getLists()
			this.getClassify()
		},
		methods:{
			// 商品列表
			getLists() {
				lists({
					category_id	: this.$Route.query.id,
					category_cid: this.cid,
					page		: this.page
				}).then(res => {
					if(res.page.current === 1){
						this.goodsArr = []
					}
					this.goodsArr = this.goodsArr.concat(res.data)
					this.status = res.page.has_more ? 'loadmore' : 'nomore'
					uni.stopPullDownRefresh()
				})
			},
			// 获取二级分类
			getClassify(){
				classify(this.$Route.query.id).then(res => {
					this.classify = this.classify.concat(res)
				})
			},
			// 二级分类筛选
			onTabs(e){
				this.goodsArr = []
				this.cid	  = e.category_id
				this.getLists()
			},
			
		},
		onPullDownRefresh() {
			this.page = 1
			this.getLists()
		},
		onReachBottom() {
			if(this.status === 'loadmore'){
				this.page += 1
				this.status = 'loading'
				this.getLists()
			}
		},
		onNavigationBarButtonTap() {
			this.$Router.push({name: 'StoreSearch'})
		}
	}
</script>

<style lang="scss" scoped>
	.content{
		background: $window-color;
		min-height: 100vh;
	}
	
	.pages-empty{
		height: 70vh;
	}
	
	// 加载分页
	.pages-load{
		padding-bottom: $padding;
	}
</style>
