<template>
	<view class="timeInfo">
		<view class="nevtop">
			<view class="top">
				<u-search placeholder="请输入文章名称搜索" v-model="keyword" :clearabled="true" :show-action="false"
					@search="onsouch()"></u-search>
			</view>
			<view class="banner">
				<scroll-view scroll-x="true" style="white-space:nowrap ">
					<view class="nav" :class="{newnav:chooseindex==index}" v-for="(item,index) in typelist" :key="index"
						@click="choose(index,item.id)">{{item.name}}
						<view class="tip" v-if="chooseindex==index">
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
		<view class="group">
			<scroll-view scroll-y="true" @scrolltolower="scrolltolower" style="height: 100vh">
				<view class="item" v-for="(item,idx) in sortlist" :key="idx" @click="ondetail(item.id)">
					<view class="bot flexA">
						<view class="left flexA">
							<image :src="item.image_preview" mode=""></image>
							<view class="">
								<view class="title">{{item.title}}</view>
								<view class="time">发布时间：{{item.publishtime}}</view>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import {
		sort_list,
		arc_list
	} from '@/api/index.js'
	export default {
		data() {
			return {
				type: "",
				chooseindex: 0,
				typelist: [],
				keyword: "",
				sortlist: [],
				currentpage: 1,
			}
		},
		onLoad(options) {
			this.type = options.type
			this.sort_list(true)
		},
		methods: {
			ondetail(e) {
				uni.navigateTo({
					url: "/pages/index/consultationDetails?id=" + e
				})
			},
			// 加载
			scrolltolower() {
				this.currentpage++
				this.arc_list()
			},
			//搜索
			onsouch() {
				this.currentpage = 1
				this.arc_list(true)
			},
			//类型选择
			choose(e, id) {
				this.chooseindex = e
				this.sortlist = []
				this.sort_id = id
				this.arc_list(true)
			},
			// 分类
			async sort_list() {
				console.log(this.type,"000")
				let obj = {
					type:this.type,
					keyword: this.keyword,
				}
				try {
					const res = await sort_list(obj)
					this.typelist = res.list
					if (this.typelist[0].id) {
						this.sort_id = this.typelist[0].id
					}
					this.arc_list(true)
					console.log('sort_list', res)
					// 保存数据
				} catch (err) {
					uni.showToast({
						title: err,
						icon: 'none'
					})
					console.log('sort_list', err)
				}
			},
			// 资讯
			async arc_list(x) {
				let obj = {
					type: this.type,
					sort_id: this.sort_id,
					keyword: this.keyword,
					page: this.currentpage,
					pagenum: 15,
				}
				try {
					const res = await arc_list(obj)
					this.sortlist = x ? res.list.data : this.sortlist.concat(res.list.data)
					console.log('arc_list', res)
					if (res.list.data.length == 0) {
						// uni.showToast({
						// 	title: "暂无更多数据",
						// 	icon: 'none'
						// })
						return
					}
					// 保存数据
				} catch (err) {
					uni.showToast({
						title: err,
						icon: 'none'
					})
					console.log('arc_list', err)
				}
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f6f6f6;
	}

	.timeInfo {
		.nevtop {
			position: fixed;
			width: 100%;
			box-sizing: border-box;
			top: 0;
			left: 0;
			z-index: 99;
			padding: 16rpx 32rpx;
			background-color: #ffffff;

			.top {}

			.banner {
				width: 660rpx;
				margin-top: 24rpx;

				.nav {
					position: relative;

					&.activetop {
						background: #FFF3F2;
					}

					&:first-child {
						margin-left: 0;
					}

					display: inline-block;
					color: rgba(0, 0, 0, 0.9);
					font-size: 28rpx;
					font-weight: 500;
					font-family: "PingFang SC";
					margin-left: 16rpx;
					margin-bottom:32rpx;
					box-sizing: border-box;

					.tip {
						position: absolute;
						bottom: -20rpx;
						left: 50%;
						transform: translate(-50%);
						width: 36rpx;
						height: 8rpx;
						border-radius: 32rpx;
						opacity: 1;
						border: 0 solid rgba(0.5920000076293945, 0.5920000076293945, 0.5920000076293945, 1);
						background: rgba(254, 208, 0, 1);
					}
				}

				.newnav {
					color: rgba(0, 0, 0, 0.9);
					font-size: 28rpx;
					font-weight: 600;
					font-family: "PingFang SC";
				}
			}
		}

		.group {
			margin-top: 208rpx;
			padding: 16rpx 24rpx;

			.item {
				padding: 32rpx;
				margin-bottom: 24rpx;
				border-radius: 24rpx;
				opacity: 1;
				background: rgba(255, 255, 255, 1);

				.bot {
					justify-content: space-between;

					image {
						margin-right: 20rpx;
						width: 144rpx;
						height: 144rpx;
						border-radius: 16rpx;
					}

					.left {
						.title {
							font-size: 28rpx;
							font-weight: 700;
						}

						.time {
							margin-top: 32rpx;
							color: rgba(0, 0, 0, 0.6);
							font-size: 26rpx;
						}

					}

				}

			}
		}
	}
</style>