<template>
	<view class="container">
		<!-- 公共组件-每个页面必须引入 -->
		<public-module></public-module>
		<z-nav-bar title="中药检索"></z-nav-bar>
		<view class="contentBox">
			<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.id"
                        @click="setTwoCateIndex(item, index)">
                        <view :class="['grid-text',curTwoCateIndex == index ? 'cur' : '']">{{item.title}}</view>
                    </u-grid-item>
                </u-grid>
            </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>
            <view v-show="!showSearchList">
                <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>
		<u-popup mode="bottom" :show="xingweiShow" :round="10" @close="xingweiShow=false">
			<view class="tanchu">
				<view class="dp_title">性味选择</view>
				<!-- <view class="flexbox">
					<i @click="showEmj()" :class="emojiIcon"></i>
					<editor id="editor" class="ql-container" :placeholder="placeholder" @ready="onEditorReady"></editor>
				</view> -->

				<view style="max-height: 1000rpx;overflow-y: scroll;">
					<!-- 提交 -->
					<view class="padding-bottom-sm flex padding-lr-sm" style="border-bottom: 1px solid #EEEEEE;">
						
						<view>
							<u-button type="success" @click="goToSign">查询</u-button>

						</view>
					</view>
				</view>

			</view>
		</u-popup>
	</view>
</template>

<script>
	import $http from '@/config/requestConfig.js';
	import medicineSearch from './medicineSearch'
	import {
		mapState
	} from 'vuex';
	export default {
		components: {
			medicineSearch
		},
		data() {
			return {
				xingweiShow: false, // 查询条件弹出层，性味
				gongxiaoShow: false, // 查询条件弹出层，功效
				sanpinShow: false, // 查询条件弹出层，sanpin


				searchValue: '',
				twoCateList: [
                    {title:"性味", id: 1},
                    {title:"功效", id: 2},
                    {title:"三品", id: 3}
                ], // 二级分类标题
				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('点击了')
			},
			// 显示无权限弹窗
			// 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.id
				this.curTwoCateIndex = index
                if(id == 1){
                    this.xingweiShow = true
                    this.gongxiaoShow = false
                    this.sanpinShow = false
                }
			},

			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()
				}

			},
		},
		onBackPress() {
			// #ifdef APP-PLUS
			plus.key.hideSoftKeybord();
			// #endif
		},
	}
</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: 34rpx;
				border-radius: 10rpx;
			}

			.cur {
				background-color: #55aa7f;
				color: #fff;
			}
		}
		.firstTab{
			text {
				text-align: center;
				display: inline-block;
				width: 50%;
				padding: 20rpx 0;
				margin-bottom: 10rpx;
				font-size: 34rpx;
				border-radius: 10rpx;
			}
		}

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

			.grid-text {
				padding: 16rpx 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>