<template>
		<view style="padding: 20upx 32upx;">
			<view style="font-size: 35rpx;padding-bottom: 46upx;">{{aricte.article_title}}</view>
			<view style="color: #999;padding-bottom: 46upx;">{{aricte.article_time}}</view>
			<rich-text :nodes="nodes"></rich-text>
			<view v-if="aricte.ad_type!=0 && nodes!='' " class="aricte" :class="isclose?'closeacrile':''">
				<view style="display: flex;justify-content: space-between;padding: 20upx 0;">
					<view>{{aricte.ad_title}}</view>
					<view style="color:#4399FC;" @click="close">x关闭</view>
				</view>
				<view @click="godetail" style="padding: 10upx 0upx;position: relative;">
					<image :src=" pictureUrl + '/' + aricte.ad_image" style="width: 100%;" mode="widthFix"/>
					<view style="color: #fff;position: absolute;bottom: 20upx;left: 20upx;">广告</view>
				</view>
			</view>
		</view>
</template>

<script>
	export default {
		data() {
			return {
				isclose: false,
				pictureUrl: this.pictureUrl,
				article_id: '',
				nodes:'',
				article_thumb:'',
				aricte: {}
		    }
		},
		onLoad(a) {
			this.article_id = a.id;
			this.article_thumb = a.article_thumb;
			let name = a.name;
			uni.setNavigationBarTitle({
			    title: name
			});
			this.getactrile();
		},
		methods: {
			godetail() {
				if(this.aricte.ad_type == 1) {
					let id = this.aricte.goods_id;  // 商品Id
					let store_id = this.aricte.store_id;  // 商品Id
					uni.navigateTo({
						url:`/pages/index/shop?id=${id}&store_id=${store_id}`
					})
				}else if(this.aricte.ad_type == 2) {
				   //商品
				   let id = this.aricte.store_id;  // 商品Id
				   uni.navigateTo({
				         url: `/pages/index/hotel?id=${id}`
				   });
				}
			},
			close() {
				this.isclose = true;
			},
			getactrile() {
				this.request({
					url: '/v1/entry/news_desc',
					method: 'post',
					data: {
						article_id: this.article_id		 
					},
					success: (res) =>　{
						let { data } = res.data;
						this.aricte = data;
						const regex = new RegExp('<img', 'gi');
						data.article_content =data.article_content.replace(regex,`<img class="changeimg"`);
						console.log(data.article_content);
						this.nodes = data.article_content;  // 富文本渲染
					}
				})
			}
		},
	}
</script>

<style>
	.aricte {
		background-color: #EEEEEE;
		padding: 0 33upx 10upx 33upx;
	}
	.closeacrile {
		display: none;
	}
	.changeimg {
		max-width: 100% !important;
		width: 100%;
		height: auto!important;
		padding: 8upx 0;
		display: block;
		text-align: center;
	}
</style>
