<template>
	<view class="centent" :style="{ height: height + 'px' }">
		<back :info="info"></back>
		<view class="main-top">
			<image  v-if="xllist.channel_id==75" :src="xllist.midPic!=''? $geturl(xllist.midPic):$getimg('noimg.png')" mode="" class="top-pos1"></image>
			<image  v-if="xllist.channel_id==85" :src="$geturl(xllist.midPic)" mode="" class="top-pos1"></image>
			<image  v-if="xllist.channel_id==93" :src="$geturl(xllist.midPic)" mode="" class="top-pos1"></image>
		</view>
		<view class="main">
			<view class="main-top1">
				<view class="top1-sdf">
					{{ xllist.title }}
				</view>
			</view>
			<view class="xqtimeAll">
				<view class="xqtimeleft">
					<text class="sjsj">{{ xllist.pubDate }}</text>
				</view>
				<view class="xqtimeright">
					<text class="sjsj">{{ xllist.upsNum }}</text>
				</view>
			</view>
			<view class="main-top2">
				<view class="top2-sdf" v-html="xllist.content">
				</view>
			</view>
			<view class="dzys active" v-if="!candz">
				<image :src="$getimg('icon-dzxz.png')" class="imgs"></image>
				<text  class="text active">{{ xllist.upsNum }}</text>
			</view>
			<view class="dzys" v-if="candz" @click="dzsclick">
				<image  :src="$getimg('icon-dianzhan.png')" class="imgs"></image>
				<text  class="text">{{ xllist.upsNum }}</text>
			</view>
		</view>
	</view>
</template>

