<template>
	<view class="content">
		<!-- 轴承列表 --> 
		<view class="bearing_classify layer_nostar">
			<!-- 左侧类目 -->
			<view class="bearing_l">
				<view class="bear_l_box flex_column_center">
					<view class="bear_l_single flex_warp" :class="{ bear_l_active: isLeft == item.id }" v-for="(item, index) in leftList" :key="index" @click="changeLeft(item,index)">
						<view class="bear_l_child">{{ item.name }}</view>
					</view>
				</view>
			</view>
			<!-- 右侧具体分类 -->
			<view class="bearing_r">
				<view class="bear_r_box">
					<view class="bear_r_single" :class="{bear_r_active:isRight == item.id}" v-for="(item, index) in rightList" :key="index" @click="changeRight(item,index)">{{ item.name }}</view>
				</view>
			</view>
		</view>
		<!-- 收藏名片 -->
		<view class="hot_search">
			<!-- 名片列表 -->
			<view class="hot_card_wrap flex_wrap_between" v-if="cardList.length>0">
				<view class="card_single" v-for="(item,index) in cardList" :key="index" @click="toDetail(item)">
					<image :src="item.front_image" mode=""></image>
				</view>
			</view>
			<!-- 暂无名片 -->
			<view class="hot_card_wrap" v-else>暂无收藏</view>
			<!-- 分页 -->
			<view class="card_pagation layer_between">
				<view class="prev_page" :class="{next_page:pageNum>1}" @click="prevPage()">上一页</view>
				<view class="layer_between jump_page">
					跳转到
					<input type="text" @confirm="jumpPage()" v-model="pageNum" />
					页
				</view>
				<view class="next_page" :class="{prev:pageNum >= totalPage}" @click="nextPage()">下一页</view>
				<view class="total_page">共{{totalPage}}页</view>
			</view>
		</view>
	</view>
</template>

<script>
	import App from "../../App.vue";
export default {
	data() {
		return {
			// 搜索
			keyword:"",
			// 轮播图
			swiperList:[],
			// 轴承列表
			// 左侧
			leftList: [],
			isLeft: 0,
			// 右侧
			rightList: [],
			isRight: "",
			// 名片列表
			cardList:[],
			// 分页
			pageNum:1,
			// 总页数
			totalPage:"",
		};
	},
	
	methods: {
		// 轮播图
		getSwiper(){
			let t = this;
			let url = "/api/slide/get_slide";
			App.post(url) 
			.then(res=>{
				this.swiperList = res.data;
			})
		},
		// 首页分类数据 左侧一级分类
		getType(){
			let t = this;
			t.leftList = [];
			t.rightList = [];
			let url = "/api/collect/get_category_one";
			App.post(url) 
			.then(res=>{
				t.leftList = res;
				t.rightList = res[0].children;
				t.isLeft = res[0].id;
			})
		},
		// 左侧列表选中
		changeLeft(item,index) {
			this.isLeft = item.id;
			this.rightList = item.children;
			
		},
		// 右侧列表选中
		changeRight(item,index){
			this.isRight = item.id;
			this.getCardList();
		},
		// 获取收藏列表
		getCardList(){
			let t = this;
			let url = "/api/collect/collect_list";
			let params = {
				category_id:t.isRight,
				page:t.pageNum
			};
			App.post(url,params)
			.then(res=>{
				t.totalPage = res.page_sum;
				t.cardList = res.list;
			})
		},
		// 名片详情
		toDetail(item){
			uni.navigateTo({
				url:"/pages/index/cardDetail?id="+item.id
			})
		},
		// 搜索 去名片列表
		toSearch(){
			uni.navigateTo({
				url:"/pages/index/search?keyword="+this.keyword
			})
		},
		// 上一页
		prevPage(){
			if(this.pageNum <=1 )
				return false;
			this.pageNum --;
			this.getCardList()
		},
		// 下一页
		nextPage(){
			if(this.pageNum == this.totalPage){
				return false
			}
			this.pageNum ++;
			this.getCardList()
		},
		// 跳转到某一页
		jumpPage(){
			if(this.pageNum>this.totalPage)
				this.pageNum = this.totalPage;
			this.getCardList()
		},
	},
	onLoad() {
		
	},
	onShow() {
		// 首页分类数据
		this.getType();
		// 名片列表数据
		this.getCardList();
	},
	
};
</script>

<style>
@import url('../../style/index');
.hot_card_wrap{
	border-top: none;
	text-align: center;
}
.bearing_classify{
	border-top: 1upx solid #eee;
}
</style>