<!-- 默认复制 -->

<template>
	<view class="content">
		<view class="c-top">
			<view class="" @click="getback()">
				<uni-icons type="left" size="18"></uni-icons>
			</view>
			<view class="c-title">{{obj.newsTitle}}</view>
			<view class=""></view>
		</view>
		<!-- html -->
		<view class="c-content">
			<!-- <view class="cont-title">

			</view> -->
			<view class="cont-gongs">{{obj.publishUnit}}</view>

				<u-parse :content="obj.newsContent" :tagStyle="style"></u-parse>
				<view class="videobox" v-if="videoList != null ">
					<video :src="baseUrl+ videoList" controls></video>

				</view>
			<view class="cont-time">{{createTime.substring(0,createTime.length - 8)}}</view>
		</view>
		<!-- 评论 -->
		<view class="pinglist">
			<view class="list-top">
				<view class="t-t-t">评论</view>
				<view class="gang"></view>
			</view>
			<view class="view-box" v-for="(item,index) in pinglunlist" :key="index">
				<view class="touxiang">
					<image src="http://www.nuoyunr.com/lananRsc/wwwx.png" mode=""></image>
				</view>
				<view class="vb-right">
					<view class="vb-title">{{item.realName}}</view>
					<view class="vb-nr">{{item.context}}</view>
					<view class="vb-bottom">
						<view class="zuo-hui">{{item.createTime}}</view>
						<view class="s-botm" v-if="user.userId == item.createBy" @click="dialogToggle(item.id)">
							<!-- getdelete(item.id) -->
							<text>删除</text>
						</view>
					</view>
				</view>
			</view>
			<view style="width: 100%; height: 75px;"></view>
		</view>
	<!-- 	<tabBar></tabBar> -->
	<view class="pinginput">

		<view class="left-input">
			<input type="text" placeholder="评论..." v-model="inputvalue">
			<view class="t-right" @click="getfasong()">发送</view>
		</view>
		<view class="right-xuan">
			<!-- 收藏 -->
			<view class="sc-botm" @click="getshoucang()">
				<view class="icon-sc">
					<image src="http://www.nuoyunr.com/lananRsc/detection/sc.png" v-if="shoucang == false"></image>
					<image src="http://www.nuoyunr.com/lananRsc/detection/scx.png" v-if="shoucang == true"></image>
				</view>
				<view class="">{{obj.collectNum}}</view>
			</view>
			<!-- 点赞 -->
			<view class="sc-botm" @click="getdianzan()">
				<view class="icon-sc">
					<image src="http://www.nuoyunr.com/lananRsc/detection/dz.png" v-if="dianzan == false"></image>
					<image src="http://www.nuoyunr.com/lananRsc/detection/dzx.png" v-if="dianzan == true"></image>
				</view>
				<view class="">{{obj.likeNum}}</view>
			</view>
		</view>
	</view>
	<uni-popup ref="alertDialog" type="dialog">
				<uni-popup-dialog :type="msgType" cancelText="关闭" confirmText="同意" title="通知" content="您确认删除吗" @confirm="dialogConfirm()"
					@close="dialogClose"></uni-popup-dialog>
			</uni-popup>
	</view>
</template>

<script>
	import config from '@/config'
	import request from '../../utils/request';

	export default{
		data(){
			return{
				id:'',
				obj:{},
				style:{
					image:'width: 100%;'
				},
				inputvalue:'',
				createTime:'',
				pinglun:false,
				dianzan:false,
				shoucang:false,
				baseUrl:this.$baseUrl,
				pinglunlist:[],
				arrlist:[],
				user:{},
				videoList:null,
				type: 'center',
				msgType: 'success',
				messageText: '这是一条成功提示',

			}
		},

		onLoad(option) {
			this.id = option.id
			this.getlistindex()
		},

		onShow() {
			this.user = uni.getStorageSync('userinfo')
		},
		methods:{

			//dianzan
			async getdianzan(){

				let data = {
					newsId:this.id,
					type:'like',
				}
				let res = await request({
					url:'/appInspection/news/likeOrCollect',
					method: 'post',
					params:data

				})
					this.getlistindex()

			},
			//收藏
			async getshoucang(){

				let data = {
					newsId:this.id,
					type:'collect',
				}
				let res = await request({
					url:'/appInspection/news/likeOrCollect',
					method: 'post',
					params:data

				})
					this.getlistindex()

			},
			async getdelete(id){
					let data ={
						commentId :id,
					}
				let res = await request({
					url:'/appInspection/news/delNewsComment',
					method: 'post',
					params:data
				})
					this.getlistindex()
			},
			//评论
			getpinglun(){
				this.pinglun =! this.pinglun
			},
			getback(){
			uni.navigateBack({
					delta:1,
				})
			},
			async getnew(){
				let data ={
					newsId:this.id,
				}
				let res = await request({
					url:'/appInspection/news/getDetail',
					method: 'get',
					params:data
				})
			},
			async getlistindex(){

				let res = await request({
					url: '/appInspection/news/getDetail?newsId='+this.id,
					method: 'get',
				})
				this.obj = res.data
				this.videoList = res.data.videoUrl
				if(res.data.isLike == '1'){
					this.dianzan = true
				}else{
					this.dianzan = false
				}
				if(res.data.isCollect == '1'){
					this.shoucang = true
				}else{
					this.shoucang = false
				}
				this.createTime = this.obj.createTime
				let resx = await request({
					url:'/appInspection/news/getCommentList?newsId='+this.id,
				})
				this.pinglunlist = resx.rows
				let ress = await request({
					url: '/appInspection/news/addReadNum?newsId='+this.id,
					method: 'post',
				})
			},
			async getfasong(){
				if(!this.inputvalue){
					uni.showToast({
						title:'请输入评论内容',
						icon:'none'
					})
					return
				}
				let data ={
					newsId:this.id,
					context:this.inputvalue,
				}
				let res = await request({
					url: '/appInspection/news/addInspectionNewsComment',
					method: 'post',
					data:data
				})
				this.inputvalue =''
					this.getlistindex()
			},
			dialogToggle(id) {
				this.deleteid = id
				this.$refs.alertDialog.open()
			},
			dialogClose() {
				},
			dialogConfirm() {
			 this.getdelete(this.deleteid)
						},



		}

	}
