<template>
	<view class="container userinfo-container">
		<CustomNavbar
			title="医学头条"
			type="center"
			:isLeft="false"
			:bgColor="navbarBgColor"
		/>
		<view class="bg"></view>
		<view class="content pd-12">
			<uv-input
				placeholder="搜索一下"
				v-model="paramsData.keyword"
				@confirm="getData"
				prefixIcon="search"
				customStyle="background: #FFFFFF;
					box-shadow: 0rpx 2 7rpx 0rpx #8EEEF3;
					border-radius: 200rpx 200rpx 200rpx 200rpx;
					"
				prefixIconStyle="font-size: 22px;color: #11C3AE"
			>
				<template v-slot:suffix>
					<text class="search" @click="getData">搜索</text>
				</template>
			</uv-input>

			<view class="new-container item" @click="toPage">
				<view class="flex-r-b">
					<text class="headline">最新推荐</text>
					<text class="content-font">不感兴趣，换一批</text>
				</view>
				<view class="video"> 
					<text class="play"><CustomIcon iconName="a-play-fill1" color="#848D99" size="80rpx"/> </text>
					<text class="time">02:34</text>
				</view>
				<view class="new-content">
					<view class="headline">标题</view>
					<view class="content-font"
						>{{ limitText("根据不同疾病，患者出现症状的差异较大。心血管疾病患者常表现为:心悸、呼") }}
						<text class="all">全文</text>
					</view>
				</view>
				<view class="flex-r-b content-font">
					<view class="icon-box"><CustomIcon iconName="buganxingqu" color="#848D99" size="30rpx"/> 不推荐</view>
					<view class="flex-r-b">
						<view class="icon-box"><CustomIcon iconName="shoucang" color="#848D99" size="30rpx"/>收藏</view>
						<view class="icon-box"><CustomIcon iconName="message-comments" color="#848D99" size="30rpx"/>点评</view>
					</view>
				</view>
			</view>

			<view class="item more-container">
				<view class="flex-r-b">
					<text class="headline">更多咨询</text>
				</view>
				<view class="flex-r-b more-item">
					<view class="flex-c left">
						<text class="headline">标题</text>
						<text class="content-font">公众号</text>
					</view>
					<view style="background-color: bisque" class="image"> </view>
				</view>
				<view class="flex-r-b more-item">
					<view class="flex-c left">
						<text class="headline">标题</text>
						<text class="content-font">公众号</text>
					</view>
					<view style="background-color: bisque" class="image"> </view>
				</view>
				<view class="more-btn flex-r-c">
					点击查看更多
				</view>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
import { ref, inject, onMounted } from "vue";
import articleApi from "@/api/article";
import { onPageScroll } from "@dcloudio/uni-app";
const $showToast: any = inject("$showToast");
const navbarBgColor = ref('rgba(0, 0, 0, 0)'); // 初始化为透明
const paramsData = ref({
	pageNum:1,
	pageSize:10,
	keyword:0

})
onPageScroll((event:any) => {
	if (event.scrollTop === 0) {
		navbarBgColor.value = 'rgba(0, 0, 0, 0)'; // 滚动到顶部时导航栏透明
	} else {
		navbarBgColor.value = '#02dddf'; // 滚动后导航栏变为白色
	}
})

/**
 * 限制字数
 * @param text 文本
 */
const limitText = (text:string) => {
	return text.slice(0,45) + '...'
}
/**
 * 跳转到指定页面
 */
const toPage = () => {
	uni.navigateTo({url:"/subpackages/home/detail/index"})
}

/**
 * 获取页面数据
 */
const getData = () => {
	articleApi.query(paramsData.value)

}
onMounted(() => {
	getData()
})
</script>

<style lang="scss">
@import "./index.scss";
</style>
