<template>
	<view class="uni-indexed-list" ref="list" id="list">
		<!-- #ifdef APP-NVUE -->
		<list class="uni-indexed-list__scroll" scrollable="true" show-scrollbar="false">
	
			<cell v-for="(list, idx) in lists" :key="idx" :ref="'uni-indexed-list-' + idx">
				<!-- #endif -->
				<!-- #ifndef APP-NVUE -->
				<scroll-view :scroll-into-view="scrollViewId" class="uni-indexed-list__scroll" scroll-y>
					<view v-for="(list, idx) in lists" :key="idx" :id="'uni-indexed-list-' + idx">
						<!-- #endif -->
						<flIndexListItem :list="list"  :loaded="loaded" :idx="idx" :showSelect="showSelect" @itemClick="onClick"></flIndexListItem>
						<!-- #ifndef APP-NVUE -->
					</view>
				</scroll-view>
				<!-- #endif -->
				<!-- #ifdef APP-NVUE -->
			</cell>
		</list>
		<!-- #endif -->
		<view id="touch" :class="touchmove ? 'uni-indexed-list__menu--active' : ''" @touchstart="touchStart" @touchmove.stop.prevent="touchMove" @touchend="touchEnd" class="uni-indexed-list__menu">
			<view v-for="(list, key) in lists" :key="key" class="uni-indexed-list__menu-item">
				<text class="uni-indexed-list__menu-text" :class="touchmoveIndex == key ? 'uni-indexed-list__menu-text--active' : ''">{{ list.key }}</text>
			</view>
		</view>
		<view v-if="touchmove" class="uni-indexed-list__alert-wrapper">
			<text class="uni-indexed-list__alert">{{ lists[touchmoveIndex].key }}</text>
		</view>
	</view>
</template>
<script>
	import flIndexListItem from "./fl-indexList-item.vue";
	// #ifdef APP-NVUE
	const dom = weex.requireModule('dom');
	// #endif
	// #ifdef APP-PLUS
	function throttle(func, delay) {
		var prev = Date.now();
		return function() {
			var context = this;
			var args = arguments;
			var now = Date.now();
			if (now - prev >= delay) {
				func.apply(context, args);
				prev = Date.now();
			}
		}
	}

	function touchMove(e) {
			var statusBarHeight = uni.getSystemInfoSync().statusBarHeight;
		let pageY = e.touches[0].pageY
		let index = Math.floor((pageY - this.winOffsetYTouch ) / this.itemHeightTouch);
		if (this.touchmoveIndex === index) {
			return false
		}
		let item = this.lists[index]
		if (item) {
			// #ifndef APP-NVUE
			this.scrollViewId = 'uni-indexed-list-' + index
			this.touchmoveIndex = index
			// #endif
			// #ifdef APP-NVUE
			dom.scrollToElement(this.$refs['uni-indexed-list-' + index][0], {
				animated: false
			})
			this.touchmoveIndex = index
			// #endif
		}
	}
	const throttleTouchMove = throttle(touchMove, 40)
	// #endif

	/**
	 * IndexedList 索引列表
	 * @description 用于展示索引列表
	 * @tutorial https://ext.dcloud.net.cn/plugin?id=375
	 * @property {Boolean} showSelect = [true|false] 展示模式
	 * 	@value true 展示模式
	 * 	@value false 选择模式
	 * @property {Object} options 索引列表需要的数据对象
	 * @event {Function} click 点击列表事件 ，返回当前选择项的事件对象
	 * @example <uni-indexed-list options="" showSelect="false" @click=""></uni-indexed-list>
	 * @nameKey  需要展示的 名字在数据中的名字
	 * @idKey  	需要标识的id名
	 */
	export default {
		name: 'UniIndexedList',
		components: {
			flIndexListItem
		},
		props: {
			options: {
				type: Array,
				default () {
					return []
				}
			},
			nameKey:{
				type: String,
				default:'name',
			},
			idKey:{
				type: String,
				default:'id',
			},
			topCities:{
				type: Array,
				default () {
					return []
				}

			},
			onChoiceCity:{
				type: Function,
				default:()=>{}
			},
			showSelect: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				lists: [],
				winHeight: 0,
				itemHeight: 0,
				winOffsetY: 0,
				touchmove: false,
				touchmoveIndex: -1,
				scrollViewId: '',
				touchmoveTimeout: '',
				loaded: false
			}
		},
		watch: {
			options: {
				handler: function() {
					this.setList()
				},
				deep: true
			}
		},
		mounted() {
			setTimeout(() => {
				this.setList()
			}, 50)
			setTimeout(() => {
				this.loaded = true
			}, 300);
		},
		methods: {
			setList() {
				let index = 0;
				this.lists = [];
				const nameKey = this.nameKey;
				const idKey = this.idKey;
		
				this.options.forEach((value, index) => {
					if (this.options[index].length === 0) {
						return
					}
					let indexBefore = index
					let key = Object.keys(value)[0]
					let items = value[key].map(item => {
						let obj = {}
						obj['key'] = key.toUpperCase();
						obj['name'] = item[nameKey]
						obj['id'] = item[idKey]
						index++
						obj.checked = item.checked ? item.checked : false
						return obj
					})
				
					this.lists.push({
						title: key.toUpperCase(),
						key: key.toUpperCase(),
						items: items,
						itemIndex: indexBefore
					})
				})
			
				// #ifndef APP-NVUE
			
				uni.createSelectorQuery()
					.in(this)
					.select('#list')
					.boundingClientRect()
					.exec(ret => {
						this.winOffsetY = ret[0].top
						this.winHeight = ret[0].height
						this.itemHeight = this.winHeight / this.lists.length
					})
				uni.createSelectorQuery()
						.in(this)
						.select('#touch')
						.boundingClientRect()
						.exec(ret => {
							this.winOffsetYTouch = ret[0].top
							this.winHeightTouch = ret[0].height
							this.itemHeightTouch = this.winHeightTouch / this.lists.length
						})
				// #endif
				// #ifdef APP-NVUE
				dom.getComponentRect(this.$refs['list'], (res) => {
					this.winOffsetY = res.size.top;
					this.winHeight = res.size.height;
					this.itemHeight = this.winHeight / this.lists.length;
				})
				// #endif
			},
			touchStart(e) {
				this.touchmove = true;
				let pageY = e.touches[0].pageY;
				var statusBarHeight = uni.getSystemInfoSync().statusBarHeight; 
			
				let index = Math.floor((pageY - this.winOffsetYTouch) / this.itemHeightTouch);
				let item = this.lists[index]	
				if (item) {
					this.scrollViewId = 'uni-indexed-list-' + index
					this.touchmoveIndex = index
					// #ifdef APP-NVUE
					dom.scrollToElement(this.$refs['uni-indexed-list-' + index][0], {
						animated: false
					})
					// #endif
				}
			},
			touchMove(e) {
				// #ifndef APP-PLUS
				let pageY = e.touches[0].pageY
				let index = Math.floor((pageY - this.winOffsetYTouch) / this.itemHeightTouch)
				if (this.touchmoveIndex === index) {
					return false
				}
				let item = this.lists[index]
				if (item) {
					this.scrollViewId = 'uni-indexed-list-' + index
					this.touchmoveIndex = index
				}
				// #endif
				// #ifdef APP-PLUS
				throttleTouchMove.call(this, e)
				// #endif
			},
			touchEnd() {
				this.touchmove = false
				this.touchmoveIndex = -1
			},
			onClick(e) {
				let {
					idx,
					index,
					id,
					name,
				} = e
				let obj = {}
				for (let key in this.lists[idx].items[index]) {
					obj[key] = this.lists[idx].items[index][key]
				}
				let select = []
				if (this.showSelect) {
					this.lists[idx].items[index].checked = !this.lists[idx].items[index].checked
					this.lists.forEach((value, idx) => {
						value.items.forEach((item, index) => {
							if (item.checked) {
								let obj = {}
								for (let key in this.lists[idx].items[index]) {
									obj[key] = this.lists[idx].items[index][key]
								}
								select.push(obj)
							}
						})
					})
				}
				this.$emit('click', id,name)
			}
		}
	}
