<!-- 公告详情 -->
<template>
	<view class="container">
		<view class="container-title">
			{{ data.title }}
		</view>
		<view class="container-title_info">
			<view class="container-title_info-text">
				{{$Helper.date.toDateString(data.create_time)}}
			</view>
			<!-- <view class="container-title_info-time">
				{{$Helper.date.toDateString(data.create_time)}}
			</view> -->
		</view>
		<rich-text class="container-content" :nodes="data.content">
		</rich-text>
		<!-- <view class="container-tag">
			标签：校园公告
		</view> -->
		<!-- false隐藏来了 -->
		<!-- #ifndef H5  -->
		<view class="container-footer" v-if="false">
			<view class="container-footer-agree_btn" @click="good">
				<tui-icon name="agree" :size="40" unit="rpx" :color="goodColor" class="container-footer-agree_btn-icon">
				</tui-icon>
				<view class="container-footer-agree_btn-text">
					赞
				</view>
			</view>

			<view class="container-footer-share_btn" @tap="btnShare" v-if="!wxshareBtnIsShow">
				<tui-icon name="share" :size="48" unit="rpx" class="container-footer-share_btn-icon"></tui-icon>
				<view class="container-footer-agree_btn-text">
					分享
				</view>
			</view>
			<button open-type="share" class="container-footer-share_btn" v-if="wxshareBtnIsShow">
				<tui-icon name="share" :size="48" unit="rpx" class="container-footer-share_btn-icon"></tui-icon>
				<view class="container-footer-agree_btn-text">
					分享
				</view>
			</button>

		</view>
		<!-- #endif -->
	</view>
</template>

<script>
	import tuiIcon from "@/components/thorui/tui-icon/tui-icon";
	export default {
		data() {
			return {
				data: {},
				rootPath: "",
				wxshareBtnIsShow: false,
				goodColor: "",
				id: "",
			};
		},
		methods: {
			good() {
				this.goodColor = "blue";
			},
			onShareAppMessage() {
				return {
					title: this.data.title,
					path: `/pages/common/detail/broadcastDetail?id=${this.id}`,
				};
			},
			btnShare() {
				uni.share({
					provider: "weixin",
					scene: "WXSceneSession",
					type: 0,
					href: `${this.rootPath}h5/index.html#/pages/common/detail/broadcastDetail?id=${this.id}`,
					title: this.data.title,
					summary: this.data.title,
					success: function(res) {
						console.log("success:" + JSON.stringify(res));
					},
					fail: function(err) {
						console.log("fail:" + JSON.stringify(err));
					},
				});
			},
			async getData(id) {
				this.id = id;
				let res = await getApp().globalData.request.post(
					"common/appinfo/articledetail", {
						id,
					}
				);
				console.log(res);
				this.data = res.data.articledetail;
			},
		},
		onLoad({
			id
		}) {
			this.getData(id);
			this.rootPath = getApp().globalData.request.config("html5Host");
			// #ifdef MP-WEIXIN
			this.wxshareBtnIsShow = true;
			//#endif
		},
		components: {
			tuiIcon,
		},
	};
</script>

<style lang="scss">
	.container {
		padding: 30rpx;
		padding-top: 40rpx;
	}

	.container-title {
		font-size: 40rpx;
		font-weight: bold;
		color: #333333;
	}

	.container-title_info {
		display: flex;
		margin-top: 40rpx;
	}

	.container-title_info-text {
		color: black;
		flex: 1;
		font-size: 28rpx;
	}

	.container-title_info-time {
		color: #999999;
		margin-left: 30rpx;
		font-size: 24rpx;
		flex: 1;
		text-align: right;
		margin-top: 9rpx;
	}

	.container-content {
		margin-top: 30rpx;
	}

	.container-tag {
		color: #cccccc;
		font-size: 28rpx;
	}

	.container-footer {
		display: flex;
		justify-content: space-between;
		margin-top: 50rpx;
	}

	.container-footer-agree_btn {
		border: 1px solid #cccccc;
		border-radius: 45rpx;
		width: 170rpx;
		height: 70rpx;
		line-height: 70rpx;
		display: flex;
		justify-content: center;
		font-size: 28rpx;
	}

	/*#ifdef APP-PLUS || H5 */
	.container-footer-share_btn {
		display: block;
		border: 1px solid #cccccc;
		border-radius: 45rpx;
		width: 200rpx;
		height: 70rpx;
		line-height: 70rpx;
		display: flex;
		justify-content: center;
		font-size: 28rpx;
	}

	/*#endif */

	/*#ifdef MP-WEIXIN */
	.container-footer-share_btn {
		display: block;
		border: 1px solid #cccccc;
		border-radius: 45rpx;
		width: 200rpx;
		height: 70rpx;
		line-height: 70rpx;
		display: flex;
		justify-content: center;
		font-size: 28rpx;
		margin-left: 300rpx;
	}

	/*#endif */

	.container-footer-agree_btn-text {
		margin-left: 20rpx;
	}
</style>