<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}})"
			/>
		</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		: ""
			};
		},
		mounted(){
			uni.setNavigationBarTitle({
				title: this.$Route.query.title
			})
			this.getLists()
			this.getClassify()
		},
		methods:{
			// 商品列表
			getLists(cid) {
				lists({
					category_id	: this.$Route.query.id,
					category_cid: this.cid
				}).then(res => {
					this.goodsArr = res.data
					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.getLists()
		}
	}
</script>

<style lang="scss" scoped>
	.content{
		background: $window-color;
		min-height: 100vh;
	}
	
	.pages-empty{
		height: 70vh;
	}
</style>
