<template>			
	<div class="flex">
		<div class="sheet">
			<text :style="{color: cancelColor, 'font-size': textSize+'px'}" @click="cancel">{{cancelText}}</text>
			<text :style="{color: titleColor, 'font-size': titleSize+'px'}">{{title}}</text>
			<text :style="{color: confirmColor, 'font-size': textSize+'px'}" @click="confirm">{{confirmText}}</text>
		</div>

		<div class="ts-selector-box">
			<div class="ts-selector-selected"></div>
			<list class="ts-selector" :style="{width:(750/colcount)+'px'}" @scroll='e=>onscroll(e,items)' @touchend='touchend(i)' v-for="(items,i) in dataObj" :key="i">
				<cell style="height:132px"></cell>
				<cell class="ts-selector-item" v-for="(item , index) in items" :ref="`${i}${index}`" :key="`${i}${index}`" @click="clickItem(i, item)">
					<text class="ts-selector-item-text">{{item.key}}</text>
				</cell>
				<cell style="height:132px;"></cell>
			</list>
		</div>
	</div>
</template>
<script>
const dom = weex.requireModule("dom");
export default {
	//   name: "TsSelector",
	components: {
	},
	props: {
		//标题栏部分
		title:          {default:''},     //标题
		titleColor:     {default:'#111111'},  //标题颜色
		titleSize:      {default:34},         //标题字体大小
		cancelText:     {default:'取消'},     //左侧按钮文字
		cancelColor:    {default:'#666666'},  //左侧按钮颜色
		confirmText:    {default:'确定'},     //右侧按钮文字
		confirmColor:   {default:'#4185F3'},  //右侧按钮颜色
		textSize:       {default:32},  //按钮字体大小
		//自有
		data: [Object, Array],
		value: [Object],//v-model绑定
		width: {
			type: Array,
			default: () => {
				return [];
			}
		}
	},
	data() {
		return {
			postion: 0,
			itemheight: 0,
			selectitem: {},
			count: 0,
			mode: "single", //muti
			vals: null,
			dataObj: {},
			colcount: 0,
			isClick: false,
			multipleList: false,
		};
	},
	computed: {
		osname() {
			return WXEnvironment.osName;
		},
	},
	methods: {
		onscroll(e, items) {
			this.postion = e.contentOffset.y;
			this.itemheight = e.contentSize.height / (items.length + 4);
		},
		startlisten(target) {
			setTimeout(() => {
				if(this.isClick) {
					this.isClick = false;
					return;
				}
				let postion = this.postion;
				let linsten = setInterval(() => {
					if (this.postion != postion) {
						postion = this.postion;
					} else {
						let newtoitem = Math.abs(this.postion / this.itemheight);
						if (newtoitem < this.selectitem[target])
							this.selectitem[target] = Math.floor(newtoitem);
						else {
							this.selectitem[target] = Math.ceil(newtoitem) || 0;
						}
						
						for (let i in this.dataObj) {
							let val = this.dataObj[i][this.selectitem[i]];
							if(this.multipleList) {
								this.value[i] = val;
							} else {
								this.value = val;
							}
						}
						dom.scrollToElement(
							this.$refs[`${target}${this.selectitem[target]}`][0],
							{
								offset: -132,
								animated: !(this.osname == "android")
							}
						);
		        		this.$emit("change", {index:target, item:this.value[target]});
						clearInterval(linsten);
					}
				}, 50);
			}, 50);
		},
		touchend(target) {
			this.count++;
			if (this.osname == "android" && this.count % 2 == 1) return;
			else this.count = 0;
			this.startlisten(target);
		},
		getval() {
			let val = this.multipleList?this.value:Object.assign({}, this.value);
			if(this.multipleList) {
				for (let k in this.selectitem) {
					let thisval = this.dataObj[k][this.selectitem[k]];
					val[k] = thisval;
					val[k]['index'] = this.selectitem[k];
				}
			} else {
				for (let k in this.selectitem) {
					let thisval = this.dataObj[k][this.selectitem[k]].key;
					// val[k] = thisval;
					val['index'] = this.selectitem[k];
				}
			}
			return val;
		},
		clickItem(target,item) {
			this.isClick = true;
			for (let i in this.dataObj) {
				let valselect = item.key;
				if (valselect) {
					this.dataObj[i].forEach((val, index) => {
						if (val.key == valselect) {
							this.selectitem[i] = index;
							if(this.multipleList) {
								this.value[i] = val;
							} else {
								this.value = val;
							}
							setTimeout(() => {
								dom.scrollToElement(this.$refs[`${i}${this.selectitem[i]}`][0], {
									offset: -132,
									animated: !(this.osname == "android")
								});
							}, 50);
						}
					});
				}
			}
			this.$emit("change", {index:target, item:this.value[target]});
		},
		/**
		 * 多数据选择且有联动内容时使用
		 */
		notify() {
			//列表更改后通知选择器修改数据
			this.formatData();
			//如果列表数据更新后，选中的项数超出，则默认为最后一项
			for (let i in this.dataObj) {
                if(this.selectitem[i]==undefined){
                    this.selectitem[i]=0;
                }
				let val = this.dataObj[i][this.selectitem[i]];
				if(this.dataObj[i].length-1 < this.selectitem[i]) {
					val = this.dataObj[i][this.dataObj[i].length-1]
					this.selectitem[i] = this.dataObj[i].length-1;
				}
				this.value[i] = val;
			}
		},
		cancel() {
			this.$emit('cancel',{});
		},
		confirm() {
			this.$emit("input", this.getval());
			this.$emit('confirm');
		},
		formatData() {
			let colcount = 0;
			let dataobj = {};
			if(this.data[0]&&this.data[0].length>=0) {
				dataobj = [];
				this.data.forEach(item=> {
					this.multipleList = true;
					dataobj.push(item);
				})
			} else {
				dataobj["data"] = this.data;
			}
			if(this.multipleList) {
				//避免tmp与value指向同一个地址
				let tmp = JSON.parse(JSON.stringify(this.value));
				//多个列表时定位到默认选中项
				for (let i in dataobj) {
					colcount++;
					let valselect = this.multipleList?this.value[i]:this.value;
					if (valselect) {
						dataobj[i].forEach((val, index) => {
							if (val.key == valselect.key) {
								this.selectitem[i] = index;
								setTimeout(() => {
									dom.scrollToElement(this.$refs[`${i}${this.selectitem[i]}`][0], {
										offset: -132,
										animated: !(this.osname == "android")
									});
								}, 50);
							}
						});
					}
					//没有设置默认值时，取第一项
					if (this.value.length==0) {
						tmp[i] = dataobj[i][0]
					}
				}
				this.value = tmp;
			} else {
				//一个列表时定位到默认选中项
				for (let i in dataobj) {
					colcount++;
					let valselect = this.value;
					if (valselect) {
						dataobj[i].forEach((val, index) => {
							if (val.key == valselect.key) {
								this.selectitem[i] = index;
								setTimeout(() => {
									dom.scrollToElement(this.$refs[`${i}${this.selectitem[i]}`][0], {
										offset: -132,
										animated: !(this.osname == "android")
									});
								}, 50);
							}
						});
					}
				}
				//没有设置默认值时，取第一项
				if(!this.value.hasOwnProperty('key')) {
					this.value = dataobj.data[0];
				}
			}
			this.colcount = colcount;
			this.dataObj = dataobj;
		}
	},
	mounted() {
		this.formatData();
	}
};
</script>
<style scoped>
.sheet {
    justify-content: space-between;
    padding: 24px 28px;
    flex-direction: row;
}
.ts-selector-box{
    background-color: #ffffff;
    flex-direction: row;
}
.ts-selector-selected{
    position: absolute;
    top: 132px;
    left: 0px;
    right: 0px;
    height: 66px;
    border-bottom-width: 1px;
    border-bottom-color:  #CCCCCC;
    border-bottom-style: solid;
    border-top-width: 1px;
    border-top-color:  #CCCCCC;
    border-top-style: solid;
}
.ts-selector{
    height: 332px;
}
.ts-selector-item{
    height: 66px;
    justify-content: center;
    align-items: center;
}
.ts-selector-item-text{
    font-size:28px;
    color: #333333;
}
</style>
