<template>
<view class="details">
	<view class="status_bar"><!-- 这里是状态栏 --></view>
	<u-navbar height="50" :autoBack="true">
		<view
			class="u-nav-slot"
			slot="left"
		>
			<u-icon
				name="arrow-left"
				size="19"
			></u-icon>
			<view class="title">
				详情
			</view>
		</view>
	</u-navbar>
	<view class="detailContent">
		<view class="detailTitle">
			{{titleInfo.title}}
		</view>
		<view class="tools">
			<view class="time">
				{{titleInfo.updatetime}}
			</view>
			<view class="toolItem">
				<view class="" @click="addCollect">
					<image src="/static/m1.png" mode="widthFix" v-if="!isCollect"></image>
					<image src="/static/collected.png" mode="widthFix" v-else></image>
					<text>收藏</text>
				</view>
				<view class="" @click="addShare">
					<image src="/static/m3.png" mode="widthFix"></image>
					<text>分享</text>
				</view>
			</view>
		</view>
		<u-parse :content="titleInfo.content"></u-parse>
	</view>
	<view class="bottomContent" v-if="showBottom">
		<view class="left">
			<image src="../../static/lxwx.png" mode="widthFix"></image>
			<text>APP下载</text>
		</view>
		<view class="btn" @click="downloadAppHandle">
			下载
		</view>
	</view>
	<u-toast ref="uToast"></u-toast>
</view>
</template>

<script>
	import {downloadApp,articleDetails,addCollect,addShare} from '@/common/api.js'
	export default {
		data() {
			return {
				showBottom:false,
				titleInfo:{},
				id:null,
				isCollect:false
			};
		},
		onLoad(option) {
			this.id = option.id
			this.$store.commit('shareHandle',this.$mp.page.route+'?id='+this.$mp.page.options.id)
			this.articleDetails()
			// H5:
			// #ifndef APP-PLUS
			   this.showBottom = true
			// #endif
		},
		methods:{
			downloadAppHandle(){
				downloadApp().then(res=>{
					let u = navigator.userAgent
					let isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; // Android
					let isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); // iOS
					if(isAndroid){
						window.location.href = res.android
					}
					if(isIOS){
						window.location.href = res.ios
					}
					console.log(res)
				})
			},
			addCollect(){
				let params={
					wx_article_id:this.titleInfo.id,
					wx_category_id:this.titleInfo.wx_category_id
				}
				uni.$u.http.post('http://lxwx.njrenzhou.cn/api/wx_article_collect/add',
				params,
				{
					header: {
						'Content-Type': 'application/x-www-form-urlencoded',
						'token':uni.getStorageSync('userInfo').token
					},
				}).then((res) => {
					this.$refs.uToast.show({
						message:"收藏成功"
					})
					this.isCollect = true
				}).catch((res) =>{
					
				})
				
			},
			addShare(){
				if(!uni.getStorageSync('userInfo')){
					uni.showToast({
						title:'请登录后操作',
						icon:'none'
					});
					uni.navigateTo({
						url:"/pages/login/login"
					})
					return;
				}
				
				let  routes = this.$mp.page.route
				let that = this;
				// ifdef APP
				uni.share({
					provider:'weixin',//分享服务提供商（即weixin|qq|sinaweibo）
					type:0,//图文
					scene:'WXSceneSession',//provider 为 weixin 时必选 WXSceneSession分享到聊天界面，WXSceneTimeline分享到朋友圈，WXSceneFavorite分享到微信收藏
					title:this.titleInfo.title,//分享内容的标题
					summary:this.titleInfo.title,//分享内容的摘要
					href:`http://lxwx.h5.njrenzhou.cn/#/${routes}?id=${this.titleInfo.wx_category_id}`,//跳转链接，type 为 0 时必选
					imageUrl:`http://lxwx.njrenzhou.cn${this.titleInfo.listimage}`,//图片地址，type 为 0、2、5 时必选
					success(res) {
						//成功返回的参数
						let params={
							wx_article_id:that.titleInfo.id,
							wx_category_id:that.titleInfo.wx_category_id
						}
						uni.$u.http.post('http://lxwx.njrenzhou.cn/api/wx_article_share/add',
						params,
						{
							header: {
								'Content-Type': 'application/x-www-form-urlencoded',
								'token':uni.getStorageSync('userInfo').token
							},
						}).then((res) => {
							that.$store.commit('shareHandle',this.$mp.page.route+'?id='+this.$mp.page.options.id)
							that.$refs.uToast.show({
								message:"分享成功"
							})
						}).catch((res) =>{
							
						})
					},
					fail(err) {
						//失败返回的参数
						console.log(err);
					}
				})
				// endif
				// let params={
				// 	wx_article_id:this.titleInfo.id,
				// 	wx_category_id:this.titleInfo.wx_category_id
				// }
				// addShare(params,{ custom: { auth: true }}).then(res=>{
				// 	console.log(res,"iiiii")
				// })
			},
			articleDetails(){
				// let params={ids:this.id}
				// uni.$u.http.post('http://lxwx.njrenzhou.cn/api/wx_article_collect/add',
				// params,
				// {
				// 	header: {
				// 		'Content-Type': 'application/x-www-form-urlencoded',
				// 		'token':uni.getStorageSync('userInfo').token
				// 	},
				// }).then((res) => {
				// 	this.$refs.uToast.show({
				// 		message:"收藏成功"
				// 	})
				// 	this.isCollect = true
				// }).catch((res) =>{
					
				// })
				// {custom: { auth: true }}
				articleDetails({ids:this.id,nav_id:0}).then(res=>{
					this.titleInfo = res;
					if(res.is_collect==0){
						this.isCollect = false
					}else{
						this.isCollect = true;
					}
					this.titleInfo.updatetime = this.getFormatDate(this.titleInfo.updatetime)
				})
			},
			getFormatDate(time) {
			    let d = new Date(time*1000);
			    let Y = d.getFullYear();
			    let M = d.getMonth() + 1; // 月份获取是0-11，所以+1
			    let D = d.getDate();
			    let h = d.getHours();
			    let m = d.getMinutes();
			    let s = d.getSeconds();
				return Y+'-'+M+'-'+D+' '+h+':'+m+':'+s;
			}
		}
	}
