<template>
	<view class="catstyle11" style="height: 100%;">
		<view class="left-slider"><sidebar :active="tid" name="Name" :active-color="mainColor" :border="false" :list="d" @change="changeHandler"></sidebar></view>
		<view class="right-slider">
			<view class="adbox" v-if="d[tid].advert_pic && d[tid].advert_pic.length > 0" @click="clickHandler(d[tid].advert_url)">
				<image mode="aspectFit" :src="d[tid].advert_url" style="width: 100%; height: 100%;" />
			</view>
			<view class="second-box">
				<view class="second">
					<view
						class="item"
						:style="{
							'border-color': stid == i ? mainColor : '#999',
							color: stid == i ? mainColor : '#999'
						}"
						v-for="(x, i) in d[tid].ChildList"
						:key="i"
						@click="clickSecondHandler(i)"
					>
						{{ x.Name }}
					</view>
				</view>
			</view>

			<view :style="{ height: scrollHeight }">
				<scroll-view :scroll-y="true" @scrolltolower="lower" :enable-back-to-top="true" :enable-flex="true" :style="{ height: '100%', padding: '0 0 0 10px' }">
					<view class="good" v-for="(cx, ci) in g" :key="ci" @click="clickHandler(cx)">
						<view class="good-img"><image mode="aspectFit" :src="cx.cover_pic" style="width: 100%; height: 100%;" /></view>
						<view class="good-info">
							<view class="good-name">{{ cx.name }}</view>
							<view class="goodprice">
								<view class="left">
									<view v-if="cx.is_level==1">
										<u-tag size="mini" text="会员价" shape="circle" type="warning" />
										<span class="vip">￥{{ cx.level_price }}</span>
									</view>
									<view class="price" :style="{ color: mainColor }">{{ cx.price_content }}</view>
									<view class="sell">{{ cx.sales }}</view>
								</view>
								<view @click.stop="showSkuHandler(cx)" class="right"><u-icon name="cart-circle-o" size="44" :color="mainColor" /></view>
							</view>
						</view>
					</view>
					<u-divider contentPosition="center" v-if="isover" :margin-top="20" :margin-bottom="20">没有更多商品了</u-divider>
				</scroll-view>
			</view>
		</view>
		<good-sku v-if="showSku" :option-type="2" borderRadius="20" v-model="showSku" :good="sku"></good-sku>
		<auth v-if="showAuth" @changeuserinfo="reloadUserinfo" @gbAuth="gbAuth"></auth>
	</view>
</template>

