<template>
	<view class="">
		<view class="mainBox">
			<view class="title">{{detail.title}}</view>
			<view class="timenev flexD">
				<view class="time">
					发布时间{{detail.publishtime}}
				</view>
				<image src="../../static/ic_fenxiang.png" mode="" @click="shareModel=true"></image>
			</view>
			<rich-text :nodes="detail.content"></rich-text>
		</view>
		<view class="share" v-if="shareModel" @click="shareModel=false">
			<image src="/static/detailShare.png" mode=""></image>
			<view class="">
				点击这里进行分享
			</view>
		</view>
	</view>
</template>

<script>
	import {
		arc_detail
	} from '@/api/index.js'
	var jweixin = require('jweixin-module');
	console.log(jweixin, "000")
	export default {
		data() {
			return {
				id: "",
				detail: {
					title: "",
					publishtime: "",
					content: "",
				},
				shareModel: false,
				Images: "http://yuanjie.n.broing.cn/assets/img/share_logo.jpg",
				jssdk:{},
			}
		},
		onLoad(options) {
			this.id = options.id
			let title = uni.getStorageSync("deltitle")
			uni.setNavigationBarTitle({
				title: title //这是修改后的导航栏文字
			})
			this.arc_detail()
		},
		onUnload() {
			uni.removeStorageSync("deltitle")
		},
		methods: {
			//详情
			async arc_detail() {
				try {
					const res = await arc_detail(this.id, window.location.href)
					this.detail = res.detail
					this.jssdk = res.jssdk
					this.share()
					console.log('arc_detail', res)
					// 保存数据
				} catch (err) {
					uni.showToast({
						title: err,
						icon: 'none'
					})
					console.log('arc_detail', err)
				}
			},
			share() {
				let that = this;
				jweixin.config({
					debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
					appId: that.jssdk.appId, // 必填，公众号的唯一标识
					timestamp: that.jssdk.timestamp, // 必填，生成签名的时间戳
					nonceStr: that.jssdk.nonceStr, // 必填，生成签名的随机串
					signature: that.jssdk.signature, // 必填，签名
					jsApiList: that.jssdk.jsApiList // 必填，需要使用的JS接口列表
				})
				jweixin.error(function(res) {
					console.log(res, '错误')
				});
				console.log('分享了', that.jssdk.signature);
				jweixin.ready(function() {

					//分享给朋友
					jweixin.onMenuShareAppMessage({
						title: that.detail.title, // 分享标题
						link: window.location.href, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
						desc: "【琉璃藏宝阁】数字藏品流转平台，顺利“琉”转，藏品“璃”手",
						imgUrl: that.Images, // 分享图标
						success: function() {
							// 用户点击了分享后执行的回调函数
							uni.showToast({
								title: '分享成功',
								duration: 2000
							});
						},
						cancel: function(res) {
							console.log('取消分享')
						}
					});
					jweixin.updateAppMessageShareData({
						title: that.detail.title, // 分享标题
						link: window.location.href, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
						desc: "【琉璃藏宝阁】数字藏品流转平台，顺利“琉”转，藏品“璃”手",
						imgUrl: that.Images, // 分享图标
						success: function() {
							console.log('设置分享给朋友成功')
						},
						cancel: function(res) {
							console.log('取消分享')
						}
					});
					//分享到朋友圈
					jweixin.onMenuShareTimeline({
						title: that.detail.title, // 分享标题
						link: window.location.href, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
						desc: "【琉璃藏宝阁】数字藏品流转平台，顺利“琉”转，藏品“璃”手",
						imgUrl: that.Images, // 分享图标
						success: function() {
							// 用户点击了分享后执行的回调函数
							uni.showToast({
								title: '分享成功',
								duration: 2000
							});
						},
						cancel: function(res) {
							console.log('取消分享')
						}
					});
					jweixin.updateTimelineShareData({
						title: that.detail.title, // 分享标题
						link: window.location.href, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
						desc: "【琉璃藏宝阁】数字藏品流转平台，顺利“琉”转，藏品“璃”手",
						imgUrl: that.Images, // 分享图标
						success: function() {
							console.log('设置分享到朋友圈成功')
						},
						cancel: function(res) {
							console.log('取消分享')
						}
					});
				});
			},

		}
	}
</script>

<style lang="less">
	.mainBox {
		padding: 24rpx 31rpx;

		.timenev {
			margin-top: 20rpx;
			color: rgba(179, 179, 179, 1);
			font-size: 24rpx;
			font-weight: 400;
			font-family: "PingFang SC";

			image {
				width: 40rpx;
				height: 40rpx;
			}
		}
	}

	.share {
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, .6);

		image {
			position: fixed;
			right: 80rpx;
			top: 4rpx;
			width: 188rpx;
			height: 262rpx;
		}

		view {
			position: fixed;
			right: 80rpx;
			top: 300rpx;
			color: rgba(255, 255, 255, 1);
			font-size: 36rpx;
			font-weight: 700;
		}
	}
</style>