<template>
	<view class="container">
		<!-- 公共组件-每个页面必须引入 -->
		<public-module></public-module>
		<z-nav-bar title="中药搜索"></z-nav-bar>
		<view class="contentBox">
			<view class="search_box">
				<u-search :clearabled="true" bgColor="#fff" borderColor="#54a966" focus v-model="keyword"
					@custom='souYao' @clear="souYao"></u-search>
			</view>
			<view class="titleList">
				<u-grid :col="1" v-if="titleList.length > 0">
					<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>
		<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>
</template>

<script>
	import $http from '@/config/requestConfig.js';
	import {
		mapState
	} from 'vuex';
	export default {
		components: {

		},
		data() {
			return {
				keyword: '',
				titleList: [],
				status: 3,
				page: 1,
				totalPage: 1,
			}
		},
		onLoad() {
			this.titleList = []
		},
		onHide() {
			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: {
			// 搜索
			goToSearch() {
				$http.request({
					url: "book/materials/getMaterialsList",
					method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档		
					data: {
						// loadAnimate: 'none', // 请求加载动画
						"limit": 20,
						"current": this.page,
						"name": this.keyword,
						"type": "", // 植物、矿物、动物
						"effect": '', //功效 
						"taste": '', //味
						"property": '', //性
						"tropism": '' //归经
					},
					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)
				})
			},

			// 点击搜索
			souYao() {
				this.page = 1
				this.titleList = []
				this.goToSearch()
			},
			
			// 跳转详情
			gotoCNDetail(item) {
				uni.navigateTo({
					url: "./CNMedicineSearchDetail?id=" + item.id
				})
			},

		},
		onBackPress() {
			// #ifdef APP-PLUS
			plus.key.hideSoftKeybord();
			// #endif
		},
	}
</script>

<style lang="scss" scoped>
	.container {
		padding: 10rpx;
		height: 100vh;
		background-color: #fff;
	}

	.contentBox {

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


	}

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




	}
</style>