<template>
	<view class="container">
		<!-- 公共组件-每个页面必须引入 -->
		<public-module></public-module> -->
		<z-nav-bar title="穴位检索"></z-nav-bar>
		<!-- <uni-search-bar @confirm="search" :focus="true" v-model="searchValue" @blur="blur" @focus="focus" @input="input"
			@cancel="cancel" @clear="clear">
		</uni-search-bar> -->
		<view class="search_box" v-if="oneCateList.length > 0">
			<u-search :disabled="userMes.pointPower == 0 && oneCateList[curOneCateIndex].id == 3 || userMes
					.pointPower == 0 && oneCateList[curOneCateIndex].id == 6 ? true : false" @click="checkDisable" placeholder="请输入穴位名" @focus="focus" @clear="clear"
				v-model="searchValue" @input="input" @blur="blur" @search="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>
		<view v-show="!showSearchList" class="contentBox">
			<!-- <scroll-view class="scroll-view_H oneCateList" scroll-x="true" scroll-left="0"> -->
			<view class="oneCateList flexbox">
				<text :class="[curOneCateIndex == index ? 'cur' : '']" @click="setOneCateIndex(item,index)"
					v-for="(item, index) in oneCateList" :key="item.id">{{item.title}}</text>
			</view>
			<!-- </scroll-view> -->
			<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="titleList">
				<u-grid :col="3" v-if="titleList.length > 0">
					<u-grid-item v-for="(item, index) in titleList" :key="item.id" @click="gotoDetail(item)">
						<view :class="['titleItem']">{{item.title}}</view>
					</u-grid-item>
				</u-grid>
				<u-divider v-else text="暂无穴位数据哦~"></u-divider>
			</view>
		</view>


		<!-- <view class="search_box flexbox" @click="">
			<view class="search">
				<text class="icon_search"></text>
				<text class="prompt">请输入穴位名</text>
			</view>
		</view> -->
		<music-play :playData="playData"></music-play>
		<z-navigation></z-navigation>
	</view>
</template>

<script>
	import musicPlay from '@/components/music.vue'
	import $http from '@/config/requestConfig.js';
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				playData: {},
				searchValue: '',
				oneCateList: [], // 一级分类标题1
				twoCateList: [], // 二级分类标题
				titleList: [], // 穴位标题
				curOneCateIndex: 0, // 当前选中的一级分类
				curTwoCateIndex: 0, // 当前选中的二级分类
				searchList: [], // 搜索结果数组
				showSearchList: false,
				userMes: {}, // 用户信息
				searchDisable: false, // 搜索不可用

			}
		},
		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].id == 3 || this.userMes
					.pointPower == 0 && this.oneCateList[this.curOneCateIndex].id == 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.pointPower == 0 && this.oneCateList[this.curOneCateIndex].id == 3 || this.userMes
					.pointPower == 0 && this.oneCateList[this.curOneCateIndex].id == 6) { // 等于0 就是没有权限
					this.showNoRights()
				} else {
					// 等于1 就是有权限
					uni.navigateTo({
						url: "./acupointDetail?id=" + item.id
					})
				}

			},
			// 获取穴位名称
			getTitles(id) {
				$http.request({
					url: "book/point/getPointsByCategoryId",
					method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档		
					data: {
						// loadAnimate: 'none', // 请求加载动画
						'pointCategoryId': id
					},
					header: { //默认 无 说明：请求头
						'Content-Type': 'application/json'
					},
				}).then(res => {
					console.log(res, '内容获取成功')
					if (res.code == 0 && res.points.length > 0) {
						this.titleList = res.points
					} else {
						this.titleList = []
					}
				}).catch(e => {
					this.titleList = []
					console.log(e)
				})
			},
			setTwoCateIndex(item, index) {
				let id = item.id
				this.curTwoCateIndex = index
				this.getTitles(id)
			},
			setOneCateIndex(item, index) {
				let id = item.id
				this.curOneCateIndex = index
				this.curTwoCateIndex = 0
				this.getTowCateList(id)
			},
			getTowCateList(id) {
				$http.request({
					url: "book/point/getPointCategoryByPid",
					method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档		
					data: {
						loadAnimate: 'none', // 请求加载动画
						'id': id
					},
					header: { //默认 无 说明：请求头
						'Content-Type': 'application/json'
					},
				}).then(res => {
					console.log(res, '二级分类获取成功')
					if (res.code == 0 && res.category.length > 0) {
						this.twoCateList = res.category
						this.getTitles(this.twoCateList[0].id)
					} 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/point/getPointCategoryByPid",
					method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档		
					data: {
						loadAnimate: 'none', // 请求加载动画
						'id': id
					},
					header: { //默认 无 说明：请求头
						'Content-Type': 'application/json'
					},
				}).then(res => {
					console.log(res, '脉穴分类获取成功')
					if (res.code == 0 && res.category.length > 0) {
						this.oneCateList = res.category
						this.getTowCateList(this.oneCateList[0].id)
					} else {
						this.oneCateList = []
					}
				}).catch(e => {
					this.oneCateList = []
					console.log(e)
				})
			},
			getSearch() {
				$http.request({
					url: "book/point/searchPointList",
					method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档		
					data: {
						loadAnimate: 'none', // 请求加载动画
						'keywords': this.searchValue
					},
					header: { //默认 无 说明：请求头
						'Content-Type': 'application/json'
					},
				}).then(res => {
					console.log(res, '搜索结果')
					if (res.code == 0 && res.points.length > 0) {
						this.searchList = res.points
					}
				}).catch(e => {
					// this.titleList = []	
					this.searchList = []
					console.log(e)
				})
			},
			search(res) {
				console.log(res, 'res')
				// uni.showToast({
				// 	title: '搜索：' + res,
				// 	icon: 'none'
				// })

			},
			input(res) {
				console.log('----input:', res)
				if (res == '') {
					this.searchList = []
				} else {
					this.getSearch()
				}
			},
			clear(res) {
				// uni.showToast({
				// 	title: 'clear事件，清除值为：',
				// 	icon: 'none'
				// })
				this.searchValue = ''
				this.showSearchList = false
			},
			blur(res) {
				if (res == '') {
					this.showSearchList = false
					this.searchList = []
				} else {
					this.getSearch()
				}
			},
			focus(e) {
				// 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
		},
		components: {
			musicPlay
		},
	}
</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;
			}
		}

		.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 0;
			}
		}
	}


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

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

		.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;
	}
</style>