<template>
	<view class="content">
		<!-- <view class="bgtoptxt" @click="$getpage('/pages/index/foodList')">查看全部</view> -->
		<view class="bgtop" v-if="xllist.midPic!=''" :style="{background: 'url('+$geturl(xllist.midPic)+') no-repeat'}"></view>
		<!-- <view class="bgtop" v-if="xllist.midPic==''" :style="{background: 'url('+getImg3('960noimg.png')+') no-repeat'}"></view> -->
		<image v-if="xllist.channel_id==117||xllist.channel_id==116" @click="toOther()" class="yudingimg" :src="$getimg('lijigoumai.png')" mode="aspectFill"></image>
		<view class="bgboxs">
			<view class="xwtitle">
				<view class="tit">
					<view class="icon">
						<image v-if="xllist.channel_id==92" :src="$getimg('wf-x-ms-icon.png')" mode=""></image>  <!-- 美食 -->
						<image v-if="xllist.channel_id==121" :src="$getimg('wf-x-tc-icon.png')" mode=""></image>  <!-- 特产 -->
						<image v-if="xllist.channel_id==76" :src="$getimg('icon-yyyc.png')" mode=""></image>  <!-- 非遗 -->
						<image v-if="xllist.channel_id==116" :src="$getimg('wf-x-wc-icon.png')" mode=""></image>  <!-- 文创 -->
					</view>
					<view class="titwz">{{xllist.title }}</view>
				</view>
				<!-- <view class="xqtimeright" style="right: 150rpx;display: flex;align-items: center;">
					<image :src="$getimg('icon-sc.png')" mode="" class="xwdzimg" style="margin-right: 10rpx;"></image>
					{{xllist.collectCount}}
				</view> -->
				<view class="xqtimeright">
					<text class="sjsj">{{xllist.upsNum}}</text>
				</view>
			</view>
			<view class="xwnr">
				<view class="xwnrdiv" v-html="xllist.content"></view>
			</view>
			<view class="xwdzAllfotter">
				<view :class="['xwdzAll',!candz?'active':'']" @click="dzsclick">
					<image :src="!candz?$getimg('icon-dzxz.png'):$getimg('icon-dianzhan.png')" mode="" class="xwdzimg"></image>
					<view :class="['xwdzsl',!candz?'active':'']">{{ xllist.upsNum}}</view>
				</view>
				<!-- <view :class="['xwdzAll',xllist.isCollect?'active':'']" style="margin-left: 20rpx;" @click="soucan">
					<image :src="xllist.isCollect?$getimg('icon-scxz.png'):$getimg('icon-sc.png')" mode="" class="xwdzimg"></image>
					<view :class="['xwdzsl',xllist.isCollect?'active':'']">{{ xllist.collectCount}}</view>
				</view> -->
			</view>
		</view>
		<pingjia :info="pjinfo"></pingjia>
	</view>
</template>

<script>
var web = require('@/components/utils/request.js');
import pingjia from '@/components/utils/zixunpj.vue';
export default {
	components:{pingjia},
	data() {
		return {
			id: 0,
			xllist: {},
			candz:true,	//是否可以点赞
			dzarr:[],	//点赞缓存列表
			pjinfo: {
				id: ''
			},
		};
	},
	onLoad(option) {
		this.id = option.id;
		this.pjinfo.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;
		}
	},
	onReady() {},
	onShareAppMessage() {},
	methods: {
		
		getImg(url) {
			return 'https://cs.tour-ma.com' + url;
		},
		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;
					if(tmp.content!=undefined){
						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;
				}
			});
		},
		soucan(id){
			if(this.xllist.isCollect){
				var type=2;
			}else{
				var type=1;
			}
			var url='/content/add_collections.jspx';
			var para={
				contentId:this.xllist.id,
				type:type//1-收藏, 2-取消收藏
			}
			var that=this;
			web.httpPost(that,url,para,function(res){
				that.getdatas();
			})
		},
		dzsclick() {
			if(!this.candz){return}
			//点赞缓存处理
			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();
			});
		},
		toOther(){
			uni.navigateToMiniProgram({
				appId:'wx8ece732cc3a87e0f',
				path:'pages/index/index',
				envVersion:'release',
				extraData: {
				},
				success(res) {
					console.log("chenggong");
				},
				fail(e){
					console.log(e);
				}
			})
		}
	}
};
</script>

<style lang="scss">
	$url:'https://cs.tour-ma.com/r/cms/www/m/changshu/';
	page {
	    background: #ffffff;
	}
.content {
	width: 750rpx;
	// padding-top: 30upx;
	overflow-x: hidden;
	.bgtoptxt{
		font-size: 26upx;
		font-weight: 500;
		color: #FFFFFF;
		background: linear-gradient(0deg, #3269F7 0%, #4A9AF9 100%);
		border-radius: 26upx;
		width: 160upx;
		height: 56upx;
		line-height: 56upx;
		text-align: center;
		margin: 0upx 0 30upx 30upx;
	}
	.bgtop{
		width: 100%;
		height: 460upx;
		background-size: 100% 100% !important;
	}
	.bgboxs{
		width: 100%;
		margin: -40rpx auto 0;
		background: #fff;
		border-radius: 30rpx 30rpx 0rpx 0rpx;
		.xwtitle {
			font-size: 40upx;
			font-weight: bold;
			color: #333333;
			display: flex;
			align-items: center;
			padding: 50rpx 20rpx 0;
			position: relative;
			.tit{
				display: flex;
				align-items: center;
			}
			.icon{
				width: 62upx;
				height: 56upx;
				margin-right: 10rpx;
				image{
					display: block;
					width: 100%;
					height: 100%;
				}
			}
		}
		.xqtimeright {
		  font-size: 24rpx;
		  position: absolute;
		  right: 50rpx;
		  image{
			  width: 28rpx;
			  height: 28rpx;
		  }
		}
		.xqtimeright .sjsj::before {
		  content: '';
		  display: inline-block;
		  width: 28rpx;
		  height: 28rpx;
		  background: url( $url+"icon-dianzhan.png") no-repeat;
		  background-size: 100% auto;
		  margin-right: 10rpx;
		  margin-top: -9rpx;
		  vertical-align: middle;
		}
		.xwnr {
			font-size: 24upx;
			font-weight: 500;
			color: #666;
			width: 90%;
			margin: 30upx auto 0 auto;
			line-height: 1.6;
			.xwnrdiv {
				margin: 0rpx 0rpx 55rpx 0rpx;
				line-height: 2;
			}
		}
		.xwdzAllfotter {
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: center;
			margin-bottom: 40rpx;
			.xwdzAll {
				overflow: hidden;
				border: 1rpx solid #d6d6d6;
				border-radius: 35rpx;
				display: flex;
				flex-direction: row;
				align-items: center;
				width: 155rpx;
				justify-content: center;
				height: 70rpx;
				.xwdzimg {
					width: 32rpx;
					height: 32rpx;
					float: left;
					margin-right: 10rpx;
				}
				.xwdzsl {
					font-size: 28rpx;
					font-family: Microsoft YaHei;
					font-weight: bold;
					color: #111111;
					margin: 0rpx 0rpx 0rpx 18rpx;
					float: left;
					&.active {
						color: #ff3335;
					}
				}
				&.active{
					border: 1rpx solid #ff3334;
				}
			}
		}
	}
	.yudingimg{
		width: 110rpx;
		height: 110rpx;
		position: fixed;
		top: 278rpx;
		right: 50rpx;
		z-index: 999;
	}
}

</style>
