<template>
	<view class="content">
		<!-- 顶部搜索 --> 
		<view class="search_wrap layer_between">
			<view class="search_input">
				<input type="text" @confirm="toSearch()" v-model="keyword" placeholder="请输入名称、型号、品牌、厂家搜索" />
				<image class="search_icon" src="../../static/search.png" mode=""></image>
			</view>
			<view class="search_word" @click="toSearch()">搜索</view>
		</view> 
		<!-- 轮播图 -->
		<view class="banner_wrap">
			<swiper :indicator-dots="true" :circular="true" :autoplay="true" indicator-active-color="#fff" indicator-color="rgba(255,255,255,0.5)" :interval="3000" :duration="1000">
				<swiper-item v-for="(item,index) in swiperList" :key="index" @click="toDetail(item)">
					<image :src="item.image" mode="aspectFill"></image>
				</swiper-item>
			</swiper>
		</view>
		<!-- 轴承列表 -->
		<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_search_title">
				<view class="hot_title">热搜名片</view>
			</view>
			<!-- 名片 -->
			<view class="hot_card_wrap flex_wrap_between">
				<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="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: -1,
			// 名片列表
			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/category/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;
			uni.navigateTo({
				url:"/pages/index/cardList?pid="+item.pid+"&id="+item.id
			})
		},
		// 获取名片列表
		getCardList(){
			let t = this;
			let url = "/api/goods/goods_list";
			let params = {
				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(option) {
		// 分享人的id
		if(option.id){
			uni.setStorageSync("pid",option.id)
		}
		// 轮播图
		this.getSwiper();
		// 首页分类数据
		this.getType();
		// 名片列表数据
		this.getCardList();
	},
	onShow() {
		
	},
	onShareAppMessage: function (res) {
	    var that = this;
	   
	   
	        // 来自页面内转发按钮
	        return {
	          title: '分享',
	          path: "/pages/index/index"
	          
	        }
	      
	  }
	
};
</script>

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