<template>
	<view class="detail" :style="{'padding-bottom': (info.is_pay == 1 || info.status == 1)?'130rpx':'25rpx'}">
		<view class="hd">
			<view class="a">
				<view class="user">
					<image v-if="info.avatar" :src="baseUrl+info.avatar"></image>
					<image v-else src="https://zhengxin.njrenzhou.cn/static/default.png"></image>
					<view class="info">
						<view class="name">{{info.nickname}}<text :class="info.status==0?'on':''" v-if="info.status !=1">{{info.status_text}}</text></view>
						<view class="timer">{{info.createtime}}</view>
					</view>
				</view>
				<template v-if="userInfo.id != info.user_id">
					<view class="btn" @click="openPage(1)" :class="info.is_guanzhu == 1?'btn-on':''">{{info.is_guanzhu == 0?'+关注':'已关注'}}</view>
				</template>
			</view>
			<view class="b">
				<view class="title">{{info.title}}</view>
				<view class="desc">{{info.content_tag}}</view>
			</view>
		</view>
		<view class="jb" v-if="type == 1">
			<view class="title">基本信息</view>
			<view class="content">
				<view class="p">姓名：{{info.main_realname}}</view>
				<view class="p">身份证号：{{info.main_cardno}}</view>
				<view class="p">手机号码：{{info.main_phone}}</view>
				<view class="p">微信号：{{info.main_wechat}}</view>
				<view class="p">籍贯：{{info.main_jiguan}}</view>
				<view class="p">其他信息：{{info.main_otherinfo}}</view>
			</view>
		</view>
		<view class="bd" :style="{'minHeight': (info.payed == 0 && info.is_pay == 1)?'565rpx':'auto'}">
			<view class="desc">{{info.content}}</view>
			<view class="pic">
				<view class="li" v-for="(a,i) in info.imgList" :key="i" >
					<image @click="previewImage(i)" mode="heightFix" :src="a"></image>
				</view>
				<view class="li" v-for="(a,i) in info.videoList" :key="i" >
					<video :src="a"></video>
				</view>
			</view>
			<view class="zhezhao" v-if="info.payed == 0 && info.is_pay == 1">
				<view class="in">
					<image src="https://zhengxin.njrenzhou.cn/static/pay.png"></image>
					<view class="txt">该内容完成支付后可查看</view>
				</view>
				<view class="blur"></view>
			</view>
		</view>
		<view class="xinxi">
			<view class="title">证人信息</view>
			<view class="info">
				<view class="li" v-for="(a,i) in zhengrenList" :key="i">
					<view class="p">姓名：{{a.realname}}</view>
					<view class="p">身份证号：{{a.cardno}}</view>
					<view class="p">手机号码：{{a.phone}}</view>
					<view class="p">居住地址：{{a.address}}</view>
				</view>
			</view>
		</view>
		<view class="do">
			<view class="fl">
				<image class="img1" src="https://zhengxin.njrenzhou.cn/static/icon-view.png"></image>{{info.readnum}}</view>
			<view class="fl">
				<image class="img2" src="https://zhengxin.njrenzhou.cn/static/dianzan.png"></image>
			{{info.likenum}}</view>
		</view>
		<view class="list" v-if="guanlianList.length>0">
			<view class="title">
				<view class="txt">
					关联推荐
				</view>
				<!-- <view class="more">更多<image src="https://zhengxin.njrenzhou.cn/static/icon-arrow.png"></image></view> -->
			</view>
			<view class="li" v-for="(a,index) in guanlianList" :key="index" @click="openPage(10,a.id)">
				<view class="b">{{index+1}}.{{a.title}}</view>
				<view class="c" :class="a.type_tag=='善'?'':'c-on'">{{a.type_tag}}</view>
			</view>
		</view>
		<view class="list" v-if="pinglunList.length>0">
			<view class="title">
				<view class="txt">评论</view>
			</view>
			<view class="content">
				<view class="lis" v-for="(a,i) in pinglunList" :key="i">
					<view class="a">
						<image v-if="a.avatar" :src="baseUrl+a.avatar"></image>
						<image v-else src="https://zhengxin.njrenzhou.cn/static/default.png"></image>
					</view>
					<view class="b">
						<view class="name">{{a.username}}</view>
						<view class="desc">{{a.content}}</view>
					</view>
					<view class="c">{{a.createtime}}</view>
				</view>
			</view>
		</view>
		<!-- 驳回 -->
		<view class="btns" v-if="info.status == -1">
			<view class="jujue" @click="show = true">驳回原因</view>
			<view class="faqi" @click="openPage(2)">重新发起</view>
		</view>
		<!-- 已支付 -->
		<view class="fd" v-if="info.payed == 1">
			<view class="a">
				<input type="text" v-model="content" placeholder="说点什么..." />
			</view>
			<view class="btn">
				<view @click="openPage(4)" class="txt">发送</view>
				<image v-if="info.is_like == 0" @click="openPage(7)" src="https://zhengxin.njrenzhou.cn/static/dianzan.png"></image>
				<image v-else @click="openPage(8)" src="https://zhengxin.njrenzhou.cn/static/dianzan2.png"></image>
				<image @click="openPage(5)" v-if="info.is_sc == 0" src="https://zhengxin.njrenzhou.cn/static/icon-like.png"></image>
				<image @click="openPage(6)" v-else src="https://zhengxin.njrenzhou.cn/static/icon-like-on.png"></image>
			</view>
		</view>
		<template v-if="info.is_pay == 1">
			<!-- 待支付 -->
			<view class="fd" v-if="info.payed == 0">
				<view class="b">
					实付金额：<text>￥{{info.money}}</text>
				</view>
				<view class="c" @click="openPage(3)">
					立即支付
				</view>
			</view>
		</template>
		<u-popup :show="show" :round="10" mode="center" @close="close" @open="open">
			<view class="wechat">
				<view class="title">驳回原因</view>
				<view class="info">
					<view class="item">驳回时间：<text>{{info.updatetime}}</text></view>
					<view class="item">驳回原因：<text>{{info.reason}}</text></view>
				</view>
				<view class="btn" @click="show = false">我知道了</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				id: "",
				info: {},
				baseUrl: "",
				zhengrenList: [],
				pinglunList: [],
				guanlianList: [],
				userInfo: {},
				type: 2,
				isClick: true,
				content: ""
			};
		},
		onLoad(o) {
			this.id = o.id;
			this.type = o.type;
			this.baseUrl = this.$baseUrl;
			this.userInfo = uni.getStorageSync("userInfo");
			this.getInfo();
		},
		methods: {
			previewImage(index) {
				uni.previewImage({
					current: index,
					urls: this.info.imgList
				})
			},
			//获取评论列表
			async getpinglun() {
				const { code, data } = await this.$api.getpinglun({content_id: this.id, token: uni.getStorageSync("token")})
				if(code == 1){
					this.pinglunList = data;
				}
			},
			//获取关联事件
			async getJoinContentList() {
				const { code, data } = await this.$api.getJoinContentList({offset: 1, limit: 300, id: this.id, token: uni.getStorageSync("token")})
				if(code == 1){
					this.guanlianList = data.rows;
				}
			},
			//获取事件证人接口
			async getZhengrenList() {
				const { code, data } = await this.$api.getzhengren({content_id: this.id, token: uni.getStorageSync("token")})
				if(code == 1){
					this.zhengrenList = data;
				}
			},
			//事件详情
			async getInfo(type) {
				const that = this;
				let { code, data } = await this.$api.getContentdetail({id: this.id, token: uni.getStorageSync("token")})
				if(code == 1){
					if(data.image){
						data.imgs = data.image.split(",");
						let arr = [],arr1=[];
						data.imgs.map(a=>{
							if(a.indexOf(".mp4")!=-1){
								arr.push(that.baseUrl+a)
							}else{
								arr1.push(that.baseUrl+a)
							}
						})
						data.imgList = arr1;
						data.videoList = arr;
					}
					this.info = data;
					if(!type){
						this.getZhengrenList();
						this.getpinglun();
						this.getJoinContentList();
					}
				}
			},
			//收藏、点赞
			async toOperaContent(type,is_del){
				const { code, data, msg } = await this.$api.operaContent({is_del,type, token:uni.getStorageSync("token"),content_id: this.id})
				if(code == 1){
					uni.showToast({
						title: type == 2?(is_del==0?"收藏成功":"取消收藏"):(is_del==0?"点赞成功":"取消点赞")
					})
					setTimeout(()=>{
						this.getInfo(1);
					},2000)
				}else {
					uni.showToast({
						icon: "none",
						title: msg
					})
				}
			},
			//去评论
			async toPinglun() {
				const { code, data, msg } = await this.$api.setpinglun({content: this.content, token:uni.getStorageSync("token"),content_id: this.id})
				if(code == 1){
					uni.showToast({
						title: "提交成功"
					})
					setTimeout(()=>{
						this.getpinglun();
					},2000)
				}else {
					uni.showToast({
						icon: "none",
						title: msg
					})
				}
			},
			//去创建订单
			async toOrder() {
				if(this.isClick == false){
					return ;
				}
				this.isClick = false;
				uni.showLoading({
					title: "支付中"
				})
				const { code, data, msg } = await this.$api.createOrder({type: 1, token:uni.getStorageSync("token"),id: this.id})
				if(code == 1){
					this.toPay(data.money, data.order_no)
				}else {
					uni.showToast({
						icon: "none",
						title: msg
					})
				}
			},
			//去支付
			async toPay(pay_price,orderno) {
				const that = this;
				const { code, data, msg } = await that.$api.beforePay({pay_price, token:uni.getStorageSync("token"),orderno})
				if(code == 1){
					uni.requestPayment({
						timeStamp: data.timeStamp,
						nonceStr: data.nonceStr,
						package: data.package,
						signType: data.signType,
						paySign: data.paySign,
						success(res){
							that.isClick = true;
							uni.showToast({
								title: "支付成功",
								icon: "success"
							})
							setTimeout(()=>{
								that.getInfo(1);
							},2000)
						},
						fail(res){
							that.isClick = true;
							uni.showToast({
								title: "支付失败",
								icon: "error"
							})
							setTimeout(()=>{
								that.getInfo();
							},2000)
						}
					})
				}else {
					uni.showToast({
						icon: "none",
						title: msg
					})
				}
			},
			//重新发起
			async toFaqi() {
				const { code, data, msg } = await this.$api.reapply({token:uni.getStorageSync("token"),id: this.id})
				if(code == 1){
					uni.showToast({
						title: "提交成功"
					})
					setTimeout(()=>{
						this.getInfo(1);
					},2000)
				}else {
					uni.showToast({
						icon: "none",
						title: msg
					})
				}
			},
			//关注
			async toGuanzhu(type) {
				const { code, data, msg } = await this.$api.guanzhu({type,token:uni.getStorageSync("token"),user_id: this.info.user_id})
				if(code == 1){
					uni.showToast({
						title: type == 0?"关注成功":"取消关注"
					})
					setTimeout(()=>{
						this.getInfo(1);
					},2000)
				}else {
					uni.showToast({
						icon: "none",
						title: msg
					})
				}
			},
			async openPage(index,id){
				if(index == 10){
					uni.navigateTo({
						url: "/pages/release/detail?id="+id
					})
					return ;
				}
				if(!uni.getStorageSync("token")){
					uni.navigateTo({
						url: "/pages/login/login"
					})
					return ;
				}
				if(index == 1){
					this.toGuanzhu(this.info.is_guanzhu);
				}else if(index == 2){
					this.toFaqi();
				}else if(index == 3){
					this.toOrder();
				}else if(index == 4){
					if(this.info.status == 0){
						uni.showToast({
							icon: "none",
							title: "当前事件正在审核"
						})
						return ;
					}
					if(!this.content){
						uni.showToast({
							icon: "none",
							title: "评论内容不能为空！"
						})
						return ;
					}
					this.toPinglun();
				}else if(index == 5){
					if(this.info.status == 0){
						uni.showToast({
							icon: "none",
							title: "当前事件正在审核"
						})
						return ;
					}
					this.toOperaContent(2,0)
				}else if(index == 6){
					if(this.info.status == 0){
						uni.showToast({
							icon: "none",
							title: "当前事件正在审核"
						})
						return ;
					}
					this.toOperaContent(2,1)
				}else if(index == 7){
					if(this.info.status == 0){
						uni.showToast({
							icon: "none",
							title: "当前事件正在审核"
						})
						return ;
					}
					this.toOperaContent(1,0)
				}else if(index == 8){
					if(this.info.status == 0){
						uni.showToast({
							icon: "none",
							title: "当前事件正在审核"
						})
						return ;
					}
					this.toOperaContent(1,1)
				}
			}
		}
	}
