<template>
	<!-- 新闻类详情 -->
	<view class="newsDetail">
		<div class="title">{{ detialData.title }}</div>
		<div class="conts">
			<p>{{ detialData.createTime }}</p>
			<img class="stars" src="/static/images/star.png" alt="未收藏" @click="collect('1')" v-if="ifStar == 0" />
			<img class="stars" src="/static/images/star-act.png" alt="收藏" @click="collect('2')" v-if="ifStar == 1" />
		</div>
		<div class="content" v-html="detialData.content"></div>
	</view>
</template>

<script setup name="newsDetail">
import { ref } from 'vue';
import { onLoad, onShareAppMessage } from '@dcloudio/uni-app';
import { articleConfigDetail, knowledgeConfigDetail, articleCollectAdd, articleCollectCancel, knowledgeCollectAdd, knowledgeCollectCancel } from '@/utils/homeApi.js';

const ifStar = ref(0);
const detialData = ref({});
const titleAr = ref('');

// 收藏点击
function collect(type) {
	if (titleAr.value == '科普知识') {
		let params = {
			knowledgeConfigId: detialData.value.id,
			wechatMiniuserId: uni.getStorageSync('userIdXGWXMN')
		};
		if (ifStar.value == 0) {
			knowledgeCollectAdd(params).then((res) => {
				ifStar.value = 1;
			});
		} else {
			knowledgeCollectCancel(params).then((res) => {
				ifStar.value = 0;
			});
		}
	} else {
		let params = {
			articleId: detialData.value.id,
			wechatMiniuserId: uni.getStorageSync('userIdXGWXMN')
		};
		if (ifStar.value == 0) {
			articleCollectAdd(params).then((res) => {
				ifStar.value = 1;
			});
		} else {
			articleCollectCancel(params).then((res) => {
				ifStar.value = 0;
			});
		}
	}
}

// 详情数据
function getDataDetail(id) {
	articleConfigDetail(id, { wechatMiniuserId: uni.getStorageSync('userIdXGWXMN') }).then((res) => {
		let datas = res.data;
		// 兼容h5和小程序给img添加样式
		datas.content = datas.content.replace(/\<img/gi, '<img class="richImgs" style="width:100%;" ');
		detialData.value = datas;
		ifStar.value = datas.collectStatus;
	});
}
function getKnowledgeDetail(id) {
	knowledgeConfigDetail(id, { wechatMiniuserId: uni.getStorageSync('userIdXGWXMN') }).then((res) => {
		let datas = res.data;
		// 兼容h5和小程序给img添加样式
		datas.content = datas.content.replace(/\<img/gi, '<img class="richImgs" style="width:100%;" ');
		detialData.value = datas;
		ifStar.value = datas.collectStatus;
	});
}

// onLoad 接受页面传递的参数
onLoad((option) => {
	//设置页面的标题栏名称
	uni.setNavigationBarTitle({
		title: option.title + '详情'
	});
	titleAr.value = option.title;
	if (option.title == '科普知识') {
		getKnowledgeDetail(option.id);
	} else {
		getDataDetail(option.id);
	}
});
// 转发给朋友
onShareAppMessage((res) => {
	return {
		title: '转发给朋友',
		path: '/pages/news/detail'
	};
});
</script>

<style lang="scss">
.newsDetail {
	padding: 35rpx;
	margin: 20rpx;
	height: 90%;
	background: #fff;
	border-radius: 8rpx;
	overflow: auto;

	.title {
		font-size: 30rpx;
		font-weight: bold;
		text-align: center;
		word-wrap: break-word;
	}

	.conts {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: 10rpx auto;

		.stars {
			width: 30rpx;
			height: 30rpx;
		}
	}

	.content {
		text-indent: 30rpx;
		line-height: 45rpx;
		font-size: 24rpx;
		.richImgs {
			max-width: 100% !important;
		}
	}
}
</style>