<template>
	<page-meta :page-style="themeColor"></page-meta>
	<view class="content">
		<view class="head-wrap">
			<!-- 搜索区域 -->
			<view class="search-wrap uni-flex uni-row">
				<searchSelect @search="search" />
				<!-- 	<view class="flex-item input-wrap">
					<input class="uni-input" maxlength="50" v-model="keyword" @confirm="debounceBtn()" @input="debounceBtn()"
						placeholder="请输入您要搜索的商品名称/编号" />
					<text class="iconfont icon-sousuo3" @tap.stop="debounceBtn()"></text>
				</view> -->
				<view class="iconfont" :class="{ 'icon-apps': isList, 'icon-list': !isList }"
					@click="changeListStyle()"></view>
			</view>

			<!-- 排序 -->
			<view class="sort-wrap">
				<view class="comprehensive-wrap" :class="{ 'color-base-text': orderType === '' }"
					@click="sortTabClick('')">
					<text :class="{ 'color-base-text': orderType === '' }">综合</text>
				</view>

				<view :class="{ 'color-base-text': orderType === 'sale_num' }" @click="sortTabClick('sale_num')">
					销量
				</view>

				<view class="price-wrap" @click="sortTabClick('discount_price')">
					<text :class="{ 'color-base-text': orderType === 'discount_price' }">价格</text>
					<view class="iconfont-wrap">
						<view class="iconfont icon-iconangledown-copy asc" :class="{
								'color-base-text':
									priceOrder === 'asc' && orderType === 'discount_price'
							}"></view>
						<view class="iconfont icon-iconangledown desc" :class="{
								'color-base-text':
									priceOrder === 'desc' && orderType === 'discount_price'
							}"></view>
					</view>
				</view>

				<view :class="{ 'color-base-text': orderType === 'screen' }" class="screen-wrap">
					<text @click="sortTabClick('screen')">筛选</text>
					<view @click="sortTabClick('screen')" class="iconfont-wrap">
						<view class="iconfont icon-shaixuan color-tip"></view>
					</view>
				</view>
			</view>
		</view>

		<mescroll-uni top="180" ref="mescroll" @getData="getGoodsList">
			<block slot="list">
				<view class="goods-list single-column" style="padding: 32rpx 32rpx 0;" :class="{ show: !isList }">
					<horizontalGoodsItem v-for="(item, index) in goodsList" :key="index" :item="item" @click="toDetail">
					</horizontalGoodsItem>
					<u-loadmore v-if="goodsList.length && !isList" :status.sync="loadStatus" :line="true" />
				</view>

				<view class="rol2_Item" v-if="isList">
					<directionGoodsItem :pageUrlName='pageUrlName' ref="directionGoodsItem"
						v-for="(item, index) in goodsList" :key="index" :item="item" @click="toDetail"
						class="rol2_Item_components"></directionGoodsItem>
					<u-loadmore v-if="goodsList.length && isList" :status.sync="loadStatus" :line="true" />
				</view>
				<view v-if="goodsList.length == 0 && emptyShow">
					<ns-empty text="暂无商品"></ns-empty>
				</view>
			</block>
		</mescroll-uni>

		<!-- 筛选弹出框 -->
		<uni-drawer :visible="showScreen" mode="right" @close="showScreen = false" class="screen-wrap">
			<view class="title color-tip">筛选</view>
			<scroll-view scroll-y>
				<!-- 包邮 -->
				<!-- <view class="item-wrap">
					<view class="label"><text>是否包邮</text></view>
					<view class="list">
						<uni-tag
							:inverted="true"
							text="包邮"
							:type="isFreeShipping ? 'primary' : 'default'"
							@click="isFreeShipping = !isFreeShipping"
						/>
					</view>
				</view> -->

				<!-- 价格筛选项 -->
				<view class="item-wrap">
					<view class="label"><text>价格区间(元)</text></view>
					<view class="price-wrap">
						<input class="uni-input" type="digit" v-model="minPrice" placeholder="最低价" />
						<view class="h-line"></view>
						<input class="uni-input" type="digit" v-model="maxPrice" placeholder="最高价" />
					</view>
				</view>

				<!-- 生产厂家 -->

				<view class="item-wrap">
					<view class="item-Manufacturer">生产厂家</view>
					<view class="df aic fw">
						<view v-for="(item, index) in BusinessList" :key="index" v-if="BusinessList.length">
							<view :class="{ manufactorActive: indexa == index }" class="manufactor df aic jcsa"
								@click="Selectmanufacturer(item, index)">
								{{ item }}
							</view>
						</view>

						<view v-else class="manufactor df aic jcsa">暂无生产厂家</view>
					</view>
				</view>
				<!-- 品牌筛选项 -->
				<!-- <view class="item-wrap" v-if="brandList.length > 0">
					<view class="label"><text>品牌</text></view>
					<view class="list">
						<view v-for="(item, index) in brandList" :key="index">
							<uni-tag
								:inverted="true"
								:text="item.brand_name"
								:type="item.brand_id == brandId ? 'primary' : 'default'"
								@click="
									brandId == item.brand_id
										? (brandId = 0)
										: (brandId = item.brand_id)
								"
							/>
						</view>
					</view>
				</view> -->

				<!-- 分类筛选项 -->
				<!-- <view class="category-list-wrap">
					<text class="first">全部分类</text>
					<view class="class-box">
						<view @click="selectedCategory('')" class="list-wrap">
							<text
								:class="{ selected: !categoryId, 'color-base-text': !categoryId }"
							>
								全部
							</text>
						</view>
						<view
							@click="selectedCategory(item.category_id)"
							v-for="(item, index) in categoryList"
							:key="index"
							class="list-wrap"
						>
							<text
								:class="{
									selected: item.category_id == categoryId,
									'color-base-text': item.category_id == categoryId
								}"
							>
								{{ item.category_name }}
							</text>
						</view>
					</view>
				</view> -->
			</scroll-view>

			<view class="footer df aic" :class="{ 'safe-area': isIphoneX }">
				<view class="footer-btn  " @click="resetData">重置</view>
				<view class="footer-btn1 " @click="screenData">确定</view>
			</view>
		</uni-drawer>
		<loading-cover ref="loadingCover"></loading-cover>
	</view>
