<template>
	<page-meta :page-font-size="fontValue+'px'" :root-font-size="fontValue+'px'"></page-meta>
	<view class="content">
		<view class="top-wrapper">
			<view class="top-cont">
				<u-input
				v-model="searchValue"
				class="top-ipt"
				placeholder="请输入想问的问题"
				shape="circle"
				suffixIcon="search"
				suffixIconStyle="color: #909399; font-size: 32rpx;"
				placeholderStyle="font-weight: 400;font-size: 28rpx;color: rgba(15,39,75,0.4);"
				@blur="handleSearch"
				></u-input>
			</view>
		</view>
		<scroll-view class="chronic-list" scroll-x="true">
			<view class="scroll-view-item" v-for="(item, index) in chronicList" :key="index" :class="hIndex == index ? 'active' : ''" @click="changeChronic(item,index)">
				<view>{{item.chronicName}}</view> 
			</view> 
		</scroll-view>
		<scroll-view class="chronic-science" scroll-y="true" @scrolltolower="onScrollTolower" >
			<view class="scroll-view-item" v-for="(item,index) in tableList" :key="index" @click="goDetail(item)">
				<view style="width: 100%;display: flex;align-items: center;height: 120px;justify-content: space-between;">
					<view style="width: 25%;height: 90%;display: flex;align-items: center;justify-content: center;">
						<image class="image" :src="item.coverPhoto"></image>
					</view> 
					<view style="width: 75%;height: 90%;display: flex;flex-direction: column;justify-content: space-between;padding: 4px;">
						<view style="font-size:30rpx;font-weight: 600;">{{item.articleTitle}}</view>
						<view style="width: 100%;font-size:26rpx;color: black;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;height: 40px;">{{item.summary}}</view>
						<view style="font-size:24rpx;display: flex;" v-if="item.chronicNames"> 
							<view v-for="(titem,tindex) in item.chronicNameList" :key="tindex" v-if="tindex<4" style="padding: 2px;color: #ff6816;margin: 0 2px;background-color: #ffe7cb;border-radius: 10rpx;">
								<view >{{titem}}</view>
							</view> 
							<view v-if="item.chronicNameList.length>4" style="padding: 2px;color: #ff6816;margin: 0 2px;background-color: #ffe7cb;border-radius: 10rpx;">
								<view >...</view>
							</view> 
						</view>
						<view style="color: #909399;font-size:24rpx;">{{item.createTime}}</view>
					</view> 
				</view>
			</view>
		</scroll-view> 


    
	</view>
</template>

