<template>
	<view class="wrap">
		<view v-if="flowList.length">
			<view class="goods-list">
				<view
					v-for="(item, index) in flowList"
					:key="index"
					class="goods-item"
				>
					<view
						class="image-wrapper"
						@click="navigateToDetailPage(item)"
					>
						<image
							:src="removeOssStyle(item.content.thumbnail)"
							mode="aspectFill"
						></image>
					</view>
					<view class="goods-detail">
						<div
							class="title"
							@click="navigateToDetailPage(item)"
						>
							{{ item.content.goodsName }}
						</div>
						<view
							class="price-box"
							@click="navigateToDetailPage(item)"
						>
							<div
								class="price"
								v-if="item.content.price != undefined"
							>
								¥
								<span>{{ formatPrice(item.content.price)[0] }}</span>
								.{{ formatPrice(item.content.price)[1] }}
							</div>
						</view>

						<div
							class="promotion"
							@click="navigateToDetailPage(item)"
						>
							<div
								v-for="(promotionItem, promotionIndex) in getPromotion(item)"
								:key="promotionIndex"
							>
								<span v-if="promotionItem.indexOf('COUPON') != -1">劵</span>
								<span v-if="promotionItem.indexOf('FULL_DISCOUNT') != -1">满减</span>
								<span v-if="promotionItem.indexOf('SECKILL') != -1">秒杀</span>
							</div>
						</div>
						<div
							class="count-config"
							@click="navigateToDetailPage(item)"
						>
							<span>已售 {{ item.content.buyCount || '0' }}</span>
							<span>{{ item.content.commentNum || '0' }}条评论</span>
						</div>
						<div
							class="store-seller-name"
							@click="navigateToStoreDetailPage(item)"
						>
							<div class="text-hidden">
								<u-tag
									style="margin-right: 10rpx"
									size="mini"
									mode="dark"
									v-if="item.selfOperated"
									text="自营"
									type="error"
								/>
								<span>{{ item.content.storeName || '暂无' }}</span>
							</div>
							<span>
								<u-icon name="arrow-right"></u-icon>
							</span>
						</div>
					</view>
				</view>
			</view>

			<u-loadmore
				style="padding: 10px 0"
				bg-color="#f8f8f8"
				:status="loadStatus"
				@loadmore="getData"
			></u-loadmore>
		</view>
		<u-empty
			v-else
			class="mt20"
			style="margin-top: 20%"
			text="暂无数据"
			mode="data"
		></u-empty>
	</view>
</template>

