<!-- 下拉刷新区域 -->
<template>
	<view class="contentBox">
		<view class="oneCateList flexbox">
            <text :class="[curOneCateIndex == index ? 'cur' : '']" @click="setOneCateIndex(item,index)"
                v-for="(item, index) in ywTabList" :key="item.prescriptCategoryId">{{item.title}}</text>
        </view>
        <view class="search_box" v-if="oneCateList.length > 0 && curOneCateIndex == 0" @click="checkDisable">
            <u-search placeholder="请输入药物名"></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">
            <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" v-else>
                <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>
	</view>
</template>

<script>
import $http from '@/config/requestConfig.js';
export default {
	// props: {
	// 	type: Number, // 下拉状态（inOffset：1， outOffset：2， showLoading：3， endDownScroll：4）
	// 	rate: Number // 下拉比率 (inOffset: rate<1; outOffset: rate>=1)
	// },
    data() {
        return {
            ywTabList:[{
                prescriptCategoryId: 1,
                title: '中药检索'
            },{
                prescriptCategoryId: 2,
                title: '西药检索'
            }],
            playData: {},
            searchValue: '',
            oneCateList: [{
                prescriptCategoryId: 0
            }], // 一级分类标题1
            twoCateList: [
                {prescriptCategoryId: 1, title: '抗感染类'},
                {prescriptCategoryId: 2, title: '神经类'},
                {prescriptCategoryId: 3, title: '精神类'},
                {prescriptCategoryId: 4, title: '抗肿瘤类'},
                {prescriptCategoryId: 5, title: '心血管类'},
                {prescriptCategoryId: 6, title: '呼吸类'},
                {prescriptCategoryId: 7, title: '泌尿系统类'},
                {prescriptCategoryId: 8, title: '消化类'},
                {prescriptCategoryId: 9, title: '麻醉及其辅助'},
            ], // 二级分类标题
            titleList: [], // 药物标题
            curOneCateIndex: 0, // 当前选中的一级分类
            curTwoCateIndex: 0, // 当前选中的二级分类
            searchList: [], // 搜索结果数组
            showSearchList: false,
            userMes: {}, // 用户信息
            searchDisable: false, // 搜索不可用
            limitShow: false,
            limitTitle: '提示',
            limitContent: ''
        }
    },
    // onLoad() {
    //     this.getCNYao()
    // },
	methods: {
		setOneCateIndex(item, index) {
            // let id = item.prescriptCategoryId
            this.curOneCateIndex = index
            this.curTwoCateIndex = 0
            this.searchValue = ''
            this.searchList = []
            this.showSearchList = false
            if (index == 1) { // 西药检索
                this.getXiYao('抗感染类',1)
            } else { // 中药检索
                // this.getTowCateList(id)
                this.getCNYao() // book/materials/getMaterialsList
            }
        },
        setTwoCateIndex(item, index) {
            let id = item.title
            this.curTwoCateIndex = index
            this.getXiYao(id,1)
        },
        // 获取西药
        getXiYao(id, type) {
            $http.request({
                url: "book/materials/getDrugList",
                method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档		
                data: {
                    // loadAnimate: 'none', // 请求加载动画
                    "limit": 1000,
                    "current": 1,
                    "name":"",
                    "kind": id, // 药品类型   抗病毒药/解热镇痛、非甾体抗炎药.......
                    "prescriptionType":"", // 处方类型 处方药/OTC甲类/OTC乙类
                    "insuranceType":"", // 医保类型 非医保/医保甲类/医保乙类
                    "type": type, // 0中药1西药
                },
                header: { //默认 无 说明：请求头
                    'Content-Type': 'application/json'
                },
            }).then(res => {
                console.log(res, '内容获取成功')
                if (res.code == 0 && res.result.records.length > 0) {
                    this.titleList = res.result.records
                } else {
                    this.titleList = []
                }
            }).catch(e => {
                this.titleList = []
                console.log(e)
            })
        },
        // 详情
        gotoDetail(item) {
            console.log('111111111111')
            uni.navigateTo({
                url: "./medicineSearchDetail?id=" + item.id
            })
        },
        // 获取中药
        getCNYao(id, type) {
            $http.request({
                url: "book/materials/getMaterialsList",
                method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档		
                data: {
                    // loadAnimate: 'none', // 请求加载动画
                    "limit": 10,
                    "current": 1,
                    "name":"",
                    "type": "", // 植物、矿物、动物
                    "effect": "",//功效 
                    "taste": "", //味
                    "property": "", //性
                    "tropism":"" //归经
                },
                header: { //默认 无 说明：请求头
                    'Content-Type': 'application/json'
                },
            }).then(res => {
                console.log(res, '内容获取成功')
                if (res.code == 0 && res.result.records.length > 0) {
                    this.titleList = res.result.records
                } else {
                    this.titleList = []
                }
            }).catch(e => {
                this.titleList = []
                console.log(e)
            })
        },
        gotoCNDetail(item) {
            console.log('2222')
            uni.navigateTo({
                url: "./CNMedicineSearchDetail?id=" + item.id
            })
        },
        checkDisable(){
            uni.navigateTo({
                url: "./CNMedicineSearch"
            })
        }
	}
};
</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: 50%;
				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: 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>
