<template>
	<view class="container">
		<!-- 公共组件-每个页面必须引入 -->
		<public-module></public-module>
		<z-nav-bar title="方药检索"></z-nav-bar>
		<view class="contentBox">
			<view class="oneCateList flexbox firstTab">
				
				<text :class="[curFirstTabIndex == index ? 'cur' : '']" @click="setFirstTabIndex(item,index)"
					v-for="(item, index) in firstTabList" :key="item.firstTabId">{{item.title}}</text>
			</view>
			<view v-if="curFirstTabIndex==0">
				
				<view class="oneCateBot flexbox">
					<!-- &&index!=0 -->
					<text :class="[curOneCateIndex == index ? 'cur' : '']" @click="setOneCateIndex(item,index)"
						v-for="(item, index) in oneCateList" :key="item.prescriptCategoryId" v-show="iosHide">{{item.title}}</text>
				</view>
				<view class="search_box" v-if="oneCateList.length > 0">
					<u-search @click="checkDisable" placeholder="请输入方剂名" @focus="focus" @clear="clear"
						v-model="searchValue" @input="input" @blur="blur" @search="search" @custom="search"></u-search>
				</view>
				<view class="searchList" v-show="showSearchList">
					<view class="itemBox" v-if="searchList.length > 0">
						<view class="item" v-for="(item, index) in searchList" :key="index" @click="gotoDetail(item)">
							{{item.title}}
						</view>
					</view>
					<view v-else class="">
						<u-divider text="未找到相关方剂哦~"></u-divider>
					</view>
				</view>
				<!-- &&curOneCateIndex!=0 -->
				<view v-show="!showSearchList&&iosHide">
					<view class="grid twoCateList" v-if="twoCateList.length > 0">
						<u-grid :col="3" border class="u-grid-list">
							<u-grid-item v-for="(item, index) in twoCateList" :key="item.prescriptCategoryId"
								@click="setTwoCateIndex(item, index)">
								<view :class="['grid-text',curTwoCateIndex == index ? 'cur' : '']">{{item.title}}</view>
							</u-grid-item>
						</u-grid>
					</view>
					<view class="titleList" v-if="curOneCateIndex != 2">
						<u-grid :col="1" v-if="titleList.length > 0">
							<u-grid-item v-for="(item, index) in titleList" :key="item.prescriptId"
								@click="gotoDetail(item)"
								style="align-items: flex-start;border-bottom: 2px solid #fff;">
								<view :class="['titleItem']">{{item.title}}</view>
							</u-grid-item>
						</u-grid>
						<u-divider v-else text="暂无方剂数据哦~"></u-divider>
					</view>
					<view class="titleList" v-else>
						<u-grid :col="1" v-if="titleList">
							<u-grid-item v-for="(item, index) in titleList" :key="index">
								<view :class="['titleItem']">{{index}}</view>
								<u-grid-item v-for="(item1, index1) in item" :key="item1.prescriptId">
									<view :class="['JFtitleItem']" @click="gotoDetail(item1)">{{item1.title}}</view>
								</u-grid-item>
							</u-grid-item>
						</u-grid>
						<u-divider v-else text="暂无方剂数据哦~"></u-divider>
					</view>
				</view>
			</view>
			<view v-if="curFirstTabIndex==1">
				<medicineSearch ref="mSearch"></medicineSearch>
			</view>
		</view>
		<u-modal :show="limitShow" :title="limitTitle" :content='limitContent' @confirm="limitShow=false">
			<view class="limiTy">
				<view v-if="curOneCateIndex == 0">
					此功能使用权限仅对同一手机账号注册过一路健康APP，且开通《吴门验方基础班》【上中下】与《吴门验方提高班》【上下】五部课程的疯子读书APP学员开通。
					<br>如果您符合条件，请联系微信客服开通。
					<br>客服微信：<b>yilujiankangkefu</b>
				</view>
				<view v-if="curOneCateIndex == 3">
					此功能使用权限仅对在疯子读书APP购买《肿瘤六经辨证法》书籍的学员开通。
					<br>如果您符合条件，请联系微信客服开通。
					<br>客服微信：<b>yilujiankangkefu</b>
				</view>
			</view>
		</u-modal>

		<!-- <z-navigation></z-navigation> -->
	</view>
</template>

