<template>
	<view class="page">
		<view :style="{ height: statusBarHeight + 'px' }">
			<!-- 这里是状态栏, 每个页面都需要有, 目的不让页面覆盖状态栏 -->
		</view>
		<view class="big-search-wrapper">
			<image
				class="header-right-search icon-search"
				src="/static/images/icon-back.png"
				@click="back"
			/>
			<view class="search-box">
				<view class="search-box-left">
					<image
						class="header-right-search search-image"
						src="/static/images/icon-search.png"
					/>
				</view>
				<input
					type="text"
					:model="searchContent"
					:value="searchContent"
					@input="typingContent"
					placeholder="请输入内容~"
					maxlength="10"
					class="search-input"
				/>
			</view>
			<view
				class="sbtn"
				@click="doSearch"
			>
				搜索
			</view>
		</view>

		<view class="mainCont">
			<view
				class="wrap"
				:style="{ height: screenHeight - statusBarHeight - 50 + 'px' }"
			>
				<view class="u-tabs-box">
					<u-tabs-swiper
						bgColor=" #F5F5F5"
						activeColor="#FF3229"
						ref="tabs"
						:list="list"
						:current="current"
						@change="change"
						:is-scroll="false"
						swiperWidth="750"
						font-size="30rpx"
						barWidth="24"
						barHeight="8"
					></u-tabs-swiper>
				</view>
				<swiper
					class="swiper-box"
					:current="swiperCurrent"
					@transition="transition"
					@animationfinish="animationfinish"
				>
					<swiper-item class="swiper-item">
						<scroll-view
							scroll-y
							class="no-scrollbar"
							style="height: 100%; width: 100%"
							@scrolltolower="reachBottom"
						>
							<view class="page-box">
								<!--视频-->
								<search-vd
									ref="vd"
									:keywords="searchContent"
								></search-vd>
							</view>
						</scroll-view>
					</swiper-item>

					<swiper-item class="swiper-item">
						<scroll-view
							scroll-y
							class="no-scrollbar"
							style="height: 100%; width: 100%"
							@scrolltolower="reachBottom"
						>
							<view class="page-box">
								<!--商品-->
								<shop
									ref="shop"
									:keywords="searchContent"
								></shop>
							</view>
						</scroll-view>
					</swiper-item>

					<swiper-item class="swiper-item">
						<scroll-view
							scroll-y
							class="no-scrollbar"
							style="height: 100%; width: 100%"
							@scrolltolower="reachBottom"
						>
							<view class="page-box">
								<!--用户-->
								<user
									ref="user"
									:keywords="searchContent"
								></user>
							</view>
						</scroll-view>
					</swiper-item>

					<swiper-item class="swiper-item">
						<scroll-view
							scroll-y
							class="no-scrollbar"
							style="height: 100%; width: 100%"
							@scrolltolower="reachBottom"
						>
							<view class="page-box">
								<!--团购-->
								<tuangou
									ref="tuangou"
									:keywords="searchContent"
								></tuangou>
							</view>
						</scroll-view>
					</swiper-item>
				</swiper>

				<!-- 	<view class="page-footer">
					<view class="contract-button">
						自定义底部栏
					</view>
				</view> -->
			</view>
		</view>
	</view>
</template>

