<template>
	<view class="apps">
		<view class="" style="background-color: #fff;position: fixed;width: 100%;height: 85rpx;">
			<view class="inputs">
				<i class="icon"></i>
				<input v-model="goodsName" type="text" name="" id="" class="input" placeholder="请输入商品名称">
			</view>
		</view>
		<view class="tabbar">
			<view class="lefttabbar">
				<view class="lefttabbarlist">
					<view class="item" v-for="(item,index) in GoodsCategorychildrenlist" :key='item.id'
						@tap='tapscroll(item,index)'>
						<view :class="tabIndex==index?'actives':'active'">
							{{item.goodsCategoryName}}
						</view>
					</view>
				</view>
			</view>
			<view class="righttabbar">
				<view class="productlist" v-if='goodsList.length>0' @touchstart="start" @touchend="end"
					@touchmove="move">
					<view class="item" @tap='goCommodityDetails(item)' v-for="(item,index) in goodsList" :key="index">
						<image :src="baseurl+item.goodsPictureUrl" mode=""></image>
						<view class="title">
							{{item.goodsName}}
						</view>
						<view class="text">
							{{item.attributeDetailsName}}
						</view>
						<view class="price">
							￥{{item.goodsPrice}}
						</view>
					</view>
					<view style="width: 45%;" v-if="goodsList.length%2!=0">
					</view>
					<view v-if="goodsList.length <total">
						用力上滑加载更多
					</view>
				</view>
				<view class="noorder" v-if='goodsList.length==0'>
					<image src="../../static/noorder.png" mode=""></image>
					<view class="">
						暂无商品
					</view>
				</view>
			</view>
		</view>
		<!-- 	<view class="lefttabbar">
			<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" @scrolltoupper="upper"
				@scrolltolower="lower" @scroll="scroll">
				<view class="scroll-view-item" v-for="(item,index) in GoodsCategorychildrenlist" :key='item.id'
					@tap='tapscroll(item,index)'>
					<view :class="tabIndex==index?'actives':'active'">
						{{item.goodsCategoryName}}
					</view>
				</view>
			</scroll-view>
		</view> -->
	</view>
</template>