<script>
	import $http from '@/config/requestConfig.js';
	import medicineSearch from './medicineSearch'
	import {
		mapState
	} from 'vuex';
	export default {
		components: {
			medicineSearch
		},
		data() {
			return {
				firstTabList: [{
					firstTabId: 1,
					title: '方剂检索'
				}, {
					firstTabId: 2,
					title: '药物检索'
				}],
				playData: {},
				searchValue: '',
				oneCateList: [{
					prescriptCategoryId: 0
				}], // 一级分类标题1
				twoCateList: [], // 二级分类标题
				titleList: [], // 方剂标题
				curFirstTabIndex: 0, // 20240128需求：在原来一级分类基础上再新加一级分类：方剂检索、药物检索
				curOneCateIndex: 0, // 当前选中的一级分类
				curTwoCateIndex: 0, // 当前选中的二级分类
				searchList: [], // 搜索结果数组
				showSearchList: false,
				userMes: {}, // 用户信息
				searchDisable: false, // 搜索不可用
				limitShow: false,
				limitTitle: '提示',
				limitContent: ''
			}
		},
		onLoad() {
			this.getUserInfo()
			// this.getCateList()

		},
		onHide() {
			// this.showSearchList = false
			// this.searchList = []
		},
		computed: {
			...mapState(['userInfo']),
		},
		methods: {
			// 检查是有权限使用搜索功能
			checkDisable() {
				console.log('点击了')
				// if (this.userMes.pointPower == 0 && this.oneCateList[this.curOneCateIndex].prescriptCategoryId == 3 || this.userMes
				// 	.pointPower == 0 && this.oneCateList[this.curOneCateIndex].prescriptCategoryId == 6) { // 等于0 就是没有权限
				// 	this.showNoRights()
				// }
			},
			// 显示无权限弹窗
			// showNoRights() {
			// 	let that = this
			// 	uni.showModal({
			// 		content: "",
			// 		confirmText: '好的',
			// 		showCancel: false,
			// 		success: function(res) {
			// 			if (res.confirm) {
			// 				// console.log('用户点击确定');
			// 				that.clear()
			// 			}
			// 		}
			// 	})
			// },
			// 获取用户详情
			getUserInfo() {
				// 用户详情
				if (this.userInfo.id != undefined) {
					this.$http
						.post('book/user/info/' + this.userInfo.id)
						.then(res => {
							this.userMes = res.user
							this.getCateList()
							console.log(this.userMes, '呼呼')
						});
				}
			},
			// 方剂详情
			gotoDetail(item) {
				if (this.userMes.prescriptAPower == 0 && this.curOneCateIndex == 0) {
					this.limitShow = true
					return
				}

				if (this.userMes.prescriptBPower == 0 && this.curOneCateIndex == 3) {
					this.limitShow = true
					return
				}
				// 等于1 就是有权限
				uni.navigateTo({
					url: "./prescriptDetail?id=" + item.prescriptId
				})
			},
			// 获取方剂名称
			getTitles(id) {
				$http.request({
					url: "book/prescript/prescriptList",
					method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档		
					data: {
						// loadAnimate: 'none', // 请求加载动画
						'prescriptCategoryId': id,
						"limit": 1000,
						"page": 1
					},
					header: { //默认 无 说明：请求头
						'Content-Type': 'application/json'
					},
				}).then(res => {
					console.log(res, '内容获取成功')
					if (res.code == 0 && res.page.records.length > 0) {
						this.titleList = res.page.records
					} else {
						this.titleList = []
					}
				}).catch(e => {
					this.titleList = []
					console.log(e)
				})
			},
			setTwoCateIndex(item, index) {
				let id = item.prescriptCategoryId
				this.curTwoCateIndex = index
				this.getTitles(id)
			},
			setFirstTabIndex(item, index) {
				let id = item.firstTabId
				this.curFirstTabIndex = index

				if (index == 1) {
					// this.setOneCateIndex(id)
					console.log(this.$refs)
					console.log(this.$refs.mSearch)
					this.$nextTick(() => {
						this.$refs.mSearch.goToSearch()
					})
				} else {
					this.setOneCateIndex(this.oneCateList[0], 0)
				}

			},
			setOneCateIndex(item, index) {
				// if(this.userMes.tgdzPower == 0){
				// 	let that = this
				// 	uni.showModal({
				// 		content: "购买 针灸六经法要上册和下册 后方可使用此功能",
				// 		confirmText: '好的',
				// 		showCancel: false,
				// 		success: function(res) {
				// 			if (res.confirm) {
				// 				// console.log('用户点击确定');								
				// 			}
				// 		}
				// 	})
				// 	return
				// }
				// if(item.title == "时辰取穴"){					
				// 	uni.navigateTo({
				// 		url: "../timeAcupoint/timeAcupoint"
				// 	})
				// 	return 
				// }
				let id = item.prescriptCategoryId
				this.curOneCateIndex = index
				this.curTwoCateIndex = 0
				this.searchValue = ''
				this.searchList = []
				this.showSearchList = false
				if (index == 2) {
					this.getJFList(id)
				} else if (index == 3) {
					this.twoCateList = []
					this.getTitles(id)
				} else {
					this.getTowCateList(id)
				}

			},
			getTowCateList(id) {
				$http.request({
					url: "book/prescript/prescriptCategoryList",
					method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档		
					data: {
						loadAnimate: 'none', // 请求加载动画
						'categoryId': id
					},
					header: { //默认 无 说明：请求头
						'Content-Type': 'application/json'
					},
				}).then(res => {
					console.log(res, '二级分类获取成功')
					if (res.code == 0 && res.list.length > 0) {
						this.twoCateList = res.list
						this.getTitles(this.twoCateList[0].prescriptCategoryId)
					} else {
						this.twoCateList = []
						this.titleList = []
					}
				}).catch(e => {
					this.twoCateList = []
					this.titleList = []
					console.log(e)
				})
			},
			transformData(inputData) {
				const result = {};
				inputData.forEach(item => {
					const {
						letter
					} = item;
					if (!result[letter]) {
						result[letter] = [];
					}
					result[letter].push(item);
				});
				// const finalResult = Object.keys(result).map(key => ({ [key]: result[key] }));
				return result;
			},
			getJFList(id) {
				$http.request({
					url: "book/prescript/prescriptListForJF",
					method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档		
					data: {
						loadAnimate: 'none', // 请求加载动画
						'categoryId': id
					},
					header: { //默认 无 说明：请求头
						'Content-Type': 'application/json'
					},
				}).then(res => {
					if (res.code == 0 && res.list.length > 0) {
						this.twoCateList = []
						this.titleList = this.transformData(res.list)
						console.log('JF经方', this.titleList)
						// this.getTitles(this.twoCateList[0].prescriptCategoryId)
					} else {
						this.twoCateList = []
						this.titleList = []
					}
				}).catch(e => {
					this.twoCateList = []
					this.titleList = []
					console.log(e)
				})
			},

			getCateList(id) {
				id ? '' : id = 0
				this.twoCateList = []
				this.curTwoCateIndex = 0
				// 0为获取顶级分类，其他为搜索下级分类，目前的逻辑，顶级是写死的，所以可能只会涉及到搜索第二级
				$http.request({
					url: "book/prescript/prescriptCategoryList",
					method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档		
					data: {
						loadAnimate: 'none', // 请求加载动画
						'categoryId': id
					},
					header: { //默认 无 说明：请求头
						'Content-Type': 'application/json'
					},
				}).then(res => {
					console.log(res, '脉穴分类获取成功')
					if (res.code == 0 && res.list.length > 0) {
						this.oneCateList = res.list
						this.getTowCateList(this.oneCateList[0].prescriptCategoryId)
					} else {
						this.oneCateList = []
					}
				}).catch(e => {
					this.oneCateList = []
					console.log(e)
				})
			},
			getSearch() {
				$http.request({
					url: "book/prescript/searchPrescript",
					method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档		
					data: {
						loadAnimate: 'none', // 请求加载动画
						'keywords': this.searchValue,
						type: this.curOneCateIndex + 1
					},
					header: { //默认 无 说明：请求头
						'Content-Type': 'application/json'
					},
				}).then(res => {
					console.log(res, '搜索结果')
					if (res.code == 0 && res.list.length >= 0) {
						this.showSearchList = true
						this.searchList = res.list
					} else {
						this.searchList = []
					}
				}).catch(e => {
					// this.titleList = []	
					this.searchList = []
					console.log(e)
				})
			},
			search(res) {
				console.log(res, 'res')
				// uni.showToast({
				// 	title: '搜索：' + res,
				// 	icon: 'none'
				// })
				if (res == '') {
					this.showSearchList = false
					this.searchList = []
				} else {
					this.getSearch()
				}

			},
			input(res) {
				console.log('----input:', res)
				if (res == '') {
					this.searchList = []
				} else {
					this.getSearch()
				}
			},
			clear(res) {
				console.log('----clear:', res)
				// uni.showToast({
				// 	title: 'clear事件，清除值为：',
				// 	icon: 'none'
				// })
				this.searchValue = ''
				this.showSearchList = false
			},
			blur(res) {
				// console.log('----blur:', res)
				// if (res == '') {
				// 	this.showSearchList = false
				// 	this.searchList = []
				// } else {
				// 	this.getSearch()
				// }
			},
			focus(e) {
				console.log('----focus:')
				// uni.showToast({
				// 	title: 'focus事件，输出值为：' + e.value,
				// 	icon: 'none'
				// })
				// 等于1 就是有权限
				// this.showSearchList = true

			},
			// cancel(res) {
			// 	uni.showToast({
			// 		title: '点击取消，输入值为：' + res.value,
			// 		icon: 'none'
			// 	})
			// }
		},
		onBackPress() {
			// #ifdef APP-PLUS
			plus.key.hideSoftKeybord();
			// #endif
		},

		onReachBottom() {
			this.$nextTick(() => {
				this.$refs.mSearch.goToBottom()
			})

		},

	}