<script>
let system = uni.getSystemInfoSync();
console.log(system);
import { isStrEmpty } from '@/utils/tools.js';
import storage from '@/utils/storage.js'; //缓存
import searchVd from './searchVd.vue';
import shop from './shop';
import user from './user';
import tuangou from './tuangou';
export default {
	components: {
		searchVd,
		shop,
		user,
		tuangou
	},
	data() {
		return {
			screenHeight: 0,
			statusBarHeight: 0,
			search: '',
			searchContent: '',
			// tabs
			list: [
				{
					name: '视频'
				},
				{
					name: '商品'
				},
				{
					name: '用户'
				},
				{
					name: '团购'
				}
			],
			listValue: ['vd', 'shop', 'user', 'tuangou'],
			current: 0,
			swiperCurrent: 0,
			dx: 0
			// tabs-end
		};
	},
	onLoad(params) {
		this.statusBarHeight = system.statusBarHeight;
		let screenHeight = system.safeArea.bottom;
		this.screenHeight = screenHeight;
		// 搜索的关键字
		let search = params.search || ''.trim();
		this.searchContent = params.search;
	},
	watch: {
		current(n) {
			this.initCurrentData();
		}
	},

	methods: {
		// 初始化数据
		initCurrentData() {
			console.log(this.current);
			var prop = this.listValue[this.current];
			var dom = this.$refs[prop];
			var child = dom.search; //子组件内部的关键字
			console.log('子关键字：' + child);
			var flag = dom.flag; // 子组件内部索引
			var parent = this.searchContent;
			console.log('fu关键字：' + parent);
			if (parent != child && this.swiperCurrent == flag && this.searchContent != '') {
				dom.initData();
			}
		},
		// tab栏切换
		change(index) {
			this.swiperCurrent = index;
		},
		transition({ detail: { dx } }) {
			this.$refs.tabs.setDx(dx);
		},
		animationfinish({ detail: { current } }) {
			this.$refs.tabs.setFinishCurrent(current);
			this.swiperCurrent = current;
			this.current = current;
		},
		reachBottom() {
			console.log('触底' + this.current);
			var prop = this.listValue[this.current];
			var dom = this.$refs[prop];
			dom.getData();
		},
		doSearch() {
			let me = this;
			let searchContent = this.searchContent;
			if (isStrEmpty(searchContent)) {
				uni.showToast({
					title: '搜索为空!',
					icon: 'none',
					duration: 2000
				});
				this.searchContent = '';
				return;
			} else {
				this.initCurrentData();
			}
		},
		typingContent(e) {
			this.searchContent = e.detail.value || ''.trim();
		},
		back() {
			uni.navigateBack({
				delta: 1
			});
		}
	}
};
</script>

<style lang="scss">
.page {
	// position: absolute;
	// left: 0;
	// right: 0;
	// top: 0;
	// bottom: 0;
	background-color: #181b27;

	.big-search-wrapper {
		padding: 14px;
		height: 50px;
		display: flex;
		align-items: flex-start;
		flex-direction: row;
		justify-content: space-between;
		.header-right-search {
			height: 50px;
		}
		.icon-search {
			width: 25px;
			height: 25px;
			opacity: 0.8;
		}
		.search-box {
			display: flex;
			flex-direction: row;
			.search-box-left {
				padding: 0 10rpx;
				display: flex;
				flex-direction: row;
				background-color: #55565e;
				border-top-left-radius: 6rpx;
				border-bottom-left-radius: 6rpx;
				.search-image {
					width: 25px;
					height: 25px;
					opacity: 0.8;
				}
			}
		}
		.search-input {
			width: 410rpx;
			height: 25px;
			background-color: #55565e;
			font-size: 28rpx;
			color: #ffffff;
			border-top-right-radius: 6rpx;
			border-bottom-right-radius: 6rpx;
		}
		.search-box-right {
			padding: 0 16rpx;
			display: flex;
			flex-direction: row;
			background-color: #55565e;
			border-top-right-radius: 6rpx;
			border-bottom-right-radius: 6rpx;
			.scan-image {
				width: 25px;
				height: 25px;
				opacity: 0.8;
			}
		}
		.sbtn {
			height: 25px;
			line-height: 25px;
			color: #ffffff;
			font-size: 28rpx;
		}
	}
	// 隐藏ios端滚动条
	::-webkit-scrollbar {
		display: none;
		width: 0 !important;
		height: 0 !important;
		-webkit-appearance: none;
		background: transparent;
	}

	//
	.mainCont {
		background: #f5f5f5;
	}

	.u-tabs-box {
		height: 40px;
	}

	.page-box {
		width: 710rpx;
		margin: 0 auto;
	}

	.wrap {
		display: flex;
		flex-direction: column;
		width: 100%;
	}

	.swiper-box {
		flex: 1;
	}

	.swiper-item {
		height: 100%;
	}

	// footer config
	// .page-footer {
	// 	width: 750rpx;
	// 	height: 128rpx;
	// 	background: #ffffff;
	// 	box-shadow: 0rpx -4rpx 16rpx rgba(219, 208, 208, 0.61);
	// 	opacity: 1;
	// 	border-radius: 0rpx;

	// 	.contract-button {
	// 		width: 686rpx;
	// 		height: 80rpx;

	// 		margin-top: 24rpx;
	// 		margin-left: 32rpx;

	// 		font-size: 34rpx;
	// 		font-family: PingFang SC;
	// 		font-weight: 500;

	// 		text-align: center;

	// 		line-height: 80rpx;
	// 		color: #ffffff;
	// 		letter-spacing: 5rpx;

	// 		background: linear-gradient(137deg, #ff3229 0%, #ff7b59 100%);
	// 		opacity: 1;
	// 		border-radius: 40rpx;
	// 	}
	// }
}
</style>
