<template>
	<view>
		<view class="list_con">
			<text>{{ current_city }}</text>
			<image src="/static/images/ui/location1.png" />
		</view>
		<scroll-view :scroll-y="true" :style="'height: ' + winHeight + 'px;'" :scroll-into-view="scrollTopId"
			class="city_list">
			<block v-for="(cityName, idx) in city" :key="idx">
				<text :id="idx" class="list_tit">{{ idx }}</text>

				<block v-for="(item, index) in cityName" :key="index">
					<view class="list_con" :data-city="item" @tap="bindCity">{{ item.city_name }}</view>
				</block>
			</block>
		</scroll-view>
		<!--城市选择列表-->
		<view class="scroll_list" @touchstart="chStart" @touchend="chEnd" @touchmove.stop.prevent="chMove"
			:style="'background: rgba(0,0,0,' + trans + ');'">
			<block v-for="(cityName, idx) in city" :key="idx">
				<block v-if="idx != '热门城市'">
					<view :id="idx" class="scroll_list_chi"
						:style="'line-height:' + lineHeight + 'px ; height:' + lineHeight + 'px ;font-size:' + lineHeight / 1.7 + 'px;'"
						@touchstart="getWords" @touchend="setWords">
						{{ idx }}
					</view>
				</block>
			</block>
		</view>

		<!--选择显示-->
		<view v-if="!word_hidden" class="showwords">
			{{ showwords }}
		</view>
	</view>
</template>

<script>
	//先引用城市数据文件
	var city = require('./city.js');

	var lineHeight = 0;
	var endWords = '';
	var isNum;
	export default {
		data() {
			return {
				word_hidden: true,
				current_city: '',

				//获取选中的城市名
				city_list: [],

				city: '',
				winHeight: '',
				lineHeight: '',
				trans: '',
				scrollTopId: '',
				showwords: '',
				show_list: [],
				swith_area: 0,
				city_id: '',
				cityName: []
			};
		},
		onLoad: function(options) {
			console.log(options);
			if ('undefined' != options.city_list && options.city_list != "") {
				var city_list = JSON.parse(options.city_list);
				this.setData({
					current_city: city_list.current.city_name,
					city_list
				});
			} else {
				uni.navigateBack();
			} // 生命周期函数--监听页面加载
		},
		onReady: function() {
			// 生命周期函数--监听页面初次渲染完成
			//var cityChild = city.City[0];
			// console.log(cityChild)
			var cityChild = this.city_list.list;
			var that = this;
			uni.getSystemInfo({
				success: function(res) {
					lineHeight = (res.windowHeight - 100) / 22; // console.log(res.windowHeight - 100)

					that.setData({
						city: cityChild,
						winHeight: res.windowHeight - 40,
						lineHeight: lineHeight
					});
				}
			});
		},
		onShow: function() {
			// 生命周期函数--监听页面显示
		},
		onHide: function() {
			// 生命周期函数--监听页面隐藏
		},
		onUnload: function() {
			// 生命周期函数--监听页面卸载
		},
		methods: {
			//触发全部开始选择
			chStart: function() {
				this.setData({
					trans: '.3',
					word_hidden: false
				});
			},

			//触发结束选择
			chEnd: function() {
				this.setData({
					trans: '0',
					word_hidden: true,
					scrollTopId: this.endWords
				});
			},

			//获取文字信息
			getWords: function(e) {
				var id = e.target.id;
				this.endWords = id;
				isNum = id;
				this.setData({
					showwords: this.endWords
				});
			},

			//设置文字信息
			setWords: function(e) {
				var id = e.target.id;
				this.setData({
					scrollTopId: id
				});
			},

			// 滑动选择城市
			chMove: function(e) {
				var y = e.touches[0].clientY;
				var offsettop = e.currentTarget.offsetTop;
				var height = 0;
				var that = this;
				var cityarr = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K', 'L', 'M', 'N', 'P', 'Q', 'R', 'S',
					'T', 'W', 'X', 'Y', 'Z'
				]; // 获取y轴最大值

				uni.getSystemInfo({
					success: function(res) {
						height = res.windowHeight - 10;
					}
				}); //判断选择区域,只有在选择区才会生效

				if (y > offsettop && y < height) {
					// console.log((y-offsettop)/lineHeight)
					var num = parseInt((y - offsettop) / lineHeight);
					endWords = cityarr[num]; // 这里 把endWords 绑定到this 上，是为了手指离开事件获取值

					that.endWords = endWords;
				} //去除重复，为了防止每次移动都赋值 ,这里限制值有变化后才会有赋值操作，

				//DOTO 这里暂时还有问题，还是比较卡，待优化

				if (isNum != num) {
					// console.log(isNum);
					isNum = num;
					that.setData({
						showwords: that.endWords
					});
				}
			},

			//选择城市，并让选中的值显示在文本框里
			bindCity: function(e) {
				var cityName = e.currentTarget.dataset.city.city_name;
				var city_id = e.currentTarget.dataset.city.city_id;
				var pages = getCurrentPages();
				var prevPage = pages[pages.length - 2]; //上一个页面
				//直接调用上一个页面的setData()方法，把数据存到上一个页面中去
				prevPage.setData({
					city_id
				});
				uni.navigateBack({})
				getApp().globalData.city_id = city_id;
				// uni.switchTab({
				// 	url:'/pages/index/index/index'
				// })
			}
		}
	};
</script>
<style>
	/*城市列表*/
	.city_list {
		position: relative;
	}

	/*城市选择头部*/
	.list_tit {
		display: block;
		line-height: 80rpx;
		height: 80rpx;
		padding-left: 30rpx;
		font-size: 32rpx;
		color: #666;
	}

	.list_con {
		height: 80rpx;
		background: #ffffff;
		line-height: 80rpx;
		font-size: 32rpx;
		padding-left: 30rpx;
	}

	.list_con::before {
		content: ' ';
		height: 2rpx;
		border-top: 2rpx #f5f5f5 solid;
		position: absolute;
		width: 100%;
	}

	.list_con::before:nth-child(1) {
		border: none;
	}

	.list_con text {
		vertical-align: middle;
	}

	.list_con image {
		width: 26rpx;
		height: 32rpx;
		vertical-align: middle;
	}

	/*城市选择 右边*/
	.scroll_list {
		background: rgba(0, 0, 0, 0);
		position: absolute;
		height: calc(100% - 100px);
		width: 50rpx;
		top: 180rpx;
		right: 20rpx;
	}

	.scroll_list_chi {
		/*border: 1px blue solid;*/
		text-align: center;
		font-size: 32rpx;
	}

	/*显示框*/

	.showwords {
		width: 160rpx;
		height: 160rpx;
		background: rgba(0, 0, 0, 0.3);
		border-radius: 50%;
		line-height: 160rpx;
		text-align: center;
		font-size: 10vw;
		margin: auto;
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		z-index: 999;
	}
</style>