</script>

<style lang="scss" scoped>
	.searchList {
		.item {
			font-size: 28rpx;
			padding: 20rpx;
			border-bottom: 1px solid #dadbde;
		}
	}

	.scroll-view_H {
		background-color: #fff;
		white-space: nowrap;
		padding: 10rpx;
	}

	.contentBox {
		.oneCateList {
			justify-content: space-between;

			text {
				text-align: center;
				display: inline-block;
				width: 32%;
				padding: 20rpx 0;
				font-size: 32rpx;
				font-weight: bold;
			}

			.cur {
				border-bottom: 5rpx solid #55aa7f;
				color: #55aa7f;
			}
		}

		.oneCateBot {
			margin-top: 15rpx;
			justify-content: space-between;

			text {
				text-align: center;
				display: inline-block;
				width: 32%;
				padding: 10rpx 0;
				font-size: 30rpx;
				border-radius: 10rpx;
			}

			.cur {
				background-color: #55aa7f3d;
				color: #55aa7f;
				font-weight: bold;
			}
		}

		.firstTab {
			text {
				text-align: center;
				display: inline-block;
				width: 50%;
				padding: 20rpx 0;
				margin-bottom: 10rpx;
			}
		}

		.twoCateList {
			font-size: 28rpx;
			margin-top: 20rpx;

			.grid-text {
				padding: 30rpx 20rpx;
				text-align: center;
			}

			.cur {
				color: #55aa7f;
			}

			// .u-grid-list{border: 0.5px solid #dadbde;}
		}

		.titleList {
			font-size: 26rpx;
			margin-top: 20rpx;
			padding: 10rpx;
			border-radius: 10rpx;
			background-color: #f8f9fa;

			.titleItem {
				padding: 20rpx 10rpx;
			}

			.JFtitleItem {
				background-color: #ffffff;
				padding: 20rpx 10rpx;
				width: 100%;
				border-bottom: 0.5px solid #f8f9fa;
			}
		}
	}


	.container {
		padding: 10rpx;
		height: 100vh;
		background-color: #fff;
	}

	.search_box {
		margin: 0 auto;
		overflow: hidden;
		align-items: center;
		width: calc(100% - 10px);
		margin-top: 20rpx;
		margin-bottom: 20rpx;

		.search {
			height: 56upx;
			display: flex;
			width: 86%;
			margin: 0 auto;
			align-items: center;
			padding: 0upx 40upx;
			background-color: #fff;
			border-radius: 20upx;
			box-shadow: 0 0px 10px 1px #54a96633;
		}

		.prompt {
			color: #838383;
			font-size: 24rpx;

		}

		.icon_search {
			background-image: url('@/static/icon/map_ic_search.png');
			background-position: center center;
			background-repeat: no-repeat;
			background-size: cover;
			width: 36upx;
			height: 36upx;
			margin-right: 20upx;
		}
	}

	.flexbox {
		display: flex;
	}

	.uni-modal .uni-modal__bd {
		text-align: left;
	}

	.limiTy {
		font-size: 28rpx;
		line-height: 46rpx;
	}
</style>