</script>

<style lang="scss" scoped>
.details{
	min-height:calc(100vh);
	background-color: #ffffff;
}
.u-nav-slot{
	display: flex;
	align-items: center;
	.title{
		font-size: 36upx;
		color: #222222;
	}
}
.detailContent{
	margin-top:50px;
	margin-bottom:120upx;
	padding:38upx 25upx;
	.detailTitle{
		font-size: 36upx;
		font-weight: bold;
		color: #333333;
		line-height: 54upx;
	}
	.tools{
		display: flex;
		align-items: center;
		margin:27upx 0;
		.time{
			font-size: 24upx;
			font-weight: 500;
			color: #999999;
			flex:1;
		}
		.toolItem{
			flex:1;
			display: flex;
			justify-content: space-around;
			&>view{
				display: flex;
				align-items: center;
			}
			image{
				width:35upx;
				height:auto;
			}
			text{
				font-size: 24upx;
				color: #333333;
				margin-left:13upx;
			}
		}
	}
	
}
.bottomContent{
	height: 100upx;
	background: #FFFFFF;
	border: 1px solid #EAEAEA;
	box-shadow: 0px 4px 13px 0px rgba(17,21,38,0.14);
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 24upx;
	position:fixed;
	bottom:0;
	z-index:9;
	width:calc(100% - 48upx);
	image{
		width: 80upx;
		height: 80upx;
		background: #0076F6;
		border-radius: 20upx;
	}
	text{
		font-size: 30upx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333333;
		margin-left:20upx;
	}
	.left{
		display: flex;
		align-items: center;
	}
	.btn{
		padding:19upx 57upx;
		border-radius: 30upx;
		background: #0076F6;
		// opacity: 0.4;
		text-align: center;
		
		font-size: 24upx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
	}
}
</style>
