<template>
	<view class="album_page">
		<view class="banner">
			<view class="img">
				<image :src="topImg" mode="aspectFill" style="width: 100%;height: 100%;"></image>
				<view class="topText tn-flex tn-ml-xl">
					<view class="icon tn-mt-sm">
						<image :src="config.logo" mode="aspectFill" style="width: 100%;height: 100%;"></image>
					</view>
					<view class="title tn-ml tn-text-3xl tn-text-bold tn-mt">
						{{config.siteName}}
					</view>
				</view>
			</view>
		</view>	
		
		<view class="content">
			<view class="title tn-text-bold tn-text-xl tn-text-center tn-p-sm">
				{{detail.title}}
			</view>
			<view class="info tn-p-xs tn-flex tn-flex-center-around tn-border-bottom tn-grey-light_border">
				<view class="user tn-flex">
					<view>
						<tn-icon name="my-circle"></tn-icon>
					</view>
					<view class="">
						{{detail.user}}
					</view>
				</view>			
				<view class="time tn-flex">
					<view>
						<tn-icon name="time"></tn-icon>
					</view>
					<view class="">
						{{detail.createTime}}
					</view>
				</view>
				<view class="click tn-flex">
					<view>
						<tn-icon name="eye"></tn-icon>
					</view>
					<view>
						{{Number(detail.clickNum) + Number(detail.addNum)}}
					</view>
				</view>
			</view>
			<view class="album tn-mt tn-mb tn-ml-sm">
				<view class="summary tn-pt tn-pb" v-if="detail.summary">
					{{detail.summary}}
				</view>
				<TnPhotoAlbum :data="detail.image" :max="100" :column="2"/>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { onMounted, reactive, ref } from 'vue';
	import request from '@/utils/request';
	import { onLoad } from "@dcloudio/uni-app";
	import TnPhotoAlbum from '@/uni_modules/tuniaoui-vue3/components/photo-album/src/photo-album.vue'
	import config from '@/config/config';
	const topImg = ref('/static/index_top.jpg')
	
	const cateId = ref()
	
	const id = ref()
	
	const detail = reactive<{
		image?:[],
		title?:string,
		user?:string,
		createTime?:string,
		clickNum?:number,
		addNum?:number,
		summary?:string
	}>({})
	
	
	const getDetail = (cateId:number,id:number) => {
		request({
			url: '/front/content/detail?id=' + id,
			method:'GET',
			data:{'id':id}
		}).then(res =>{
			Object.assign(detail,res.data.data) 
			if(res.data.data.image){
				let images = JSON.parse(res.data.data.image)
				detail.image = images
				// topImg.value = images[0]
			}else{
				getMenuData(cateId)
			}
			uni.setNavigationBarTitle({
				title:res.data.data.title
			})
		})
	}
	
	const getMenuData = (cateId:number) => {
		request({
			url: '/front/content/category/info',
			method:'GET',
			data:{'cateId':cateId}
		}).then(res=>{
			topImg.value = res.image
		})
	}
	
	onLoad((options) => {
		cateId.value = options.cateId
		id.value = options.id
	})
	
	onMounted(()=>{
		getDetail(cateId.value,id.value)
	})
	
</script>

<style lang="scss" scoped>
	.album_page{
		background-color: #f3f4f6;
		.banner{
			height: 450rpx;
			position: relative;
			.img{
				width: 100%;
				height: 100%;
				.topText{
					color: #fff;
					position: absolute;
					top: 100rpx;
					left: 0;
					.icon{
						width: 100rpx;
						height: 100rpx;
						border-radius: 50%;
					}
					.title{
						letter-spacing: 4rpx;
						text-shadow: 6rpx 6rpx 8rpx #5c5c5c;
					}
				}
			}
			::after{
				content: "";
				position: absolute;
				width: 100%;
				height: 120rpx;
				top: 330rpx;
				left: 0;
				background:linear-gradient(180deg,rgba(255, 255, 255, 0.01),rgba(255, 255, 255, 0.9))
			}
		}
		.content{
			background-color: #ffffff;
			position: relative;
			top:-130rpx;
		}
	}
</style>