<template>
	<view class="u-wrap">
		<view class="top-box">
			<view class="switch-box">
				<u-tabs :list="list1" lineWidth="30" lineColor="$uni-bg-color-primary" @click="handlerChangeTab"
					:activeStyle="{
            color: '#000',
            fontSize: '28rpx',
            transform: 'scale(1.05)',
            marginBottom: '15rpx',
          }" :inactiveStyle="{
            color: '#333',
            fontSize: '30rpx',
            transform: 'scale(1)',
            marginBottom: '15rpx',
          }" itemStyle="width:50%;padding:0;margin:5px 0;"></u-tabs>
			</view>
			<view class="search-box">
				<u--input v-model="search" prefixIcon="search" prefixIconStyle="font-size: 22px;color: #909399"
					class="search-ipt" placeholder="请输入内容" border="surround" clearable></u--input>
				<button class="btn" @click="handlerSearchBtn">搜索</button>
			</view>
		</view>

		<!-- 在售中 -->
		<view class="u-menu-wrap" v-if="delete_type == 0">
			<scroll-view scroll-y scroll-with-animation class="u-tab-view menu-scroll-view" :scroll-top="scrollTop"
				:scroll-into-view="itemId">
				<view v-for="(item, index) in tabbar" :key="index" class="u-tab-item"
					:class="[current == index ? 'u-tab-item-active' : '']" @tap.stop="swichMenu(index)">
					<text class="u-line-1">{{ item.name }}</text>
				</view>
			</scroll-view>
			<scroll-view :scroll-top="scrollRightTop" :scroll-into-view="itemId" scroll-y scroll-with-animation
				class="right-box" @scroll="rightScroll">
				<view class="page-view">

					<view class="" style="margin-top: 40rpx;" v-if="!tabbar.length">
						<u-empty mode="search" iconColor="#dae2ef" width="100" height="100"
							icon="https://cdn.uviewui.com/uview/demo/empty/search.png"
							v-if="!tabbar.length&&search.length!=0">

						</u-empty>
						<u-empty mode="list" text="暂无商品" iconColor="#dae2ef" width="100" height="100"
							icon="https://cdn.uviewui.com/uview/demo/empty/list.png" v-else-if="!tabbar.length">

						</u-empty>
					</view>


					<view class="class-item" :id="'item' + index" v-for="(item, index) in tabbar" :key="index">
						<view class="item-title">
							<text>{{ item.name }}</text>
						</view>
						<view class="item-box" v-for="itm of item.children" :key="idx">
							<view class="item-l">
								<img class="l-img" :src="itm.logo" alt="" />
							</view>
							<view class="item-r">
								<p class="p1">{{ itm.name }}</p>
								<p class="p2 ws2 ">{{itm.description}}</p>
								<view class=" flex-c">
									<view class="mar-right-20 p3">
										￥{{itm.specialPrice}}起
									</view>
									<view class="gray-color originalPrice">
										￥{{itm.originalPrice}}
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>

		<!-- 已下架 -->
		<view class="u-menu-wrap" v-if="delete_type == 1">
			<scroll-view :scroll-top="scrollRightTop" scroll-y scroll-with-animation class="right-box"
				@scroll="rightScroll">
				<view class="page-view">
					<view class="" style="margin-top: 40rpx;" v-if="!rightTabbar.length">
						<u-empty mode="search" iconColor="#dae2ef" width="100" height="100"
							icon="https://cdn.uviewui.com/uview/demo/empty/search.png"
							v-if="!rightTabbar.length&&search.length!=0">

						</u-empty>
						<u-empty mode="list" text="暂无下架商品" iconColor="#dae2ef" width="100" height="100"
							icon="https://cdn.uviewui.com/uview/demo/empty/list.png" v-else-if="!rightTabbar.length">

						</u-empty>
					</view>
					<view class="class-item2" :id="'item' + index" v-for="(item, index) in rightTabbar" :key="index">
						<view class="item-box">
							<u-checkbox-group>
								<u-checkbox v-model="item.checked" shape="circle"
									@change="checkeChange(item)"></u-checkbox>
							</u-checkbox-group>
							<view class="item-l">
								<img class="l-img" src="@/static/QR57a.jpg" alt="" />
							</view>
							<view class="item-r">
								<p class="p1">{{ item.name }}</p>
								<p class="p2 ws2 ">{{item.description}}</p>
								<view class=" flex-c">
									<view class="mar-right-20 p3">
										￥{{item.specialPrice}}起
									</view>
									<view class="gray-color originalPrice">
										￥{{item.originalPrice}}
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="bottom-box" v-if="delete_type == 1">
			<p @click="upStore">批量上架</p>
		</view>
	</view>