<script>
	import {
		goodsList,
		getGoodsCategoryNameList
	} from '@/api/ProductList/ProductList.js';
	import baseurl from '@/api/baseurl.js'
	export default {
		data() {
			return {
				//将选中标签的索引绑定为tabIndex，以便后续的调用
				baseurl: '',
				pageNum: 1,
				pageSize: 10,
				goodsCategoryId: '', //请求值
				goodsList: [], //商品列表list
				total: 0, //list总长度
				goodsName: '',
				tabIndex: 0,
				GoodsCategorychildrenlist: [], //子分类list
				GoodsCategorychildrenid: null,
				scrollTop: 0,
				old: {
					scrollTop: 0
				},
				startData: {
					clientX: '',
					clientY: '',
				},
				moveX: 0,
				touch: {},
			};
		},
		watch: { //监听
			goodsName() {
				this.pageNum = 1;
				goodsList(this.pageSize, this.pageNum, this.GoodsCategorychildrenid, this.goodsName).then(res => {
					this.goodsList = res.rows
					this.total = res.total
				})
			},
		},
		onShow() {
			var that = this
			const value = uni.getStorageSync('openid');
			const value3 = uni.getStorageSync('Refresh');
			if (value) {} else {
				uni.navigateTo({
					url: '/pages/login/login'
				})
			}
			if (value3) {
				that.goodsListinfo();
			}
		},
		onLoad(options) { //获取传值
			this.goodsCategoryId = options.goodsCategoryId //请求id
			this.GoodsCategorychildrenid = options.GoodsCategorychildrenid //请求id
			this.tabIndex = options.index
			this.baseurl = baseurl;
			this.goodsListinfo()
			this.GoodsCategorychildren(this.goodsCategoryId);
		},
		methods: {
			// 触摸touch事件
			start(e) { //@touchstart 触摸开始
				this.startData.pageY = e.changedTouches[0].pageY; //手指按下时的Y坐标
			},
			end(e) { //@touchend触摸结束
				if ((this.startData.pageY - this.touch.pageY) > 200) { //在事件结束时，判断滑动的距离是否达到出发需要执行事件的要求
					if (this.goodsList.length >= this.total) {} else {
						this.pageNum++;
						goodsList(this.pageSize, this.pageNum, this.GoodsCategorychildrenid, this.goodsName).then(res => {
							if (res.code == 200) {
								res.rows.forEach(e => {
									this.goodsList.push(e)
								})
							}
						})
					}
				} else {
					// this.touch = {};
				}
			},
			move(event) { //@touchmove触摸移动
				let touch = event.touches[0]; //滑动过程中，手指滑动的坐标信息 返回的是Objcet对象
				this.touch = touch;
			},
			tapscroll(item, index) {
				this.tabIndex = index
				if (index == 0) {
					this.GoodsCategorychildrenid = this.goodsCategoryId
					this.tabIndex = index
					this.pageNum = 1
					goodsList(this.pageSize, this.pageNum, this.GoodsCategorychildrenid, this.goodsName).then(
						res => {
							if (res.code == 200) {
								this.goodsList = res.rows
								this.total = res.total
							}
							uni.removeStorageSync('Refresh');
						})
				} else {
					this.GoodsCategorychildrenid = this.GoodsCategorychildrenlist[index].id
					this.tabIndex = index
					this.pageNum = 1
					goodsList(this.pageSize, this.pageNum, this.GoodsCategorychildrenid, this.goodsName).then(
						res => {
							if (res.code == 200) {
								this.goodsList = res.rows
								this.total = res.total
							}
							uni.removeStorageSync('Refresh');
						})
				}
			},
			upper: function(e) {},
			lower: function(e) {},
			scroll: function(e) {
				this.old.scrollTop = e.detail.scrollTop
			},
			//根据父级分类id获取子分类
			GoodsCategorychildren(value) {
				getGoodsCategoryNameList(value).then(res => {
					this.GoodsCategorychildrenlist = [{
						goodsCategoryName: '全部',
						id: 99999999999999999,
					}]
					res.data.forEach(e => {
						this.GoodsCategorychildrenlist.push(e)
					})
				})
			},
			// 查询商品列表
			goodsListinfo() {
				this.pageNum = 1;
				goodsList(this.pageSize, this.pageNum, this.GoodsCategorychildrenid, this.goodsName).then(res => {
					if (res.code == 200) {
						res.rows.forEach(e => {
							this.goodsList.push(e)
						})
						this.total = res.total
					}
					uni.removeStorageSync('Refresh');
				})
			},
			//跳转详情页
			goCommodityDetails(item) {
				uni.navigateTo({
					url: `/pages/CommodityDetails/CommodityDetails?goodsPrice=${item.goodsPrice}&goodsInfoId=${item.goodsInfoId}&buySource=${'SHOPPING_MALL'}&goodsAttributeId=${item.goodsAttributeId}`
				})
			},
		},
		// onReachBottom() { //下滑加载
		// 	if (this.goodsList.length >= this.total) {} else {
		// 		this.pageNum++;
		// 		goodsList(this.pageSize, this.pageNum, this.GoodsCategorychildrenid, this.goodsName).then(res => {
		// 			if (res.code == 200) {
		// 				res.rows.forEach(e => {
		// 					this.goodsList.push(e)
		// 				})
		// 			}
		// 		})
		// 	}
		// },
		// onPullDownRefresh() { //下拉刷新
		// 	this.pageNum = 1;
		// 	goodsList(this.pageSize, this.pageNum, this.GoodsCategorychildrenid, this.goodsName).then(res => {
		// 		this.goodsList = res.rows
		// 		this.total = res.total
		// 	})
		// 	setTimeout(function() {
		// 		uni.stopPullDownRefresh();
		// 	}, 1000);
		// },
		//1.分享给朋友
		onShareAppMessage(res) {
			let pages = getCurrentPages();
			let url = pages[pages.length - 1].$page.fullPath
			url = decodeURIComponent(url)
			return {
				title: '泉医到家',
				path: url,
			}
		},
		//2.分享到朋友圈
		onShareTimeline(res) {
			let pages = getCurrentPages();
			let url = pages[pages.length - 1].$page.fullPath
			url = decodeURIComponent(url)
			return {
				title: '泉医到家',
				path: url,
			}
		},
	}
