<template>
	<view class="tab-box" id="tab-box">
		<view class="horizontal">
			<scroll-view :scroll-x="true" style="white-space: nowrap; " scroll-with-animation
				:scroll-left="slider.scrollLeft">
				<view v-for="(item, index) in tabList" :key="index" style="display: inline-block;">
					<block>
						<view class="flex-grow-1 flex-center">
							<view class="item" :class="{ active: activeIndex === index }" :id="'tab_'+index"
								@click="tabClick(index)">{{ item.name || item }}
							</view>
						</view>
					</block>
				</view>
				<view class="underline"
					:style="'transform:translateX(' + slider.left + 'px);width:' + slider.width + 'px'"></view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'liuyuno-tabs',
		props: {
			tabData: {
				type: Array,
				default: () => []
			},
			defaultIndex: {
				type: Number,
				default: 0
			},
			underLinePadding: {
				type: Number,
				default: 10
			},
		},
		data() {
			return {
				tabList: [],
				tabListSlider: [],
				box: {
					left: 0,
					right: 0,
					top: 0,
					width: 0,
					height: 0,
					bottom: 0,
				},
				slider: {
					left: 0,
					width: 0,
					scrollLeft: 0
				},
				activeIndex: 0
			};
		},

		watch: {
			tabData(value) {
				this.tabList = value;
				setTimeout(() => {
					this.updateTabWidth();
				}, 100);
			},
		},
		mounted() {
			this.tabList = this.tabData;
			this.activeIndex = this.defaultIndex;
			this.$nextTick(() => {

				// #ifdef MP-ALIPAY
				var query = my.createSelectorQuery()
				query.select('.tab-box').boundingClientRect().exec((ret) => {
					// console.log(ret[0], "tab-box")
					let res=ret[0];	
					this.box =res;
					this.updateTabWidth();
				})
				// #endif

				// #ifdef MP-WEIXIN
				var query = uni.createSelectorQuery().in(this);
				query.select('.tab-box').boundingClientRect((res) => {
					// console.log(res, "tab-box")
					this.box = res;
					this.updateTabWidth();
				}).exec();
				// #endif


			})
		},

		methods: {

			tabClick(index) {
				this.activeIndex = index;
				this.tabToIndex(index);
				this.$emit('tabClick', index);
			},

			tabToIndex(index) {
				let _slider = this.tabListSlider[index];
				
				this.slider = {
					left: _slider.left + (_slider.width / 2) - (_slider.width / 4),
					width: (_slider.width) / 2,
					scrollLeft: _slider.scrollLeft,
					// left: _slider.left + this.underLinePadding,
					// width: _slider.width - this.underLinePadding * 2,
					// scrollLeft: _slider.scrollLeft,
				}

			},

			updateTabWidth(index = 0) {
				let data = this.tabList;
				if (data.length == 0) return false;
				// console.log(data, "data")
				// #ifdef MP-ALIPAY
				var query = my.createSelectorQuery()
				query.select('#tab_' + index).boundingClientRect().exec((ret) => {
					// console.log(ret[0], "tab-box")
					let res=ret[0];
					let _prev_slider = this.tabListSlider[index - 1];
					this.tabListSlider[index] = {
						left: res.left - this.box.left,
						width: res.width,
						scrollLeft: res.left - this.box.left - (_prev_slider ? _prev_slider.width : 0),
					}
					
					if (this.activeIndex == index) {
						this.tabToIndex(this.activeIndex);
					}
					index++;
					if (data.length > index) {
						this.updateTabWidth(index);
					}
				})
				// #endif

				// #ifdef MP-WEIXIN
				var query = uni.createSelectorQuery().in(this);
				query.select('#tab_' + index).boundingClientRect((res) => {
					let _prev_slider = this.tabListSlider[index - 1];
					this.tabListSlider[index] = {
						left: res.left - this.box.left,
						width: res.width,
						scrollLeft: res.left - this.box.left - (_prev_slider ? _prev_slider.width : 0),
					}
					if (this.activeIndex == index) {
						this.tabToIndex(this.activeIndex);
					}
					index++;
					if (data.length > index) {
						this.updateTabWidth(index);
					}
				}).exec();
				// #endif
			}
		}
	}
</script>

<style lang="scss">
	.tab-box {
		width: 100%;
		color: rgba(0, 0, 0, 0.8);
		display: flex;
		height: 100rpx;
		background: #fff;
		font-size: 28upx;
		box-shadow: 0 1px 5px rgba(0, 0, 0, 0.06);
		position: relative;
		z-index: 10;
		overflow: hidden;
	}

	.horizontal .active {
		color: #000;
	}

	.horizontal {
		width: 100%;
	}

	.wd33 {
		width: 33%;
	}

	.item {
		display: inline-block;
		text-align: center;
		padding: 0 30upx;
		height: 80rpx;
		line-height: 90upx;
		font-size: 32rpx;
		color: #A0A0A0;
	}

	.underline {
		height: 4upx;
		background-color: #000;
		border-radius: 3px;
		transition: .5s;
	}
</style>
