<template>
	<view>
		<view class="header">
			<cu-custom :isBack="true" bgColor="''">
				<block slot="backText">
					<view class="backImg">
						<image src="@/static/images/back-btn.png" mode=""></image>
					</view>
				</block>
			</cu-custom>
		</view>
		<view class="bg">
			<image :src="brandInfo.backgroundImage" mode="aspectFill"></image>
		</view>
		<view :style="[{height:CustomBar + 'px'}]"></view>
		
		<view class="brand-info-box">
			<view class="brand-img">
				<image :src="brandInfo.pic" mode=""></image>
			</view>
			<view class="info-box">
				<view class="name-info">
					<view class="acea-row row-between-wrapper">
						<view class="name">{{brandInfo.brandName}}</view>
						<view class="brand-tips acea-row">
							<view class="tip">甄选品牌</view>
						</view>
					</view>
					<view class="tips">{{''}}</view>
					<!-- <view class="tips">{{''||'1314款商品 | 5w+人已购'}}</view> -->
				</view>
				<view class="info">{{brandInfo.brandDescription}}</view>
				<!-- <view class="info line2">{{brandInfo.brandDescription}}</view> -->
			</view>
		</view>
		
		<view class="wrapper" :style="'min-height:calc(100vh - '+ topHeight +'px)'">
			<view class="nav acea-row row-around">
				<view class="item" @click="set_where(0)">
					<view :class="'title ' + (stock === 0 && price === 0? 'active' : '')">综合</view>
				</view>
				<view class="item" @click="set_where(2)">
					<view :class="'title ' + (stock === 2 ? 'active' : '')">销量</view>
				</view>
				<view class="item" @click="set_where(1)">
					<view :class="'title acea-row row-middle ' + (stock === 0 && price ? 'active' : '')">
						<view class="">价格</view>
						<view :class="'jiantou ' + (price?price === 1?'up':'down':'')"></view>
					</view>
				</view>
			</view>
			<PromotionGood :benefit="productList" />
			<Loading :loaded="loaded" :loading="loading"></Loading>
		</view>
		
	</view>
</template>

