<template>
  <view class="shop">
    <view class="navbarContent">
    	<u-navbar :is-back="false" :background="background" :border-bottom="false">
    		<uni-icons type="left" size="24" color="#fff" class="back" @click="back"></uni-icons>
				<view class="search-box">
					<view @click="search" class="search-model"></view>
					<u-search shape="round" :disabled="true" placeholder="搜索本品牌商品" bg-color="#ffffff"
						:show-action="false"></u-search>
				</view>
    	</u-navbar>
    </view>
		<view class="page">
			<view class="shop-tip">
				<image src="/static/logo.png" mode="aspectFill" class="logo"></image>
				<view class="tip">
					<image src="/static/shop/t1.png" mode="aspectFill"></image>
					100%正品
				</view>
				<view class="tip">
					<image src="/static/shop/t2.png" mode="aspectFill"></image>
					天天有特价
				</view>
				<view class="tip">
					<image src="/static/shop/t3.png" mode="aspectFill"></image>
					退货无忧
				</view>
			</view>
			<view class="shop-info">
				<image :src="shopDetail.logoImage && shopDetail.logoImage[0].external_url" mode="aspectFill" class="logo"></image>
				<view class="info-box">
					<view class="name">{{ shopDetail.shop_name }}</view>
					<view class="intro">
						<text class="label">{{ shopDetail.shop_label }}</text>
						<view @click="toCer">
							<image src="/static/cer.png" mode="aspectFill"></image>
							证书
						</view>
					</view>
				</view>
			</view>
			<view v-if="firstCate" class="shop-goods">
				<view v-if="goodsCate.filter(v => v.category_id === firstCate)[0].children.length > 0" class="second-cate">
					<scroll-view class="second-cate-tabs" scroll-x>
						<view v-for="(item, index) in goodsCate.filter(v => v.category_id === firstCate)[0].children" :key="index"  class="cate-item" :class="{active: secondCate === item.category_id}" @click="secondCate = item.category_id">
							{{ item.name }}
						</view>
					</scroll-view>
				</view>
				<view class="goods-content">
					<view class="first-cate">
						<scroll-view class="first-cate-tabs" scroll-y>
							<view v-for="(item, index) in goodsCate" :key="index"  class="cate-item" :class="{active: firstCate === item.category_id}" @click="firstCate = item.category_id;secondCate = '';">
								{{ item.name }}
							</view>
						</scroll-view>
					</view>
					<view class="content">
						<view class="filter-box">
							<view v-for="(item, index) in filterList" :key="index" class="filter-item" :class="{ active: activeFilter === item.value}" @click="changeFilter(item.value)">
								{{ item.name }}
								<text v-if="item.value === 'price'" class="down" :class="{ on: activeFilter === 'price' && filterDirection === 'DESC'}" style="top: 22rpx;"></text>
								<text v-if="item.value === 'price'" class="up" :class="{ on: activeFilter === 'price' && filterDirection === 'ASC'}"></text>
							</view>
						</view>
						<view class="goods-list">
							<view v-for="(item, index) in goods" :key="index" class="good" @click="onGoodDetail(item.goods_id)">
								<image :src="item.goods_image" mode="aspectFill"></image>
								<view class="name">{{ item.goods_name }}</view>
								<view class="price">
									<text class="now-price">¥{{ item.goods_price_min>0?Number(item.goods_price_min):0.00 }}</text>
									<text v-if="item.line_price_min > 0" class="origin-price">¥{{ item.line_price_min>0?Number(item.line_price_min):'' }}</text>
								</view>
							</view>
						</view>
						<view v-if="goods.length && !loading" class="finished">{{ loadTitle }}</view>
						<view v-if="finished && !goods.length" class="empty">
						  <image mode="aspectFill" src="@/static/empty.png" alt="暂无商品" />
						  <view>暂无商品</view>
						</view>
					</view>
				</view>
			</view>
			<view class="toCart" @click="toCart">
				<image :src="$picUrl+'/static/tabbar/cart.png'"></image>
			</view>
			<view class="toTop" v-if="isTop" @click="openScrollTo()">
				<image :src="$picUrl+'/static/toTop.png?=1'"></image>
			</view>
		</view>
  </view>
