<template>
<view class="container" style="min-height: 100vh;">
	<block v-if="isload">
		<view class="search-container" :style="history_show?'height:100%;':''">
			<view class="topsearch flex-y-center">
				<view class="f1 flex-y-center">
					<!-- <image class="img" :src="event_rul +'/static/img/static/img/search_ico.png'"></image> -->
					<text class="iconfont icon-search" style="color: #999; font-size: 50rpx; margin-left: 20rpx;"></text>
					<input :value="keyword" placeholder="内容搜索" placeholder-style="font-size:24rpx;color:#C2C2C2" @confirm="searchConfirm" @input="searchChange" @focus="searchFocus"></input>
				</view>
				<view class="search-btn" v-if="false" @tap="searchbtn">
					<image :src="event_rul +'/static/img/static/img/show-cascades.png'" style="height:36rpx;width:36rpx" v-if="!history_show && productlisttype=='itemlist'"/>
					<image :src="event_rul +'/static/img/static/img/show-list.png'" style="height:36rpx;width:36rpx" v-if="!history_show && productlisttype=='item2'"/>
					<text v-if="history_show">搜索</text>
				</view>
			</view>
			<scroll-view v-show="history_show" style="flex: 1;" scroll-y="true" >
				<view>
					<view class="search-history" >
						<view>
							<text class="search-history-title" style="font-size: 32rpx; font-weight: bold; color: #333;">历史搜索</text>
							<view class="delete-search-history" @tap="deleteSearchHistory">
								<image :src="event_rul +'/static/img/static/img/del.png'" style="width:36rpx;height:36rpx"/>
							</view>
						</view>
						
						<view class="search-history-list">
							<view v-for="(item, index) in history_list" :key="index" class="search-history-item" :data-value="item" @tap="historyClick">{{item}}
							</view>
							<view v-if="!history_list || history_list.length==0" class="flex-y-center"><image :src="event_rul +'/static/img/static/img/tanhao.png'" style="width:36rpx;height:36rpx;margin-right:10rpx"/>暂无记录		</view>
						</view>
					</view>
					
					<view class="rsbox" >
					   <view class="title">
					   		话题热搜榜
					   </view>
					   
					   <view class="item_box">
					   	 <view class="item" v-for="(item,index) in topList"  @click="goto" :data-url="'/diary/topic/topic?id='+item.id" :key='index'>
							 <view class="num">
							 	<!-- {{index+1}} -->
							 </view>
					   	 	<view class="left">
					   	 		<image :src="item.topic_pic" mode=""></image>
								<!-- # -->
					   	 	</view>
							<view class="right" style="display: flex; justify-content: space-between; align-items: center;">
							 <text>{{item.topic_name}}</text>
							 <text class="iconfont icon-arrow-right" style="font-size:40rpx;"></text>
							</view>
					   	 </view>
					   </view>
					</view>
					
				</view>
			</scroll-view>
			<view class="shop_head" v-show="!history_show">
				<view class="item" :class="{'itemz':homeType === 1}" @click="homeTypeFn(1)">
					<text class="txt">笔记</text>
					<text class="heng" :style="{'background-color': t('color1')}" v-if="homeType==1"></text>
				</view>
				<view class="item" :class="{'itemz':homeType === 2}"  @click="homeTypeFn(2)">
					
					<text class="txt">视频</text>
					<text class="heng" :style="{'background-color': t('color1')}" v-if="homeType==2"></text>
				</view>
				<view class="item" :class="{'itemz':homeType === 3}"  @click="homeTypeFn(3)">
					
					<text class="txt">用户</text>
					<text class="heng" :style="{'background-color': t('color1')}" v-if="homeType==3"></text>
				</view>
				<view class="item" :class="{'itemz':homeType === 4}"  @click="homeTypeFn(4)">
					
					<text class="txt">话题</text>
					<text class="heng" :style="{'background-color': t('color1')}" v-if="homeType==4"></text>
				</view>
			</view>
			
		<view  v-if="homeType < 3 && !history_show">
			<view class="search-navbar" style="padding:0 20rpx;" v-show="!history_show">
					<view @tap.stop="sortClick" :class="{'itemz':(!field||field==1)}" class="search-navbar-item"  :data-field="1" data-order="desc">
						
						<text class="txt">综合</text>
						</view>
					<view @tap.stop="sortClick" :class="{'itemz':(field==2)}" class="search-navbar-item"  :data-field="2" data-order="desc">
						<text class="txt">最热</text>
						<!-- <text class="heng" v-if="field==2"></text> -->
						</view>
					<view @tap.stop="sortClick" :class="{'itemz':(field==3)}" class="search-navbar-item"  :data-field="3" data-order="desc">
						<text class="txt">最新</text>
						<!-- <text class="heng" v-if="field==3"></text> -->
					</view>
					<!-- <view @tap.stop="sortClick" :class="{'itemz':(field=='sell_price')}"   class="search-navbar-item" data-field="sell_price" :data-order="order=='asc'?'desc':'asc'">
						<text  class="txt">价格</text>
						    <text style="font-size: 26rpx;" class="iconfont icon-jiantou_shangxiaqiehuan_o"></text>
						<text class="iconfont icon-danbianjiantou1" :class="{'itemzz':(field=='sell_price')}" :style="field=='sell_price'&&order=='asc'?'color:'+'#efbd6f':''"></text>
						<text style="margin-left: -16rpx;" class="iconfont icon-danbianjiantou" :class="{'itemzz':(field=='sell_price')}" :style="field=='sell_price'&&order=='desc'?'color:'+'#efbd6f':''"></text>
					</view> -->
					<!-- <view  class="search-navbar-item flex-x-center flex-y-center" @click.stop="showDrawer('showRight')">筛选 <text :class="'iconfont iconshaixuan ' + (showfilter?'active':'')"></text></view> -->
				</view>
			
			<view class="product-container">
				
				<block v-if="datalist && datalist.length>0">
			
			      <diary-falls-list @listZanFn='listZanFn' :datalist='datalist' v-if="datalist && datalist.length>0"> </diary-falls-list>
					<!-- <dp-product-itemlist v-if="productlisttype=='itemlist'" :data="datalist" :menuindex="menuindex"></dp-product-itemlist> -->
					<!-- <dp-product-item types='search' v-if="productlisttype=='item2'" :data="datalist" :menuindex="menuindex"></dp-product-item> -->
				</block>
				<nomore text="没有更多内容了" v-if="nomore"></nomore>
				<nodata text="没有查找到相关内容" v-if="nodata"></nodata>
				<loading v-if="loading"></loading>
			</view>
		</view>
		<view v-else-if="homeType == 3 &&!history_show" style="padding: 20rpx;">
			<!-- <shopList v-if="datalist.length" :list='datalist'></shopList> -->
		   <view class="list_box">
		  <view class="item" @click="goto" :data-url='"/diary/info/info?id="+item.id' v-for="(item,index) in datalist" :key='index'>
		  	<view class="left">
		  		<view class="l_left" style="border: 1px solid #ccc;">
		  			<image :src="item.headimg" mode=""></image>
		  		</view>
		  		<view class="l_right">
		  			<view class="p1">
		  				{{item.nickname}}
		  			</view>
		  			<view class="p2">
		  				ID:{{item.id}}
		  			</view>
		  			<view class="p3">
		  				笔记·{{item.not_count}} | 粉丝·{{item.fans_count}}
		  			</view>
		  		</view>
		  	</view>
		  
			<view @click.stop> 
			<view class="right" :style="{'background-color':!item.is_follow?t('color1'):'','color':!item.is_follow?'#fff':t('color1'),'border': '1px solid ' +t('color1') }" @click="Follow(item,'user')">
				{{item.is_follow?'已关注':'关注'}}
			</view>
			
			</view>
		  </view>
		   </view>
			<nomore text="没有更多内容了" v-if="nomore"></nomore>
			<nodata text="没有查找到相关内容" v-if="nodata"></nodata>
			<loading v-if="loading"></loading>
		</view>
		<view v-else-if="homeType == 4 &&!history_show" style="padding: 20rpx;">
			<!-- <shopList v-if="datalist.length" :list='datalist'></shopList> -->
			
			<view class="list_box">
			<view class="item" v-for="(item,index) in datalist"    @click="goto" :data-url="'/diary/topic/topic?id='+item.id" :key='index'>
				<view class="left">
					<view class="l_left" :style="{'background-color':t('color1'),'width':'40rpx','height':'40rpx','color':'#fff','text-align':'center','line-height':'40rpx'}">
						#
					</view>
					<view class="l_right">
						<view class="p1">
							{{item.topic_name}}
						</view>
						<view class="p2">
							话题·{{item.member_count}}人参与讨论
						</view>
					</view>
				</view>
				<view @click.stop="">
					
					
					<view class="right" :style="{'background-color':!item.is_follow?t('color1'):'','color':!item.is_follow?'#fff':t('color1'),'border': '1px solid ' +t('color1')}" @click="Follow(item,'topic')">
						{{item.is_follow?'已关注':'关注'}}
					</view>
				</view>
			</view>
			</view>
			<nomore text="没有更多内容了" v-if="nomore"></nomore>
			<nodata text="没有查找到相关内容" v-if="nodata"></nodata>
			<loading v-if="loading"></loading>
		</view>
			<uni-drawer ref="showRight" mode="right" @change="change($event,'showRight')" :width="280">
				<view class="filter-scroll-view">
					<scroll-view class="filter-scroll-view-box" scroll-y="true">
						<view class="search-filter">
							<view class="filter-title">筛选</view>
							<view class="filter-content-title">内容分组</view>
							<view class="search-filter-content">
								<view class="filter-item" :style="catchegid==''?'color:'+t('color1')+';background:rgba('+t('color1rgb')+',0.1)':''" @tap.stop="groupClick" data-gid="">全部</view>
								<block v-for="(item, index) in glist" :key="index">
									<view class="filter-item" :style="catchegid==item.id?'color:'+t('color1')+';background:rgba('+t('color1rgb')+',0.1)':''" @tap.stop="groupClick" :data-gid="item.id">{{item.name}}</view>
								</block>
							</view>
							<block v-if="!bid || bid <=0">
							<view class="filter-content-title">话题分类</view>
							<view class="search-filter-content">
								<view class="filter-item" :style="catchecid==oldcid?'color:'+t('color1')+';background:rgba('+t('color1rgb')+',0.1)':''" @tap.stop="cateClick" :data-cid="oldcid">全部</view>
								<block v-for="(item, index) in clist" :key="index">
									<view class="filter-item" :style="catchecid==item.id?'color:'+t('color1')+';background:rgba('+t('color1rgb')+',0.1)':''" @tap.stop="cateClick" :data-cid="item.id">{{item.name}}</view>
								</block>
							</view>
							</block>
							<block v-else>
							<view class="filter-content-title">内容分类</view>
							<view class="search-filter-content">
								<view class="filter-item" :style="catchecid2==oldcid2?'color:'+t('color1')+';background:rgba('+t('color1rgb')+',0.1)':''" @tap.stop="cate2Click" :data-cid2="oldcid2">全部</view>
								<block v-for="(item, index) in clist2" :key="index">
									<view class="filter-item" :style="catchecid2==item.id?'color:'+t('color1')+';background:rgba('+t('color1rgb')+',0.1)':''" @tap.stop="cate2Click" :data-cid2="item.id">{{item.name}}</view>
								</block>
							</view>
							</block>

							<view class="search-filter-btn">
								<view class="btn" @tap="filterReset">重置</view>
								<view class="btn2" :style="{background:t('color1')}" @tap="filterConfirm">确定</view>
							</view>
						</view>
					</scroll-view>
				</view>
			</uni-drawer>

			
		</view>
	
	</block>
	<loading v-if="loading"></loading>
	<dp-tabbar :opt="opt" @getmenuindex="getmenuindex"></dp-tabbar>
	<popmsg ref="popmsg"></popmsg>