<script>
	import back from '@/components/html/back.vue';
	var web = require('@/components/utils/request.js');
	export default {
		components: {
			back
		},
		data() {
			return {
				info: {
					 color: true,num:false
				},
				id: 0,
				xllist: {},
				height: 800,
				candz:true,	//是否可以点赞
				dzarr:[],	//点赞缓存列表
			}
		},
		onLoad(option) {
			var that = this;
			uni.getSystemInfo({
				//设置屏幕背景
				success(res) {
					that.height = res.windowHeight - 40;
				}
			});
			this.id = option.id;
			var pages = getCurrentPages();
			var page = pages[pages.length - 1].route;
			// this.share.path='/'+page+'?id='+this.id;
			// this.shareline.query={id:this.id}
			this.getdatas();
			try {
			    let tmpstr = uni.getStorageSync('dianzan');	//获取缓存中的点赞列表
				if(tmpstr){
					this.dzarr = tmpstr.split(',');
				}
				if(this.dzarr.indexOf(this.id) > -1){	//判断是否点赞过
					this.candz = false;	//点赞过则不能点
				}
			} catch (e) {
				this.candz = true;
			}
		},
		onPageScroll(e) {
			if(e.scrollTop>50&&!this.info.num){
				this.info.num=true;
			}
			if(e.scrollTop<50&&this.info.num){
				this.info.num=false;
			}
		},
		methods: {
			getdatas() {
				//获取数据
				var para = {
					id: this.id
				};
				var url = '/newsdetail.jspx';
				var that = this;
				web.httpPost(that, url, para, function(res) {
					if (res.data.status == 200) {
						var tmp = res.data;
						tmp.content = tmp.content.replace(/src="/gi, 'src="https://cs.tour-ma.com/');
		
						tmp.content = tmp.content.replace(/<img[^>]*>/gi, function(match, capture) {
							return match.replace(/style\s*?=\s*?([‘"])[\s\S]*?\1/gi, 'style="max-width:100%;height:auto;width:100%;"'); // 替换style
						});
						tmp.content = tmp.content.replace(/<img[^>]*>/gi, function(match, capture) {
							return match.replace(/<img /gi, '<img style="max-width:100%;height:auto;width:100%;"'); // 替换style
						});
		
						that.xllist = tmp;
						console.log(that.xllist.content);
					}
				});
			},
			dzsclick() {
				//点赞缓存处理
				try {
					
					if(this.dzarr.indexOf(this.id) > -1){
						this.candz = false;
					}else{
						this.dzarr.push(this.id);
						uni.setStorageSync('dianzan',this.dzarr.toString());				//加到缓存数组里
						this.candz = false;				//改为不能点
					}
				} catch (e) {
					this.candz = true;
				}
				var url = '/content_up.jspx?contentId=' + this.id;
				var para = {};
				var that = this;
				web.httpGejqr(that, url, para, function(res) {
					uni.showToast({
						title: '点赞成功！'
					});
					that.getdatas();
				});
			}
		}
	}
</script>

<style lang="scss">
	$url:'https://cs.tour-ma.com/r/cms/www/m/changshu/';
	page {
		width: 100%;
		height: 100%;
		background: #FFFFFF;
	}

	.main-top {
		width: 750rpx;
		// height: 100%;
		position: relative;

		.top-pos {
			width: 100%;
			height: 240rpx;	
		}
		.top-pos1 {
			width: 100%;
			height: 540rpx;
		}

	}

	.main {
		width: 750rpx;
		height: 100%;
		background: #FFFFFF;

		.main-top1 {
			width: 100%;
			height: auto;
			margin: 30rpx auto 0rpx auto;
			text-align: center;
			.top1-sdf {
				font-size: 40rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #333333;
				line-height: 1.6;
				margin: 0rpx auto;
				width: 80%;
			}
		}

		.main-top2 {
			width: 100%;
			height: auto;
			margin: 30rpx 0rpx 0 0rpx;

			.top2-sdf {
				width: 90%;
				font-size: 28rpx;
				font-family: PingFang SC;
				// font-weight: 500;
				color: #666666;
				line-height: 1.8;
				margin: 0rpx auto;
			}
		}
		.main-top3{
			width: 100%;
			height: auto;
			margin: 30rpx 0rpx 0 0rpx;
			font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #666666;
				line-height: 48rpx;
			.top3-sdf{
				margin-left: 30rpx;
			}
			.sdf-count{
				margin: 0 30rpx 0 40rpx;
			}
			.top3-sdf1{
				margin-left: 30rpx;
			}
			.sdf-count1{
				margin: 0 30rpx 0 40rpx;
			}
		}
	}
	.xqtimeAll {
		width: 90%;
		margin: 40upx auto;
		color: #b7987c;
		font-size: 24upx;
		overflow: hidden;
		.sjsj {
			vertical-align: middle;
			color: #666666;
		}
		.xqtimeleft {
			float: left;
			.sjsj{
				&::before {
					content: '';
					display: inline-block;
					width: 28upx;
					height: 28upx;
					background: url($url+'shijian.png') no-repeat;
					background-size: 100% auto;
					margin-right: 10upx;
					margin-top: -5upx;
					vertical-align: middle;
				}
			}
		}
		.xqtimeright {
			float: right;
			.sjsj{
				&::before {
					content: '';
					display: inline-block;
					width: 28upx;
					height: 28upx;
					background: url($url+'icon-dianzhan.png') no-repeat;
					background-size: 100% auto;
					margin-right: 10upx;
					margin-top: -5upx;
					vertical-align: middle;
				}
			}
		}
			
	}
	.dzys{
		width: 168upx;
		height: 168upx;
		position: absolute;
		left: 50%;
		border-radius: 50%;
		margin: 20upx 0upx 100upx -94upx;
		border: 1rpx solid #666666;
		background-size: 100% auto;
		.imgs {
			width: 60upx;
			height: 60upx;
			margin: 22% auto 2%;
			display: block;
			opacity: 0.7;
		}
		.text {
			display: block;
			text-align: center;
			font-size: 32rpx;
			color: #666666;
		}
	}
	.dzys.active{
		border: 1rpx solid #ff3335;
		.imgs {
			opacity: 1;
		}
		.text{
			color: #ff3335;
		}
	}
</style>
