<template>
	<view class="u-wrap safe-area-inset-bottom">
		<view class="search" @b>
			<u-search :height="66" :inputStyle="{height:'50rpx'}" action-text="取消" @custom="keyword=''"
				:show-action="keyword" :placeholder="placeholder" v-model="keyword">
			</u-search>
		</view>
		<view class="list" v-show="type==1||keyword">
			<view class="flex-row flex-jus-sp flex-ali-center" v-for="(item,i) in setList" :key="item.id"
				@click="select(i)">
				<d-text :text="item.name" className="fs-3 light-c"></d-text>
				<u-icon name="checkbox-mark" color="#2979ff" size="24" v-if="item['show']"></u-icon>
			</view>
		</view>
		<!-- <view class="u-menu-wrap" v-show="type==2&&!keyword">
			<scroll-view scroll-y scroll-with-animation class="u-tab-view menu-scroll-view" :scroll-top="scrollTop">
				<view v-for="(item,index) in setList" :key="index" class="u-tab-item"
					:class="[current==index ? 'u-tab-item-active' : '']" :data-current="index"
					@tap.stop="swichMenu(index)">
					{{item.name}}
				</view>
			</scroll-view>
			<scroll-view scroll-y class="right-box">
				<block v-for="(item,index) in setList[current]['right']" :key="index">
					<view class="page-view flex-row flex-jus-sp flex-ali-center" @click="select(item)" :key="index">
						<d-text :text="item.name" className="fs-3 light-c"></d-text>
						<u-icon name="checkbox-mark" color="#2979ff" size="24" v-if="item['show']"></u-icon>
					</view>
				</block>
			</scroll-view>
		</view> -->
		
	<!-- 	<u-picker v-if="type==1&&list.length>0" :safe-area-inset-bottom="true" confirm-text="确定" v-model="show"
			@confirm="confirm" mode="selector" :default-selector="[0]" range-key="name" :range="setDistricts"
			title="门店">
		</u-picker> -->
	</view>
</template>