</view>
</template>

<script>
	// import shopList from './shop_list'
var app = getApp();
export default {
	// components:{
	// 	shopList
	// },
  data() {
    return {
		homeType:1,
		opt:{},
		loading:false,
		isload: true,
		menuindex:-1,

		nomore:false,
		nodata:false,
		keyword: '',
		pagenum: 1,
		datalist: [],
		history_list: [],
		history_show: true,
		order: '',
		field:1,
		oldcid: "",
		catchecid: "",
		catchegid: "",
		cid: "",
		gid: '',
		cid2:'',
		oldcid2: "",
		catchecid2: "",
		clist: [],
		clist2: [],
		glist: [],
		productlisttype: 'item2',
		showfilter: "",
		cpid:0,
		bid:0,
		topList:[],

		event_rul: app.globalData.event_url,
    };
  },
  onLoad: function (opt) {
		this.opt = app.getopts(opt);
		this.getTopSerach();
		this.oldcid = this.opt.cid || '';
		this.catchecid = this.opt.cid;
		this.cid = this.opt.cid;
		this.cid2 = this.opt.cid2 || '';
		this.oldcid2 = this.opt.cid2 || '';
		this.catchecid2 = this.opt.cid2;
		this.gid = this.opt.gid;
		this.cpid = this.opt.cpid || 0;
		this.bid = this.opt.bid ? this.opt.bid : 0;
		if(this.opt.keyword) {
			this.keyword = this.opt.keyword;
		}
		//console.log(this.bid);
		if(this.cpid > 0){
			uni.setNavigationBarTitle({
				title: '可用内容列表'
			});
		}
    var productlisttype = app.getCache('productlisttype');
    if (productlisttype) this.productlisttype = productlisttype;
		this.history_list = app.getCache('search_diary_list');
		// this.getdata();
  },
	onPullDownRefresh: function () {
		this.getdata();
	},
  onReachBottom: function () {
   
	
		if (!this.nodata && !this.nomore &&!this.history_show) {
		  this.pagenum = this.pagenum + 1;
		  this.getprolist();
		}
	
  },
  methods: {
	  	listZanFn(e){
				this.datalist[e.index].iszan = e.show;
				if(this.datalist[e.index].binfo){
this.datalist[e.index].zan_num = e.num;
}else{
this.datalist[e.index].zan = e.num;
}
			},
	  Follow(item,type){
	  	app.post('ApiMy/addFollow',{follow_id:item.id,type:type},(res)=>{
	  		// this.info = res.data
	  		uni.showToast({
	  			title:res.msg,
	  			icon:'none'
	  		})
		if(res.msg == '已关注'){
		item.is_follow = 1
		if(type == 'user'){
			item.fans_count++
		}
		}else{
			item.is_follow = 0
			item.fans_count-- 
		}
	  	})
	  },
	  getDataList: function (loadmore) {
	  		if(!loadmore){
	  			this.pagenum = 1;
	  			this.datalist = [];
	  		}
	    var that = this;
	    var pagenum = that.pagenum;
		that.history_show = false;
	    var keyword = that.keyword;
	  		that.loading = true;
	  		that.nodata = false;
	  		that.nomore = false;
	    app.post('ApiBusiness/blist', {pagenum: pagenum,keyword: keyword}, function (res) {
	      that.loading = false;
	  			// uni.stopPullDownRefresh();
	      var data = res.data;
	      if (pagenum == 1) {
	        that.datalist = data;
	        if (data.length == 0) {
	          that.nodata = true;
	        }
	      }else{
	        if (data.length == 0) {
	          that.nomore = true;
	        } else {
	          var datalist = that.datalist;
	          var newdata = datalist.concat(data);
	          that.datalist = newdata;
	        }
	      }
	    });
	  },
	  homeTypeFn(e){
		  this.homeType = e;
		  this.pagenum = 1;
		  this.field = 1;
		  this.datalist = [];
		    this.getprolist()
		 
	  },
	  getTopSerach:function(){
		  var that = this;
		app.get('ApiZhiwei/topicSortList', {}, function (res) {
			
		  that.topList = res.data
		});
	  },
		getdata:function(){
			var that = this;
			that.pagenum = 1;
			that.datalist = [];
			var cid = that.opt.cid;
			var gid = that.opt.gid;
			var bid = that.opt.bid ? that.opt.bid : '';
			var cid2 = that.cid2;
			that.loading = true;
			app.get('ApiShop/prolist', {cid: cid,gid: gid,bid:bid,cid2:cid2}, function (res) {
				that.loading = false;
			  that.clist = res.clist;
			  that.clist2 = res.clist2;
			  that.glist = res.glist;
				that.loaded();
				that.getprolist();
			});
		},
    getprolist: function () {
      var that = this;
      var pagenum = that.pagenum;
      var keyword = that.keyword;
      var order = that.order;
      var field = that.field;
      var gid = that.gid;
      var cid = that.cid;
			var cid2 = that.cid2;
      var cpid = that.cpid;
      that.history_show = false;
			that.loading = true;
			that.nodata = false;
      that.nomore = false;
			var bid = that.opt.bid ? that.opt.bid : '';
			// ,order: order,gid: gid,cid: cid,cid2:cid2,cpid:cpid,bid:bid
      app.post('ApiZhiwei/appNotVideoListSearch',{page: pagenum,name_field: keyword,type_field:field,type : that.homeType}, function (res) {
				that.loading = false;
        var data = res.data;
        if (pagenum == 1) {
          that.datalist = data;
          if (data.length == 0) {
            that.nodata = true;
          }
        }else{
          if (data.length == 0) {
            that.nomore = true;
          } else {
            var datalist = that.datalist;
            var newdata = datalist.concat(data);
            that.datalist = newdata;
          }
        }
      });
    },
		// 打开窗口
		showDrawer(e) {
			console.log(e)
			this.$refs[e].open()
		},
		// 关闭窗口
		closeDrawer(e) {
			this.$refs[e].close()
		},
		// 抽屉状态发生变化触发
		change(e, type) {
			console.log((type === 'showLeft' ? '左窗口' : '右窗口') + (e ? '打开' : '关闭'));
			this[type] = e
		},
    searchChange: function (e) {
      this.keyword = e.detail.value;
      if (e.detail.value == '') {
        this.history_show = true;
        this.datalist = [];
      }
    },
		searchFocus: function (e) {
      this.history_show = true;
    },
    searchbtn: function () {
      var that = this;
      if (that.history_show) {
        var keyword = that.keyword;
        that.searchproduct();
      } else {
        if (that.productlisttype == 'itemlist') {
          that.productlisttype = 'item2';
          app.setCache('productlisttype', 'item2');
        } else {
          that.productlisttype = 'itemlist';
          app.setCache('productlisttype', 'itemlist');
        }
      }
    },
    searchConfirm: function (e) {
      var that = this;
      var keyword = e.detail.value;
      that.keyword = keyword;
	  that.searchproduct();
	 
    },
    searchproduct: function () {
      var that = this;
      that.pagenum = 1;
      that.datalist = [];
      that.addHistory();
	  that.getprolist();
	
    },
    sortClick: function (e) {
      var that = this;
      var t = e.currentTarget.dataset;
      that.field = t.field;
      that.order = t.order;
      that.searchproduct();
    },
    groupClick: function (e) {
      var that = this;
      var gid = e.currentTarget.dataset.gid;
			if(gid === true) gid = '';
      that.catchegid = gid
    },
    cateClick: function (e) {
      var that = this;
      var cid = e.currentTarget.dataset.cid;
			if(cid === true) cid = '';
      that.catchecid = cid
    },
    cate2Click: function (e) {
      var that = this;
      var cid2 = e.currentTarget.dataset.cid2;
			if(cid2 === true) cid2 = '';
      that.catchecid2 = cid2
    },
		filterConfirm(){
			this.cid = this.catchecid;
			this.cid2 = this.catchecid2;
			this.gid = this.catchegid;
			this.searchproduct();
			this.$refs['showRight'].close()
		},
		filterReset(){
			this.catchecid = this.oldcid;
			this.catchecid2 = this.oldcid2;
			this.catchegid = '';
		},
    filterClick: function () {
      this.showfilter = !this.showfilter
    },
    addHistory: function () {
      var that = this;
      var keyword = that.keyword;
      if (app.isNull(keyword)) return;
      var historylist = app.getCache('search_diary_list');
      if (app.isNull(historylist)) historylist = [];
      historylist.unshift(keyword);
      var newhistorylist = [];
      for (var i in historylist) {
        if (historylist[i] != keyword || i == 0) {
          newhistorylist.push(historylist[i]);
        }
      }
      if (newhistorylist.length > 5) newhistorylist.splice(5, 1);
      app.setCache('search_diary_list', newhistorylist);
      that.history_list = newhistorylist
    },
    historyClick: function (e){
      var that = this;
      var keyword = e.currentTarget.dataset.value;
      if (keyword.length == 0) return;
      that.keyword = keyword;
      that.searchproduct();
    },
    deleteSearchHistory: function () {
      var that = this;
      that.history_list = null;
      app.removeCache("search_diary_list");
    }
  }
};
</script>
<style lang="scss">
	
	.list_box{
		.item{
			margin-bottom: 20rpx;
			align-items: center;
			display: flex;
			justify-content: space-between;
			.left{
				display: flex;
				align-items: center;
				
				.l_left{
					width: 100rpx;
					height: 100rpx;
					border-radius: 100rpx;
					overflow: hidden;
					margin-right: 20rpx;
					image{
						width: 100%;
						height: 100%;
					}
				}
				.l_right{
					.p1{
						font-size: 30rpx;
						font-weight: bold;
						width: 100%;
						   overflow: hidden; /*超出长度的文字隐藏*/
						       text-overflow:ellipsis;/*文字隐藏以后添加省略号*/
						           white-space: nowrap; /*强制不换行*/
					}
					.p2{
						color: #999;
						margin: 5rpx 0;
					}
					.p3{
						color: #999;
					}
				}
			}
			.right{
				border: 1px solid #f4d19c;
				color: #f4d19c;
				width: 120rpx;
				height: 50rpx;
				border-radius: 6rpx;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}
	}
	
	.shop_head{
	display: flex;
	justify-content: space-around;
	padding: 10rpx 150rpx;
	font-weight: bold;
	color: #111;
	
	
	
	.item{
		position: relative;
		.txt{
			z-index: 1;
			position: relative;
		}
	}
	.heng{
			   display: flex;
			   height: 6rpx;
			   background-color: #efbd6f;
			   border-radius: 6rpx;
			   width: 110%;
			   margin-left: -2rpx;
			   margin-top: -28rpx;
			   position: absolute;
			   bottom: 4rpx;
			   
	}
	}
	.rsbox{
		padding: 30rpx;
		.title{
			font-size: 32rpx; font-weight: bold; color: #333;
		}
		.item_box{
			.item{
				display: flex;
				align-items: center;
				margin-top: 20rpx;
			  .left{
				  width: 100rpx;
				  height: 100rpx;
				  // border-radius: 40rpx;
				  // background-color: #f0bd71;
				  // display: flex;
				  // align-items: center;
				  // justify-content: center;
				  // color: #fff;
				  // font-weight: bold;
				  image{
					  border-radius: 10rpx;
					  width: 100%;
					  height: 100%;
				  }
			  }
			  .right{
				  height: 100rpx;
				  flex: 1;
				  display: flex;
				  align-items: center;
				  margin-left: 20rpx;
				  justify-content: space-between;
				  // border-bottom: 1px solid #EBEBEB;
				  overflow: hidden;
				  color: #333;
				  .right_left{
					 // width: 80%;
					 flex: 1;
					  overflow: hidden;
					  text-overflow:ellipsis;
					  white-space: nowrap;
				  }
				  .right_right{
					  // width: 20%;
					  .iconfont{
						  font-size: 50rpx;
						  color: #666;
					  }
				  }
			  }
			}
		}
	}
	.container{
		background-color: #fff;
	}
.search-container {width: 100%;background: #fff;z-index:9;top:var(--window-top);display: flex;
flex-direction: column; 
}
.topsearch{width:100%;padding:16rpx 20rpx;}
.topsearch .f1{height:60rpx;border-radius:30rpx;border:0;background-color:#f7f7f7; border: 1rpx solid rgba(255, 255, 255, 0.6);flex:1}
.topsearch .f1 .img{width:24rpx;height:24rpx;margin-left:10px}
.topsearch .f1 input{height:100%;flex:1;padding:0 20rpx;font-size:28rpx;color:#333;}
.topsearch .search-btn{display:flex;align-items:center;color:#5a5a5a;font-size:30rpx;width:60rpx;text-align:center;margin-left:20rpx}
.search-navbar {
	.itemz{
	   // color:#efbd
	   // font-size: 36rpx;
	   color: #111;
	   font-weight: bold;
	   .txt{
		   // border-bottom: 4rpx solid #efbd6f;
		z-index: 1;
	   }
	   
	   .heng{
	   		   display: flex;
	   		   width: 100%;
	   		   height: 8rpx;
	   		   background-color: #efbd6f;
	   		   border-radius: 6rpx;
	   		   width: 60rpx;
	   		   margin-top: -28rpx;
	   		   position: absolute;
	   		   bottom: 18rpx;
	   		   
	   }
	   
	}
	display: flex;
	text-align: center;
	align-items:center;
	padding:5rpx 0;


}
.search-navbar-item {
	margin-right: 88rpx;
	
	display: flex;
	justify-content: center;
height: 70rpx; line-height: 70rpx;position: relative;font-size:28rpx;
}

.search-navbar-item .iconshangla{position: absolute;top:-4rpx;padding: 0 6rpx;font-size: 20rpx;color:#7D7D7D}
.search-navbar-item .icondaoxu{position: absolute;top: 8rpx;padding: 0 6rpx;font-size: 20rpx;color:#7D7D7D}
.search-navbar-item .iconshaixuan{margin-left:10rpx;font-size:22rpx;color:#7d7d7d}
.search-history {padding: 24rpx 34rpx;}
.search-history .search-history-title {color: #666;}
.search-history .delete-search-history {float: right;padding: 15rpx 20rpx;margin-top: -15rpx;}
.search-history-list {padding: 24rpx 0 0 0;}
.search-history-list .search-history-item {
	display: inline-block;height: 50rpx;line-height: 50rpx;padding: 0 20rpx;margin: 0 10rpx 10rpx 0;background: #eee;  border-radius: 50rpx;font-size: 26rpx;}

.filter-scroll-view{margin-top:var(--window-top)}
.search-filter{display: flex;flex-direction: column;text-align: left;width:100%;flex-wrap:wrap;padding:0;}
.filter-content-title{color:#999;font-size:28rpx;height:30rpx;line-height:30rpx;padding:0 30rpx;margin-top:30rpx;margin-bottom:10rpx}
.filter-title{color:#BBBBBB;font-size:32rpx;background:#F8F8F8;padding:60rpx 0 30rpx 20rpx;}
.search-filter-content{display: flex;flex-wrap:wrap;padding:10rpx 20rpx;}
.search-filter-content .filter-item{background:#F4F4F4;border-radius:28rpx;color:#2B2B2B;font-weight:bold;margin:10rpx 10rpx;min-width:140rpx;height:56rpx;line-height:56rpx;text-align:center;font-size: 24rpx;padding:0 30rpx}
.search-filter-content .close{text-align: right;font-size:24rpx;color:#ff4544;width:100%;padding-right:20rpx}
.search-filter button .icon{margin-top:6rpx;height:54rpx;}
.search-filter-btn{display:flex;padding:30rpx 30rpx;justify-content: space-between}
.search-filter-btn .btn{width:240rpx;height:66rpx;line-height:66rpx;background:#fff;border:1px solid #e5e5e5;border-radius:33rpx;color:#2B2B2B;font-weight:bold;font-size:24rpx;text-align:center}
.search-filter-btn .btn2{width:240rpx;height:66rpx;line-height:66rpx;border-radius:33rpx;color:#fff;font-weight:bold;font-size:24rpx;text-align:center}

.product-container {width: 100%; padding-top: 20rpx; font-size:26rpx;padding:0 24rpx}
</style>