</template>

<script>
	import styleColor from '../styleColor';
	import * as Api from '@/api/shop/index';
	import * as cstegory from '@/api/category'
	import * as GoodsApi from '@/api/goods'
	import { debounce } from 'lodash';
	
  export default {
    data() {
      return {
				background: {
					background: 'url(https://www.royaum.com.cn/static/shop/shop-page-bg.png) center top no-repeat',
					backgroundSize: '100% auto',
				},
				id: '',
				scrollTop: 0,
				shopDetail: {},
				goodsCate: [],
				firstCate: '',
				secondCate: '',
				activeFilter: 'all',
				filterDirection: 'ASC',
				filterList: [
					{ name: '综合', value: 'all' },
					{ name: '价格', value: 'price' },
					{ name: '折扣', value: 'discount' },
					{ name: '销量', value: 'sales' }],
				isTop: false,
				page: 1,
				limit: 10,
				loadTitle: '',
				loading: false,
				finished: true,
				goods: []
      };
    },
		// computed: {
		// 	styleIndex() {
		// 		const index = uni.getStorageSync('styleIndex') || '';
		// 		return index;
		// 	},
		// 	navBgColor() {
		// 		return this.styleIndex ? (styleColor.shopNavBgColor[this.styleIndex - 1] || '#FFA3B2') : '#FFA3B2'
		// 	}
		// },
		watch: {
			firstCate() {
				this.goods = [];
				this.page = 1;
				this.loading = false;
				this.finished = false;
				this.getGoodsList();
			},
			secondCate() {
				this.goods = [];
				this.page = 1;
				this.loading = false;
				this.finished = false;
				this.getGoodsList();
			},
		},
		onPageScroll(e) {
			if (e.scrollTop <= 200) { // 当滚动到顶部且向下滑动时为true
				this.isTop = false
			} else {
				this.isTop = true
			}
		},
		onLoad({ id }) {
			this.id = id;
			this.getShopDetail()
			this.getGoodsTypeList();
		},
		onReachBottom() {
		  this.getGoodsList();
		},
    methods: {
			back() {
				uni.navigateBack();
			},
			search() {
				// 跳转商品搜索
				uni.navigateTo({
					url: `/pages/search/index?merchantId=${this.id}`
				})
			},
			changeFilter(item) {
				if (item !== this.activeFilter) {
					this.activeFilter = item;
					this.filterDirection = 'ASC';
				} else if (item === 'price') {
					this.filterDirection = this.filterDirection === 'ASC' ? 'DESC' : 'ASC';
				}
				this.goods = [];
				this.page = 1;
				this.loading = false;
				this.finished = false;
				this.getGoodsList();
			},
			openScrollTo() {
				uni.pageScrollTo({
					scrollTop: 0
				})
			},
			toCer() {
				uni.navigateTo({
					url: `/pages/shopList/certificate?id=${this.id}`,
				});
			},
			async getShopDetail() {
				Api.getShopDetail({
			      id: this.id
			    })
					.then(result => {
						console.log(result);
						this.shopDetail = result.data.detail;
					})
					.finally(() => this.loading = false)
			},
			getGoodsTypeList() {
				const that = this;
				return new Promise((resolve, reject) => {
					cstegory.list({
							// merchantId: this.id
						})
						.then(res => {
							// 合并新数据
							console.log(res, '分类数据')
							that.goodsCate = res.data.list;
							that.firstCate = res.data.list[0].category_id;
						})
						.catch(reject)
				})
			},
			/**
			 * 获取商品列表
			 * @param {number} pageNo 页码
			 */
			getGoodsList: debounce(function() {
				if (this.loading || this.finished) {
				  return;
				}
				this.loadTitle = "";
				const param = {
					sortType: this.activeFilter,
					sortPrice: this.filterDirection === 'DESC' ? 1 : 0,
					categoryId: this.secondCate || this.firstCate,
					merchantId: this.id,
					page: this.page++,
				}
				GoodsApi.list(param)
					.then(result => {
						// 合并新数据
						const data = result.data.list.data;
						console.log(data);
						this.goods = this.goods.concat(data);
						this.finished = data.length < 10;
						this.loadTitle = this.finished ? "已全部加载完" : "上拉加载更多";
					})
			}, 500),
			toCart() {
				uni.switchTab({
					url: '/pages/cart/index'
				})
			},
			// 跳转商品详情页
			onGoodDetail(goodsId) {
				this.$navTo('pages/goods/detail', {
					goodsId
				})
			},
		}
  };