<script>
import sidebar from '../sidebar/index';
import goodSku from '../goods/goodsku';
import auth from '@/components/auth/index.vue';
export default {
	props: ['d', 'h'],
	data() {
		return {
			mainColor: '',
			page: 1,
			page_count: 1,
			mh: 0,
			g: [],
			isover: false,
			loading: false,
			tid: 0,
			stid: 0,
			active: 0,
			scrollHeight: 'calc(100% - 33px)',
			msg: {
				pageIndex: 1,
				pageSize: 14,
				Name: '',
				GoodsType: 0,
				CategoryIds: '',
				OrderBy: 1,
				UserId: 0
			},
			CategoryIdsList: [],
			CategoryIds1: '',
			CategoryIds2: '',
			sku: {},
			showSku: false,
			showAuth: false,
			u: {}
		};
	},
	components: {
		sidebar,goodSku,auth
	},
	created() {
		this.mainColor = this.$uiConfig.mainColor;
		if (this.d[this.tid].advert_pic && this.d[this.tid].advert_pic.length > 0) {
			this.scrollHeight += ' - (100vw - 105px / 3.37))';
		} else {
			this.scrollHeight += ')';
		}
	},
	mounted() {
		this.CategoryIdsList = [];
		this.CategoryIds1 = this.d[0].Id;
		this.CategoryIds2 = this.d[0].ChildList[0].Id;
		this.init();
	},
	methods: {
		// 购物车
		showSkuHandler(g) {
			this.sku = g;
			this.u = uni.getStorageSync('mall_UserInfo');
			if (!this.u) {
				this.u = {
					nickName: '未登录',
					avatarUrl: ''
				};
				this.showAuth = true;
			} else {
				this.showSku = true;
			}
		},
		changeHandler(i) {
			this.active = i;
			this.CategoryIds1 = this.d[i].Id;
			this.CategoryIds2 = this.d[i].ChildList[0].Id;
			this.msg.page = 1;
			this.tid = i;
			this.stid = 0;
			this.g = [];
			this.init();
		},
		clickSecondHandler(i) {
			let tid = this.tid;
			this.CategoryIds2 = this.d[tid].ChildList[i].Id;
			this.stid = i;
			this.msg.page = 1;
			this.g = [];
			this.init();
		},
		clickHandler(item) {
			uni.navigateTo({ url: '/pages/goods/goods?GoodsId=' + item.id });
		},
		init() {
			this.CategoryIdsList = [];
			this.CategoryIdsList.push(this.CategoryIds1, this.CategoryIds2);
			this.msg.CategoryIds = this.CategoryIdsList.join(',');
			this.isover = false;
			this.loading = true;
			this.request2(
				{
					url: '/api/AppletGoods/GetAppletGoodsPageListForZY',
					data: this.msg
				},
				res => {
					this.loading = false;
					console.log('resggg', res);
					if (res.resultCode == 1) {
						this.g = this.g.concat(res.data.pageData);
						this.page_count = res.data.pageCount;
						if (this.page_count == 1 || this.page_count == 0) {
							this.isover = true;
						}
					}

					uni.hideNavigationBarLoading();
				}
			);
			// this.isover = false;
			// this.loading = true;
			// this.request(
			//   {
			//     url: "",
			//     data: {
			//       r: "api/default/goods-list",
			//       page: this.page,
			//       cat_id: this.d[this.tid].child[this.stid].id
			//     }
			//   },
			//   res => {
			//     this.g = this.g.concat(res.data.list);
			//     this.page_count = res.data.pagination.page_count;
			//     if (this.page_count == 1) {
			//       this.isover = true;
			//     }
			//     this.loading = false;
			//   }
			// );
		},
		lower(e) {
			if (this.msg.pageIndex < this.page_count) {
				if (!this.loading) {
					this.msg.pageIndex++;
					this.init();
				}
			} else {
				this.isover = true;
			}
		},
		reloadUserinfo() {
			this.u = uni.getStorageSync('mall_UserInfo');
			this.showAuth = false;
		},
		//关闭登录窗口
		gbAuth() {
			this.showAuth = false;
		}
	}
};
</script>

<style>
.catstyle11 {
	display: flex;
}
.catstyle11 .left-slider {
	width: 85px;
	height: 100%;
	background: #f5f5f5;
}
.catstyle11 .right-slider {
	padding: 10px 0;
	height: 100%;
	width: 1px;
	flex: 1;
	overflow: hidden;
	overflow-y: auto;
}
.catstyle11 .good {
	border-bottom: 1rpx solid #f1f1f1;
	display: flex;
	padding: 10px 0;
	margin-right: 16px;
}
.catstyle11 .good .good-img {
	width: 77px;
	height: 77px;
}
.catstyle11 .good .good-info .good-name {
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	margin-bottom: 3px;
	font-size: 14px;
	height: 38px;
	margin-bottom: 5px;
}
.catstyle11 .good .good-info {
	margin-left: 5px;
	width: 1px;
	flex: 1;
	min-height: 70px;
}
.catstyle11 .good .good-info .goodprice {
	display: flex;
	align-items: flex-end;
}
.catstyle11 .good .good-info .left {
	flex: 1;
	width: 1px;
}
.catstyle11 .good .good-info .right {
	width: 30px;
	height: 30px;
	display: flex;
	justify-items: right;
	align-items: flex-end;
}
.catstyle11 .good .good-info .left .vip {
	font-size: 14px;
	font-weight: 600;
	color: #f39800;
}
.catstyle11 .good .good-info .goodprice .left .price {
	font-size: 16px;
}
.catstyle11 .good .good-info .goodprice .left .sell {
	font-size: 12px;
	color: gray;
}
.catstyle11 .right-slider .adbox {
	width: 100%;
	height: calc(100vw - 105px / 3.37);
}
.catstyle11 .second-box {
	width: 100%;
	overflow-x: auto;
}
.catstyle11 .second {
	padding: 10px 0;
	margin: 0 10px;
	white-space: nowrap;
	background: #fff;
	overflow-x: auto;
}
.catstyle11 .second .item {
	margin-right: 10px;
	display: inline-block;
	padding: 5px 10px;
	height: 23px;
	line-height: 23rpx;
	box-sizing: border-box;
	border-radius: 23px;
	border: 1px solid transparent;
	font-size: 12px;
}
</style>