</template>

<script>
	import {
		getGoodsList,
		upGoods,
		getCategories
	} from '@/api/client/goods.js'
	export default {
		data() {
			return {
				checkboxValue1: [],
				scrollTop: 0, //tab标题的滚动条位置
				oldScrollTop: 0, // tab标题的滚动条旧位置
				current: 0, // 预设当前项的值
				menuHeight: 0, // 左边菜单的高度
				menuItemHeight: 0, // 左边菜单item的高度
				itemId: '', // 栏目右边scroll-view用于滚动的id
				arr: [], // 储存距离顶部高度的数组
				scrollRightTop: 0, // 右边栏目scroll-view的滚动条高度
				timer: null, // 定时器
				tabbar: [],
				list1: [{
						name: '在售中',
					},
					{
						name: '已下架',
					},
				],
				checked: false,
				search: '',
				delete_type: false,
				rightTabbar: [], // 列表
			};
		},
		/**
		 * 获取一个目标元素的高度
		 * @elClass 元素的类名
		 * @dataVal 储存高度的对象
		 */
		onReady() {
			this.getMenuItemTop();
		},
		watch: {
			delete_type(newValue) {
				this.scrollRightTop = 0;
				this.current = 0;
			},
		},
		computed: {
			merchantId() {
				return this.$store.state.data.merchantInfo.merchant.id
			}
		},
		created() {

		},
		onShow() {
			this.getGoodsList()
		},
		methods: {

			checkeChange(item) {
				console.log(item.checked);
				item.checked = !item.checked

			},
			deleteShop() {

			},
			async upStore() {
				const ids = this.rightTabbar.filter(obj => obj.checked).map(item => item.id)
				if (ids.length == 0) {
					uni.showToast({
						icon: 'none',
						title: '请选择需要上架的商品'
					})
					return
				}
				const res = await upGoods(ids)
				if (res.code == 'OK') {
					uni.showToast({
						icon: 'none',
						title: '上架成功'
					})
					this.getGoodsList()
				} else {
					uni.showToast({
						icon: 'none',
						title: '上架失败'
					})
				}
			},

			getGoodsList() {


				getCategories(this.merchantId).then(res => {
					if (res.code == 'OK') {
						console.log(res, "这是res");
						getGoodsList({
							merchantId: this.merchantId,
							size: 100,
							goodsName: this.search,
							status: this.delete_type ? 'OFFLINE' : 'ONLINE'
						}).then(result => {
							console.log(result, "这是result")
							if (result.code == 'OK' && result.data && res.data) {
								res.data.forEach(obj => {
									result.data.forEach(item => {
										if (obj.id == item.categoryId) {
											obj.children.push(item)
										}

									})
								})
								console.log(res.data, "这是res.data")
								this.tabbar = res.data

								if (this.delete_type) {
									this.rightTabbar = result.data.map(obj => {
										return {
											...obj,
											checked: false
										}
									})
								}


							} else {
								this.tabbar = []
								this.rightTabbar = []
							}



						})
					} else {
						this.tabbar = []
						this.rightTabbar = []
					}
				})





			},
			getElRect(elClass, dataVal) {
				new Promise((resolve, reject) => {
					const query = uni.createSelectorQuery().in(this);
					query
						.select('.' + elClass)
						.fields({
								size: true,
							},
							res => {
								// 如果节点尚未生成，res值为null，循环调用执行
								if (!res) {
									setTimeout(() => {
										this.getElRect(elClass);
									}, 10);
									return;
								}
								this[dataVal] = res.height;
								resolve();
							},
						)
						.exec();
				});
			},

			getMenuItemTop() {
				new Promise(resolve => {
					let selectorQuery = uni.createSelectorQuery();
					selectorQuery
						.selectAll('.class-item')
						.boundingClientRect(rects => {
							// 如果节点尚未生成，rects值为[](因为用selectAll，所以返回的是数组)，循环调用执行
							if (!rects.length) {
								setTimeout(() => {
									this.getMenuItemTop();
								}, 10);
								return;
							}
							rects.forEach(rect => {
								// 视情况而定，这里减去rects[0].top，是因为第一项顶部可能不是贴到导航栏(比如有个搜索框的情况)
								this.arr.push(rect.top - rects[0].top);
								// this.arr.push(rect.top)
								resolve();
							});
						})
						.exec();
				});
			},
			/**
			 * 观测元素相交状态
			 * 检测右边scroll-view的id为itemxx的元素与right-box的相交状态
			 * 如果跟.right-box底部相交，就动态设置左边栏目的活动状态
			 */
			async observer() {
				this.tabbar.map((val, index) => {
					let observer = uni.createIntersectionObserver(this);
					observer
						.relativeTo('.right-box', {
							top: 0,
						})
						.observe('#item' + index, res => {
							if (res.intersectionRatio > 0) {
								let id = res.id.substring(4);
								this.leftMenuStatus(id);
							}
						});
				});
			},
			/**
			 * 设置左边菜单的滚动状态
			 * @index 传入的 ID
			 */
			async leftMenuStatus(index) {
				this.current = index;
				// 如果为0，意味着尚未初始化
				if (this.menuHeight == 0 || this.menuItemHeight == 0) {
					await this.getElRect('menu-scroll-view', 'menuHeight');
					await this.getElRect('u-tab-item', 'menuItemHeight');
				}
				// 将菜单活动item垂直居中
				this.scrollTop = index * this.menuItemHeight + this.menuItemHeight / 2 - this.menuHeight / 2;
			},
			/**
			 * 点击左边的栏目切换
			 * @index 传入的 ID
			 */
			async swichMenu(index) {

				this.$nextTick(() => {
					this.itemId = 'item' + index
				})

				if (this.arr.length == 0) {
					await this.getMenuItemTop();
				}
				if (index == this.current) return;
				this.scrollRightTop = this.oldScrollTop;
				this.$nextTick(function() {
					this.scrollRightTop = this.arr[index];
					this.current = index;
					this.leftMenuStatus(index);
				});
			},
			/**
			 * 右边菜单滚动
			 * 如果不存在height2，意味着数据循环已经到了最后一个，设置左边菜单为最后一项即可
			 */
			async rightScroll(e) {
				this.oldScrollTop = e.detail.scrollTop;
				if (this.arr.length == 0) {
					await this.getMenuItemTop();
				}
				if (this.timer) return;
				if (!this.menuHeight) {
					await this.getElRect('menu-scroll-view', 'menuHeight');
				}
				setTimeout(() => {
					// 节流
					this.timer = null;
					// scrollHeight为右边菜单垂直中点位置
					// let scrollHeight = e.detail.scrollTop + this.menuHeight / 2;
					// scrollHeight为右边菜单头部位置
					let scrollHeight = e.detail.scrollTop + 20;
					for (let i = 0; i < this.arr.length; i++) {
						let height1 = this.arr[i];
						let height2 = this.arr[i + 1];
						if (!height2 || (scrollHeight >= height1 && scrollHeight < height2)) {
							this.leftMenuStatus(i);
							return;
						}
					}
				}, 10);
			},

			// 搜索按钮
			handlerSearchBtn() {
				console.log('search', this.search);
				this.getGoodsList()
			},
			// 切换tab
			handlerChangeTab(e) {
				if (e.index == 1) {
					this.delete_type = true;
				} else {
					this.delete_type = false;
				}
				this.getGoodsList()
			},
		},
	};
