<template>
	<view class="detail-container">
		<view class="top-area">
			<view class="picture">
				<up-avatar size="60rpx" :src="detailData.authorUrl" />
			</view>
			<view class="info">
				<view>
					{{ detailData.authorName }}
				</view>
				<view class="time">
					{{ detailData.publishTime }}
				</view>
			</view>
			<view class="look">
				<image src="/static/icon/icon-eye.png"></image>{{ detailData.pageView }}
			</view>
		</view>
		<view class="title">
			{{ detailData.title }}
		</view>
		<view class="content">
			{{ detailData.content }}
		</view>
		<view class="img-area" v-for="(item, index) in detailData?.detailsImageUrl?.split(',')" :key="index">
			<image mode="widthFix" :src="item"></image>
		</view>
		<view class="tags-area">
			<view 
				class="tag-item"
				v-for="(item, index) in detailData?.topic"
				:key="index"
				:style="{
					backgroundColor: item.color
				}"
			>
				{{ item.name }}
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref, reactive } from 'vue';
import { articleDetails } from '@/api/api.js';
import { onLoad } from '@dcloudio/uni-app';

const detailData = ref()

onLoad((options) => {
	getDetail(options.id);
});

const getDetail = async (id) => {
	let _res = await articleDetails({ id });
	detailData.value = _res;
};

</script>

<style scoped lang="scss">
.detail-container {
	padding: 28rpx 30rpx;
	.top-area {
		display: flex;
		font-weight: bold;
		font-size: 24rpx;
		color: #232323;
		.info {
			margin-left: 12rpx;
		}
		.look {
			margin-left: 36rpx;
			padding-top: 32rpx;
			display: flex;
			align-items: center;
			image {
				width: 28rpx;
				height: 28rpx;
				margin-right: 4rpx;
			}
		}
	}
	.title {
		font-weight: bold;
		font-size: 36rpx;
		color: #232323;
		margin-top: 40rpx;
	}
	.content {
		margin-top: 24rpx;
		font-weight: bold;
		font-size: 20rpx;
		color: #232323;
	}
	.img-area {
		margin-top: 24rpx;
		image {
			width: 100%;
		}
	}
	.tags-area {
		display: flex;
		flex-wrap: wrap;
		margin-top: 36rpx;
		.tag-item {
			height: 48rpx;
			line-height: 48rpx;
			background: #6FA256;
			border-radius: 24rpx;
			font-weight: bold;
			font-size: 20rpx;
			color: #000;
			padding: 0 28rpx;
			margin-right: 24rpx;
			margin-bottom: 24rpx;
		}
	}
}
</style>
