<template>
	<view>
		<view class="cu-bar bg-white search fixed">
			<view class="search-form round">
				<text class="cuIcon-search"></text>
				<input type="text" placeholder="请输入医院名称" v-model="searchVal"  confirm-type="search"></input>
			</view>
			<view class="action">
				<button class="cu-btn bg-gradual-btn shadow-blur round" @click.stop="searchHosptial">搜索</button>
			</view>
		</view>
		
		<view class="padding bg-white fixed">
			当前已选择：
			<text class="text-bold"> {{hostipatlObj.hospitalName}} </text>
		</view>
		
		<scroll-view scroll-y class="indexes" :scroll-into-view="'indexes-'+ listCurID" :style="[{height:'calc(100vh - '+ (CustomBar+80) + 'px )'}]"
		 :scroll-with-animation="true" :enable-back-to-top="true">
			<block v-for="(item,index) in list" :key="index">
				<view v-for="(itemHosp,indexHosp) in hospitalList" :key="itemHosp.label">
					<view v-if="itemHosp.label == item.name && itemHosp.value.length>0">
						<view :class="'indexItem-' + item.name" :id="'indexes-' + item.name" :data-index="item.name">
							<view class="padding">{{item.name}}</view>
							<view class="cu-list menu-avatar no-padding">
								<view class="cu-item" v-for="(itemHosptial,indexHosptial) in itemHosp.value" :key="indexHosptial" @click.stop="selectHosp(itemHosptial)">
									<text class="text-left">
										{{itemHosptial.hospitalName}}
									</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</block>
		</scroll-view>
		<view class="indexBar" :style="[{height:'calc(100vh - ' + CustomBar + 'px)'}]">
			<view class="indexBar-box" @touchstart="tStart" @touchend="tEnd" @touchmove.stop="tMove">
				<view class="indexBar-item" v-for="(item,index) in list" :key="index" :id="index" @touchstart="getCur" @touchend="setCur">
					{{item.name}}
				</view>
			</view>
		</view>
		<!--选择显示-->
		<view v-show="!hidden" class="indexToast">
			{{listCur}}
		</view>
		
		<view class="cu-modal" :class="modalName=='DialogModal'?'show':''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view class="content">提示消息</view>
					<view class="action" @tap="modalName = ''">
						<text class="cuIcon-close text-black"></text>
					</view>
				</view>
				<view class="padding-xl">
					是否确定切换到{{hostipatlObj.hospitalName}}？
				</view>
				<view class="cu-bar bg-white justify-end">
					<view class="action">
						<button class="cu-btn line-gray" @tap="modalName = ''">取消</button>
						<button class="cu-btn line-blue text-blue margin-left" @tap="hideModal">确定</button>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { deepCopy } from '@/utils/index.js'
	export default {
		data() {
			return {
				hostipatlObj:{
					hospitalName:''
				},
				modalName:'',
				searchVal:"",
				StatusBar: this.StatusBar,
				CustomBar: this.CustomBar,
				hidden: true,
				listCurID: '',
				list: [],
				originHospitalList:[
					// { label:'A',value:[{hospitalId: "5e6b373ec7d413168f7bbd7e",hospitalName: "上海市浦东新区公利医院"}] },
					// { label:'B',value:[{hospitalId: "5e6b373ec7d413168f7bbd7e",hospitalName: "上海市浦东新区公利医院2"}] },
				],
				hospitalList:[],
				listCur: ''
			};
		},
		onLoad() {
			wx.setBackgroundFetchToken({
			  token: 'sjf'
			})
			let list = [{}];
			for (let i = 0; i < 26; i++) {
				list[i] = {};
				list[i].name = String.fromCharCode(65 + i);
			}
			this.list = list;
			this.listCur = list[0];
			this.getList()
			let that = this
			// #ifdef MP-WEIXIN 
			// wx.login({
			// 	success(res) {
			// 		if (res.code) {
			// 			let code = res.code
			// 			console.log(code)
			// 			that.getUserInfo(code)
			// 		} else {
			// 			console.log('登录失败！' + res.errMsg)
			// 		}
			// 	}
			// })
			// wx.showShareMenu({
			// 	withShareTicket: true
			// })
			// #endif 
		},
		
		onShow() {
		},
		
		onReady() {
			let that = this;
			uni.createSelectorQuery().select('.indexBar-box').boundingClientRect(function(res) {
				that.boxTop = res.top
			}).exec();
			uni.createSelectorQuery().select('.indexes').boundingClientRect(function(res) {
				that.barTop = res.top
			}).exec()
		},
		methods: {
			// 获取用户信息
			// getUserInfo(code) {
			// 	this.$http.post(`/gastric-cancer-user/wechat/user/auth/api?code=${code}`).then(res => {
			// 		const d = res.data
			// 		if (d.code == 1) {
			// 			let userInfo = d.object
			// 			let obj = Object.assign({}, this.$store.getters.userInfo)
			// 			if (obj.avatarUrl) {
			// 				userInfo.avatarUrl = obj.avatarUrl
			// 			}
			// 			this.$store.dispatch('user/setInfo', Object.assign(obj, userInfo))
			// 			this.$store.dispatch('user/setToken', d.result)
			// 			this.getList()
			// 		}
			// 	}).catch(err => {
			// 		console.log(err)
			// 	})
			// },
			
			getList(){
				this.$http.get(`/gastric-cancer-user/hospital/mp/list`).then(res => {
					if(res.data.code == 1){
						this.originHospitalList = res.data.object
						this.hospitalList = deepCopy(this.originHospitalList)
					}
				})
			},
			
			searchHosptial(){
				if(this.originHospitalList.length>0){
					let arr = deepCopy(this.originHospitalList)
					arr.forEach((item, index) => {
						if(item.value.length>0){
							item.value = item.value.filter(itemVal => itemVal.hospitalName.indexOf(this.searchVal)>-1 )
						}
					})
					this.hospitalList = arr
				}
			},
			
			selectHosp(obj){
				this.hostipatlObj = obj
				this.modalName = 'DialogModal'
			},
			
			//获取文字信息
			getCur(e) {
				this.hidden = false;
				this.listCur = this.list[e.target.id].name;
			},
			setCur(e) {
				this.hidden = true;
				this.listCur = this.listCur
			},
			//滑动选择Item
			tMove(e) {
				let y = e.touches[0].clientY,
					offsettop = this.boxTop,
					that = this;
				//判断选择区域,只有在选择区才会生效
				if (y > offsettop) {
					let num = parseInt((y - offsettop) / 20);
					this.listCur = that.list[num].name
				};
			},

			//触发全部开始选择
			tStart() {
				this.hidden = false
			},
			
			hideModal(){
				this.modalName = ''
				let obj = Object.assign({}, this.$store.getters.userInfo)
				// obj.mode = this.hostipatlObj.version
				obj.hospitalName = this.hostipatlObj.hospitalName
				obj.hospitalId = this.hostipatlObj.hospitalId
				this.$store.dispatch('user/setInfo',obj)
				console.log(this.$store.getters.userInfo)
				
				// uni.navigateTo({
				// 	url: `/pages/index/selectMode?hospitalId=${this.hostipatlObj.hospitalId}`
				// })
				
			},

			//触发结束选择
			tEnd() {
				this.hidden = true;
				this.listCurID = this.listCur
			},
			indexSelect(e) {
				let that = this;
				let barHeight = this.barHeight;
				let list = this.list;
				let scrollY = Math.ceil(list.length * e.detail.y / barHeight);
				for (let i = 0; i < list.length; i++) {
					if (scrollY < i + 1) {
						that.listCur = list[i].name;
						that.movableY = i * 20
						return false
					}
				}
			}
		}
	}
