<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="2" 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',false ? 'cur' : '']">
							{{item.title}}
							<b v-if="index==0&&xingweiShow">
								<u-icon name="arrow-up-fill" color="#666" size="12"></u-icon>
							</b>
							<b v-if="index==0&&!xingweiShow">
								<u-icon name="arrow-down-fill" color="#666" size="12"></u-icon>
							</b>
							<b v-if="index==1&&gongxiaoShow">
								<u-icon name="arrow-up-fill" color="#666" size="12"></u-icon>
							</b>
							<b v-if="index==1&&!gongxiaoShow">
								<u-icon name="arrow-down-fill" color="#666" size="12"></u-icon>
							</b>
						</view>
					</u-grid-item>
				</u-grid>
			</view>
			<view class="marYao" @click="xingweiShow = true"
				v-if="curXingIndex.length>0||curWeiIndex.length>0||curGuijingIndex.length>0">
				性味：
				<span v-for="(item, index) in curXingIndex">
					{{item}}
					<font>,</font>
				</span>
				<span v-for="(item, index) in curWeiIndex">
					{{item}}
					<font>,</font>
				</span>
				<span v-for="(item, index) in curGuijingIndex">
					{{item}}
					<font>,</font>
				</span>
			</view>
			<view class="marYao" @click="gongxiaoShow = true" v-if="curGongxiaoIndex.length>0">
				功效：
				<span v-for="(item, index) in curGongxiaoIndex">
					{{item}}
					<font v-if="index+1!=curGongxiaoIndex.length">,</font>
				</span>
			</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="grid twoCateList" v-if="twoCateList.length > 0 && curOneCateIndex == 1">
					<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 == 1">
					<u-grid :col="1" v-if="titleList.length > 0">
						<u-grid-item v-for="(item, index) in titleList" :key="item.id"
							@click="gotoDetail(item)" style="align-items: flex-start;border-bottom: 2px solid #fff;">
							<view :class="['titleItem']">{{item.name}}</view>
						</u-grid-item>
					</u-grid>
					<u-divider v-else text="暂无药物数据哦~"></u-divider>
				</view> -->
				<view class="titleList">
					<u-grid :col="1" v-if="titleList.length > 0">
						<!-- <view style="font-size: 15px;padding: 5px;color: red;">大家常看的</view> -->
						<u-grid-item v-for="(item, index) in titleList" :key="item.id" @click="gotoCNDetail(item)"
							style="align-items: flex-start;border-bottom: 2px solid #fff;">
							<view :class="['titleItem']">{{item.name}}</view>
						</u-grid-item>
					</u-grid>

					<u-divider v-else text="暂无药物数据哦~"></u-divider>

					<view>
						<view v-if="status==0" style="text-align: center;padding: 20rpx 0;">
							<u-loading-icon style="display: inline-block;"></u-loading-icon>
							<font style='vertical-align: super;margin-left: 10px;font-size: 26rpx;color: #909399;'>
								努力加载中
							</font>
						</view>
						<view v-if="status==1" style="padding: 20rpx 0;">
							<u-divider text="全部加载完成"></u-divider>
						</view>
					</view>
				</view>
			</view>
		</view>
		<u-popup mode="bottom" :show="xingweiShow" :round="10" @close="xingweiShow=false">
			<view class="CNMedicineSearchPopup">
				<view class="dp_title">性</view>
				<view class="grid twoCateList" v-if="xingSelectionList.length > 0">
					<u-grid :col="3" border class="u-grid-list">
						<u-grid-item v-for="(item, index) in xingSelectionList" :key="item.title"
							@click="setXingIndex(item, index, curXingIndex)">
							<view :class="['grid-text',curXingIndex.includes(item.title)  ? 'cur' : '']">{{item.title}}
							</view>
						</u-grid-item>
					</u-grid>
				</view>
				<view class="dp_title">味</view>
				<view class="grid twoCateList" v-if="weiSelectionList.length > 0">
					<u-grid :col="3" border class="u-grid-list">
						<u-grid-item v-for="(item, index) in weiSelectionList" :key="item.title"
							@click="setXingIndex(item, index, curWeiIndex)">
							<view :class="['grid-text',curWeiIndex.includes(item.title) ? 'cur' : '']">{{item.title}}
							</view>
						</u-grid-item>
					</u-grid>
				</view>
				<view class="dp_title">归经</view>
				<view class="grid twoCateList" v-if="guijingSelectionList.length > 0">
					<u-grid :col="3" border class="u-grid-list">
						<u-grid-item v-for="(item, index) in guijingSelectionList" :key="item.title"
							@click="setXingIndex(item, index, curGuijingIndex)">
							<view :class="['grid-text',curGuijingIndex.includes(item.title) ? 'cur' : '']">
								{{item.title}}
							</view>
						</u-grid-item>
					</u-grid>
				</view>
				<view style="max-height: 1000rpx;overflow-y: scroll;margin-top: 28px;">
					<!-- 提交 -->
					<view class="padding-bottom-sm flex padding-lr-sm" style="border-bottom: 1px solid #EEEEEE;">
						<view>
							<u-button type="success" @click="goNewSearch">查询</u-button>
						</view>
					</view>
				</view>
			</view>
		</u-popup>
		<u-popup mode="bottom" :show="gongxiaoShow" :round="10" @close="gongxiaoShow=false">
			<view class="CNMedicineSearchPopup">
				<view class="dp_title">功效</view>
				<view class="grid twoCateList" v-if="gongxiaoSelectionList.length > 0">
					<u-grid :col="3" border class="u-grid-list">
						<u-grid-item v-for="(item, index) in gongxiaoSelectionList" :key="item.title"
							@click="setXingIndex(item, index, curGongxiaoIndex)">
							<view :class="['grid-text',curGongxiaoIndex.includes(item.title)  ? 'cur' : '']">
								{{item.title}}
							</view>
						</u-grid-item>
					</u-grid>
				</view>
				<view style="max-height: 1000rpx;overflow-y: scroll;margin-top: 28px;">
					<!-- 提交 -->
					<view class="padding-bottom-sm flex padding-lr-sm" style="border-bottom: 1px solid #EEEEEE;">
						<view>
							<u-button type="success" @click="goNewSearch">查询</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
				xingSelectionList: [{
						title: "寒"
					},
					{
						title: "凉"
					},
					{
						title: "平"
					},
					{
						title: "温"
					},
					{
						title: "热"
					},
				],
				weiSelectionList: [{
						title: "酸"
					},
					{
						title: "涩"
					},
					{
						title: "甘"
					},
					{
						title: "苦"
					},
					{
						title: "辛"
					},
					{
						title: "咸"
					},
					{
						title: "淡"
					},
				],
				guijingSelectionList: [{
						title: "心"
					},
					{
						title: "肝"
					},
					{
						title: "脾"
					},
					{
						title: "肺"
					},
					{
						title: "肾"
					},
					{
						title: "肠"
					},
					{
						title: "膀胱"
					},
					{
						title: "胃"
					},
				],
				curXingIndex: [],
				curWeiIndex: [],
				curGuijingIndex: [],
				gongxiaoSelectionList: [{
						title: "解表"
					},
					{
						title: "清热"
					},
					{
						title: "泻下"
					},
					{
						title: "祛风湿"
					},
					{
						title: "芳香化湿"
					},
					{
						title: "利水渗湿"
					},
					{
						title: "温里"
					},
					{
						title: "理气"
					},
					{
						title: "消食"
					},
					{
						title: "驱虫"
					},
					{
						title: "止血"
					},
					{
						title: "活血祛瘀"
					},
					{
						title: "化痰止咳平喘"
					},
					{
						title: "安神"
					},
					{
						title: "平肝息风"
					},
					{
						title: "开窍"
					},
					{
						title: "补虚"
					},
					{
						title: "收涩"
					},
					{
						title: "涌吐"
					},
					{
						title: "外用及其他"
					},
				],
				curGongxiaoIndex: [],
				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: '',
				status: 3,
				page: 1,
				totalPage: 1,
			}
		},
		onLoad() {
			this.goNewSearch()
			this.titleList = []
			// this.getUserInfo()
			// this.getCateList()

		},
		onHide() {
			// this.showSearchList = false
			// this.searchList = []
			this.page = 1
		},

		onPullDownRefresh() {
			console.log('下拉刷新了')
			// this.contentShow = 1
			this.page = 1
			this.goToSearch()
			uni.stopPullDownRefresh();
		},
		onReachBottom() {
			// this.loadingNow = true
			console.log('到底了')
			if (this.page + 1 <= this.totalPage) {
				this.page++
				this.goToSearch()
			} else {
				this.status = 1
			}
		},
		computed: {
			...mapState(['userInfo']),
		},
		methods: {
			setXingIndex(item, index, arr) {
				// let arr = this.curXingIndex
				if (arr.includes(item.title)) {
					// 若包含，则从数组中删除该值
					var index = arr.indexOf(item.title);
					if (index > -1) {
						arr.splice(index, 1);
					}
				} else {
					// 若不包含，则向数组中添加该值
					arr.push(item.title);
				}
				this.page = 1
				this.titleList = []
				this.goToSearch()
				console.log(arr);
			},
			goNewSearch() {
				this.page = 1
				this.titleList = []
				this.goToSearch()
				this.xingweiShow = false
				this.gongxiaoShow = false
				this.sanpinShow = false
			},

			goToSearch() {
				$http.request({
					url: "book/materials/getMaterialsList",
					method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档		
					data: {
						// loadAnimate: 'none', // 请求加载动画
						"limit": 20,
						"current": this.page,
						"name": "",
						"type": "", // 植物、矿物、动物
						"effect": this.curGongxiaoIndex.join(','), //功效 
						"taste": this.curWeiIndex.join(','), //味
						"property": this.curXingIndex.join(','), //性
						"tropism": this.curGuijingIndex.join(',') //归经
					},
					header: { //默认 无 说明：请求头
						'Content-Type': 'application/json'
					},
				}).then(res => {
					console.log(res, '内容获取成功')
					if (res.code == 0 && res.result.records.length > 0) {
						for (var i = 0; i < res.result.records.length; i++) {
							this.titleList.push(res.result.records[i])
						}

						this.totalPage = res.result.pages
						if (this.page == this.totalPage) {
							this.status = 1
						} else {
							this.status = 3
						}


					} else {
						this.titleList = []
					}
				}).catch(e => {
					this.titleList = []
					console.log(e)
				})
			},

			gotoCNDetail(item) {
				uni.navigateTo({
					url: "./CNMedicineSearchDetail?id=" + item.id
				})
			},
			// // 方剂详情
			// 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
			// 	})
			// },
			setTwoCateIndex(item, index) {
				let id = item.id
				this.curTwoCateIndex = index
				if (id == 1) {
					this.xingweiShow = true
					this.gongxiaoShow = false
					this.sanpinShow = false
				}
				if (id == 2) {
					this.xingweiShow = false
					this.gongxiaoShow = true
					this.sanpinShow = false
				}
			},

		},
		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;


			}

			.grid-text>b {
				margin-left: 10rpx;
				display: inline-block;
				vertical-align: middle;
			}

			.cur {
				color: #55aa7f;
			}

			.u-grid-list {
				// border-top: 0.5px solid #dadbde;
				// border-bottom: 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;
			}
		}

		.marYao {
			background-color: #55aa7f1c;
			padding: 10rpx 20rpx 10rpx 20rpx;
			margin-bottom: 10rpx;
			font-size: 26rpx;
			color: #225f40;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;

			span {

				color: #55aa7f;

				font {
					display: inline-block;
					margin: 0 5rpx;
				}
			}

		}

		.marYao:nth-last-child(1) {
			display: none;
		}
	}


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



	.flexbox {
		display: flex;
	}

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

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