</script>

<style scoped lang="scss">
.detail{
	padding: 0 25rpx 25rpx;
	overflow: hidden;
	.wechat{
		width: 620rpx;
		height: 510rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		text-align: center;
		.title{
			font-weight: 500;
			font-size: 36rpx;
			color: #333333;
			padding: 30rpx 0;
			border-bottom: 1px solid #EAEAEA;
		}
		.info{
			padding: 30rpx 50rpx;
			overflow: hidden;
			.item{
				text-align: left;
				line-height: 60rpx;
				font-weight: 500;
				font-size: 30rpx;
				color: #999999;
				text{
					color: #333333;
				}
			}
		}
		.btn{
			width: 300rpx;
			height: 90rpx;
			background: #FFFFFF;
			border-radius: 90rpx;
			border: 1px solid #00C6A9;
			text-align: center;
			font-weight: 500;
			font-size: 30rpx;
			color: #00C6A9;
			line-height: 90rpx;
			margin: 0 auto;
			margin-top: 20rpx;
		}
	}
	.hd{
		padding: 25rpx;
		background-color: #FFFFFF;
		margin-top: 20rpx;
		box-shadow: 0px 3rpx 10rpx 0px rgba(9,44,39,0.05);
		border-radius: 20rpx;
		.a{
			display: flex;
			align-items: flex-start;
			justify-content: space-between;
			.btn{
				width: 110rpx;
				line-height: 50rpx;
				background: #FFFFFF;
				border-radius: 10rpx;
				border: 1px solid #00C6A9;
				text-align: center;
				font-weight: 500;
				font-size: 24rpx;
				color: #00C6A9;
				&-on{
					color: #FFFFFF;
					background-color: #00C6A9;
				}
			}
			.user{
				flex: 1;
				display: flex;
				align-items: center;
				image{
					width: 80rpx;
					height: 80rpx;
					border-radius: 50%;
					margin-right: 20rpx;
				}
				.info{
					flex: 1;
					.name{
						font-weight: 500;
						font-size: 30rpx;
						color: #222222;
						display: flex;
						align-items: center;
						text{
							width: 120rpx;
							height: 40rpx;
							margin-left: 20rpx;
							line-height: 40rpx;
							text-align: center;
							background: #D80C0C;
							border-radius: 4rpx;
							border: 1px solid #D80C0C;
							display: block;
							font-weight: 500;
							font-size: 22rpx;
							color: #FFFFFF;
							&.on{
								background-color: #00C6A9;
								border-color: #00C6A9;
							}
						}
					}
					.timer{
						font-weight: 500;
						font-size: 24rpx;
						color: #999999;
						margin-top: 15rpx;
					}
				}
			}
		}
		.b{		
			margin-top: 30rpx;
			overflow: hidden;
			.title{
				font-weight: 500;
				font-size: 30rpx;
				color: #222222;
			}
			.desc{
				font-weight: 500;
				font-size: 24rpx;
				color: #666666;
				margin-top: 20rpx;
			}
		}
		
	}
	.bd{
		background: #FFFFFF;
		box-shadow: 0px 3rpx 10rpx 0px rgba(9,44,39,0.05);
		border-radius: 20rpx;
		padding: 25rpx;
		margin-top: 20rpx;
		font-weight: 500;
		font-size: 24rpx;
		color: #666666;
		line-height: 50rpx;
		position: relative;
		.zhezhao{
			width: 100%;
			height: 100%;
			position: absolute;
			left: 0;
			top: 0;
			background: rgba(255,255,255,0.7);
			z-index: 5;
			.blur{
				width: 100%;
				height: 100%;
				position: absolute;
				left: 0;
				top: 0;
				z-index: 2;
				filter: blur(3px);
			}
			.in{
				width: 580rpx;
				height: 320rpx;
				background: rgba(255,255,255,0.7);
				border-radius: 20rpx;
				border: 1px solid #CCCCCC;
				position: absolute;
				left: 50%;
				top: 50%;
				margin-left: -290rpx;
				margin-top: -160rpx;
				z-index: 1;
				image{
					width: 79rpx;
					height: 69rpx;
					display: block;
					margin: 0 auto;
					margin-top: 95rpx;
				}
				.txt{
					font-weight: 500;
					font-size: 36rpx;
					color: #222222;
					text-align: center;
					margin-top: 30rpx;
				}
			}
			
		}
		.pic{
			width: 110%;
			overflow: hidden;
			.li{
				width: 140rpx;
				height: 293rpx;
				float: left;
				margin-right: 20rpx;
				margin-top: 20rpx;
				overflow: hidden;
				image, video{
					width: 100%;
					height: 100%;
				}
			}
		}
	}
	.jb{
		width: 100%;
		min-height: 250rpx;
		background: #E4F6F3;
		box-shadow: 0px 3rpx 10rpx 0px rgba(9,44,39,0.05);
		border-radius: 20rpx;
		padding: 25rpx;
		box-sizing: border-box;
		margin-top: 20rpx;
		.title{
			font-weight: 500;
			font-size: 30rpx;
			color: #222222;
		}
		.content{
			margin-top: 20rpx;
			.p{
				width: 50%;
				float: left;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
				font-weight: 500;
				font-size: 24rpx;
				color: #666666;
				line-height: 50rpx;
			}
		}
	}
	.do{
		display: flex;
		align-items: center;
		margin-top: 20rpx;
		.fl{
			width: 130rpx;
			display: flex;
			align-items: center;
			font-weight: 500;
			font-size: 24rpx;
			color: #999999;
			.img1{
				width: 30rpx;
				height: 20rpx;
				margin-right: 10rpx;
				margin-top: 5rpx;
			}
			.img2{
				width: 24rpx;
				height: 24rpx;
				margin-right: 10rpx;
			}
			&-on{
				color: #00C6A9;
			}
		}
	}
	.xinxi{
		margin-top: 20rpx;
		width: 100%;
		background: #FFFFFF;
		box-shadow: 0px 3rpx 10rpx 0px rgba(9,44,39,0.05);
		border-radius: 20rpx;
		padding: 25rpx;
		box-sizing: border-box;
		.title{
			font-weight: 500;
			font-size: 30rpx;
			color: #222222;
		}
		.info{
			.li{
				padding: 25rpx 0;
				overflow: hidden;
				border-top: 1px solid #EAEAEA;
				&:first-child{
					border-top-color: #FFFFFF;
				}
				.p{
					width: 45%;
					float: left;
					font-weight: 500;
					font-size: 22rpx;
					color: #666666;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
					line-height: 45rpx;
					&:nth-child(2n){
						width: 55%;
					}
				}
			}
		}
	}
	.list{
		box-sizing: border-box;
		margin-top: 20rpx;
		.li{
			min-height: 100rpx;
			background: #FFFFFF;
			box-shadow: 0px 3rpx 10rpx 0px rgba(9,44,39,0.05);
			border-radius: 20rpx;
			padding: 20rpx 30rpx;
			box-sizing: border-box;
			margin-top: 20rpx;
			position: relative;
			overflow: hidden;
			display: flex;
			align-items: center;
			flex-wrap: wrap;
			.a{
				width: 100%;
				font-weight: 500;
				font-size: 28rpx;
				color: #666666;
				line-height: 50rpx;
			}
			.c{
				width: 80rpx;
				line-height: 56rpx;
				background: #00C6A9;
				border-radius: 0px 20rpx 0px 20rpx;
				font-weight: 400;
				font-size: 32rpx;
				text-align: center;
				color: #FFFFFF;
				position: absolute;
				right: 0;
				top: 0;
				z-index: 2;
				&-on{
					background: #333333;
				}
			}
		}
		.title{
			font-weight: 500;
			font-size: 30rpx;
			color: #222222;
			position: relative;
			display: flex;
			align-items: center;
			justify-content: space-between;
			&::after{
				content: "";
				width: 12rpx;
				height: 30rpx;
				background: #00C6A9;
				border-radius: 6rpx;
				position: absolute;
				left: -25rpx;
				top: 8rpx;
				z-index: 2;
			}
			.more{
				display: flex;
				align-items: center;
				float: right;
				font-weight: 500;
				font-size: 24rpx;
				color: #999999;
				image{
					width: 30rpx;
					height: 30rpx;
					margin-left: 10rpx;
				}
			}
		}
		.content{
			width: 100%;
			background: #FFFFFF;
			box-shadow: 0px 3rpx 10rpx 0px rgba(9,44,39,0.05);
			border-radius: 20rpx;
			margin-top: 20rpx;
			padding: 0 25rpx;
			box-sizing: border-box;
			.lis{
				padding: 30rpx 0;
				border-top: 1px solid #EAEAEA;
				&:first-child{
					border-color: #FFFFFF;
				}
				display: flex;
				align-items: flex-start;
				.a{
					image{
						width: 56rpx;
						height: 56rpx;
						border-radius: 50%;
						margin-right: 15rpx;
					}
				}
				.b{
					flex: 1;
					.title{
						font-weight: 500;
						font-size: 30rpx;
						color: #222222;
					}
					.desc{
						font-weight: 500;
						font-size: 26rpx;
						color: #666666;
						margin-top: 10rpx;
					}
				}
				.c{
					font-weight: 500;
					font-size: 24rpx;
					color: #999999;
				}
			}
		}
	}
	.fd{
		width: 100%;
		position: fixed;
		height: 100rpx;
		left: 0;
		bottom: 0;
		z-index: 22;
		background-color: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 25rpx;
		box-sizing: border-box;
		.b{
			flex: 1;
			font-weight: 500;
			font-size: 30rpx;
			color: #333333;
			text{
				color: #ED0F0F;
			}
		}
		.c{
			width: 260rpx;
			height: 68rpx;
			line-height: 68rpx;
			background: #00C6A9;
			border-radius: 68rpx;
			font-weight: 500;
			font-size: 28rpx;
			text-align: center;
			color: #FFFFFF;
		}
		.a{
			flex: 1;
			font-weight: 500;
			border-radius: 10rpx;
			margin-right: 25rpx;
			input{
				width: 100%;
				padding: 0 20rpx;
				line-height: 68rpx;
				height: 68rpx;
				background-color: #F2F4F5;
				font-size: 26rpx;
				color: #212121;
				box-sizing: border-box;
			}
		}
		.btn{
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 30rpx;
			color: #00C6A9;
			image{
				width: 45rpx;
				height: 45rpx;
				margin-left: 25rpx;
			}
		}
	}
	.btns{
		margin-top: 50rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		.jujue{
			width: 322rpx;
			height: 92rpx;
			border-radius: 92rpx;
			border: 1px solid #00C6A9;
			text-align: center;
			line-height: 92rpx;
			font-weight: 500;
			font-size: 28rpx;
			color: #00C6A9;
		}
		.faqi{
			width: 322rpx;
			height: 92rpx;
			background: #00C6A9;
			border-radius: 92rpx;
			border: 1px solid #00C6A9;
			text-align: center;
			line-height: 92rpx;
			font-weight: 500;
			font-size: 28rpx;
			color: #FFFFFF;
		}
	}
}
</style>