</script>
<style scoped>
	.uni-indexed-list {
		position: absolute;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		
	}

	.uni-indexed-list__scroll {
		flex: 1;
	}

	.uni-indexed-list__menu {
		width: 30px;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		position: absolute;
		top: 0;
		right: 0;
		bottom:100rpx;
		z-index: 11;
	}

	.uni-indexed-list__menu-item {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex: 1;
		align-items: center;
		justify-content: center;
	}

	.uni-indexed-list__menu-text {
		line-height: 20px;
		font-size: 12px;
		width:20px;
		height: 20px;
		text-align: center;
		color: #333;
	}

	.uni-indexed-list__menu--active {
	
	}

	.uni-indexed-list__menu-text--active {
		background-color: #007AFF;
		color: #FFFFFF;
		border-radius: 30rpx;
	}

	.uni-indexed-list__alert-wrapper {
		position: fixed;
		left:50%;
		margin-left: -30px;
		top:50%;
		margin-top: -30px;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
		justify-content: center;
		
	}

	.uni-indexed-list__alert {
		width: 60px;
		height: 60px;
		border-radius: 80px;
		text-align: center;
		line-height: 60px;
		font-size: 28px;
		color: #fff;
		background-color: rgba(0, 0, 0, 0.5);
	}
	
	.city-content-top{
		width:686rpx;
		height: 294rpx;
		padding: 0 32rpx;
		background-color: #F8F8F7;
		
	}
	.city-content-top-text{
		font-size:24rpx;
		color:#AAAAAA;
		
	}
	.city-content-top-city{
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		justify-content:flex-start;
		flex-wrap: wrap;
		align-items: center;
		padding-top: 20rpx;
	}
	.city-content-top-city-item{
		width:204rpx;
		height:64rpx;
		text-align: center;
		line-height: 64rpx;
		background-color: #FEFFFE;
		border-radius:4rpx;
		margin-right: 36rpx;
		margin-bottom: 20rpx;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		justify-content: center;
		align-items: center;
	}
	.city-content-top-city-item-un{
		margin-right: 0;
	}
	.city-content-top-city-item-text{
		font-size:30rpx;
		line-height: 64rpx;
	}
</style>