<script> 
import Tabs from '@/pages/components/Tabs.vue'
import { dictHealthChronicApi,getHealthSciencePageApi } from '@/api/mine/health.js';
export default {
	components: { Tabs },
	data() {
		return {
			fontValue:uni.getStorageSync('fontSize') || 8,
			tabIndex: 0,
			pageNum: 1,
			pageSize: 10,
			total: 0,
			searchValue: '',
			chronicList:[],
			hIndex:0,
			chronicId:"",
			status: 'loadmore', 
			tableList: [],
		}
	}, 
	onLoad() { 
		this.getHealthChronic()
	},
	onShow() {
		this.getList()
	},
	methods: {
		//获取慢性病字典
		async getHealthChronic() {
			let param = {}
			const res = await dictHealthChronicApi(param)
			this.chronicList = res.data
			this.chronicList.unshift({
				chronicId:"",
				chronicName:"全部"  
			})
			
		},
		changeChronic(item,index){
			console.log(item)
			this.hIndex=index;
			this.chronicId = item.chronicId;
			this.pageNum=1
			this.getList()
		}, 
		// 翻页
		onScrollTolower(){
			console.log(this.tableList.length)
				if(this.total>this.tableList.length){
					this.pageNum++
					this.getList()
				}
		},
		//获取订单列表
		async getList() {
			console.log('获取列表',)
			let params = { 
				pageNum: this.pageNum,
				pageSize: this.pageSize,
				articleTitle: this.searchValue,
				articleTitle: this.searchValue,
				ifPushed:"1",
				chronicId:this.chronicId
			}
			try {
			const res = await getHealthSciencePageApi(params)
				console.log('?? ~ getList ~ res:', res)
				this.total = Number(res.total); 
				res.rows.forEach(item=>{
					if(item.chronicNames){
						item.chronicNameList = item.chronicNames.split(",") 
					}
				})
				if(this.pageNum==1){
					this.tableList = res.rows
				}else{
					this.tableList.push(...res.rows)
				}
				this.status = this.total == this.tableList.length ? 'nomore' : 'loadmore'
			} catch (error) {
				console.log(error)
			}
		},
		//翻页
		onReachBottom() {
			console.log('?? ~ onReachBottom ~ ')
			// if (this.total < 10 || this.total == this.tableList.length) {
			//   this.status = 'nomore'
			//   return
			// }
			// this.status = 'loading'
			// setTimeout(() => {
			//   this.pageSize += 10
			//   this.getList()
			//   if (this.tableList.length != this.total) this.status = 'loadmore'
			//   else this.status = 'nomore'
			// }, 500)
			// console.log('加载..', this.pageSize)
		},
		//搜索图标-搜索
		handleSearch() {
		  console.log('搜索', this.searchValue)
		  this.pageNum=1;
		  this.tableList=[]
		  this.getList()
		}, 
		// 跳转订单详情
		goDetail(item) {
			console.log('跳转订单详情', item)
			uni.navigateTo({
				url: `/pages/mine/healthScience/detail?params=${JSON.stringify(item)}`
			})
		}
	}, 
}
</script>

<style lang="scss" scoped>
.content {
  background: #f9fbff;
  // height: 100%;
  height: 95vh; 
	.top-wrapper {
		width: 100vw;
		background: #f9fbff;
	}

	.top-cont {
		padding: 16px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 10px; 
		.top-ipt {
			height: 31px;
			background: #fff;
			margin-left: 10px;
			margin-right: 10px;
		}
	} 
	.chronic-list {
		white-space: nowrap;
		width: 90%;
		height: 40px;
		margin: 0 auto;
		margin-bottom: 10px;
		.scroll-view-item {
			display: inline-block; 
			padding: 2px 8px; 
			text-align: center;
			color: #959FA4;
			font-size: 28rpx; 
		}
		.active {
			color: #0054fd;
			font-weight: bolder;
			font-size: 28rpx;
			border: 1px solid #0054fd;
			border-radius: 35px;
			background-color: #fff;
		}
	}
	
	.chronic-science{
		width: 100%;
		height: 80vh;
		
		.scroll-view-item{
			width: 96%;
			margin: 10px auto;
			background: #fff;
		}
		
	}
	
	.image {
	  width: 90%;
	  height: 90%;
	  border-radius: 10rpx; 
	}

	.order-list {
		padding: 8px;
		background: #fff;
		border-radius: 8px;
		font-size: 24rpx;
		font-weight: 400;
		// margin-bottom: 12px;
		margin-top: 10px;

		.order-source {
			margin-bottom: 12px;
			font-weight: 500;
			color: #0f274b;
		}

		.intervalName {
			margin-left: 10px;
			color: #ff6816;
			border-radius: 1px 1px 1px 1px;
			border: 1px solid #ff6816;
			padding: 0 4px;
		}

		.img-cont {
			width: 100%;
			margin: 5px;
			display: flex;
			justify-content: space-between;
			width: 100%; 
		}
		.img {
			width: 28%;
			margin: 10rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
				view {
					margin-top: 8px;
					color: #0f274b;
				}
		}
		.price {
			width: 20%;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			color: #0f274b;
			font-weight: 400;
			font-size: 24rpx;
		}

		.btn-cont {
			display: flex;
			justify-content: flex-end;
			margin-top: 10px;
		}
	}
}
 
</style>