<script>
	import {
		hospitalList,
		officeList
	} from "@/api/all.js"
	export default {
		data() {
			return {
				list: [],
				show: false,
				placeholder: '请输入门店名称',
				keyword: '',
				scrollTop: 0, //tab标题的滚动条位置
				current: 0, // 预设当前项的值
				menuHeight: 0, // 左边菜单的高度
				menuItemHeight: 0, // 左边菜单item的高度
				type: 0,
				districts: [],
				i: -1,
				id: -1,
			}
		},
		computed: {
			setList() {
				var arr = []
				if (this.list.length) {
					arr = this.type == 1 ? this.list.filter(item => item.name.indexOf(this.keyword) !== -1) : this.list
						.reduce((total, item) => {
							let obj = {}
							if (item['level'] == 0) {
								obj = {
									...item,
									right: this.list.filter(it => it.level == 1 && item['id'] == it['pid'])
								}
							}
							item['level'] == 0 && total.push(obj)
							return total
						}, []);
					if (this.keyword && this.type == 2 && arr.length > 0) {
						arr = arr[this.current]['right'].filter(item => item.name.indexOf(this
							.keyword) !== -1)
					}
					arr = arr;
				}
				return arr
			},
			setDistricts() {
				if (this.type == 2) return []
				let item = this.list.find((item) => item['show']) || {};
				return item.yard || [];
			}
		},
		onLoad(op) {
			this.type = op['type'] || 0;
			this.id = op['id'] || 0;
			this.placeholder = '请输入门店名称' ;
			uni.setNavigationBarTitle({
				title: '选择门店' 
			})
			this.id || this.type == 1 && uni.showLoading({
				title: '加载中...'
			})
			this.getList();
		},
		methods: {
			async getList() {
				uni.showLoading({
					title: '加载中...'
				})
				let res = {}
				const data = {
					store:'',
					store_id:'11001',
					id: this.id
				}
				this.type == 1 && (res = await hospitalList(data))
				console.log(res);
				// this.type == 2 && (res = await officeList(data))
				
				
				if (res.errcode != -1) {
					this.list = this.type == 1 ? res.data : res.data.yard
				} else {
					this.$toast(res.msg)
				}
				this.$nextTick(() => {
					uni.hideLoading()
				})
			},
			select(i) {
				
				if (this.type == 2) {
					this.confirm(i);
					return
				}
				let item = this.list[i];
				console.log(item);
				uni.setStorageSync('store_id',item.id)
				uni.navigateBack({
				  delta: 1, //返回层数，2则上上页
				});
				this.i = i;
				for (var i = 0; i < this.list.length; i++) {
					this.$set(this.list[i], 'show', false);
				}
				this.$set(item, 'show', true);
				this.type == 1 && (this.show = true);
				
			},
			// confirm(e) {
			// 	if (this.type == 1 && this.list[this.i]['yard'].length == 0) {
			// 		this.$toast('请选择门店')
			// 		return
			// 	}
			// 	this.type == 1 && uni.setStorageSync('hospital', {
			// 		0: this.list[this.i],
			// 		1: this.list[this.i]['yard'][e[0]],
			// 		text: this.list[this.i]['name'] + '-' + this.list[this.i]['yard'][e[0]]['name']
			// 	})
			// 	this.type == 2 && uni.setStorageSync('repartments', e)
			// 	this.$go(1, 4)
			// },
			// 点击左边的栏目切换
			async swichMenu(index) {
				if (index == this.current) return;
				this.current = index;
				// 如果为0，意味着尚未初始化
				if (this.menuHeight == 0 || this.menuItemHeight == 0) {
					await this.getElRect('menu-scroll-view', 'menuHeight');
					await this.getElRect('u-tab-item', 'menuItemHeight');
				}
				// 将菜单菜单活动item垂直居中
				this.scrollTop = index * this.menuItemHeight + this.menuItemHeight / 2 - this.menuHeight / 2;
			},
			// 获取一个目标元素的高度
			getElRect(elClass, dataVal) {
				new Promise((resolve, reject) => {
					const query = uni.createSelectorQuery().in(this);
					query.select('.' + elClass).fields({
						size: true
					}, res => {
						// 如果节点尚未生成，res值为null，循环调用执行
						if (!res) {
							setTimeout(() => {
								this.getElRect(elClass);
							}, 10);
							return;
						}
						this[dataVal] = res.height;
					}).exec();
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.search {
		padding: 16rpx 32rpx;
	}

	.u-wrap {
		height: calc(100vh - env(safe-area-inset-bottom));
		/* #ifdef H5 */
		height: calc(100vh - var(--window-top) - env(safe-area-inset-bottom));
		/* #endif */
		display: flex;
		flex-direction: column;
	}

	.list {
		min-height: calc(100vh - 98rpx);
		/* #ifdef H5 */
		min-height: calc(100vh - var(--window-top) - 98rpx - env(safe-area-inset-bottom));

		/* #endif */
		view {
			height: 106rpx;
			padding: 0 48rpx;
		}
	}

	.u-menu-wrap {
		overflow: hidden;
		display: flex;
		flex-wrap: nowrap;
	}

	.u-tab-view {
		width: 264rpx;
		height: calc(100vh - 98rpx - env(safe-area-inset-bottom));
	}

	.u-tab-item {
		height: 104rpx;
		background: #f6f6f6;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		font-size: 30rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #475569;
		line-height: 1;
		width: 100%;
		padding-left: 32rpx;
	}

	.u-tab-item-active {
		position: relative;
		font-size: 30rpx;
		font-family: PingFang SC-Semibold, PingFang SC;
		font-weight: 600;
		color: #1E293B;
		text-align: left;
		background-color: #fff;
	}

	.right-box {
		height: calc(100vh - 98rpx - env(safe-area-inset-bottom));
		/* #ifdef H5 */
		height: calc(100vh - var(--window-top) - 98rpx - env(safe-area-inset-bottom));
		/* #endif */
		background-color: #F8FAFC;
	}

	.page-view {
		height: 106rpx;
		padding: 0 48rpx;
		background-color: #fff;
	}

	.class-item {
		margin-bottom: 30rpx;
		background-color: #fff;
		padding: 16rpx 0;
		border-radius: 8rpx;
	}



	.item-menu-info {
		height: 70rpx;
		display: flex;
		flex-wrap: wrap;
		align-content: space-between;
		width: 430rpx;
	}

	.item-container {
		display: flex;
		flex-wrap: wrap;
	}

	.thumb-box {
		width: 550rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-wrap: nowrap;
		margin-top: 20rpx;
	}

	.item-menu-image {
		width: 70rpx;
		height: 70rpx;
	}
</style>
