<template>
	<view class="content">
		<view class="header">
			<!-- 搜索-->
			<view class="searchBar">
				<icon class="searchIcon" type="search" size="14"></icon>
				<input class="searchIpt" placeholder="老花镜" confirm-type="search"/>
			</view>
			
			<!-- 筛选栏-->
			<view class="screenBar">
				<view  v-for="item in screenItems" :key="item.current" @click="onClickItem(item.current)"  >
					<view class="screenItem"  v-bind:class="{ active: current === item.current }" v-if="item.current === 2" @click="dropDown">
						{{ item.text }}<icon type="info" size="14"></icon>
					</view>
					<view class="screenItem"  v-bind:class="{ active: current === item.current }" v-if="item.current === 4"  @click="showDrawer('showRight')">
							{{ item.text }}<icon type="info" size="14"></icon>
					</view>
					<view v-if="item.current !== 2&&item.current!==4">
						<view class="screenItem"  v-bind:class="{ active: current === item.current }">{{ item.text }}</view>
					</view>
				</view>
			</view>
		</view>
		<Uni-drawer ref="showRight" mask="true" maskClick=true mode="right" :width="320" @change="change($event,'showRight')"> 
			<view class="close">
				<view  @click="closeDrawer('showRight')"><text class="word-btn-white">关闭</text></view>
			</view>
		</Uni-drawer>
		
		
		
		<!-- 筛选菜单-->
		<view class="content-wrap">
			<view>
				<HMfilterDropdown :filterData="filterData" :defaultSelected ="filterDropdownValue" :updateMenuName="true" @confirm="confirm" dataFormat="Object"></HMfilterDropdown>
				<!-- 商品列表 -->
				<view class="goods-list">
					<view class="product-list">
						<view class="product" v-for="(goods) in goodsList" :key="goods.goods_id" @tap="toGoods(goods.goods_id)">
							<image mode="widthFix" :src="goods.img" ></image>
							<view class="name">{{goods.name}}</view>
							<view class="info">
								<view class="priceBox">
								<view class="price">{{goods.price}}</view>
								<view class="originCost">{{goods.originCost}}</view>
								</view>
								<view class="slogan">{{goods.slogan}}</view>
							</view>
						</view>
					</view>
					<view class="loading-text">{{loadingText}}</view>
				</view>
				
			</view>
		</view>
	</view>
</template>

