<template>
	<app-layout>
		<view id="tabs-ewr">
			<scroll-view class="main-left tabs" style="white-space: nowrap;" scroll-with-animation scroll-x :scroll-left="scrollLeft">
				<block v-for="(item, index) in tabTitle" :key="index">
					<view :class="{ item: true, active: activeIndex === index }" :id="'tab_' + index" @click="tabClick(index)">{{ item }}</view>
				</block>
				<!-- <view class="underline" :style="[tabBarStyle]"></view> -->
			</scroll-view> 
		</view>
		<app-scroll-list :background="'#fff'" :list="tabList"></app-scroll-list>
		<view class="link">
			<view class="title1">热门案例</view>
			<image class="tyx" src="https://t17.9026.com/web/statics/image/index/tyx.png" mode=""></image>
		</view> 
		<view class="popcase">
			<view class="item" v-for="(item,index) in exampleList" @tap="goPage(`/pages/case/caseDetails?id=${item.id}`)">
				<image :src="item.cover_pic" mode=""></image>
				<view class="main-between bt">
					<view class="main-between-y">
						<view class="title t-omit">{{item.title}}</view>
						<!-- <view class="desc">{{item.exampleStyle.name}}·{{item.exampleHouse.name}}</view> -->
					</view>
					<!-- <view class="price20"><text class="rmb">￥</text>2466.00</view> -->
				</view>
			</view>
		</view>
	</app-layout>
</template>
 