</script>

<style scoped lang="scss">
	.content{
		width: 100%;
		height: calc(100vh);
		background-color: #F6F6F6;
		box-sizing: border-box;
		// padding-top: 45px;
	}
	.cont-title{
		width: 100%;
		text-align: center;
		font-size: 24px;
		font-weight: bold;
		color: #333333;
		margin-bottom: 5px;
	}
	.cont-gongs{
		text-align: right;
		font-size: 14px;
		font-weight: 400;
		color: #666666;
		margin-bottom: 25px;
	}
	.videobox{
		width: 100%;
		margin: 0 auto;
	}
	.cont-time{
		font-size: 16px;
		font-weight: 400;
		color: #666666;
		margin-bottom: 25px;
	}
	.top-icon{
		margin-bottom: 45px;
	}
	.c-top{
		width: 100%;
		box-sizing: border-box;
		padding: 15px;
		padding-top: 15%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: white;
	}
	.c-title{
		font-size: 18px;
		font-weight: bold
	}
	.c-content{
		width: 100%;
		background-color: white;
		box-sizing: border-box;
		padding: 15px;
	}
	.pinglist{
		width: 100%;
		background-color: white;
		margin-top: 15px;
		box-sizing: border-box;
		padding: 15px;
		border-radius: 16px 16px 0px 0px;
	}
	.pinginput{
		width: 100%;
		// height: 50px;
		background-color: white;
		display: flex;
		position: fixed;
		bottom: 0px;
		z-index: 99;
		box-sizing: border-box;
		padding: 15px;
		padding-bottom: 25px;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.left-input{
		width: 50%;
		height: 35px;
		border-radius: 50px;
		background: #E7E7E7;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 20px;
		font-size: 16px;
	}
	.t-right{
		width: 60px;
		border-left:1px solid #a6a6a6 ;
		font-size: 16px;
		color: #a6a6a6;
		box-sizing: border-box;
		padding-left: 5px;
	}
	.list-top{

	}
	.gang{
		width: 8%;
		height: 4px;
		background: #0D2E8D;
	}
	.view-box{
		border-bottom: 1px solid #D8D8D8;
		display: flex;
		justify-content: space-between;
		margin-top: 10px;
		box-sizing: border-box;
		padding-bottom: 9px;
	}
	.touxiang{
		width: 40px;
		height: 40px;
		background: #D8D8D8;
		border-radius: 50%;
		overflow: hidden;
		image{
			width: 100%;
			height: 100%;
		}
	}
	.vb-right{
		width: 85%;
	}
	.vb-nr{

	}
	.vb-bottom{
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 5px;
	}
	.vb-title{
		font-size: 16px;
		font-weight: 400;
		color: #666666;
	}
	.right-xuan{
		display: flex;
	}
	.sc-botm{
		display: flex;
		align-items: center;
		margin-right: 5px;
	}
	.icon-sc{
		width: 20px;
		height: 20px;
		margin-right: 5px;
		image{
			width: 100%;
			height: 100%;
		}
	}
	.s-botm{
		display: flex;
		align-items: center;
		margin-right: 5px;
		color: crimson;
	}
	.icon-s{
		width: 18px;
		height: 18px;
		margin-right: 5px;
		image{
			width: 100%;
			height: 100%;
		}
	}
	.font-s{
		font-size: 15px;
		line-height: 16px;
	}
	.zuo-hui{
		font-size: 15px;
		font-weight: 400;
		color: #B7B7B7;
	}
</style>