<script>
import { getGoodsList } from '@/api/goods.js';
export default {
	props: {
		keywords: {
			default: ''
		}
	},
	data() {
		return {
			flag: 1, // 在tabs中的索引
			loadStatus: 'loadmore',
			flowList: [],
			page: 0,
			totalPage: 0,
			search: ''
			// 查询商品参数
			// params: {
			//   pageNumber: 1,
			//   pageSize: 10,
			//   keyword: "",
			// }
		};
	},
	created() {
		this.initData();
	},
	methods: {
		async getData() {
			if (this.loadStatus != 'loadmore') return;
			console.log('加载商品数据');
			this.page += 1;
			var params = {
				pageNumber: this.page,
				pageSize: 10,
				keyword: this.search
			};
			var res = await getGoodsList(params);
			console.log(res);
			if (res.data.result.content.length < 10) {
				this.loadStatus = 'nomore';
			} else {
				this.loadStatus = 'loadmore';
			}
			this.flowList.push(...res.data.result.content);
		},
		initData() {
			this.search = this.keywords;
			this.page = 0;
			this.totalPage = 0;
			this.flowList = [];
			this.loadStatus = 'loadmore';
			console.log('初始化商品数据');
			this.getData();
		},
		formatPrice(val) {
			if (typeof val == 'undefined') {
				return val;
			}
			return val.toFixed(2).split('.');
		},
		// 数据去重一下 只显示一次 减免 劵 什么的
		getPromotion(item) {
			if (item.promotionMap) {
				let array = [];
				Object.keys(item.promotionMap).forEach((child) => {
					if (!array.includes(child.split('-')[0])) {
						array.push(child.split('-')[0]);
					}
				});

				return array;
			}
		},
		removeOssStyle(url) {
			return url.split('?')[0];
		},
		// 跳转到商品详情
		navigateToDetailPage(item) {
			uni.navigateTo({
				url: `/pages/product/goods?id=${item.content.id}&goodsId=${item.content.goodsId}`
			});
		},
		// 跳转地址
		navigateToStoreDetailPage(item) {
			uni.navigateTo({
				url: `/pages/product/shopPage?id=${item.content.storeId}`
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.mt20 {
	margin-top: 20% !important;
}
.sort-active {
	border: 1px solid $light-color;
	color: $light-color;
	background: $price-light-color !important;
}

.oldKeyList {
	display: flex;
	flex-wrap: wrap;
	padding: 20rpx 3%;
	> .oldKeyItem {
		padding: 4rpx 24rpx;
		background: #f0f2f5;
		margin-right: 20rpx;
		max-width: 200rpx;
		border-radius: 100px;
		font-size: 24rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		margin-bottom: 20rpx;
	}
}

.promotion {
	margin-top: 4rpx;
	display: flex;
	div {
		span {
			font-size: 24rpx;
			color: $light-color;
			margin-right: 10rpx;
			padding: 0 4rpx;
			border-radius: 2rpx;
		}
	}
}
.status_bar {
	height: var(--status-bar-height);
	background: #fff !important;
	width: 100%;
}
page {
	background-color: #fff !important;
}
.sort-box {
	width: 100%;
	height: 100%;
	position: relative;
	background: #f7f7f7;
	.sort-list {
		margin: 20rpx 0;
		background: #fff;
		border-radius: 20rpx;
		padding: 30rpx;
		> .sort-item {
			> .sort-title {
				margin: 20rpx 0;
				font-size: 26rpx;
				font-weight: bold;
			}
		}
	}
}
.null-view {
	height: 140rpx;
}

.sort-btn {
	display: flex;
	position: fixed;
	bottom: 0;
	border-top: 1px solid #f7f7f7;
	height: 100rpx;
	left: 0;
	width: 100%;
	background: #fff;
	align-items: center;
	> view {
		width: 50%;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		margin: 0 20rpx;
		border-radius: 1000px;
	}
	> .sort-btn-repick {
		border: 1px solid #ededed;
	}
	> .sort-btn-confim {
		color: #fff;
		background-image: linear-gradient(90deg, #ff6b35, #ff9f28, #ffcc03);
	}
}
.uinput {
	width: 50% !important;
	> .sort-radius {
		height: 70rpx;
		line-height: 70rpx;
		font-size: 24rpx;
	}
	/deep/ .uni-input-input {
		font-size: 24rpx;
	}
}
.sort-radius {
	margin: 0 12rpx;
	background: #f7f7f7;
	height: 65rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	border-radius: 1000px;
	font-size: 24rpx;
}
.flex {
	flex-wrap: wrap;
	align-items: center;
	> .sort-brand-item {
		width: 33%;
		text-align: center;
		margin-bottom: 20rpx;
	}
}
.scoll-page {
	overflow: auto;
}
.content {
	background-color: $bg-color;
	height: 100vh;
	overflow: hidden;
}

.index-nav-arrow:last-child {
	margin-top: -22rpx;
}
.line1-store-name {
	font-size: 24rpx;
	color: #999;
}
.to-store {
	font-size: 24rpx;
	color: #333;
	margin-left: 10rpx;
}
.img {
	width: 26rpx;
	height: 26rpx;
}
.goods-row {
	background: #fff;
	padding: 16rpx;

	> .goods-col {
		display: flex;
		> .goods-img {
			flex: 4;
		}
		> .goods-detail {
			flex: 7;
		}
	}
}

.add1 {
	background: #fff;
	padding: 30rpx 0;
}

.oldKeyRow {
	background: #fff;
	padding: 34rpx 3%;
	border-bottom: 1px solid #eeeeee;
}

.clamp3 {
	margin-bottom: 10rpx;
	font-size: 28rpx;
	color: #333333;
	font-weight: 400;
	display: -webkit-box;
	height: 80rpx;
	-webkit-box-orient: vertical;

	-webkit-line-clamp: 2 !important;

	overflow: hidden;
	> span {
		line-height: 1.5;
	}
}

view {
	display: block;
}

.store-seller-name {
	color: #666;
	overflow: hidden;

	> div {
		float: left;
	}

	> span {
		float: right;
	}
}

.count-config {
	padding: 10rpx 0;
	color: #666;
	display: flex;
	font-size: 24rpx;
	justify-content: space-between;
}

.search-box {
	z-index: 99;
	width: 100%;
	background: $light-color;
	padding: 20rpx 2.5%;
	display: flex;
	justify-content: space-between;
	position: sticky;
	top: 0;
}

.search-box .mSearch-input-box {
	width: 100%;
}

.search-box .input-box {
	width: 85%;
	flex-shrink: 1;
	display: flex;
	justify-content: center;
	align-items: center;
}

.search-box .search-btn {
	width: 15%;
	margin: 0 0 0 2%;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-shrink: 0;
	font-size: 28rpx;
	color: #fff;
	background: linear-gradient(to right, #ff9801, #ff570a);
	border-radius: 60rpx;
}

.search-box .input-box > input {
	width: 100%;
	height: 60rpx;
	font-size: 32rpx;
	border: 0;
	border-radius: 60rpx;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	padding: 0 3%;
	margin: 0;
	background-color: #ffffff;
}

.uni-scroll-view-content {
	background: #ededed !important;
}

.placeholder-class {
	color: #9e9e9e;
}

.search-keyword {
	width: 100%;
	background-color: #ededed;
}

.keyword-list-box {
	height: calc(100vh - 110rpx);
	padding-top: 10rpx;
	border-radius: 20rpx 20rpx 0 0;
	background-color: #fff;
}

.keyword-entry-tap {
	background-color: #eee;
}

.keyword-entry {
	width: 94%;
	height: 80rpx;
	margin: 0 3%;
	font-size: 30rpx;
	color: #333;
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-bottom: solid 1rpx #e7e7e7;
}

.keyword-entry image {
	width: 60rpx;
	height: 60rpx;
}

.keyword-entry .keyword-text,
.keyword-entry .keyword-img {
	height: 80rpx;
	display: flex;
	align-items: center;
}

.keyword-entry .keyword-text {
	width: 90%;
}

.keyword-entry .keyword-img {
	width: 10%;
	justify-content: center;
}

.keyword-box {
	background-color: #fff;
}

.keyword-box .keyword-block {
	padding: 10rpx 0;
}

.keyword-box .keyword-block .keyword-list-header {
	width: 100%;
	padding: 20rpx 3%;
	font-size: 27rpx;
	color: #333;
	display: flex;
	justify-content: space-between;
}

.keyword-box .keyword-block .keyword-list-header image {
	width: 40rpx;
	height: 40rpx;
}

.keyword-box .keyword-block .keyword > view {
	width: 50%;
	line-height: 1.75;
	overflow: hidden;
	padding: 0 3% 0 3% !important;
}

.u-tips {
	font-size: 30rpx;
	font-weight: 700;
	color: #333;
}

.keyword {
	display: flex;
	flex-wrap: wrap;
}

.keyword-box {
	position: relative;
}

.clear {
	color: #666666;
	position: fixed;
	bottom: 0;
	width: 100%;
	text-align: center;
	height: 100rpx;
	line-height: 100rpx;
	font-size: 28rpx;
	background: #f7f7f7;
}

.keyword-box .keyword-block .hide-hot-tis {
	display: flex;
	justify-content: center;
	font-size: 28rpx;
	color: #6b6b6b;
}

.navbar {
	display: flex;
	width: 100%;
	height: 80rpx;
	background: #fff;
	box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.06);
	z-index: 10;
	// position: fixed;
	// left: 0;
	// top: var(--status-bar-height);
	.nav-item {
		flex: 1;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100%;
		font-size: 30rpx;
		color: $font-color-dark;
		position: relative;
	}
	.current {
		color: $light-color;
		position: relative;
		&:after {
			content: '';
			position: absolute;
			left: 50%;
			bottom: 0;
			transform: translateX(-50%);
			width: 40rpx;
			height: 0;
			border-bottom: 4rpx solid $light-color;
		}
	}
	.p-box {
		display: flex;
		flex-direction: column;

		.yticon {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 30rpx;
			height: 14rpx;
			line-height: 1;
			margin-left: 4rpx;
			font-size: 26rpx;
			color: #888;
		}

		.xia {
			transform: scaleY(-1);
		}
	}

	.cate-item {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100%;
		width: 80rpx;
		position: relative;
		font-size: 44rpx;

		&:after {
			content: '';
			position: absolute;
			left: 0;
			top: 50%;
			transform: translateY(-50%);
			border-left: 1px solid #ddd;
			width: 0;
			height: 36rpx;
		}
	}
}

/* 分类 */
.cate-mask {
	position: fixed;
	left: 0;
	top: var(--window-top);
	bottom: 0;
	width: 100%;
	background: rgba(0, 0, 0, 0);
	z-index: 95;
	transition: 0.3s;

	.cate-content {
		width: 630rpx;
		height: 100%;
		background: #fff;
		float: right;
		transform: translateX(100%);
		transition: 0.3s;
	}

	&.none {
		display: none;
	}

	&.show {
		background: rgba(0, 0, 0, 0.4);

		.cate-content {
			transform: translateX(0);
		}
	}
}

.cate-list {
	display: flex;
	flex-direction: column;
	height: 100%;

	.cate-item {
		display: flex;
		align-items: center;
		height: 90rpx;
		padding-left: 30rpx;
		font-size: 28rpx;
		color: #555;
		position: relative;
	}

	.two {
		height: 64rpx;
		color: #303133;
		font-size: 30rpx;
		background: #f8f8f8;
	}
}
.price-box {
	margin-top: 10rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-right: 10rpx;
	font-size: 24rpx;
	color: $font-color-light;
}

.price {
	font-size: 26rpx;
	line-height: 1;
	color: $main-color;
	font-weight: bold;
	/deep/ span:nth-of-type(1) {
		font-size: 38rpx;
	}
}
/* 商品列表 */
.goods-list {
	display: flex;
	flex-wrap: wrap;
	margin: 10rpx 20rpx 0;

	// background: #fff;
	width: 100%;
	.goods-item {
		background-color: #ffffff;
		display: flex;
		border-radius: 16rpx;
		flex-direction: column;
		width: calc(50% - 30rpx);
		margin-bottom: 20rpx;
		padding-bottom: 20rpx;

		&:nth-child(2n + 1) {
			margin-right: 20rpx;
		}

		.goods-detail {
			margin: 0 20rpx;
		}
	}

	.image-wrapper {
		width: 100%;
		height: 330rpx;
		border-radius: 16rpx 16rpx 0 0;
		overflow: hidden;
		padding: 0;
		image {
			width: 100%;
			height: 100%;
			opacity: 1;
			border-radius: 16rpx 16rpx 0 0;
		}
	}

	.title {
		font-size: $font-base;
		color: $font-color-dark;
		line-height: 1.5;
		height: 84rpx;
		padding: 10rpx 0 0;
		display: -webkit-box;

		-webkit-box-orient: vertical;

		-webkit-line-clamp: 2;

		overflow: hidden;
	}

	.count-config,
	.store-seller-name {
		font-size: $font-sm;
	}

	.text-hidden {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
}

.status_bar {
	height: var(--status-bar-height);
	width: 100%;
	background: $light-color;
}

.empty {
	padding-top: 300rpx;
	color: #999999;
	text-align: center;
	/deep/ .u-image {
		width: 346rpx;
		height: 304rpx;
	}
}
</style>
