<template>
	<view class="segmented-control flex-h" :class="rootClass"><slot></slot></view>
</template>

<script>
const SCROLL_LEFT = 'left';
const SCROLL_CENTER = 'center';

/// 一个简单的选项卡组件
export default {
	name: 'segmented-control',
	provide() {
		return {
			segmentedParent: this
		};
	},
	props: {
		current: {
			type: Number,
			default: 0
		},
		tabList: {
			type: Array,
			default: () => {
				return [];
			}
		},
		// 是否绝对定位到顶部
		isFixed: {
			type: Boolean,
			default: false
		},
		// 是否需要阴影
		needShadow: {
			type: Boolean,
			default: true
		},
		// tab可点击
		clickable: {
			type: Boolean,
			default: true
		},
		clickScrollType: {
			type: String,
			default: 'center' // 'none' 选中无滑动,'left' 选中居左,'center' 选中居中
		}
	},
	data() {
		return {
			currentIndex: this.current,
			itemIdPrefix: 'segmented-item-', // 选项卡元素的id的前缀
			// hWrapperClass: 'wrapper-float-left', // 包裹选项卡view的样式
			itemParentClass: 'wrapper-h-view', //包裹选显卡元素的view的样式名
			needChangeScroll: false, // 是否需要修改ScrollView的scrollLeft
			scrollIntoId: '',
			scrollLeft: 0, // 设置ScrollView的scrollLeft
			windowWidth: new Promise((resolve, reject) => {
				uni.getSystemInfo({
					success: res => {
						resolve(res.windowWidth);
					}
				});
			})
		};
	},
	watch: {
		current(val) {
			if (val !== this.currentIndex) {
				this.currentIndex = val;
			}
		}
	},
	computed: {
		rootClass() {
			let name = '';
			if (this.needShadow) {
				name += 'shadow ';
			}
			if (this.isFixed) {
				name += 'fixed ';
			}
			return name;
		}
		// itemStyle() {
		// 	return 'width:' + (100 / this.tabList.length).toFixed(2) + '%'
		// }
	},
	methods: {
		// 点击后改变当前索引
		onClick(index) {
			if (this.clickable && this.currentIndex !== index) {
				this.currentIndex = index;
				this.changeScrollLeft(index);
				this.$emit('clickItem', index);
			}
		},
		// 为了判断是否需要点击滑动效果
		getTabWidth() {
			// 判断tab选项卡是否占满一屏
			uni.createSelectorQuery()
				.in(this)
				.select('.' + this.itemParentClass)
				.boundingClientRect()
				.exec(res => {
					this.windowWidth.then(cw => {
						// console.log('res[0].width', res[0].width)
						if (res[0].width >= cw) {
							this.needChangeScroll = true;
							// } else {
							// 	this.hWrapperClass = 'wrapper-flex-h'
						}
					});
				});
		},
		/**
		 * 改变ScrollView的scrollLeft
		 * @param {Number} index 选中的选项卡的索引
		 */
		changeScrollLeft(index) {
			// console.log('this.needChangeScroll', this.needChangeScroll)
			// console.log('this.clickScrollType', this.clickScrollType)
			if (!this.needChangeScroll) {
				// tab元素未占满一屏不计算偏移
				return;
			}
			if (this.clickScrollType !== SCROLL_LEFT && this.clickScrollType !== SCROLL_CENTER) {
				// 效果不是left或者center的话也不计算偏移
				return;
			}

			const itemId = this.itemIdPrefix + index;
			if (this.clickScrollType === SCROLL_LEFT) {
				this.scrollToItemLeft(itemId);
			} else if (this.clickScrollType === SCROLL_CENTER) {
				this.scrollToItemCenter(itemId);
			}
		},
		scrollToItemLeft(itemId) {
			this.scrollIntoId = itemId;
		},
		scrollToItemCenter(itemId) {
			// 如果查询的不是最外层的元素就需要in(this)
			const query = uni.createSelectorQuery().in(this);
			query.select('.segmented-control').scrollOffset();
			query.select('#' + itemId).boundingClientRect();
			// 获取节点信息，多个要通过query.exec()来执行所有请求
			query.exec(res => {
				// 通过节点获取到的ScrollView的scrollLeft
				// console.log('res', res)
				if (res[0] && res[1]) {
					let scrollLeft = (res[0] && res[0].scrollLeft) || 0;
					let offsetLeft = scrollLeft + res[1].left;
					this.windowWidth.then(cw => {
						this.scrollLeft = (res[1].width - cw) / 2 + offsetLeft;
					});
				}
			});
		}
	}
};
</script>

<style lang="scss">
.segmented-control {
	width: 100%;
	height: 90rpx;
	font-size: 14px;
	box-sizing: border-box;
	white-space: nowrap;

	&.fixed {
		position: fixed;
		top: var(--window-top);

		/* css变量 */
		z-index: 10;
	}

	&.shadow {
		box-shadow: 0 2px 4px 0 rgba(222, 222, 222, 0.5);
	}

	&.flex-h {
		display: flex;
	}

	&.flex-h > view {
		flex: 1;
	}

	.display-inline-block {
		display: inline-block;
	}
}
</style>
