<template>
	<navigationBar title='資訊詳情' />
	<!-- 公共背景圖 -->
	<publicContext /> 
	<image v-if="newsLists.img" class="fengmian" :src="$imgUrl + newsLists.img"></image>
	<video v-if="newsLists.video" class="fengmian" :src="$imgUrl + newsLists.video"></video>
	<view class="center" v-html="newsLists.content">{{newsLists.content}}</view>
	<view class="pinglun">
		<view>
			<image v-if='isShare' src="/Apages/static/img/icon07.png"></image>
			<image v-else src="/Apages/static/img/icon08.png"></image>
			<view>{{newsLists.share_num}}</view>
		</view>
		<view>
			<image v-if='!newsLists.collection' src="/Apages/static/img/icon09.png"></image>
			<image v-else src="/Apages/static/img/icon10.png"></image>
			<view>{{newsLists.collection_num}}</view>
		</view>
		<view>
			<image v-if='!newsLists.like' src="/Apages/static/img/icon11.png"></image>
			<image v-else src="/Apages/static/img/icon12.png"></image>
			<view>{{newsLists.like_num}}</view>
		</view>
	</view>
	<view class="commentBox">
		<view class="title">評(píng)論（{{newsCommentListArr.length}}）</view>
		<view class="comment" v-for="(item,index) in newsCommentListArr" :key="index">
			<view class="name">{{item.user.nickname}}：</view>
			<view class="txt">{{item.content}}</view>
		</view>
	</view>
	<view class="inputBox">
		<view class="input">
			<u--input
				placeholder="單行輸入"
				prefixIcon="edit-pen"
				prefixIconStyle="font-size: 22px;color: #909399"
			></u--input>
		</view>
		<view class="buttom">發(fā)送</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				isShare:true,
				newsLists:{},
				newsCommentListArr:[],
				page:1
			}
		},
		onReachBottom(){//do sth
			console.log('觸底了哦')
			this.onNewsCommentList(this.newsLists.id)
		},
		onLoad(p) {
			this.onNewsList(p.id);
			this.onNewsCommentList(p.id)
		},
		methods:{
			onNewsList(id){
				this.$http(this.$api.newsDetail,{id:id,api_token:uni.getStorageSync('token')}).then(res=>{
					console.log(res,'咨詢?cè)斍?);
					this.newsLists = res.data.data;
				})
			},
			onNewsCommentList(id){
				this.$http(this.$api.newsCommentList,{news_id:id,page:this.page++,pageSize:10}).then(res=>{
					console.log(res);
					this.newsCommentListArr = [...this.newsCommentListArr,...res.data.data];
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.fengmian{
		width: 100%;
		height: 400rpx;
	}
	.center{
		// height: 224rpx;
		font-size: 28rpx;
		font-weight: 400;
		text-align: left;
		color: #000000;
		line-height: 46rpx;
		padding: 24rpx;
	}
	.pinglun{
		width: 702rpx;
		padding: 24rpx 0;
		border-top: 2rpx solid #f2f2f2;
		display: flex;
		justify-content: space-around;
		align-items: center;
		view{
			display: flex;
			justify-content: center;
			align-items: center;
			image{
				width: 32rpx;
				height: 32rpx;
				margin-right: 8rpx;
			}
			view{
				font-size: 24rpx;
				font-weight: 400;
				color: #999999;
			}
		}
	}
	.commentBox{
		width: 702rpx;
		margin: 0 auto;
		padding-bottom: 100rpx;
		.title{
			font-size: 30rpx;
			font-weight: 500;
			color: #333333;
		}
		.comment{
			width: 100%;
			display: flex;
			justify-content: flex-start;
			align-items: flex-start;
			padding: 24rpx 0;
			border-bottom: 2rpx solid #f2f2f2;
			.name{
				width: 112rpx;
				height: 40rpx;
				font-size: 28rpx;
				font-weight: 400;
				text-align: left;
				color: #333333;
				line-height: 42rpx;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
			}
			.txt{
				width: 590rpx;
				font-size: 28rpx;
				font-weight: 400;
				text-align: left;
				color: #333333;
				line-height: 42rpx;
			}
		}
	}
	.inputBox{
		width: 100%;
		height: 92rpx;
		background: #f0f0f0;
		display: flex;
		justify-content: center;
		align-items: center;
		position: fixed;
		bottom: 0;
		left: 0;
		.input{
			width: 574rpx;
			height: 60rpx;
			background: #ffffff;
			border-radius: 30rpx;
		}
		::v-deep .u-border{
			border-color: #f0f0f0 !important;
		}
		.buttom{
			width: 112rpx;
			height: 60rpx;
			background: linear-gradient(180deg,#4170bc, #0b5099);
			border-radius: 30rpx;
			font-size: 28rpx;
			font-weight: 400;
			text-align: center;
			color: #ffffff;
			letter-spacing: 0.84rpx;
			line-height: 60rpx;
			margin-left: 16rpx;
		}
	}
</style>