<script>
	import UniDrawer from "@/components/Uni-drawer/Uni-drawer.vue";
	import HMfilterDropdown  from "../../components/HM-filterDropdown/HM-filterDropdown.vue";
	import data from '@/common/data.js';//筛选菜单数据
	export default {
		components: {
			'UniDrawer':UniDrawer,
            'HMfilterDropdown':HMfilterDropdown
			},
		data() {
			return {
				screenItems: [
					{current:0,text:'全部',hasIcon:false},
					{current:1,text:'销量',hasIcon:false},
					{current:2,text:'价格',hasIcon:true},
					{current:3,text:'折扣',hasIcon:false},
					{current:4,text:'筛选',hasIcon:true},
					],
				current: 0,
				showRight: false,
				indexArr:'',
				valueArr:'',
				//商品数据
				goodsList:[
					{ goods_id: 0, img: '/static/img/goods/p1.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' },
					{ goods_id: 1, img: '/static/img/goods/p2.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' },
					{ goods_id: 2, img: '/static/img/goods/p3.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' },
					{ goods_id: 3, img: '/static/img/goods/p4.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' },
					{ goods_id: 4, img: '/static/img/goods/p5.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' },
					{ goods_id: 5, img: '/static/img/goods/p6.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' },
					{ goods_id: 6, img: '/static/img/goods/p7.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' },
					{ goods_id: 7, img: '/static/img/goods/p8.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' },
					{ goods_id: 8, img: '/static/img/goods/p9.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' },
					{ goods_id: 9, img: '/static/img/goods/p10.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' }
				],
				loadingText:"正在加载...",
				filterDropdownValue:[],
				filterData:[]
			}
		},
		filters: {
		　　outData(value) {
		　　　　return JSON.stringify(value);
		　　}
		},
		onLoad: function () {
			//定时器模拟ajax异步请求数据
			// setTimeout(()=>{
			// 	//传入defaultSelected的结构不能错，错了就报错运行异常。 不选中的项目传入null
			// 	this.filterDropdownValue = [
			// 		[1,1,0],				//第0个菜单选中 一级菜单的第1项，二级菜单的第1项，三级菜单的第3项
			// 		[null,null],			//第1个菜单选中 都不选中
			// 		[1],					//第2个菜单选中 一级菜单的第1项
			// 		[[0],[1,2,7],[1,0]],	//筛选菜单选中 第一个筛选的第0项，第二个筛选的第1,2,7项，第三个筛选的第1,0项
			// 		[[0],[1],[1]],			//单选菜单选中 第一个筛选的第0项，第二个筛选的第1项，第三个筛选的第1项
			// 	];
				this.filterData = data; 
			// },100);
			// 模拟ajax请求子菜单数据。
			// setTimeout(()=>{
			// 	this.filterData[1].submenu[0].submenu = [{"name": "附近","value": "附近"},{"name": "1km","value": "1km"},{"name": "2km","value": "2km"},{"name": "3km","value": "3km"},{"name": "4km","value": "4km"},{"name": "5km","value": "5km"}];
			// },5000)
		},
		methods: {
			showDrawer(e) {
				this.$refs[e].open()
			},
			closeDrawer(e) {
				this.$refs[e].close()
			},
			change(e, type) {
				this[type] = e
			},
			onClickItem(e) {
				if (this.current !== e) {
					this.current = e;
				}
			},
			dropDown(){
				console.log('下拉')
			},
			//接收菜单结果
			confirm(e){
				this.indexArr = e.index;
				this.valueArr = e.value;
				return;
				console.log('修改菜单');
				this.filterData[4].submenu[1] = {
						"name": "项目2",
						"submenu": [
							
						]
					}
			},
			toGoods(id){
				console.log(id)
			}
		},
		onNavigationBarButtonTap(e) {
			this.showRight = !this.showRight
		},
		//上拉加载，
		onReachBottom(){
			console.log('到底加载')
			let len = this.goodsList.length;
			if(len>=30){
				this.loadingText="~~到底了~~";
				return false;
			}else{
				this.loadingText="正在加载...";
			}
			let end_goods_id = this.goodsList[len-1].goods_id;
			for(let i=1;i<=10;i++){
				let goods_id = end_goods_id+i;
				let p = { goods_id: goods_id, img: '/static/img/goods/p'+(goods_id%10==0?10:goods_id%10)+'.jpg',name: '商品名称', originCost:'￥198' ,price: '￥168', slogan:'1235人付款' };
				this.goodsList.push(p);
			}
		},
	}
</script>

<style lang="scss">
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		background-color: #F7F6F6;
	}
	.header{
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		background-color: #F7F6F6;
		height:178rpx ;
		width: 100%;
		z-index: 999;
		position: fixed;
		top: 0;
		left: 0;
	}
	.searchBar {
		width: 670rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		box-sizing: border-box;
		padding: 0rpx 16rpx;
		border: 1px solid #FF6B4A;
		border-radius: 8rpx;
		background-color: #ffffff;
	}
	
	.searchIpt {
		height: 68rpx;
		width: 670rpx;
		padding: 16rpx;
		font-size: 28rpx;
		box-sizing: border-box;
	}
	.screenBar{
		width: 670rpx;
		height: 110rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		color: #333333;
		font-size: 32rpx;
	}
	.active{
		color: #FF6B4A;
	}
	.screenItem{
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.content-wrap{
		width: 100%;
		background-color: #FFFFFF;
	}
	
	.HMfilterDropdown{
		top: 178rpx !important;
	}
	
	.goods-list{
		padding-top: 286rpx;
		.loading-text{
			width: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			height: 30px;
			color: #979797;
			font-size: 12px;
		}
		.product-list{
			width: 92%;
			padding: 0 4% 3vw 4%; 
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
			.product{
				width: 48%;
				border-radius: 10px;
				background-color: #fff;
				margin: 0 0 7px 0;
				box-shadow: 0 3px 12px rgba(0,0,0,0.1);
				image{
					width: 100%;
					border-radius: 10px 10px 0 0;
					height: 184rpx;
				}
				.name{
					width: 92%;
					padding: 5px 4%;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
					text-align: justify;
					overflow: hidden;
					font-size: 24rpx;
					color: #333333;
				}
				.info{
					display: flex;
					justify-content: space-between;
					align-items: center;
					width: 92%;
					padding: 5px 4% 5px 4%;
					.priceBox{
						display: flex;
						justify-content: space-between;
						align-items: center;
						.price{
							color: #EB5D3B;
							font-size: 28rpx;
							font-weight: 600;
							margin-right: 10rpx;
						}
						.originCost{
							text-decoration:line-through;
							color: #999999;
							font-size: 20rpx;
						}
						
					}
					.slogan{
						color: #999999;
						font-size: 20rpx;
					}
				}
			}
		}
	}

</style>