<script>
import appScrollList from './components/scroll-list.vue';
export default {
	components: {
		appScrollList
	},
	data() {
		return {
			tabTitle: ['热门风格', '精选户型'],
			activeIndex: 0,
			
			tabList:[],
			exampleList:[],
			page:1,
			
			scrollLeft: 0, // 滚动scroll-view的左边滚动距离
			scrollBarLeft: 0, // 移动bar需要通过translateX()移动的距离
			barFirstTimeMove: true, // 滑块第一次移动时(页面刚生成时)，无需动画，否则给人怪异的感觉
			barStyle: {}, //// 底部滑块的自定义样式
			parentLeft: 0, // 父元素(tabs组件)到屏幕左边的距离
			componentWidth: 0, // 屏幕宽度，单位为px
			tabQueryInfo: [] // 存放对tab菜单查询后的节点信息
		};
	},
	watch: {
		activeIndex(nVal, oVal) {
			// 视图更新后再执行移动操作
			this.$nextTick(() => {
				this.scrollByIndex();
				this.getTabList()
			});
		}
	},
	computed: {
		// 移动bar的样式
		tabBarStyle() {
			let style = {
				width: 80 + 'rpx',
				transform: `translate(${this.scrollBarLeft}px, -100%)`,
				// 滑块在页面渲染后第一次滑动时，无需动画效果
				'transition-duration': `${this.barFirstTimeMove ? 0 : 0.5}s`,
				'background-color': '#303133',
				height: 6 + 'rpx',
				opacity: this.barFirstTimeMove ? 0 : 1,
				// 设置一个很大的值，它会自动取能用的最大值，不用高度的一半，是因为高度可能是单数，会有小数出现
				'border-radius': `${6 / 2}px`
			};
			Object.assign(style, this.barStyle);
			return style;
		},
		// tab的样式
		tabItemStyle() {
			return index => {
				let style = {
					height: 6 + 'rpx',
					'line-height': 6 + 'rpx',
					'font-size': 30 + 'rpx',
					'transition-duration': `${0.5}s`,
					padding: this.isScroll ? `0 ${this.gutter}rpx` : '',
					flex: true ? 'auto' : '1',
					width: '63rpx'
				};
				// 字体加粗
				style.fontWeight = 'bold';
				return style;
			};
		}
	},
	methods: {
		getTabList(){
			this.$showLoading()
			let url=this.activeIndex?this.$api.example.house_list:this.$api.example.style_list
			this.$request({
				url:url,
				method:'post'
			}).then(res=>{
				if(res.code===0){
					this.tabList=[]
					for (let i = 0; i < res.data.length; i++) {
						let item=res.data[i]
						let link=!this.activeIndex?`?style_id=${item.id}`:`?house_id=${item.id}`
						this.tabList.push({image:item.cover_img,id:item.id,tag:item.name,link:`/pages/case/caseList${link}&nav_title=${item.name}`})
					}
				}
				this.$hideLoading()
			})
		},
		getExampleList(){
			this.$request({
				url:this.$api.example.list,
				data:{
					// style_id,
					// house_id,
					is_chosen:1,
					page:this.page
				},
				method:'post'
			}).then(res=>{
				if(res.code===0){
					this.exampleList=res.data.list
				}
			})
		},

		goPage(url){
			uni.navigateTo({
				url:url
			})
		},
		// 设置一个init方法，方便多处调用
		async init() {
			// 获取tabs组件的尺寸信息
			let tabRect = await this.uGetRect('#tabs-ewr');
			// tabs组件距离屏幕左边的宽度
			this.parentLeft = tabRect.left;
			// tabs组件的宽度
			this.componentWidth = tabRect.width;
			this.getTabRect();
		},
		uGetRect(selector, all) {
			return new Promise(resolve => {
				uni.createSelectorQuery()
					.in(this)
					[all ? 'selectAll' : 'select'](selector)
					.boundingClientRect(rect => {
						if (all && Array.isArray(rect) && rect.length) {
							resolve(rect);
						}
						if (!all && rect) {
							resolve(rect);
						}
					})
					.exec();
			});
		},
		tabClick(index) {
			this.activeIndex = index;
		},
		// 查询tab的布局信息
		getTabRect() {
			// 创建节点查询
			let query = uni.createSelectorQuery().in(this);
			// 历遍所有tab，这里是执行了查询，最终使用exec()会一次性返回查询的数组结果
			for (let i = 0; i < this.tabTitle.length; i++) {
				// 只要size和rect两个参数
				query.select(`#tab_${i}`).fields({
					size: true,
					rect: true
				});
			}
			// 执行查询，一次性获取多个结果
			query.exec(
				function(res) {
					this.tabQueryInfo = res;
					console.log('节点信息', res);
					// 初始化滚动条和移动bar的位置
					this.scrollByIndex();
				}.bind(this)
			);
		},
		// 滚动scroll-view，让活动的tab处于屏幕的中间位置
		scrollByIndex() {
			// 当前活动tab的布局信息，有tab菜单的width和left(为元素左边界到父元素左边界的距离)等信息
			let tabInfo = this.tabQueryInfo[this.activeIndex];
			if (!tabInfo) return;
			// 活动tab的宽度
			let tabWidth = tabInfo.width;
			// 活动item的左边到tabs组件左边的距离，用item的left减去tabs的left
			let offsetLeft = tabInfo.left - this.parentLeft;
			// 将活动的tabs-item移动到屏幕正中间，实际上是对scroll-view的移动
			let scrollLeft = offsetLeft - (this.componentWidth - tabWidth) / 2;
			this.scrollLeft = scrollLeft < 0 ? 0 : scrollLeft;
			// 当前活动item的中点点到左边的距离减去滑块宽度的一半，即可得到滑块所需的移动距离
			let left = tabInfo.left + tabInfo.width / 2 - this.parentLeft;
			// 计算当前活跃item到组件左边的距离
			console.log('left', left);
			this.scrollBarLeft = left - uni.upx2px(80) / 2;
			// 第一次移动滑块的时候，barFirstTimeMove为true，放到延时中将其设置false
			// 延时是因为scrollBarLeft作用于computed计算时，需要一个过程需，否则导致出错
			if (this.barFirstTimeMove == true) {
				setTimeout(() => {
					this.barFirstTimeMove = false;
				}, 100);
			}
		}
	},
	onLoad() {
		this.init();
		this.getTabList()
		this.getExampleList()
	},
	onReachBottom() {
		this.page++
		this.getExampleList()
	}
};
</script>

<style lang="scss" scoped>
	@import '../index/index.scss';
.tabs {
	box-shadow: 0 1px 5px rgba(0, 0, 0, 0.06);
	background-color: #fff;
	padding: 30rpx 36rpx 20rpx;
	position: relative;
	z-index: 10;
	.item {
		display: inline-block;
		text-align: center;
		font-size: 32rpx;
		font-weight: bold;
		color: #999999;
		margin-right: 36rpx;
	}
	.active {
		color: #222222;
		position: relative;
	}
	.underline {
		position: absolute;
		bottom: 20rpx;
		z-index: 100;
	}
}

.popcase{
	.item{
		width: 678rpx;
		height: auto;
		background: #FFFFFF;
		border-radius: 8rpx;
		margin: 0 auto 30rpx;
		overflow: hidden;
		image{
			width: 100%;
			height: 340rpx;
		}
		.bt{
			padding: 27rpx 24rpx 37rpx 33rpx;
		}
		.title{
			width: 580rpx;
			font-size: 32rpx;
			font-weight: bold;
			color: #222222;
		}
		.desc{
			font-size: 22rpx;
			font-weight: 500;
			color: #A6824F;
		}
	}
}
</style>