</script>

<style lang="scss">
	.apps {
		width: 100%;
		background-color: #F4F5F7;
		color: #000000;

		.inputs {
			box-shadow: 0rpx 9rpx 31rpx 9rpx rgba(0, 0, 0, 0.03);
			border: 1px solid #f0f0f0;
			width: 90%;
			height: 65rpx;
			margin: 10rpx 0 10rpx 50%;
			transform: translateX(-50%);
			border-radius: 20rpx;
			background-color: #f0f0f0;
			z-index: 999;

			.input {
				margin: 0 auto;
				position: absolute;
				height: 65rpx;
				// top: 8%;
				left: 10%;
				width: 90%;
				font-size: 26rpx;
				color: #000000;
			}

			.icon {
				background: url(@/static/sousuo.png) no-repeat;
				width: 30rpx;
				height: 28rpx;
				background-size: cover;
				position: absolute;
				top: 30%;
				left: 3%;
			}
		}

		::-webkit-scrollbar {
			display: none;
			width: 0 !important;
			height: 0 !important;
			-webkit-appearance: none;
			background: transparent;
			color: transparent;
		}

		.tabbar {
			display: flex;
			padding-top: 100rpx;
			height: 100vh;
			width: 100%;

			.righttabbar {
				width: 70%;
				// display: inline-block;
				// height: calc(100vh - 85rpx);
				height: 100%;

				.productlist {
					padding-bottom: 40rpx;
					overflow: scroll;
					-webkit-overflow-scrolling: touch;
					width: 100%;
					height: 100%;
					margin: 0 auto;
					padding-top: 15rpx;
					border-radius: 25rpx;
					display: flex;
					flex-wrap: wrap;
					justify-content: space-evenly;
					background-color: #ffffff;
					align-content: flex-start;

					.item {
						width: 45%;
						background: #FFFFFF;
						border-radius: 25rpx;
						padding-bottom: 10rpx;
						box-shadow: 0px 4rpx 8rpx 4rpx rgba(199, 200, 202, 0.8);
						margin-bottom: 30rpx;
						height: 450rpx;

						.price {
							font-size: 28rpx;
							color: #D43953;
							line-height: 50rpx;
							padding-left: 10rpx;
						}

						.text {
							font-size: 22rpx;
							padding: 0 10rpx;
							// text-overflow: ellipsis;
							// overflow: hidden;
							// white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
							display: -webkit-box;
							-webkit-box-orient: vertical;
							-webkit-line-clamp: 2;
						}

						.title {
							font-size: 28rpx;
							color: #000000;
							line-height: 50rpx;
							padding-left: 10rpx;
							text-overflow: ellipsis;
							overflow: hidden;
							white-space: nowrap;
						}

						image {
							border-radius: 25rpx 25rpx 0 0;
							width: 100%;
							height: 270rpx;
						}
					}
				}
			}

			.lefttabbar {
				width: 30%;
				// display: inline-block;
				height: 100%;
				padding-top: 20rpx;

				.lefttabbarlist {
					overflow: scroll;
					-webkit-overflow-scrolling: touch;
					height: 100%;
				}

				.actives {
					color: red;
					font-size: 34rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					background-color: #ffffff;
					// border-radius: 25rpx 0 0 25rpx;
				}

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

				.item {
					color: #000000;
					height: 80rpx;
					line-height: 80rpx;
					text-align: center;
					font-size: 30rpx;
					width: 100%;
				}
			}

		}


		.noorder {
			view {
				text-align: center;
				font-size: 40rpx;
				color: #BFBFBF;
			}

			image {
				display: block;
				margin: 20% auto 50rpx;
				width: 160rpx;
				height: 200rpx;
			}
		}
	}
</style>
