<script setup>
	// 引入依赖
	// import uniDatetimePicker from '@/uni_modules/uni-datetime-picker/components/uni-datetime-picker/uni-datetime-picker.vue' 
	// import uniEasyinput from '@/uni_modules/uni-easyinput/components/uni-easyinput/uni-easyinput.vue' 
	import { onLoad } from "@dcloudio/uni-app"
	// import mySwiper from "@/components/mySwiper.vue"
	import {ref,onMounted,nextTick} from "vue"
	import {useStore} from '@/store/index.js'
	import api from "@/api/index.js"
	import util from "@/utils"
	onLoad((e) => {
		// console.log(e)
		// a_info.value = JSON.parse(decodeURIComponent(e.info))
		if(!e.id) {
			uni.showToast({
				icon:"error",
				title:"错误",
				duration:2000
			})
			// a_info.value = null
			return 
		}
		getDetail(e.id)
	})
	// 变量
	// const content = ref(null)
	const a_info = ref(null)
	// 函数
	async function getDetail(id) {
		const res = await api.getArticleDetail({id})
		if(res.code == 0) {
			a_info.value = res.data
		}
		else{
			uni.showToast({
				title:'获取失败',
				icon:"error",
				duration:2000
			})
		}
	}
	async function starFunc(type) { // 点击收藏
		a_info.value.isStar = type
	}
</script>
<template>
	<view class="detailBox">
		<view class="title">
			{{a_info?.title}}
		</view>
		<view v-if="a_info" class="more-info small-text">{{util.timestampToDate(a_info?.CreatedAt)}}</view>
		<view class="d-content" v-html="a_info?.content"></view>
		<view class="action-box" v-if="a_info">
			<view class="ab-item">
				<uni-icons color="gray" type="eye" size="30"></uni-icons>	
				<view style="color: gray;">{{a_info?.reading_num}}</view>
			</view>
			<view class="ab-item">
				<uni-icons color="#26758d" @tap="starFunc(0)" v-if="a_info?.isStar" type="star-filled" size="30"></uni-icons>
				<uni-icons color="gray" @tap="starFunc(1)" v-else type="star" size="30"></uni-icons>
			</view>
		</view>
	</view>
</template>
<style scoped lang="scss"> 
.action-box{
	margin-top: 20px;
	display: flex;
	justify-content: flex-end;
	.ab-item{
		display: flex;
		align-items: center;
		margin: 0 20rpx;
	}
}
.detailBox{
	.more-info{
		text-align: right;
		margin-bottom: 10rpx;
	}
	.title{
		font-size: 32rpx;
		font-weight: 900;
		margin-bottom: 20rpx;
		text-align: center;
	}
	padding: 40rpx;
	.d-content{
		line-height: 50rpx;
	}
}
</style>