<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)">{{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,item.title)">
					<view class="bot flexA">
						<view class="left flexA">
							<image :src="item.image_preview" mode=""></image>
							<view class="lefte">
								<view class="title">{{item.title}}</view>
								<view class="time">发布时间：{{item.publishtime}}</view>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import {
		arc_sort_list,
		article_list
	} from '@/api/mine.js'
	export default {
		data() {
			return {
				type: "",
				chooseindex: 0,
				typelist: [],
				keyword: "",
				sortlist: [],
				currentpage: 1,
			}
		},
		onLoad(options) {
			this.type = options.id
			let title=options.title
			uni.setNavigationBarTitle({
				title: title //这是修改后的导航栏文字
			})
			let URL=window.location.href
			this.$wxH5Share.get_jssdk(title,URL)
			this.arc_sort_list(true)
			
		},
		methods: {
			ondetail(e,title) {
				uni.setStorageSync("deltitle",title)
				uni.navigateTo({
					url: "/pages/mine/mineinfodetail?id=" + e
				})
			},
			// 加载
			scrolltolower() {
				console.log(2)
				this.currentpage++
				this.article_list()
			},
			//搜索
			onsouch() {
				this.currentpage = 1
				this.article_list(true)
			},
			//类型选择
			choose(e, id, name) {
				let that =this
				that.chooseindex = e
				that.currentpage = 1
				that.sortlist = []
				that.sort_id = id
				that.article_list(true)
			},
			// 分类
			async arc_sort_list() {
				let obj = {
					arc_id: this.type,
				}
				try {
					const res = await arc_sort_list(obj)
					this.typelist = res.list
					if (this.typelist[0].id) {
						this.sort_id = this.typelist[0].id
					}
					this.article_list(true)
					// 保存数据
				} catch (err) {
					uni.showToast({
						title: err,
						icon: 'none'
					})
					console.log('sort_list', err)
				}
			},
			// 资讯
			async article_list(x) {
				let obj = {
					user_arc_id: this.type,
					user_article_sort_id: this.sort_id,
					page:this.currentpage,
					pagenum:15,
					keyword:this.keyword,
				}
				try {
					const res = await article_list(obj)
					this.sortlist = x ? res.list.data : this.sortlist.concat(res.list.data )
					console.log('article_list', res)
					if (res.list.data.length == 0) {
						return
					}
					// 保存数据
				} catch (err) {
					uni.showToast({
						title: err,
						icon: 'none'
					})
					console.log('article_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 {
						.lefte{
							flex: 1;
							.title {
								font-size: 28rpx;
								font-weight: 700;
							}
							
							.time {
								margin-top: 32rpx;
								color: rgba(0, 0, 0, 0.6);
								font-size: 26rpx;
							}
							
						}
					
					}

				}

			}
		}
	}
</style>