</script>

<style lang="scss" scoped>
.shop {
	height: 100vh;
	display: flex;
	flex-direction: column;
	background: url(https://www.royaum.com.cn/static/shop/shop-page-bg.png) center top no-repeat;
	background-size: 100% auto;
	.navbarContent {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		.back {
			margin-right: 24rpx;
			margin-left: 12rpx;
		}
		.search-box {
			position: relative;
			.search-model {
				position: absolute;
				width: 100%;
				height: 100%;
				top: 0;
				left: 0;
				z-index: 100;
			}
		}
	
		&::v-deep .u-navbar-inner {
			position: relative;
			margin-right: 0 !important;
			display: flex;
			.search-box {
				width: 442rpx;
			}
		}
	}
	.page {
		flex: 1;
		display: flex;
		flex-direction: column;
		padding-top: 30rpx;
		.shop-tip {
			padding: 0 24rpx;
			display: flex;
			align-items: center;
			.logo {
				width: 92rpx;
				height: 34rpx;
				margin-right: auto;
			}
			.tip {
				font-size: 22rpx;
				color: #fff;
				margin-left: 20rpx;
				image {
					width: 26rpx;
					height: 26rpx;
					margin-right: 8rpx;
				}
			}
		}
		.shop-info {
			display: flex;
			margin-top: 30rpx;
			padding: 0 24rpx;
			.logo {
				width: 90rpx;
				height: 90rpx;
				border-radius: 10rpx;
				margin-right: 10rpx;
			}
			.info-box {
				.name {
					font-size: 30rpx;
					color: #fff;
					margin-bottom: 18rpx;
				}
				.intro {
					display: flex;
					align-items: center;
					.label {
						height: 36rpx;
						background: #F34A40;
						border-radius: 4rpx;
						padding: 0 7rpx;
						line-height: 36rpx;
						text-align: center;
						font-size: 24rpx;
						color: #fff;
						margin-right: 20rpx;
					}
					>view {
						width: 90rpx;
						height: 36rpx;
						background: rgba(0, 0, 0, 0.2);
						border-radius: 4rpx;
						display: flex;
						justify-content: center;
						align-items: center;
						color: #fff;
						font-size: 24rpx;
						>image {
							width: 21rpx;
							height: 20rpx;
							margin-right: 7rpx;
						}
					}
				}
			}
		}
		.shop-goods {
			flex: 1;
			display: flex;
			flex-direction: column;
			margin-top: 30rpx;
			background: #F0F4F3;
			border-radius: 20rpx 20rpx 0 0;
			padding-top: 24rpx;
			.second-cate {
				padding: 0 24rpx;
				margin-bottom: 24rpx;
				.second-cate-tabs {
					height: 80rpx;
					align-items: center;
					white-space: nowrap;
					width: 100%;
					overflow-x: auto;
					overflow-y: hidden;
					.cate-item {
						display: inline-block;
						height: 80rpx;
						padding: 0 26rpx;
						background: #FFFFFF;
						border-radius: 10rpx;
						line-height: 80rpx;
						margin-right: 20rpx;
						color: #333333;
						font-size: 28rpx;
						&:last-child {
							margin-right: 0;
						}
						&.active {
							background: #F34A40;
							color: #fff;
						}
					}
				}
			}
			.goods-content {
				flex: 1;
				display: flex;
				.first-cate {
					height: 100%;
					width: 108rpx;
					.first-cate-tabs {
						overflow-x: hidden;
						overflow-y: auto;
						.cate-item {
							width: 100%;
							padding: 20rpx 30rpx;
							color: #999999;
							font-size: 24rpx;
							position: relative;
							&.active {
								background: #fff;
								&::before {
									content: '';
									position: absolute;
									top: 50%;
									transform: translateY(-50%);
									left: 0;
									width: 4rpx;
									height: calc(100% - 60rpx);
									background: #F34A40;
								}
							}
						}
					}
				}
				.content {
					background: #fff;
					height: 100%;
					width: calc(100% - 108rpx);
					display: flex;
					flex-direction: column;
					.filter-box {
						height: 88rpx;
						padding: 0 40rpx;
						display: flex;
						justify-content: space-between;
						align-items: center;
						.filter-item {
							color: #333;
							font-size: 28rpx;
							position: relative;
							display: flex;
							justify-content: center;
							&.active {
								color: #F34A40;
							}
							text {
								width: 0;
								height: 0;
								border: 10rpx solid;
								border-color: #000 transparent transparent transparent;
								vertical-align: top;
								position: absolute;
								left: 60rpx;
								top: 15rpx;
								&.up {
									border-color: transparent transparent #000 transparent;
									top: -1rpx;
									&.on {
										border-color: transparent transparent #F34A40 transparent;
									}
								}
								&.down.on {
									border-color: #F34A40 transparent transparent transparent;
								}
							}
						}
					}
					.goods-list {
						padding: 0 20rpx;
						overflow-x: hidden;
						overflow-y: auto;
						display: flex;
						flex-wrap: wrap;
						.good {
							width: 290rpx;
							height: 422rpx;
							background: #FFFFFF;
							border-radius: 10rpx;
							border: 1px solid #EAEAEA;
							margin-right: 22rpx;
							margin-bottom: 20rpx;
							border-radius: 10rpx;
							border: 1px solid #EAEAEA;
							&:nth-child(2n) {
								margin-right: 0;
							}
							>image {
								width: 290rpx;
								height: 287rpx;
							}
							.name {
								color: #333333;
								font-size: 26rpx;
								margin: 30rpx 0 24rpx;
								line-height: 26rpx;
								overflow: hidden;
								text-overflow: ellipsis;
								white-space: nowrap;
								padding: 0 24rpx;
							}
							.price {
								padding: 0 24rpx;
								.now-price {
									color: #E53623;
									font-size: 34rpx;
								}
								.origin-price {
									text-decoration: line-through;
									color: #999999;
									font-size: 24rpx;
									margin-left: 10;
								}
							}
						}
					}
					
					.finished,
					.loading {
					  font-size: 28rpx;
					  line-height: 100rpx;
					  text-align: center;
					  color: #bbb;
					}
					.empty {
					  margin-top: 100rpx;
					  font-size: 28rpx;
					  text-align: center;
					  color: #bbb;
					}
					
					.empty image {
					  display: block;
					  width: 306rpx;
					  height: 200rpx;
					  margin: 0 auto 20rpx;
					  pointer-events: none;
					}
				}
			}
		}
		.toCart {
			position: fixed;
			bottom: 170rpx;
			right: 26rpx;
			width: 80rpx;
			height: 80rpx;
			border-radius: 50%;
			opacity: 1;
			z-index: 999;
			display: flex;
			align-items: center;
			justify-content: center;
			background: #F34A40;
					
			image {
				width: 60%;
				height: 60%;
			}
		}
		.toTop {
			position: fixed;
			bottom: 65rpx;
			right: 26rpx;
			width: 80rpx;
			height: 80rpx;
			border-radius: 50%;
			opacity: 1;
			z-index: 999;
			display: flex;
			align-items: center;
			justify-content: center;
		
			image {
				width: 100%;
				height: 100%;
			}
		
		}
	}
	
}
</style>