</template>

<script>
	import uniDrawer from '../components/uni-drawer/uni-drawer.vue';
	// import uniTag from '@/components/uni-tag/uni-tag.vue';
	import list from './public/js/list.js';
	import directionGoodsItem from '@/components/directionGoodsItem.vue';
	import horizontalGoodsItem from '@/components/horizontalGoodsItem.vue';
	export default {
		components: {
			uniDrawer,
			// uniTag,
			directionGoodsItem,
			horizontalGoodsItem
		},
		data() {
			return {

			};
		},
		mixins: [list],
		onLoad() {},
		methods: {}
	};
</script>

<style lang="scss">
	@import './public/css/list.scss';
</style>
<style scoped lang="scss">
	::v-deep {
		.uni-tag--primary.uni-tag--inverted {
			background-color: #f5f5f5 !important;
		}

		.u-icon__icon {
			font-size: 50rpx !important;
		}

		.bottom {
			flex-direction: column;
			justify-content: center !important;
			align-items: flex-start !important;
		}

		.bottom div:nth-child(2) {
			width: 100%;
			justify-content: flex-end;
		}

		.rol2_Item {
			width: 95%;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			margin: 30rpx auto;

			.rol2_Item_components {
				/* #ifdef MP-WEIXIN */
				width: 49%;
				display: flex;
				/* #endif */
			}
		}
	}

	.item-Manufacturer {
		padding: 24rpx;
	}

	.manufactor {
		background-color: rgb(245, 245, 245);
		border-radius: 20rpx;
		margin: 10rpx 22rpx;
		padding: 10rpx 30rpx;
	}

	.manufactorActive {
		background-color: rgb(33, 187, 243);
	}
</style>