<script>
	import { getBrandDetail, getProducts } from '@/api/store';
	import PromotionGood from '@/components/PromotionGood';
	import Loading from '@/components/Loading';
	export default {
		components: {
			PromotionGood,
			Loading
		},
		data() {
			return {
				CustomBar: this.CustomBar,
				topHeight: 0,
				id: 0,
				brandInfo: {},
				where: {
					page: 1,
					limit: 10,
					bid: 0,
					priceOrder: '',
					salesOrder: '',
				},
				stock: 0,
				price: 0,
				productList: [],
				loaded: false,
				loading: false,
			};
		},
		onLoad() {
			this.topHeight = this.CustomBar + 132;
			this.id = this._route.query.id;
			this.where.bid = this.id;
			this.getBrandInfo(this.id);
			this.getProductList();
		},
		methods: {
			getBrandInfo(id) {
				uni.showLoading({
					title: '加载中...',
					mask: true
				})
				getBrandDetail(id).then(res => {
					this.brandInfo = res.data;
					uni.hideLoading();
				}).catch(err => {
					uni.hideLoading();
				})
			},
			//点击事件处理
			set_where(index) {
			  switch (index) {
			    case 0:
						// if(this.stock !== 0 || this.price !== 0) {
							this.price = 0;
							this.stock = 0;
						// }
			      break
			    case 1:
			      if (this.price === 0) this.price = 1;
			      else if (this.price === 1) this.price = 2;
			      else if (this.price === 2) this.price = 1;
			      this.stock = 0;
			      break
			    case 2:
			      if (this.stock === 0) this.stock = 2;
			      this.price = 0;
			      break
			    default:
			      break
			  }
			  this.productList = [];
			  this.where.page = 1;
			  this.loaded = false
			  this.getProductList();
			},
			//设置where条件
			setWhere() {
			  if (this.price === 0) {
			    this.where.priceOrder = ''
			  } else if (this.price === 1) {
			    this.where.priceOrder = 'asc'
			  } else if (this.price === 2) {
			    this.where.priceOrder = 'desc'
			  }
			  if (this.stock === 0) {
			    this.where.salesOrder = ''
			  } else if (this.stock === 1) {
			    this.where.salesOrder = 'asc'
			  } else if (this.stock === 2) {
			    this.where.salesOrder = 'desc'
			  }
			  // this.where.news = this.nows ? '1' : '0'
			},
			getProductList() {
				if (this.loaded) return
				this.loading = true;
				this.setWhere();
				getProducts(this.where).then(res => {
					this.productList.push.apply(this.productList, res.data);
					this.loaded = res.data.length < this.where.limit; //判断所有数据是否加载完成；
					console.log('this.loaded', this.loaded)
					this.loading = false;
					this.where.page = this.where.page + 1;
				}).catch(err => {
					// uni.hideLoading();
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.header {
		position: fixed;
		top:0;
		left:0;
		right:0;
		z-index: 99;
		width: 750rpx;
		.backImg {
			width: 88rpx;
			height: 62rpx;
			padding-left: 26rpx;
			image {
				width: 100%;
				height: 100%;
			}
		}
	}
	
	.bg {
		width: 100vw;
		height: 508rpx;
		position: absolute;
		top: 0;
		left: 0;
		z-index: -1;
		// background: linear-gradient(135deg, rgba(57, 211, 150, 1), rgba(27, 141, 204, 1));
		image {
			width: 100%;
			height: 100%;
		}
	}
	
	.brand-info-box {
		padding: 62rpx 32rpx 32rpx;
		position: relative;
		.brand-img {
			position: absolute;
			top: 14rpx;
			left: 64rpx;
			width: 138rpx;
			height: 138rpx;
			border-radius: 16rpx;
			padding: 4rpx;
			background: linear-gradient(135deg, rgba(57, 211, 150, 1), rgba(27, 141, 204, 1));
			image {
				width: 100%;
				height: 100%;
				background: #F5F6F8;
				border-radius: 16rpx;
			}
		}
		.info-box {
			width: 686rpx;
			// height: 158rpx;
			background: #F5F6F8;
			box-shadow: 0rpx 10rpx 16rpx 0rpx rgba(0,0,0,0.15);
			border-radius: 16rpx;
			padding: 14rpx 32rpx;
			.name-info {
				padding-left: 152rpx;
				font-size: 34rpx;
				font-family: SourceHanSansSCVF;
				font-weight: bold;
				color: #3A3A3C;
				line-height: 50rpx;
				.brand-tips {
					.tip {
						width: 76rpx;
						height: 26rpx;
						background: #2DB5AE;
						border-radius: 6rpx;
						margin-right: 4rpx;
						font-size: 16rpx;
						font-family: PingFang SC;
						color: #FFFFFF;
						line-height: 26rpx;
						text-align: center;
					}
				}
				.tips {
					height: 28rpx;
					padding-top: 6rpx;
					font-size: 16rpx;
					font-family: PingFang SC;
					font-weight: 600;
					color: #2DB5AE;
					line-height: 22rpx;
				}
			}
			.info {
				// height: 56rpx;
				min-height: 58rpx;
				max-height: 124rpx;
				padding-top: 14rpx;
				font-size: 16rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #2DB5AE;
				line-height: 22rpx;
				word-break: break-all;
				display: -webkit-box;
				-webkit-line-clamp: 5;
				-webkit-box-orient: vertical;
				overflow: hidden;
			}
		}
	}
	
	.wrapper {
		width: 750rpx;
		background: #FFFFFF;
		border-radius: 28rpx;
		.nav {
			width: 100vw;
			height: 104rpx;
			padding: 32rpx 32rpx 26rpx;
			.item {
				min-width: 66rpx;
				text-align: center;
				position: relative;
				.title {
					font-size: 26rpx;
					font-family: SourceHanSansSCVF;
					font-weight: 400;
					color: #999999;
					line-height: 38rpx;
					.jiantou {
						width: 0rpx;
						height: 0rpx;
						border-top: 0rpx solid transparent;
						border-left: 6rpx solid transparent;
						border-bottom: 10rpx solid transparent;
						border-right: 6rpx solid transparent;
						margin-left: 4rpx;
					}
					.up {
						border-top: 0rpx solid transparent;
						border-bottom: 10rpx solid #999999;
					}
					.down {
						border-top: 10rpx solid #999999;
						border-bottom: 0rpx solid transparent;
					}
				}
				.active {
					color: #3A3A3C;
					font-weight: 500;
				}
				.title::after {
					display: block;
					content: '';
					width: 100%;
					height: 4rpx;
					background: #2DB5AE;
					position: absolute;
					bottom: 0;
					left: 0;
					opacity: 0;
					transform:scaleX(0);
					transition: all .2s cubic-bezier(.18,.89,.17,.88),opacity .15s ease;
				}
				.active::after {
					opacity: 1;
					transform: scaleX(1);
				}
			}
		}
	}
</style>