</script>

<style lang="scss" scoped>
	.top-box {
		padding: 0 0 20rpx;
		width: 100%;

		.switch-box {
			width: 100%;
		}

		.search-box {
			display: flex;
			justify-content: space-around;
			width: 90%;
			margin: 20rpx auto 0;

			.btn {
				width: 160rpx;
				height: 70rpx;
				background-color: #5992bb;
				color: #fff;
				text-align: center;
				line-height: 70rpx;
				font-size: 26rpx;
				border-radius: 30rpx;
				margin-left: 20rpx;
			}
		}
	}

	.u-wrap {
		/* #ifdef H5 */
		height: calc(100vh - var(--window-top));
		/* #endif */
		display: flex;
		flex-direction: column;
		height: 100vh;
	}

	.u-search-box {
		padding: 18rpx 30rpx;
	}

	.u-menu-wrap {
		flex: 1;
		display: flex;
		overflow: hidden;
	}

	.u-tab-view {
		width: 200rpx;
		background-color: #f6f6f6;
	}

	.u-tab-item {
		height: 110rpx;
		background: #f6f6f6;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 26rpx;
		color: #444;
		font-weight: 400;
		line-height: 1;
		padding: 16rpx 0;
	}

	.u-tab-item-active {
		position: relative;
		color: #5f96be;
		font-size: 30rpx;
		font-weight: 500;
		background: #fff;
	}

	.u-tab-item-active::before {
		content: '';
		position: absolute;
		border-left: 4px solid #5f96be;
		height: 52rpx;
		left: 0;
		top: 29rpx;
	}

	.u-tab-view {
		height: 100%;
	}

	.right-box {
		background-color: rgb(250, 250, 250);
	}

	.page-view {
		padding: 16rpx;
	}

	.class-item,
	.class-item2 {
		margin-bottom: 30rpx;
		background-color: #fff;
		padding: 16rpx;
		border-radius: 8rpx;
	}

	.class-item2 {
		margin-bottom: 0;
	}

	.item-title {
		font-size: 26rpx;
		text-align: center;
		color: #5f96be;
		margin-bottom: 20rpx;
	}

	.item-box {
		display: flex;
		margin-bottom: 10rpx;

		.item-l {
			border: 2rpx solid #eef0f0;
			border-radius: 20rpx;
			margin-right: 20rpx;

			.l-img {
				width: 140rpx;
				height: 130rpx;
				border-radius: 20rpx;
			}
		}

		.item-r {

			.p1,
			.type_p1 {
				width: 350rpx;
				font-size: 28rpx;
				color: #000;
				margin-bottom: 5rpx;
				overflow-x: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}

			.type_p1 {
				width: 480rpx;
			}

			.p2 {
				font-size: 24rpx;
				color: #a4a5ad;
			}

			.p3 {
				font-size: 26rpx;
				color: #d6534d;
			}
		}
	}

	.bottom-box {
		width: 100%;
		background-color: #fff;
		padding: 10rpx 20rpx;
		height: 100rpx;
		border-top: 2rpx solid #f7f7f7;
		box-shadow: 0px 7px 10px 7px rgba(0, 0, 0, 0.1);
		display: flex;
		justify-content: space-around;
		line-height: 100rpx;
		font-size: 28rpx;
	}

	::v-deep .u-input--radius.data-v-fdbb9fe6,
	.u-input--square.data-v-fdbb9fe6 {
		background-color: #f7f7f7 !important;
		padding: 40rpx;
		border-radius: 50rpx;
	}

	.ws2 {
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2; //两行
		-webkit-box-orient: vertical;
		height: 70rpx;
	}

	.flex-c {
		display: flex;
		align-items: center;
	}

	.gray-color {
		color: #a4a5ad
	}

	.mar-right-20 {
		margin-right: 20rpx;

	}

	.originalPrice {
		text-decoration: line-through
	}
</style>