<template>
	<div class="app-main app-content">
		<scroll-view scroll-y scroll-with-animation class="tab-view" :scroll-top="scrollTop" :style="{height:height+'px'}">
			<div v-for="(item,index) in tabbar" :key="index" class="tab-bar-item" :class="[currentTab==index ? 'active' : '']" :data-current="index" @tap.stop="swichNav($event ,item)">
				<text>{{item.categoryName}}</text>
			</div>
		</scroll-view>
		<block v-for="(item,index) in tabbar" :key="index">
			<scroll-view scroll-y class="right-box" :style="{height:height+'px'}" v-if="currentTab==index">
				<!--内容部分 start -->
				<div class="page-view" v-if="!$util.isEmpty(list.data)">
					<div class="goods-list" v-for="(items, subIndex) in list.data" :key="items.id" @click="pageTo(`/pages/goods/detail?id=${items.id}`)">
						<div class="img-blo">
							<app-img :src="items.smallImgList[0]" alt="商品图" mode="aspectFit" :height="200" />
						</div>
						<div class="goods-det">
							<div class="goods-det-top">
								<div class="goods-name">{{ items.goodsName }}</div>
								<div class="goods-sales">已售{{ items.sold }}</div>
							</div>
							<div class="goods-price">￥{{ items.price }}</div>
						</div>
					</div>
				</div>
				<block v-else>
					<app-wrapper-empty title="暂无数据" :is-empty="$util.isEmpty(list.data)" />
				</block>
				<!--内容部分 end -->
			</scroll-view>
		</block>
	</div>
</template>

<script>
import AppImg from '@/components/app-img'
import AppWrapperEmpty from '@/components/app-wrapper-empty'
import { getClass, getList } from '@/api/category'
import { list } from '@/mixins'
export default {
	name: 'category',
	components: {
		AppWrapperEmpty,
		AppImg
	},
	mixins: [list],
	data() {
		return {
			tabbar: [],
			height: 0, // scroll-view高度
			currentTab: 0, // 预设当前项的值
			scrollTop: 0, // tab标题的滚动条位置
			form: {
				categoryId: ''
			}
		}
	},
	onLoad: function() {
		if (this.$util.isLogin()) {
			setTimeout(() => {
				uni.getSystemInfo({
					success: res => {
						this.height = res.windowHeight
						this.sInit()
					}
				})
			}, 50)
		}
	},
	methods: {
		async sInit() {
			this._getClass().then(res => {
				this._list()
			})
		},
		// 分类
		_getClass() {
			return getClass().then(res => {
				if (this.$util.isEmpty(res.data)) return false
				this.form.categoryId = res.data[0].id
				this.tabbar = res.data
			})
		},
		// 列表
		_list() {
			return getList(this.form).then(res => {
				this.completes(res)
			})
		},
		// 点击标题切换当前页时改变样式
		swichNav(e, item) {
			let cur = e.currentTarget.dataset.current
			if (this.currentTab == cur) {
				return false
			} else {
				this.currentTab = cur
				this.form.categoryId = item.id
				this.resetList()
				this._list()
				// this.checkCor()
			}
		},
		// 判断当前滚动超过一屏时，设置tab标题滚动条。
		checkCor() {
			let that = this
			// 这里计算按照实际情况进行修改，动态数据要进行动态分析
			// 思路：窗体高度/单个分类高度 200rpx 转px计算 =>得到一屏幕所显示的个数，结合后台传回分类总数进行计算
			// 数据很多可以多次if判断然后进行滚动距离计算即可
			if (that.currentTab > 7) {
				that.scrollTop = 500
			} else {
				that.scrollTop = 0
			}
		}
	}
}
</script>

<style lang="scss" scoped>
	.app-content {
		background-color: #fff;
	}

	page {
		background: #fff;
	}

	/* 左侧导航布局 start*/

	/* 隐藏scroll-view滚动条*/

	::-webkit-scrollbar {
		width: 0;
		height: 0;
		color: transparent;
	}

	.tab-view {
		/* height: 100%; */
		width: 200upx;
		position: fixed;
		left: 0;
		z-index: 10;
		background-color: #f0f2f6;

		.tab-bar-item {
			width: 200upx;
			height: 110upx;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 26upx;
			color: #444;
			font-weight: 400;
		}

		.active {
			position: relative;
			color: $mainColor;
			font-size: 26px;
			background: #fff;
		}

		.active::before {
			content: '';
			position: absolute;
			border-left: 8upx solid $mainColor;
			height: 100%;
			left: 0;
		}
	}

	/* 左侧导航布局 end*/

	.right-box {
		width: 100%;
		position: fixed;
		padding-left: 220upx;
		box-sizing: border-box;
		left: 0;
		.page-view {
			width: 100%;
			overflow: hidden;
			box-sizing: border-box;
			padding-bottom: env(safe-area-inset-bottom);
			.goods-list {
				@include disFlex(flex-start, flex-start);
				margin: 40px 0;
				.img-blo {
					width: 200px;
					height: 200px;
					margin-right: 20px;
				}
				.goods-det {
					padding-top: 18px;
					font-size: 28px;
					.goods-name {
						margin-bottom: 10px;
					}
					.goods-sales {
						color: $fontColor3;
						font-size: 24px;
					}
					.goods-price {
						margin-top: 50px;
						color: $mainColor;
						font-weight: bold;
					}
				}
			}
		}
	}
	// img {
	// 	width: 100%;
	// 	height: 100%;
	// 	display: inline-block;
	// }
</style>