</script>

<style>
	page {
		padding-top: 100upx;
	}

	.indexes {
		position: relative;
		-webkit-overflow-scrolling: touch;
	}

	.indexBar {
		position: fixed;
		right: 0px;
		bottom: 0px;
		padding: 20upx 20upx 20upx 60upx;
		display: flex;
		align-items: center;
	}

	.indexBar .indexBar-box {
		width: 40upx;
		height: auto;
		background: #fff;
		display: flex;
		flex-direction: column;
		box-shadow: 0 0 20upx rgba(0, 0, 0, 0.1);
		border-radius: 10upx;
	}

	.indexBar-item {
		flex: 1;
		width: 40upx;
		height: 40upx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 24upx;
		color: #888;
	}

	movable-view.indexBar-item {
		width: 40upx;
		height: 40upx;
		z-index: 9;
		position: relative;
	}

	movable-view.indexBar-item::before {
		content: "";
		display: block;
		position: absolute;
		left: 0;
		top: 10upx;
		height: 20upx;
		width: 4upx;
		background-color: #f37b1d;
	}

	.indexToast {
		position: fixed;
		top: 0;
		right: 80upx;
		bottom: 0;
		background: rgba(0, 0, 0, 0.5);
		width: 100upx;
		height: 100upx;
		border-radius: 10upx;
		margin: auto;
		color: #fff;
		line-height: 100upx;
		text-align: center;
		font-size: 48upx;
	}

	.cu-list.menu-avatar>.cu-item {
		height: 80upx;
		display: block;
		line-height: 80upx;
		padding-left: 60upx;
	}
</style>
