<template>
	<view class="content">
		<view class="title">
			{{articleData.title}}
		</view>
		<view class="see">
			<view class="seeTips" v-for="(item, index) in articleData.categories" :key="index">
				{{item.title}}
			</view>
			<view class="seeTime">
				{{articleData.created_at}}
			</view>
			<view class="seeName">
				<image src="@/static/imgs/collect.png" mode="widthFix"></image><text>{{articleData.clicks}}</text>
			</view>
		</view>
		<view class="brief" v-if="articleData.sub_title">
			<image src="@/static/imgs/detailsImg.png"  mode="widthFix"></image>{{articleData.sub_title}}
		</view>
		<view class="subject">
			<rich-text :nodes="articleContent"></rich-text>
		</view>
		<view class="collect">
			<view class="collect-btn" :class="{active : articleData.isFavorite}" @click="favoriteClick">
				<image :src="articleData.isFavorite ? '/static/imgs/collect_active.png' : '/static/imgs/collect.png'" mode="widthFix"></image>
				<text>{{articleData.isFavorite ? '已收藏' : '收藏'}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	import { articleBrief, collect } from '@/apis/interfaces/index'
	export default {
		data() {
			return {
				articleData   : '',  // 文章详情
				articleContent: '',  // 文章内容
			}
		},
		onShow() {
			// 获取文章列详情
			this.articleInfo();
		},
		methods: {
			// 文章列详情
			articleInfo(page) {
			    articleBrief(this.$Route.query.id).then(res => {
					this.articleData   = res
					this.articleContent= res.content.replace(/\<img/gi, '<img style="max-width:100%;height:auto;display:block;"')
			    }).catch(err => {
					uni.showToast({
						title: err.message,
						icon: "none"
					})
				})
			},
			
			// 收藏
			favoriteClick() {
				collect(this.$Route.query.id).then(res => {
					// 获取文章列详情
					this.articleInfo();
				}).catch(err => {
					uni.showToast({
						title: err.message,
						icon: "none"
					})
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		padding: $padding;
		box-sizing: border-box;
	}
	
	.title {
		font-size: $title-size + 8;
		line-height: 58rpx;
	}
	
	.see {
		margin: $margin 0 $margin + 10;
		display: flex;
		font-size: $title-size-sm - 2;
		line-height: 40rpx;
		position: relative;
		.seeTips {
			color: #686868;
			background-color: #ececec;
			padding: 0 10rpx;
			border-radius: $radius-sm - 4;
			margin-right: $margin;
		}
		.seeName {
			position: absolute;
			right: 0;
			top: 0;
			display: flex;
			image {
				width: 30rpx;
				height: 30rpx;
				margin: 7rpx 10rpx 0 0;
			}
		}
		.seeTime {
			color: #cfcfcf;
		}
	}
	.brief {
		font-size: $title-size-sm;
		margin: $margin 0;
		background-color: #f5f5f5;
		border-radius: $radius-sm - 4;
		padding: $padding $padding + 10;
		box-sizing: border-box;
		line-height: 42rpx;
		text-align: justify;
		display: flex;
		image {
			width: 34rpx;
			height: 34rpx;
			margin-right: 20rpx;
			margin-top: 8rpx;
		}
	}
	.subject {
		font-size: $title-size-lg;
		line-height: 48rpx;
	}
	.collect {
		position: fixed;
		right: 0;
		bottom: 30rpx;
		z-index: 9;
		width: 100%;
		text-align: center;
		.collect-btn {
			background-color: #f5f5f5;
			border-radius: $radius * 3;
			height: 80rpx;
			display: inline-block;
			text-align: center;
			margin: 0 auto;
			padding: 0 $padding + 10;
			line-height: 80rpx;
			font-size: $title-size-m;
			color: #000000;
			&.active {
				background-color: $mian-color;
				color: #ffffff;
			}
			image {
				width: 36rpx;
				height: 36rpx;
				margin: 0 10rpx 0 0;
				vertical-align: -6rpx;
			}
		}
	}
</style>